blog.grace.moe

Source for the blog blog.grace.moe
git clone https://git.grace.moe/blog.grace.moe
Log | Files | Refs

commit b2a2b9b40504c538d2a6c0393f29d0aeb2d40c73
parent f129cd3f001613a7251a0bd140172173b952b03d
Author: gracefu <81774659+gracefuu@users.noreply.github.com>
Date:   Fri,  2 May 2025 10:17:58 +0800

Autoformat with superhtml lsp

Diffstat:
M.gitignore | 1-
Mlayouts/index.shtml | 9+++++----
Mlayouts/page.shtml | 24++++++++++++------------
Mlayouts/post.shtml | 31++++++++++++++++---------------
Mlayouts/posts.shtml | 15++++++++-------
Mlayouts/templates/base.shtml | 745+++++++++++++++++++++++++++++++++++++++----------------------------------------
6 files changed, 410 insertions(+), 415 deletions(-)

diff --git a/.gitignore b/.gitignore @@ -1,4 +1,3 @@ -git/ public/ __pycache__/ .makedb diff --git a/layouts/index.shtml b/layouts/index.shtml @@ -1,11 +1,11 @@ <extend template="base.shtml"> <div id="content"> <style> -#post-header { - margin-block-end: 1.2em; -} + #post-header { + margin-block-end: 1.2em; + } </style> <main> <article class="hierarchical limit-children" :html="$page.content()"></article> </main> -</div> +</div> +\ No newline at end of file diff --git a/layouts/page.shtml b/layouts/page.shtml @@ -1,17 +1,17 @@ <extend template="base.shtml"> <div id="content"> <style> -#prev-next { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 40px; -} + #prev-next { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 40px; + } -#post-header>p>time, -#post-header>p>span { - font-size: 0.8em; -} + #post-header>p>time, + #post-header>p>span { + font-size: 0.8em; + } </style> <main> <header id="post-header" class="non-hierarchical limit-children"> @@ -23,5 +23,4 @@ </header> <article id="post" class="hierarchical limit-children" :html="$page.content()"></article> </main> -</div> - +</div> +\ No newline at end of file diff --git a/layouts/post.shtml b/layouts/post.shtml @@ -1,21 +1,21 @@ <extend template="base.shtml"> <div id="content"> <style> -#prev-next { - padding-block: 15px; - padding-inline: 15px; -} -#prev-next>div:last-child { - text-align: end; -} + #prev-next { + padding-block: 15px; + padding-inline: 15px; + } + #prev-next>div:last-child { + text-align: end; + } -#post-header { - margin-block-end: 1.2em; -} -#post-header>p>time, -#post-header>p>span { - font-size: 0.8em; -} + #post-header { + margin-block-end: 1.2em; + } + #post-header>p>time, + #post-header>p>span { + font-size: 0.8em; + } </style> <main> <header id="post-header" class="non-hierarchical limit-children"> @@ -41,4 +41,4 @@ </a> </div> </footer> -</div> +</div> +\ No newline at end of file diff --git a/layouts/posts.shtml b/layouts/posts.shtml @@ -1,13 +1,13 @@ <extend template="base.shtml"> <div id="content"> <style> -.date, .author { - font-size: 0.8em; -} + .date, .author { + font-size: 0.8em; + } -.post { - margin-block: 1.6em; -} + .post { + margin-block: 1.6em; + } </style> <main> <div class="hierarchical limit-children" :html="$page.content()"></div> @@ -22,4 +22,4 @@ </section> </div> </main> -</div> +</div> +\ No newline at end of file diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml @@ -24,292 +24,284 @@ <!-- <script defer src="$site.asset('temml.min.js').link()"></script> --> <!-- <script defer src="$site.asset('render-mathtex.js').link()"></script> --> <!-- /mathtex --> - <style> -/* Modern CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */ -*, *::before, *::after { box-sizing: border-box; } -* { margin: 0; } -@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } -body { line-height: 1.5; -webkit-font-smoothing: antialiased; } -img, picture, video, canvas, svg { display: block; max-width: 100%; } -input, button, textarea, select { font: inherit; } -p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; } -p { text-wrap: pretty; } -h1, h2, h3, h4, h5, h6 { text-wrap: balance; } -#content { isolation: isolate; } - -/* Reset pointer events cause it messes up hitboxes */ -* { pointer-events: none; } -:is( -h1, h2, h3, h4, h5, h6, -blockquote, aside, details, -p, ul, ol, menu, dl, pre, [href]), -:is( -h1, h2, h3, h4, h5, h6, -blockquote, aside, details, -p, ul, ol, menu, dl, pre, [href]) * { - pointer-events: auto; -} + /* Modern CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */ + *, *::before, *::after { box-sizing: border-box; } + * { margin: 0; } + @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } + body { line-height: 1.5; -webkit-font-smoothing: antialiased; } + img, picture, video, canvas, svg { display: block; max-width: 100%; } + input, button, textarea, select { font: inherit; } + p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; } + p { text-wrap: pretty; } + h1, h2, h3, h4, h5, h6 { text-wrap: balance; } + #content { isolation: isolate; } + + /* Reset pointer events cause it messes up hitboxes */ + * { pointer-events: none; } + :is( + h1, h2, h3, h4, h5, h6, + blockquote, aside, details, + p, ul, ol, menu, dl, pre, [href]), + :is( + h1, h2, h3, h4, h5, h6, + blockquote, aside, details, + p, ul, ol, menu, dl, pre, [href]) * { + pointer-events: auto; + } </style> - <style> -/* Sizes */ -:root { - --viewport-width: min(100vw, 600px); - --viewport-padding: 15px; - --content-width: calc(var(--viewport-width) - 2 * var(--viewport-padding)); - --wide-viewport-width: min(100vw, 900px); - --wide-content-width: calc(var(--wide-viewport-width) - 2 * var(--viewport-padding)); - --full-bleed-width: calc(100vw - 2 * var(--viewport-padding)); - --rem: 14pt; -} + /* Sizes */ + :root { + --viewport-width: min(100vw, 600px); + --viewport-padding: 15px; + --content-width: calc(var(--viewport-width) - 2 * var(--viewport-padding)); + --wide-viewport-width: min(100vw, 900px); + --wide-content-width: calc(var(--wide-viewport-width) - 2 * var(--viewport-padding)); + --full-bleed-width: calc(100vw - 2 * var(--viewport-padding)); + --rem: 14pt; + } </style> - <style> -/* Font face */ -@font-face { font-family: 'Atkinson Hyperlegible Next'; font-display: swap; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; src: url(/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2) format('woff2'); } + /* Font face */ + @font-face { font-family: 'Atkinson Hyperlegible Next'; font-display: swap; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; src: url(/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2) format('woff2'); } </style> - <style> -/* Font loading magic to avoid Flash of Invisible Text */ -html { font-size: var(--rem); font-family: Arial, Helvetica, sans-serif; font-size-adjust: 0.52; } -html.font-loaded { font-family: 'Atkinson Hyperlegible Next', Arial, Helvetica, sans-serif; font-size-adjust: none; } + /* Font loading magic to avoid Flash of Invisible Text */ + html { font-size: var(--rem); font-family: Arial, Helvetica, sans-serif; font-size-adjust: 0.52; } + html.font-loaded { font-family: 'Atkinson Hyperlegible Next', Arial, Helvetica, sans-serif; font-size-adjust: none; } </style> - <style> -/* Horizontal spacing management */ -/* Philosophy: everything should be width = 100vw by default, and limited at the last minute */ -div, header, footer, section, article, -h1, h2, h3, h4, h5, h6, -blockquote, aside, details, -p, ul, ol, menu, dl, pre { - width: 100%; -} - -/* 2 ways to limit: limit-children and limit-self */ -.limit-self, -.limit-children > * { - width: var(--content-width); - margin-inline: auto; - transition: all .3s cubic-bezier(0, 0, 0, 1); -} -.limit-children > .full-bleed { - width: var(--full-bleed-width); -} -padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open])) -> padding-main .limit-children > *:not(.full-bleed), -padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open])) -> padding-main .limit-self { - width: var(--wide-content-width); -} - -padding-toggle { - display: flex; - flex-direction: row; - align-items: stretch; - width: 100%; -} -padding-main { - pointer-events: none; - width: 100%; -} -padding-side { - display: block; - width: 0; -} -padding-side ~ padding-side { - direction: rtl; -} -padding-side > details { - height: 100%; - width: calc(max(var(--viewport-padding), 50vw - var(--content-width) / 2 - var(--viewport-padding))); - transition: all .3s cubic-bezier(0, 0, 0, 1); -} -padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open])) -> padding-side > details { - width: calc(max(var(--viewport-padding), 50vw - var(--wide-content-width) / 2 - var(--viewport-padding))); -} -padding-side > details > summary { - display: block; - height: 100%; - border-radius: var(--viewport-padding); -} -padding-side > details > summary:hover { - background: rgba(128, 0, 0, 2%); -} + /* Horizontal spacing management */ + /* Philosophy: everything should be width = 100vw by default, and limited at the last minute */ + div, header, footer, section, article, + h1, h2, h3, h4, h5, h6, + blockquote, aside, details, + p, ul, ol, menu, dl, pre { + width: 100%; + } + + /* 2 ways to limit: limit-children and limit-self */ + .limit-self, + .limit-children > * { + width: var(--content-width); + margin-inline: auto; + transition: all .3s cubic-bezier(0, 0, 0, 1); + } + .limit-children > .full-bleed { + width: var(--full-bleed-width); + } + padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open])) + > padding-main .limit-children > *:not(.full-bleed), + padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open])) + > padding-main .limit-self { + width: var(--wide-content-width); + } + + padding-toggle { + display: flex; + flex-direction: row; + align-items: stretch; + width: 100%; + } + padding-main { + pointer-events: none; + width: 100%; + } + padding-side { + display: block; + width: 0; + } + padding-side[right] { + direction: rtl; + } + padding-side > details { + height: 100%; + width: calc(max(var(--viewport-padding), 50vw - var(--content-width) / 2 - var(--viewport-padding))); + transition: all .3s cubic-bezier(0, 0, 0, 1); + } + padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open])) + > padding-side > details { + width: calc(max(var(--viewport-padding), 50vw - var(--wide-content-width) / 2 - var(--viewport-padding))); + } + padding-side > details > summary { + display: block; + height: 100%; + border-radius: var(--viewport-padding); + } + padding-side > details > summary:hover { + background: rgba(128, 0, 0, 2%); + } </style> - <style> -/* Hierarchical vertical spacing management */ -/* Enable with .hierarchical, disable inside a .hierarchical with .non-hierarchical */ -/* Enable for a single element with .hierarchical-self */ - -/* Blocky texts */ -/* Headings: h1, h2, h3, h4, h5, h6 */ -/* Biglets: blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu */ -/* Paras: p, li, dt, dd */ - -/* Lists have special rules: They remove spacing from their children. */ -/* Lists: ul, ol, dl, menu */ - -/* Everything gets some start and end margin. */ -/* Biglets additionally get some padding. */ - -:root { - --paras-start: .5lh; - --paras-end: .25lh; - --biglets-padding: .2lh; - --hr-start: 1em; - --hr-end: 1em; -} - -h1, h2, h3, h4, h5, h6 { - line-height: 1; -} - -:is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:first-child -):is( -h1, h2, h3, h4, h5, h6, -blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu, -p, :is(ol, ul, dl, menu).loose > :is(li, dt, dd) -) { - margin-block-start: var(--paras-start); -} - -:is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:last-child -):is( -h1, h2, h3, h4, h5, h6, -blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu, -p, :is(ol, ul, dl, menu).loose > :is(li, dt, dd) -) { - margin-block-end: var(--paras-end); -} - -:is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:first-child -):is( -blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu -) { - padding-block-start: var(--biglets-padding); -} - -:is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:last-child -):is( -blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu -) { - padding-block-end: var(--biglets-padding); -} - -hr:is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *) { - margin-block-start: var(--hr-start); - margin-block-end: var(--hr-end); -} + /* Hierarchical vertical spacing management */ + /* Enable with .hierarchical, disable inside a .hierarchical with .non-hierarchical */ + /* Enable for a single element with .hierarchical-self */ + + /* Blocky texts */ + /* Headings: h1, h2, h3, h4, h5, h6 */ + /* Biglets: blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu */ + /* Paras: p, li, dt, dd */ + + /* Lists have special rules: They remove spacing from their children. */ + /* Lists: ul, ol, dl, menu */ + + /* Everything gets some start and end margin. */ + /* Biglets additionally get some padding. */ + + :root { + --paras-start: .5lh; + --paras-end: .25lh; + --biglets-padding: .2lh; + --hr-start: 1em; + --hr-end: 1em; + } + + h1, h2, h3, h4, h5, h6 { + line-height: 1; + } + + :is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:first-child + ):is( + h1, h2, h3, h4, h5, h6, + blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu, + p, :is(ol, ul, dl, menu).loose > :is(li, dt, dd) + ) { + margin-block-start: var(--paras-start); + } + + :is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:last-child + ):is( + h1, h2, h3, h4, h5, h6, + blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu, + p, :is(ol, ul, dl, menu).loose > :is(li, dt, dd) + ) { + margin-block-end: var(--paras-end); + } + + :is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:first-child + ):is( + blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu + ) { + padding-block-start: var(--biglets-padding); + } + + :is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:last-child + ):is( + blockquote, figure, img, video, figcaption, details, pre, dl, ul, ol, menu + ) { + padding-block-end: var(--biglets-padding); + } + + hr:is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *) { + margin-block-start: var(--hr-start); + margin-block-end: var(--hr-end); + } </style> - <style> -/* PERSONAL STYLE SECTION */ -/* Colours, sizes, lines, links, etc. */ -body { - background-color: #fdf9ee; -} - -::selection { - background-color: #ff002630; -} - -h1 { - font-size: 1.9em; -} - -hr { - border: none; - border-top: 1px solid; -} - -a { - text-decoration: none; -} -a:hover { - text-decoration: 2.5px dotted underline; - text-underline-position: under; -} -a { color: #ac1052; } -a:hover { color: #7b0c3b; } -a:visited { color: #994016; } -a:visited:hover { color: #753111; } - -blockquote { - padding-inline-start: 15px; - border-inline-start: 3px solid gray; -} - -ul, ol, dl, menu { - padding-inline-start: 1.5em; -} + /* PERSONAL STYLE SECTION */ + /* Colours, sizes, lines, links, etc. */ + body { + background-color: #fdf9ee; + } + + ::selection { + background-color: #ff002630; + } + + h1 { + font-size: 1.9em; + } + + hr { + border: none; + border-top: 1px solid; + } + + a { + text-decoration: none; + } + a:hover { + text-decoration: 2.5px dotted underline; + text-underline-position: under; + } + a { color: #ac1052; } + a:hover { color: #7b0c3b; } + a:visited { color: #994016; } + a:visited:hover { color: #753111; } + + blockquote { + padding-inline-start: 15px; + border-inline-start: 3px solid gray; + } + + ul, ol, dl, menu { + padding-inline-start: 1.5em; + } </style> - <style> -/* Template styling */ -#base-everything { - display: flex; - flex-direction: column; - align-items: center; - min-height: 100vh; -} - -#base-nav { - margin-inline: var(--viewport-padding); -} - -#base-nav a:not(:hover) { - color: #000; - text-decoration: none; -} - -#base-site-title-text { - padding-block-start: 12px; - text-align: center; -} - -#base-links { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 20px; - row-gap: 0px; -} - -#base-links>a { - padding-block: 3px 12px; -} - -#base-header { - overflow: hidden; -} - -#base-header-rule { - margin-inline: calc(0px - mod(-100vw, 40px) / 2); - margin-block-end: 30px; - border-block-start: 10px dotted lightpink; -} - -#base-footer { - margin-block-start: auto; -} - -#base-footer-rule { - max-width: 25ch; - margin-block-start: 20px; - margin-inline: auto; - border-block-start: 1.5px dotted brown; -} - -#base-no-cookie { - max-width: var(--content-width); - margin-block-end: 15px; - padding-block-start: .4lh; - text-align: center; - color: brown; -} + /* Template styling */ + #base-everything { + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + } + + #base-nav { + margin-inline: var(--viewport-padding); + } + + #base-nav a:not(:hover) { + color: #000; + text-decoration: none; + } + + #base-site-title-text { + padding-block-start: 12px; + text-align: center; + } + + #base-links { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 20px; + row-gap: 0px; + } + + #base-links>a { + padding-block: 3px 12px; + } + + #base-header { + overflow: hidden; + } + + #base-header-rule { + margin-inline: calc(0px - mod(-100vw, 40px) / 2); + margin-block-end: 30px; + border-block-start: 10px dotted lightpink; + } + + #base-footer { + margin-block-start: auto; + } + + #base-footer-rule { + max-width: 25ch; + margin-block-start: 20px; + margin-inline: auto; + border-block-start: 1.5px dotted brown; + } + + #base-no-cookie { + max-width: var(--content-width); + margin-block-end: 15px; + padding-block-start: .4lh; + text-align: center; + color: brown; + } </style> </head> <body id="body"> @@ -330,119 +322,119 @@ ul, ol, dl, menu { <hr id="base-header-rule"> </header> <padding-toggle> - <padding-side><details><summary></summary></details></padding-side> - <padding-main> - <div id="content"> - <super> - </div> - </padding-main> - <padding-side><details><summary></summary></details></padding-side> + <padding-side left><details><summary></summary></details></padding-side> + <padding-main> + <div id="content"> + <super> + </div> + </padding-main> + <padding-side right><details><summary></summary></details></padding-side> </padding-toggle> <footer id="base-footer" class="limit-children"> <hr id="base-footer-rule"> - <p id="base-no-cookie">This <a href="//git.grace.moe/blog.grace.moe/log.html">site</a> uses no cookies. ❌🍪</p> + <p id="base-no-cookie">This + <a href="//git.grace.moe/blog.grace.moe/log.html">site</a> + uses no cookies. ❌🍪</p> </footer> </div> - <script> -/* Font Face Observer v2.3.0 - © Bram Stein. License: BSD-3-Clause */(function(){function p(a,c){document.addEventListener?a.addEventListener("scroll",c,!1):a.attachEvent("scroll",c)}function u(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function b(){document.removeEventListener("DOMContentLoaded",b);a()}):document.attachEvent("onreadystatechange",function g(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",g),a()})};function w(a){this.g=document.createElement("div");this.g.setAttribute("aria-hidden","true");this.g.appendChild(document.createTextNode(a));this.h=document.createElement("span");this.i=document.createElement("span");this.m=document.createElement("span");this.j=document.createElement("span");this.l=-1;this.h.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.i.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;"; -this.j.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.m.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.h.appendChild(this.m);this.i.appendChild(this.j);this.g.appendChild(this.h);this.g.appendChild(this.i)} -function x(a,c){a.g.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:"+c+";"}function B(a){var c=a.g.offsetWidth,b=c+100;a.j.style.width=b+"px";a.i.scrollLeft=b;a.h.scrollLeft=a.h.scrollWidth+100;return a.l!==c?(a.l=c,!0):!1}function C(a,c){function b(){var e=g;B(e)&&null!==e.g.parentNode&&c(e.l)}var g=a;p(a.h,b);p(a.i,b);B(a)};function D(a,c,b){c=c||{};b=b||window;this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal";this.context=b}var E=null,F=null,G=null,H=null;function I(a){null===F&&(M(a)&&/Apple/.test(window.navigator.vendor)?(a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent),F=!!a&&603>parseInt(a[1],10)):F=!1);return F}function M(a){null===H&&(H=!!a.document.fonts);return H} -function N(a,c){var b=a.style,g=a.weight;if(null===G){var e=document.createElement("div");try{e.style.font="condensed 100px sans-serif"}catch(q){}G=""!==e.style.font}return[b,g,G?a.stretch:"","100px",c].join(" ")} -D.prototype.load=function(a,c){var b=this,g=a||"BESbswy",e=0,q=c||3E3,J=(new Date).getTime();return new Promise(function(K,L){if(M(b.context)&&!I(b.context)){var O=new Promise(function(r,t){function h(){(new Date).getTime()-J>=q?t(Error(""+q+"ms timeout exceeded")):b.context.document.fonts.load(N(b,'"'+b.family+'"'),g).then(function(n){1<=n.length?r():setTimeout(h,25)},t)}h()}),P=new Promise(function(r,t){e=setTimeout(function(){t(Error(""+q+"ms timeout exceeded"))},q)});Promise.race([P,O]).then(function(){clearTimeout(e); -K(b)},L)}else u(function(){function r(){var d;if(d=-1!=k&&-1!=l||-1!=k&&-1!=m||-1!=l&&-1!=m)(d=k!=l&&k!=m&&l!=m)||(null===E&&(d=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),E=!!d&&(536>parseInt(d[1],10)||536===parseInt(d[1],10)&&11>=parseInt(d[2],10))),d=E&&(k==y&&l==y&&m==y||k==z&&l==z&&m==z||k==A&&l==A&&m==A)),d=!d;d&&(null!==f.parentNode&&f.parentNode.removeChild(f),clearTimeout(e),K(b))}function t(){if((new Date).getTime()-J>=q)null!==f.parentNode&&f.parentNode.removeChild(f), -L(Error(""+q+"ms timeout exceeded"));else{var d=b.context.document.hidden;if(!0===d||void 0===d)k=h.g.offsetWidth,l=n.g.offsetWidth,m=v.g.offsetWidth,r();e=setTimeout(t,50)}}var h=new w(g),n=new w(g),v=new w(g),k=-1,l=-1,m=-1,y=-1,z=-1,A=-1,f=document.createElement("div");f.dir="ltr";x(h,N(b,"sans-serif"));x(n,N(b,"serif"));x(v,N(b,"monospace"));f.appendChild(h.g);f.appendChild(n.g);f.appendChild(v.g);b.context.document.body.appendChild(f);y=h.g.offsetWidth;z=n.g.offsetWidth;A=v.g.offsetWidth;t(); -C(h,function(d){k=d;r()});x(h,N(b,'"'+b.family+'",sans-serif'));C(n,function(d){l=d;r()});x(n,N(b,'"'+b.family+'",serif'));C(v,function(d){m=d;r()});x(v,N(b,'"'+b.family+'",monospace'))})})};"object"===typeof module?module.exports=D:(window.FontFaceObserver=D,window.FontFaceObserver.prototype.load=D.prototype.load);}()); - -var font = new FontFaceObserver('Atkinson Hyperlegible Next'); -font.load().then(function () { - document.querySelector('html').classList.add('font-loaded'); - console.log("Loaded."); -}, function () { - document.querySelector('html').classList.add('font-loaded'); - console.log("Failed."); -}); + /* Font Face Observer v2.3.0 - © Bram Stein. License: BSD-3-Clause */(function(){function p(a,c){document.addEventListener?a.addEventListener("scroll",c,!1):a.attachEvent("scroll",c)}function u(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function b(){document.removeEventListener("DOMContentLoaded",b);a()}):document.attachEvent("onreadystatechange",function g(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",g),a()})};function w(a){this.g=document.createElement("div");this.g.setAttribute("aria-hidden","true");this.g.appendChild(document.createTextNode(a));this.h=document.createElement("span");this.i=document.createElement("span");this.m=document.createElement("span");this.j=document.createElement("span");this.l=-1;this.h.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.i.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;"; + this.j.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.m.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.h.appendChild(this.m);this.i.appendChild(this.j);this.g.appendChild(this.h);this.g.appendChild(this.i)} + function x(a,c){a.g.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:"+c+";"}function B(a){var c=a.g.offsetWidth,b=c+100;a.j.style.width=b+"px";a.i.scrollLeft=b;a.h.scrollLeft=a.h.scrollWidth+100;return a.l!==c?(a.l=c,!0):!1}function C(a,c){function b(){var e=g;B(e)&&null!==e.g.parentNode&&c(e.l)}var g=a;p(a.h,b);p(a.i,b);B(a)};function D(a,c,b){c=c||{};b=b||window;this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal";this.context=b}var E=null,F=null,G=null,H=null;function I(a){null===F&&(M(a)&&/Apple/.test(window.navigator.vendor)?(a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent),F=!!a&&603>parseInt(a[1],10)):F=!1);return F}function M(a){null===H&&(H=!!a.document.fonts);return H} + function N(a,c){var b=a.style,g=a.weight;if(null===G){var e=document.createElement("div");try{e.style.font="condensed 100px sans-serif"}catch(q){}G=""!==e.style.font}return[b,g,G?a.stretch:"","100px",c].join(" ")} + D.prototype.load=function(a,c){var b=this,g=a||"BESbswy",e=0,q=c||3E3,J=(new Date).getTime();return new Promise(function(K,L){if(M(b.context)&&!I(b.context)){var O=new Promise(function(r,t){function h(){(new Date).getTime()-J>=q?t(Error(""+q+"ms timeout exceeded")):b.context.document.fonts.load(N(b,'"'+b.family+'"'),g).then(function(n){1<=n.length?r():setTimeout(h,25)},t)}h()}),P=new Promise(function(r,t){e=setTimeout(function(){t(Error(""+q+"ms timeout exceeded"))},q)});Promise.race([P,O]).then(function(){clearTimeout(e); + K(b)},L)}else u(function(){function r(){var d;if(d=-1!=k&&-1!=l||-1!=k&&-1!=m||-1!=l&&-1!=m)(d=k!=l&&k!=m&&l!=m)||(null===E&&(d=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),E=!!d&&(536>parseInt(d[1],10)||536===parseInt(d[1],10)&&11>=parseInt(d[2],10))),d=E&&(k==y&&l==y&&m==y||k==z&&l==z&&m==z||k==A&&l==A&&m==A)),d=!d;d&&(null!==f.parentNode&&f.parentNode.removeChild(f),clearTimeout(e),K(b))}function t(){if((new Date).getTime()-J>=q)null!==f.parentNode&&f.parentNode.removeChild(f), + L(Error(""+q+"ms timeout exceeded"));else{var d=b.context.document.hidden;if(!0===d||void 0===d)k=h.g.offsetWidth,l=n.g.offsetWidth,m=v.g.offsetWidth,r();e=setTimeout(t,50)}}var h=new w(g),n=new w(g),v=new w(g),k=-1,l=-1,m=-1,y=-1,z=-1,A=-1,f=document.createElement("div");f.dir="ltr";x(h,N(b,"sans-serif"));x(n,N(b,"serif"));x(v,N(b,"monospace"));f.appendChild(h.g);f.appendChild(n.g);f.appendChild(v.g);b.context.document.body.appendChild(f);y=h.g.offsetWidth;z=n.g.offsetWidth;A=v.g.offsetWidth;t(); + C(h,function(d){k=d;r()});x(h,N(b,'"'+b.family+'",sans-serif'));C(n,function(d){l=d;r()});x(n,N(b,'"'+b.family+'",serif'));C(v,function(d){m=d;r()});x(v,N(b,'"'+b.family+'",monospace'))})})};"object"===typeof module?module.exports=D:(window.FontFaceObserver=D,window.FontFaceObserver.prototype.load=D.prototype.load);}()); + + var font = new FontFaceObserver('Atkinson Hyperlegible Next'); + font.load().then(function () { + document.querySelector('html').classList.add('font-loaded'); + console.log("Loaded."); + }, function () { + document.querySelector('html').classList.add('font-loaded'); + console.log("Failed."); + }); </script> - <script> -const promises = {}; -const results = {}; - -function mouseEnterListener() { - const href = this.href; - console.log('enter', this, href, promises[href]); - if (promises[href] === undefined) { - promises[href] = new Promise((resolve) => { - const req = new XMLHttpRequest(); - req.addEventListener("load", function() { - results[href] = new DOMParser().parseFromString(this.response, "text/html").querySelector('#content'); - console.log('ho', results[href]); - resolve(results[href]); - }); - req.open("GET", href); - req.send(); - }); - } -} - -function clickListener(event) { - const href = this.href; - console.log('click', this, href, promises[href]); - if (promises[href] !== undefined) { - event.preventDefault(); - promises[href].then((content) => { - document.querySelector('#content').innerHTML = content.innerHTML; - history.pushState(null, '', href + '#body'); - history.replaceState(null, '', href); - refreshLinks(); - }); - } -} - -function refreshLinks() { - for (let a of document.querySelectorAll("a")) { - if ( - !a.href.endsWith("/") || - a.href.match("^.*//[^/]*/")[0] !== - location.href.match("^.*//[^/]*/")[0] || - a.href.match("^.*//[^/]*/git") !== null - ) { - continue; - } - console.log(a); - a.onmouseenter = mouseEnterListener; - a.onclick = clickListener; - } -} -refreshLinks(); - -function popStateListener(event) { - console.log('popstate'); - const href = location.href; - if (results[location.href] === undefined) { - if (promises[href] === undefined) { - promises[href] = new Promise((resolve) => { - const req = new XMLHttpRequest(); - req.addEventListener("load", function() { - results[href] = new DOMParser().parseFromString(this.response, "text/html").querySelector('#content'); - console.log('ho', results[href]); - resolve(results[href]); - }); - req.open("GET", href); - req.send(); - }); - } - promises[href].then((content) => { - document.querySelector('#content').innerHTML = content.innerHTML; + const promises = {}; + const results = {}; + + function mouseEnterListener() { + const href = this.href; + console.log('enter', this, href, promises[href]); + if (promises[href] === undefined) { + promises[href] = new Promise((resolve) => { + const req = new XMLHttpRequest(); + req.addEventListener("load", function() { + results[href] = new DOMParser().parseFromString(this.response, "text/html").querySelector('#content'); + console.log('ho', results[href]); + resolve(results[href]); + }); + req.open("GET", href); + req.send(); + }); + } + } + + function clickListener(event) { + const href = this.href; + console.log('click', this, href, promises[href]); + if (promises[href] !== undefined) { + event.preventDefault(); + promises[href].then((content) => { + document.querySelector('#content').innerHTML = content.innerHTML; + history.pushState(null, '', href + '#body'); + history.replaceState(null, '', href); + refreshLinks(); + }); + } + } + + function refreshLinks() { + for (let a of document.querySelectorAll("a")) { + if ( + !a.href.endsWith("/") || + a.href.match("^.*//[^/]*/")[0] !== + location.href.match("^.*//[^/]*/")[0] || + a.href.match("^.*//[^/]*/git") !== null + ) { + continue; + } + console.log(a); + a.onmouseenter = mouseEnterListener; + a.onclick = clickListener; + } + } refreshLinks(); - }); - } else { - document.querySelector('#content').innerHTML = results[location.href].innerHTML; - refreshLinks(); - } -} - -window.onpopstate = popStateListener; + + function popStateListener(event) { + console.log('popstate'); + const href = location.href; + if (results[location.href] === undefined) { + if (promises[href] === undefined) { + promises[href] = new Promise((resolve) => { + const req = new XMLHttpRequest(); + req.addEventListener("load", function() { + results[href] = new DOMParser().parseFromString(this.response, "text/html").querySelector('#content'); + console.log('ho', results[href]); + resolve(results[href]); + }); + req.open("GET", href); + req.send(); + }); + } + promises[href].then((content) => { + document.querySelector('#content').innerHTML = content.innerHTML; + refreshLinks(); + }); + } else { + document.querySelector('#content').innerHTML = results[location.href].innerHTML; + refreshLinks(); + } + } + + window.onpopstate = popStateListener; </script> </body> -</html> +</html> +\ No newline at end of file