90 lines
4.9 KiB
HTML
90 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="/tailwind/output.css" rel="stylesheet">
|
|
|
|
<link href="/styles/global.css" rel="stylesheet" />
|
|
<link href="/styles/xcode-colors.css" rel="stylesheet" />
|
|
<title>Misti</title>
|
|
|
|
<!-- Google fonts - Inter -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="grid" style="grid-template-columns: 12rem 12rem calc(100vw - 24rem);">
|
|
<div class="text-sm p-4 h-screen py-8 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
|
|
<a
|
|
href="/"
|
|
class="inline-block border border-transparent
|
|
hover:border-c2-primary hover:text-c2-primary transition-colors rounded-md"
|
|
>
|
|
<svg style="width: 100%" viewBox="0 0 10240 10240">
|
|
<g id="l4bTekyh7yd5nSqF0diaM2" fill="var(--c2-primary)" style="transform: none;">
|
|
<g style="transform: none;">
|
|
<path id="pEcfct8KT" d="M10103 9031 c-296 -154 -525 -301 -823 -526 -522 -397 -1153 -1070 -1467 -1565 -232 -367 -424 -755 -643 -1300 -193 -481 -298 -764 -440 -1182 l-98 -287 -147 302 c-143 293 -302 581 -548 992 -66 110 -156 272 -200 360 -44 88 -101 192 -127 230 -26 39 -57 90 -69 113 -55 109 -182 189 -314 199 -100 8 -171 -14 -272 -82 -83 -57 -118 -90 -225 -215 -35 -41 -85 -97 -111 -125 -139 -149 -331 -451 -594 -940 -21 -38 -55 -99 -75 -135 -21 -36 -55 -103 -77 -150 -22 -47 -51 -110 -65 -140 l-26 -55 -38 85 c-20 47 -84 177 -142 290 -57 113 -132 268 -167 346 -35 77 -169 352 -298 610 -364 727 -529 1000 -781 1289 -169 194 -438 463 -544 545 -117 90 -121 92 -217 157 -225 150 -441 285 -595 370 -408 227 -532 286 -775 373 -104 38 -198 71 -208 75 -16 7 -17 -15 -15 -411 l3 -418 48 -18 c61 -23 227 -103 337 -163 47 -26 119 -65 160 -87 128 -69 209 -117 395 -236 304 -195 395 -264 560 -429 284 -282 429 -469 612 -788 92 -160 509 -990 613 -1220 38 -84 104 -219 147 -301 215 -412 352 -790 413 -1144 31 -182 77 -357 104 -405 35 -58 117 -132 184 -163 50 -24 70 -27 157 -27 88 0 107 3 158 27 73 34 160 116 192 182 14 28 32 85 40 126 47 247 387 1087 555 1375 9 17 31 55 47 85 147 272 323 573 371 635 l18 23 69 -117 c38 -64 101 -170 141 -236 354 -595 583 -1059 774 -1570 135 -360 215 -532 327 -702 96 -145 263 -210 436 -169 117 28 194 76 252 161 57 83 66 122 75 317 13 274 19 302 166 828 167 599 604 1736 859 2234 264 517 484 816 945 1290 314 322 641 591 983 807 l97 61 0 444 c0 244 -1 444 -2 444 -2 0 -62 -31 -135 -69z">
|
|
</path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<p class="font-extrabold text-6xl text-center">Misti</p>
|
|
</a>
|
|
|
|
{{pages}}
|
|
</div>
|
|
<nav class="text-sm p-4 h-screen py-12 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
|
|
{{sidebar}}
|
|
</nav>
|
|
<div class="marked px-8 max-w-screen-lg">
|
|
{{markdown}}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Inter - Google fonts - load here to avoid interrupting the page
|
|
const linkEl = document.createElement("link");
|
|
linkEl.href = "https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap";
|
|
linkEl.rel = "stylesheet";
|
|
|
|
document.head.appendChild(linkEl);
|
|
</script>
|
|
<script>
|
|
const anchors = document.querySelectorAll('h2, h3');
|
|
const links = document.querySelectorAll('nav > ul > li a');
|
|
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
window.addEventListener('scroll', (event) => {
|
|
if (anchors && links) {
|
|
let scrollTop = window.scrollY;
|
|
let scrollBottom = scrollTop + window.innerHeight;
|
|
|
|
// highlight the last scrolled-to: set everything inactive first
|
|
links.forEach((link, index) => {
|
|
link.classList.remove("text-c2-primary");
|
|
});
|
|
|
|
// then iterate backwards, on the first match highlight it and break
|
|
for (let i = 0; i < anchors.length; i++) {
|
|
let anchorPos = anchors[i].offsetTop + 30;
|
|
|
|
if (anchorPos > scrollTop && anchorPos < scrollBottom) {
|
|
links[i].classList.add('text-c2-primary');
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|