website/_layouts/post-sensor-watch.html

214 lines
12 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<!--
  l、
゙(゚、 。
 l、゙ ~ヽ
 じしf_, )
-->
<html lang="{{ site.lang | default: " en-US" }}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>{{ page.title }} - {{ site.title }}</title>
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
<style>
body {
padding: 0;
margin: 0;
min-height: 100vh;
}
.wrapper {
display: grid;
grid-template-columns: 30rem auto;
grid-template-rows: auto;
gap: 0;
min-height: 100vh;
}
.article {
padding: 5rem;
padding-bottom: 1rem;
}
.side {
background-image: url(/assets/images/sensor-watch/f91w-strap.svg);
background-repeat: repeat-y;
}
.side>svg {
width: 30rem;
position: fixed;
}
@media only screen and (max-width: 1200px) {
.wrapper {
grid-template-columns: 10rem auto;
grid-template-rows: auto;
}
.side>svg {
width: 10rem;
}
.article {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
font-size: 1rem;
}
}
@media only screen and (max-width: 600px) {
.side {
display: none;
}
.wrapper {
grid-template-columns: auto;
grid-template-rows: auto;
}
.article {
padding: 10px;
font-size: 0.8rem;
}
}
</style>
</head>
<body>
<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.url }}">{{ page.title }}</a></h1>
{{ content }}
<hr>
<p><a href="mailto:jackbondpreston@outlook.com">email me</a> to have a conversation</p>
</div>
</div>
</body>