summaryrefslogtreecommitdiff
path: root/webui
diff options
context:
space:
mode:
authorSaumit Dinesan <justsaumit@protonmail.com>2023-04-28 14:47:14 +0530
committerSaumit Dinesan <justsaumit@protonmail.com>2023-04-28 14:47:14 +0530
commitfeeeb16c758a6571f1d191869704298270f42565 (patch)
tree8442f7dad0bde1cab50b0bc1650f44ee9d4f3687 /webui
parent4d6e51a8811d815e0ec49edf8e5db3e98e09b855 (diff)
Adding WebUI files
Diffstat (limited to 'webui')
-rw-r--r--webui/404.html3
-rw-r--r--webui/favicon-32x32.pngbin0 -> 816 bytes
-rw-r--r--webui/favicon.icobin0 -> 1150 bytes
-rw-r--r--webui/index.html117
-rw-r--r--webui/js/main.js98
-rw-r--r--webui/robots.txt4
-rw-r--r--webui/style.css7
7 files changed, 229 insertions, 0 deletions
diff --git a/webui/404.html b/webui/404.html
new file mode 100644
index 0000000..f8414f0
--- /dev/null
+++ b/webui/404.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>404 Not Found</title>
+<h1>404 Not Found</h1>
diff --git a/webui/favicon-32x32.png b/webui/favicon-32x32.png
new file mode 100644
index 0000000..b56e05f
--- /dev/null
+++ b/webui/favicon-32x32.png
Binary files differ
diff --git a/webui/favicon.ico b/webui/favicon.ico
new file mode 100644
index 0000000..ab8f313
--- /dev/null
+++ b/webui/favicon.ico
Binary files differ
diff --git a/webui/index.html b/webui/index.html
new file mode 100644
index 0000000..95090e5
--- /dev/null
+++ b/webui/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en-us">
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <meta itemprop="name" content="Raspberry Pi Face Recognition" />
+ <meta itemprop="description" content="My blog" />
+
+ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="/favicon-16x16.png"
+ />
+ <link
+ rel="shortcut icon"
+ href="/favicon.ico"
+ />
+ <link rel="stylesheet" href="/style.css"/>
+
+ <title>Raspberry Pi Face Recognition</title>
+
+
+
+ <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
+
+
+ <body id="page">
+
+
+
+
+
+ <div id="spotlight" class="animated fadeIn">
+ <div id="home-center">
+ <h1 id="home-title">Raspberry Pi Face Recognition</h1>
+ <p id="home-subtitle">This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.</p>
+
+
+ <nav id="home-nav" class="site-nav">
+
+ <a href="/live">Live-feed</a>
+
+ <a href="/login">Login</a>
+
+ </nav>
+
+ </div>
+
+ <div id="home-social">
+
+
+<a href="https:&#x2F;&#x2F;github.com/justsaumit/opencv-face-recognition" target="_blank" rel="noopener me"
+ title="github">
+
+ <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+
+</a>
+
+ </div>
+
+ <div id="home-footer">
+ <p>&copy; 2023
+ <a href="https:&#x2F;&#x2F;draconyan.xyz&#x2F">The Author</a>
+
+ &#183; <a href="/rss.xml" target="_blank" title="rss">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+
+ </a>
+ </p>
+ </div>
+
+ </div>
+
+ <script src="/js/main.js"></script>
+
+ <!-- Math rendering -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
+ <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
+ <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
+ onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
+
+
+ <link href="https://unpkg.com/highlightjs-badge/highlightjs/styles/railscasts.css" rel="stylesheet">
+ <!-- https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/styles/ for min version -->
+ <script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script>
+ <script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script>
+ <script>
+ var pres = document.querySelectorAll("pre>code");
+ for (var i = 0; i < pres.length; i++) {
+ hljs.highlightBlock(pres[i]);
+ }
+ </script>
+
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
+ <script>
+ var options = {
+ copyIconClass: "gg-clipboard",
+ checkIconClass: "gg-check"
+ };
+ window.highlightJsBadge(options);
+ </script>
+
+
+
+
+
+ <script src="/js/main.js"></script>
+
+
+
+
+
+ </body>
+</html>
diff --git a/webui/js/main.js b/webui/js/main.js
new file mode 100644
index 0000000..a40c504
--- /dev/null
+++ b/webui/js/main.js
@@ -0,0 +1,98 @@
+/**
+ * Utils
+ */
+
+// Throttle
+//
+const throttle = (callback, limit) => {
+ let timeoutHandler = null;
+ return () => {
+ if (timeoutHandler == null) {
+ timeoutHandler = setTimeout(() => {
+ callback();
+ timeoutHandler = null;
+ }, limit);
+ }
+ };
+};
+
+// addEventListener Helper
+//
+const listen = (ele, e, callback) => {
+ if (document.querySelector(ele) !== null) {
+ document.querySelector(ele).addEventListener(e, callback);
+ }
+};
+
+/**
+ * Functions
+ */
+
+// Auto Hide Header
+//
+let header = document.getElementById('site-header');
+let lastScrollPosition = window.pageYOffset;
+
+const autoHideHeader = () => {
+ let currentScrollPosition = window.pageYOffset;
+ if (currentScrollPosition > lastScrollPosition) {
+ header.classList.remove('slideInUp');
+ header.classList.add('slideOutDown');
+ } else {
+ header.classList.remove('slideOutDown');
+ header.classList.add('slideInUp');
+ }
+ lastScrollPosition = currentScrollPosition;
+};
+
+// Mobile Menu Toggle
+//
+let mobileMenuVisible = false;
+
+const toggleMobileMenu = () => {
+ let mobileMenu = document.getElementById('mobile-menu');
+ if (mobileMenuVisible == false) {
+ mobileMenu.style.animationName = 'bounceInRight';
+ mobileMenu.style.webkitAnimationName = 'bounceInRight';
+ mobileMenu.style.display = 'block';
+ mobileMenuVisible = true;
+ } else {
+ mobileMenu.style.animationName = 'bounceOutRight';
+ mobileMenu.style.webkitAnimationName = 'bounceOutRight';
+ mobileMenuVisible = false;
+ }
+};
+
+// Featured Image Toggle
+//
+const showImg = () => {
+ document.querySelector('.bg-img').classList.add('show-bg-img');
+};
+
+const hideImg = () => {
+ document.querySelector('.bg-img').classList.remove('show-bg-img');
+};
+
+// ToC Toggle
+//
+const toggleToc = () => {
+ document.getElementById('toc').classList.toggle('show-toc');
+};
+
+if (header !== null) {
+ listen('#menu-btn', 'click', toggleMobileMenu);
+ listen('#toc-btn', 'click', toggleToc);
+ listen('#img-btn', 'click', showImg);
+ listen('.bg-img', 'click', hideImg);
+
+ window.addEventListener(
+ 'scroll',
+ throttle(() => {
+ autoHideHeader();
+
+ if (mobileMenuVisible == true) {
+ toggleMobileMenu();
+ }
+ }, 250)
+ );
+}
diff --git a/webui/robots.txt b/webui/robots.txt
new file mode 100644
index 0000000..bc16c28
--- /dev/null
+++ b/webui/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Disallow:
+Allow: /
+Sitemap: https://example.com/blog/sitemap.xml
diff --git a/webui/style.css b/webui/style.css
new file mode 100644
index 0000000..1fa7d1b
--- /dev/null
+++ b/webui/style.css
@@ -0,0 +1,7 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.chroma{color:#eee;background-color:#31333d}.chroma .err{color:#960050;background-color:#1e0010}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffc}.chroma .lnt{margin-right:.4em;padding:0 .4em 0 .4em}.chroma .ln{margin-right:.4em;padding:0 .4em 0 .4em}.chroma .k{color:#66d9ef}.chroma .kc{color:#66d9ef}.chroma .kd{color:#66d9ef}.chroma .kn{color:#f92672}.chroma .kp{color:#66d9ef}.chroma .kr{color:#66d9ef}.chroma .kt{color:#66d9ef}.chroma .na{color:#a6e22e}.chroma .nc{color:#a6e22e}.chroma .no{color:#66d9ef}.chroma .nd{color:#a6e22e}.chroma .ne{color:#a6e22e}.chroma .nf{color:#a6e22e}.chroma .nx{color:#a6e22e}.chroma .nt{color:#f92672}.chroma .l{color:#ae81ff}.chroma .ld{color:#e6db74}.chroma .s{color:#e6db74}.chroma .sa{color:#e6db74}.chroma .sb{color:#e6db74}.chroma .sc{color:#e6db74}.chroma .dl{color:#e6db74}.chroma .sd{color:#e6db74}.chroma .s2{color:#e6db74}.chroma .se{color:#ae81ff}.chroma .sh{color:#e6db74}.chroma .si{color:#e6db74}.chroma .sx{color:#e6db74}.chroma .sr{color:#e6db74}.chroma .s1{color:#e6db74}.chroma .ss{color:#e6db74}.chroma .m{color:#ae81ff}.chroma .mb{color:#ae81ff}.chroma .mf{color:#ae81ff}.chroma .mh{color:#ae81ff}.chroma .mi{color:#ae81ff}.chroma .il{color:#ae81ff}.chroma .mo{color:#ae81ff}.chroma .o{color:#f92672}.chroma .ow{color:#f92672}.chroma .c{color:#75715e}.chroma .ch{color:#75715e}.chroma .cm{color:#75715e}.chroma .c1{color:#75715e}.chroma .cs{color:#75715e}.chroma .cp{color:#75715e}.chroma .cpf{color:#75715e}.chroma .gd{color:#f92672}.chroma .ge{font-style:italic}.chroma .gi{color:#a6e22e}.chroma .gs{font-weight:bold}.chroma .gu{color:#75715e}/*!
+ * animate.css -https://daneden.github.io/animate.css/
+ * Version - 3.7.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ */@-webkit-keyframes bounceInRight{0%, 60%, 75%, 90%, to{-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);animation-timing-function:cubic-bezier(.215, .61, .355, 1)}0%{opacity:0;-webkit-transform:translate3d(3000px, 0, 0);transform:translate3d(3000px, 0, 0)}60%{opacity:1;-webkit-transform:translate3d(-25px, 0, 0);transform:translate3d(-25px, 0, 0)}75%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}90%{-webkit-transform:translate3d(-5px, 0, 0);transform:translate3d(-5px, 0, 0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%, 60%, 75%, 90%, to{-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);animation-timing-function:cubic-bezier(.215, .61, .355, 1)}0%{opacity:0;-webkit-transform:translate3d(3000px, 0, 0);transform:translate3d(3000px, 0, 0)}60%{opacity:1;-webkit-transform:translate3d(-25px, 0, 0);transform:translate3d(-25px, 0, 0)}75%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}90%{-webkit-transform:translate3d(-5px, 0, 0);transform:translate3d(-5px, 0, 0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0)}to{opacity:0;-webkit-transform:translate3d(2000px, 0, 0);transform:translate3d(2000px, 0, 0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0)}to{opacity:0;-webkit-transform:translate3d(2000px, 0, 0);transform:translate3d(2000px, 0, 0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion){.animated{-webkit-animation:unset !important;animation:unset !important;-webkit-transition:none !important;transition:none !important}}.gg-check{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs, 1));width:22px;height:22px;border:2px solid rgba(0,0,0,0);border-radius:100px}.gg-check::after{content:"";display:block;box-sizing:border-box;position:absolute;left:3px;top:-1px;width:6px;height:10px;border-width:0 2px 2px 0;border-style:solid;transform-origin:bottom left;transform:rotate(45deg)}.gg-clipboard{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs, 1));width:18px;height:18px;border:2px solid;border-radius:2px}.gg-clipboard::after,.gg-clipboard::before{content:"";display:block;box-sizing:border-box;position:absolute;border-radius:2px;width:10px;left:2px}.gg-clipboard::before{border:2px solid;border-bottom-left-radius:3px;border-bottom-right-radius:3px;top:-2px;height:6px}.gg-clipboard::after{height:2px;background:currentColor;box-shadow:0 -4px 0 0;bottom:2px}::-webkit-scrollbar{width:8px;height:8px;background:#31333d}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#c6cddb}html{background:#494f5c;line-height:1.6;letter-spacing:.06em}body,button,input,select,textarea{color:#c6cddb;font-family:"Trebuchet MS",Verdana,"Verdana Ref","Segoe UI",Candara,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif}pre,code,pre tt{font-family:Consolas,"Andale Mono WT","Andale Mono",Menlo,Monaco,"Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L","Courier New",Courier,"YaHei Consolas Hybrid",monospace,"Segoe UI Emoji","PingFang SC","Microsoft YaHei"}pre{max-height:40em;padding:.7em 1.1em;overflow:auto;font-size:.9em;line-height:1.5;letter-spacing:normal;white-space:pre-wrap;word-wrap:break-word;color:#eee;border-radius:4px}pre code{padding:0;margin:0;background:#31333d}code{color:#eee;background:#7d828a;border-radius:3px;padding:0 3px;margin:0 4px;word-break:break-all;letter-spacing:normal}blockquote{border-left:.25em solid;margin:1em;padding:0 1em;font-style:italic}blockquote cite{font-weight:bold;font-style:normal}blockquote cite::before{content:"—— "}a{color:#c6cddb;text-decoration:none;border:none;transition-property:color;transition-duration:.4s;transition-timing-function:ease-out}a:hover{color:#fff}a:focus{outline:none}hr{opacity:.2;border-width:0 0 5px 0;border-style:dashed;background:rgba(0,0,0,0);width:50%;margin:1.8em auto}table{border-collapse:collapse;border-spacing:0;empty-cells:show;width:100%;max-width:100%}table th,table td{padding:1.5%;border:1px solid}table th{font-weight:700;vertical-align:bottom}.section-inner{margin:0 auto;max-width:1200px;width:93%}.thin{max-width:720px;margin:auto}.feather{display:inline-block;vertical-align:-.125em;width:1em;height:1em}.desktop-only,.desktop-only-ib{display:none}.screen-reader-text{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto !important;clip-path:none;color:#21759b;display:block;font-size:14px;font-size:.875rem;font-weight:bold;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#site-header{position:fixed;z-index:1;bottom:0;width:100%;box-sizing:border-box;box-shadow:-1px -2px 3px rgba(0,0,0,.45);background-color:#3b3e48}.hdr-wrapper{display:flex;justify-content:space-between;align-items:center;padding:.5em 0;font-size:1.2rem}.hdr-wrapper .site-branding{display:inline-block;margin-right:.8em;font-size:1.2em}.hdr-wrapper .site-nav{display:inline-block;font-size:1.1em;opacity:.8}.hdr-wrapper .site-nav a{margin-left:.8em}.hdr-icons{font-size:1.2em}.hdr-social{display:inline-block;margin-left:.6em}.hdr-social>a{margin-left:.4em}.hdr-btn{border:none;background:none;padding:0;margin-left:.4em;cursor:pointer}#menu-btn{display:none;margin-left:.6em;cursor:pointer}#mobile-menu{position:fixed;bottom:4.8em;right:1.5em;display:none;padding:.6em 1.8em;z-index:1;box-sizing:border-box;box-shadow:-1px -2px 3px 0px rgba(0,0,0,.45);background-color:#3b3e48}#mobile-menu ul{list-style:none;margin:0;padding:0;line-height:2;font-size:1.2em}#site-footer{text-align:center;font-size:.9em;margin-bottom:96px;margin-top:64px}#site-footer p{margin:0}#spotlight{display:flex;height:100vh;flex-direction:column;align-items:center;justify-content:center;max-width:93%;margin:auto;font-size:1.5rem}#spotlight.error-404{flex-direction:row;line-height:normal}p.img-404{margin:0}p.img-404 svg{width:180px;max-width:100%;height:auto}.banner-404{margin-left:2em}.banner-404 h1{font-size:3em;margin:.5rem 0}.banner-404 p{margin-top:0;margin-bottom:.6em}.banner-404 .btn-404{font-size:.8em}.banner-404 .btn-404 a{display:inline-block;border:2px solid #c6cddb;border-radius:5px;padding:5px;transition-property:color,border-color;word-break:break-all}.banner-404 .btn-404 a:first-child{margin-right:1em}.banner-404 .btn-404 a:hover{border-color:#fff}.banner-404 .btn-404 a svg{margin-right:.5em}#home-center{display:flex;flex-grow:1;flex-direction:column;justify-content:center}#home-title{margin:0;text-align:center}#home-subtitle{margin-top:0;margin-bottom:1.5em;text-align:center;line-height:normal;font-size:.7em;font-style:italic;opacity:.9}#home-social{font-size:1.4em;text-align:center;opacity:.8}#home-social a{margin:0 .2em}#home-nav{opacity:.8}#home-nav a{display:block;text-align:center;margin-top:.5em}#home-footer{text-align:center;font-size:.6em;line-height:normal;opacity:.6}#home-footer p{margin-top:0}.posts-group{display:flex;margin-bottom:1.9em;line-height:normal}.posts-group .post-year{padding-top:6px;margin-right:1.8em;font-size:1.6em;opacity:.6}.posts-group .posts-list{flex-grow:1;margin:0;padding:0;list-style:none}.posts-group .post-item{border-bottom:1px #7d828a dashed}.posts-group .post-item a{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0}.posts-group .post-day{flex-shrink:0;margin-left:1em;opacity:.6}.bg-img{width:100vw;height:100vh;opacity:.03;z-index:-1;position:fixed;top:0;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;background-position:center;transition:opacity .5s}.show-bg-img{z-index:100;opacity:1;cursor:pointer}.post-header{margin-top:1.2em;line-height:normal}.post-header .post-meta{font-size:.9em;letter-spacing:normal;opacity:.6}.post-header h1{margin-top:.1em}hr.post-end{width:50%;margin-top:1.6em;margin-bottom:.8em;margin-left:0;border-style:solid;border-bottom-width:4px}.content{text-align:justify;text-justify:inter-ideograph}.content a{word-break:break-all;border:none;box-shadow:inset 0 -4px 0 #018574;transition-property:background-color}.content a:hover{background-color:#018574}.content figure{max-width:100%;height:auto;margin:0;text-align:center}.content figure p{font-size:.8em;font-style:italic;opacity:.6}.content figure.left{float:left;margin-right:1.5em;max-width:50%}.content figure.right{float:right;margin-left:1.5em;max-width:50%}.content figure.big{max-width:100vw}.content img{display:block;max-width:100%;height:auto;margin:auto;border-radius:4px}.content ul,.content ol{padding:0;margin-left:1.8em}.footnote-definition{font-size:.85em}.footnote-definition a{box-shadow:none;text-decoration:underline;transition-property:color}.footnote-definition a:hover{background:rgba(0,0,0,0)}.footnote-definition a.footnote-return{text-decoration:none}.footnote-definition ol{line-height:1.8}.footnote-definition p{display:inline}.footnote-ref a{box-shadow:none;text-decoration:none;padding:2px;border-radius:2px;background-color:#31333d}.post-info{font-size:.8rem;line-height:normal;opacity:.6}.post-info p{margin:.8em 0}.post-info a:hover{border-bottom:1px solid #018574}.post-info svg{margin-right:.8em}.post-info .tag{margin-right:.5em}.post-info .tag::before{content:"#"}#toc{position:fixed;left:50%;top:0;display:none}.toc-title{margin-left:1em;margin-bottom:.5em;font-size:.8em;font-weight:bold}#TableOfContents{font-size:.8em;opacity:.6}#TableOfContents ul{padding-left:1em;margin:0}#TableOfContents>ul{list-style-type:none}#TableOfContents>ul ul ul{font-size:.9em}#TableOfContents a:hover{border-bottom:#018574 1px solid}.post-nav{display:flex;justify-content:space-between;margin-top:1.5em;margin-bottom:2.5em;font-size:1.2em}.post-nav a{flex-basis:50%;flex-grow:1}.post-nav .next-post{text-align:left;padding-right:5px}.post-nav .prev-post{text-align:right;padding-left:5px}.post-nav .post-nav-label{font-size:.8em;opacity:.8;text-transform:uppercase}@media (min-width: 800px){.site-main{margin-top:3em}hr.post-end{width:40%}}@media (min-width: 960px){.site-main{margin-top:6em}}@media (min-width: 1300px){.site-main{margin-top:8em}.desktop-only,#toc.show-toc{display:block}.desktop-only-ib{display:inline-block}figure.left{margin-left:-240px}figure.left p{text-align:left}figure.right{margin-right:-240px}figure.right p{text-align:right}figure.big{width:1200px;margin-left:-240px}hr.post-end{width:30%}#toc{top:13em;margin-left:370px;max-width:220px}}@media (min-width: 1800px){.site-main{margin-top:10em}.section-inner{max-width:1600px}.thin{max-width:960px}figure.left{max-width:75%;margin-left:-320px}figure.right{max-width:75%;margin-right:-320px}figure.big{width:1600px;margin-left:-320px}hr.post-end{width:30%}#toc{top:15em;margin-left:490px;max-width:300px}}@media (max-width: 760px){.hide-in-mobile,.site-nav.hide-in-mobile{display:none}#menu-btn{display:inline-block}.posts-group{display:block}.posts-group .post-year{margin:-6px 0 4px}#spotlight.error-404{flex-direction:column;text-align:center}#spotlight.error-404 .banner-404{margin:0}}@media (max-width: 520px){.content figure.left,.content figure.right{float:unset;max-width:100%;margin:0}hr.post-end{width:60%}#mobile-menu{right:1.2em}}.code-badge{margin:.4em 0em}.highlight-copy-btn{margin-right:7px;float:right;border:0;border-radius:4px;padding:1px;font-size:.7em;line-height:1.8;color:#fff;background-color:#777;opacity:.6;min-width:55px;text-align:center} \ No newline at end of file