{% extends "base.html" %}

{% block title %}
{{ page.title }}
{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/style/article.css">
<link rel="stylesheet" href="/style/sensor-watch.css">
{% endblock %}

{% block content %}
<div class="wrapper">
    <div class="side">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 500">
            <defs>
                <style>
                    .cls-1 {
                        fill: #0c1113;
                    }

                    .cls-2 {
                        fill: none;
                        stroke: #f6b4c1;
                        stroke-miterlimit: 10;
                        stroke-width: 2px;
                    }

                    .cls-3 {
                        fill: #f6b4c1;
                    }
                </style>
            </defs>
            <g id="Layer_5" data-name="Layer 5">
                <rect class="cls-1" width="300" height="500" />
            </g>
            <g id="Layer_1" data-name="Layer 1">
                <path class="cls-2"
                    d="M150,335.07c-21-.18-53.88.56-76.78-1-1.15.37-6.4-1.85-7.11-3.33-11.43-13.68-14.6-19.62-14.67-31.33-1-13-1.27-26.4-2-49.34" />
                <path class="cls-2"
                    d="M150,329.83c-20.3-.19-49.15.57-71.32-1-1.12.37-7.19-1.87-7.89-3.38-11.06-13.86-13.12-19.87-13.19-31.74-.92-13.2-1-20.39-1.73-43.63" />
                <path class="cls-2"
                    d="M150,352.07S59.42,351,58.31,350.52s-20.67-32.89-21.11-34-2.89-66.45-2.89-66.45" />
                <path class="cls-2"
                    d="M150,364.3s-93.23-1-94.34-1.42S28.31,318.3,27.86,317.19s-2.65-67.12-2.65-67.12" />
                <polyline class="cls-2" points="27.68 315.07 20.48 310.24 17.14 264.91 25.21 257.91" />
                <path class="cls-2"
                    d="M150,335.07c21-.18,53.87.56,76.78-1,1.15.37,6.39-1.85,7.11-3.33,11.43-13.68,14.6-19.62,14.67-31.33.94-13,1.26-26.4,2-49.34" />
                <path class="cls-2"
                    d="M150,329.83c20.29-.19,49.15.57,71.32-1,1.11.37,7.19-1.87,7.88-3.38,11.06-13.86,13.13-19.87,13.2-31.74.91-13.2,1-20.39,1.73-43.63" />
                <path class="cls-2"
                    d="M150,352.07s90.56-1.11,91.67-1.55,20.66-32.89,21.11-34,2.89-66.45,2.89-66.45" />
                <path class="cls-2"
                    d="M150,364.3s93.22-1,94.33-1.42,27.34-44.58,27.78-45.69,2.65-67.12,2.65-67.12" />
                <polyline class="cls-2" points="272.29 315.07 279.5 310.24 282.83 264.91 274.76 257.91" />
                <path class="cls-2"
                    d="M150,165c-21,.19-53.88-.56-76.78,1-1.15-.36-6.4,1.85-7.11,3.33C54.66,183,51.49,189,51.42,200.67c-1,13-1.27,26.39-2,49.33" />
                <path class="cls-2"
                    d="M150,170.24c-20.3.19-49.15-.56-71.32,1-1.12-.36-7.19,1.88-7.89,3.38-11.06,13.86-13.12,19.88-13.19,31.74-.92,13.21-1,20.39-1.73,43.63" />
                <path class="cls-2" d="M150,148s-90.56,1.11-91.67,1.56-20.67,32.88-21.11,34S34.31,250,34.31,250" />
                <path class="cls-2"
                    d="M150,135.78s-93.23,1-94.34,1.41-27.33,44.59-27.78,45.7S25.21,250,25.21,250" />
                <polyline class="cls-2" points="27.68 185 20.48 189.83 17.14 235.17 25.21 242.17" />
                <path class="cls-2"
                    d="M150,165c21,.19,53.87-.56,76.78,1,1.15-.36,6.39,1.85,7.11,3.33,11.43,13.69,14.6,19.62,14.67,31.34.94,13,1.26,26.39,2,49.33" />
                <path class="cls-2"
                    d="M150,170.24c20.29.19,49.15-.56,71.32,1,1.11-.36,7.19,1.88,7.88,3.38,11.06,13.86,13.13,19.88,13.2,31.74.91,13.21,1,20.39,1.73,43.63" />
                <path class="cls-2" d="M150,148s90.56,1.11,91.67,1.56,20.66,32.88,21.11,34S265.67,250,265.67,250" />
                <path class="cls-2"
                    d="M150,135.78s93.22,1,94.33,1.41,27.34,44.59,27.78,45.7S274.76,250,274.76,250" />
                <polyline class="cls-2" points="272.29 185 279.5 189.83 282.83 235.17 274.76 242.17" />
            </g>
            <g id="Layer_3" data-name="Layer 3">
                <path class="cls-2"
                    d="M224.67,250c-.35,3.5,1,31.12-1.07,33.66-1.35,4.06-5.75,5.94-9.78,5.9H86.51c-4,0-8.43-1.84-9.77-5.9-2-2.3-.74-30.41-1.07-33.66.35-3.58-.92-20.74,1.07-23.77,1.34-4.06,5.75-5.95,9.77-5.9H213.82c4,0,8.43,1.84,9.78,5.9C225.57,229.27,224.35,246.4,224.67,250Z"
                    id="screen" />
                <path class="cls-2"
                    d="M229.33,247.11c-.36,4.09,1,36.37-1.13,39.33-1.43,4.75-6.09,6.95-10.35,6.89H83c-4.26.06-8.92-2.14-10.35-6.89-2.13-2.69-.78-35.53-1.13-39.33.37-4.19-1-24.23,1.13-27.77,1.43-4.75,6.09-7,10.35-6.89H217.85c4.26-.06,8.92,2.14,10.35,6.89C230.28,222.89,229,242.91,229.33,247.11Z" />
                <g id="CASIO">
                    <path class="cls-2"
                        d="M97.31,181.28a3.36,3.36,0,0,0-.2-1.34,1.91,1.91,0,0,0-.44-.63,3.49,3.49,0,0,0-1.28-.31c-.36-.06-1.72-.14-2.14-.14a20.79,20.79,0,0,0-3.11.17c-.14.14-.72.28-.89.5a2.43,2.43,0,0,0-.47,1.16v1.78c0,.47-.06,1.84,0,2a2.64,2.64,0,0,0,.53,1.06,3,3,0,0,0,1.22.44,23.26,23.26,0,0,0,2.8.09,23.2,23.2,0,0,0,2.42,0,1.9,1.9,0,0,0,1.06-.41,1.32,1.32,0,0,0,.5-1.05,4.25,4.25,0,0,1,0-.78" />
                    <path class="cls-2"
                        d="M100,186.71c0-1.13,3.1-5.88,3.69-7.25a1.45,1.45,0,0,1,.23-.47c.17-.16.35-.14.93-.13s.64,0,.73.16c.75,1.48,2.61,5.22,3,5.9a4.31,4.31,0,0,1,.79,1.79" />
                    <line class="cls-2" x1="101.07" y1="184.13" x2="108.15" y2="184.13" />
                    <path class="cls-2"
                        d="M120,180.36c.15-2.21-2.17-1.64-4.08-1.67-1,0-2.47,0-2.75.36-1.37,1-1.23,3.06.74,3.41,1.57.31,4.21-.33,5.5.07,1.56.79,1.58,3.44-.5,3.55-1.56-.08-6.23.93-6.63-1.5" />
                    <path class="cls-2" d="M123.92,177.83s.14,6.61,0,9.13" />
                    <path class="cls-2"
                        d="M128.06,182.59a6.3,6.3,0,0,0,.11,2.08c.25.5.86,1.35,1.52,1.4s3.31,0,3.31,0a25.08,25.08,0,0,0,2.61,0c.28-.1.92-.1,1.06-.68s.3-.66.27-1.26-.08-2.19-.08-2.19a13.37,13.37,0,0,0,0-1.92,1.37,1.37,0,0,0-.59-.92,14.78,14.78,0,0,0-1.53-.39H132a12.52,12.52,0,0,0-2.3,0c-.28.14-.95.19-1.17.5a2.33,2.33,0,0,0-.41,1.19C128.11,180.79,128.06,182.59,128.06,182.59Z" />
                </g>
                <g id="F-91W">
                    <path class="cls-2"
                        d="M167.94,186.22a18.32,18.32,0,0,1,.64-2.94s.56-2.79.64-2.95a45.6,45.6,0,0,1,5.34,0" />
                    <path class="cls-2" d="M173.06,183.28c-.92-.11-4.48,0-4.48,0" />
                    <path class="cls-2" d="M176.69,183.85c2,.15,3-.31,5.25,0" />
                    <path class="cls-2"
                        d="M186.39,184.94c.84,1.58,3.78.91,4.83,0,1.69-2.54,1.8-4.89-2-4.55-6.28,1.92,2.2,5.1,3.06,1.13" />
                    <path class="cls-2"
                        d="M197.39,186.83c.09-1.6.57-2.3.92-4.25a13.46,13.46,0,0,0,.63-2.83c.09,2.21-2,2-3.58,1.92" />
                    <path class="cls-2"
                        d="M204.08,179.75s0,3.52.06,4,.12,1.9.12,1.9h1.16s1.52-2.69,1.86-3.44a4.41,4.41,0,0,1,.52-1l.32-.59,1.25,0s0,.21,0,.93-.09,3.95-.09,3.95h1.35l.41-.68c.27-.46,2.39-3.53,2.39-5.11" />
                </g>
                <path class="cls-2" d="M18.29,211.06H10.53s-1.46-.81-1.46,8.11c0,8.42,2.17,7.78,2.17,7.78h6.34"
                    onmouseover="document.getElementById('screen').style.fill='blue';"
                    onmouseleave="document.getElementById('screen').style.fill='none';" />
                <path class="cls-2" d="M18.29,288.94H10.53s-1.46.81-1.46-8.11c0-8.42,2.17-7.78,2.17-7.78h6.34" />
                <path class="cls-2" d="M281.71,288.94h7.76s1.46.81,1.46-8.11c0-8.42-2.17-7.78-2.17-7.78h-6.34" />
            </g>
            <g id="Layer_4" data-name="Layer 4">
                <path class="cls-2"
                    d="M150,306.44H125.88c-1.36,0-2,.2-2.44.84-.28.44-.28.44-.56,1.94a24.24,24.24,0,0,0,0,6.59,9.45,9.45,0,0,0,2.39,4.66c1.22,1,3.81,3.56,5.47,3.61s19.25,0,19.25,0" />
                <polygon class="cls-3"
                    points="63.43 307.26 118.99 307.26 118.99 309.26 63.91 309.26 63.43 307.26" />
                <polyline class="cls-2" points="149.99 110.44 63.43 110.44 55.66 137.19" />
                <polygon class="cls-3"
                    points="62.63 195.75 149.99 195.75 149.99 193.75 63.11 193.75 62.63 195.75" />
                <line class="cls-2" x1="65.99" y1="110.44" x2="65.99" />
                <line class="cls-2" x1="65.99" y1="389.42" x2="65.99" y2="500" />
                <polyline class="cls-2" points="149.99 389.42 63.43 389.42 55.66 362.67" />
                <path class="cls-2"
                    d="M150,306.44h24.11c1.36,0,2,.2,2.45.84.27.44.27.44.55,1.94a24.24,24.24,0,0,1,0,6.59,9.45,9.45,0,0,1-2.39,4.66c-1.22,1-3.8,3.56-5.47,3.61s-19.25,0-19.25,0" />
                <polygon class="cls-3" points="236.56 307.26 181 307.26 181 309.26 236.08 309.26 236.56 307.26" />
                <polyline class="cls-2" points="150 110.44 236.56 110.44 244.33 137.19" />
                <polygon class="cls-3" points="237.36 195.75 150 195.75 150 193.75 236.89 193.75 237.36 195.75" />
                <line class="cls-2" x1="234" y1="110.44" x2="234" />
                <line class="cls-2" x1="234" y1="389.42" x2="234" y2="500" />
                <polyline class="cls-2" points="150 389.42 236.56 389.42 244.33 362.67" />
            </g>
        </svg>
    </div>
    <div class="article">
        <h1><a href="{{ page.permalink }}">{{ page.title }}</a></a><span class="home-link">[ <a href="/">homepage</a> ]</span></h1>

        {{ page.content | safe }}

        <hr>

        <p><a href="mailto:jack@jackbondpreston.me">email me</a> to have a conversation</p>
    </div>
</div>
{% endblock %}