summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
authorAlexis Hovorka <[email protected]>2022-10-24 22:14:06 -0600
committerAlexis Hovorka <[email protected]>2022-10-24 22:14:06 -0600
commit634301e45433bf06fcdae500d51275677e568adb (patch)
treef7a5a3051648322c6243420667b120440e7fa1df /static
Initial commit
Diffstat (limited to 'static')
-rw-r--r--static/favicon.icobin0 -> 99678 bytes
-rw-r--r--static/favicon.pngbin0 -> 7196 bytes
-rw-r--r--static/main.js41
-rw-r--r--static/style.css516
4 files changed, 557 insertions, 0 deletions
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..6640c4e
--- /dev/null
+++ b/static/favicon.ico
Binary files differ
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..964510b
--- /dev/null
+++ b/static/favicon.png
Binary files differ
diff --git a/static/main.js b/static/main.js
new file mode 100644
index 0000000..5e7c18c
--- /dev/null
+++ b/static/main.js
@@ -0,0 +1,41 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const d = document, m = Math,
+ h = d.documentElement,
+ c = d.cookie.split("; "),
+ t = c.find(r => r.startsWith("theme=")),
+ o = "path=/; samesite=strict; expires",
+ q = "querySelectorAll",
+ l = "classList";
+
+ h[l][(t && t.split("=")[1] == "invert")?"add":"remove"]("invert");
+ d.querySelector("#invert").addEventListener("click", () =>
+ d.cookie = h[l].toggle("invert")?
+ `theme=invert; ${o}=Fri, 31 Dec 9999 23:59:59 GMT`:
+ `theme=; ${o}=Thu, 01 Jan 1970 00:00:00 GMT`);
+
+ // Add line numbers to code blocks
+ [...d[q]("pre.hljs code")].forEach(e => e.innerHTML =
+ e.innerHTML.split("\n").map((l,i,a) => l &&
+ `<div class="code-line" data-line-number="${
+ (i+1).toString().padStart(Math.ceil(Math.log10(a.length)), 0)
+ }">${l}</div>`).join("\n"));
+
+ // Disable Android Chrome "tap to search" when revealing spoiler text
+ [...d[q]("mark")].forEach(e => e.tabIndex = "-1");
+
+ const ZLM_UNICODE_START = 0xED80;
+ const LERFU_INDEX = "ptkflscmx.' 1234bdgvrzjn`-,~ aeiouy qw AEIOUY";
+ const lerfuLookup = c => String.fromCodePoint(ZLM_UNICODE_START + LERFU_INDEX.indexOf(c));
+
+ function latinToZlm(c) {
+ if (c.codePointAt(0) == 0x2019) c = "'";
+ if (c.codePointAt(0) >= 0xED80) return c;
+ if (" \n\t".includes(c)) return c;
+ if (c == "h" || c == "H") c = "'";
+ if (LERFU_INDEX.indexOf(c) >= 0) return lerfuLookup(c);
+ if (LERFU_INDEX.indexOf(c.toLowerCase()) >= 0) return lerfuLookup(c.toLowerCase());
+ return c;
+ }
+
+ [...d[q]("[lang=jbo]")].forEach(e => e.innerText = e.innerText.split("").map(latinToZlm).join(""));
+});
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..8ac1f13
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,516 @@
+* {
+ box-sizing: border-box;
+ margin: 0; padding: 0;
+ font-family: "Lato", "Noto Sans CJK JP", sans-serif;
+ font-size: 18px;
+ line-height: 1.5rem;
+}
+
+:root { --filter: invert(0) }
+html.invert { --filter: invert(1) }
+/*@media (prefers-color-scheme: dark) {
+ :root { --filter: invert(1) }
+ html.invert { --filter: invert(0) }
+}*/
+
+html, pre.hljs, img:not(.emoji):not([alt^=Diagram]),
+#end, .emoji-container { filter: var(--filter) }
+
+html {
+ background: #fff;
+ color: #000;
+ height: 100%;
+ overflow-x: hidden;
+}
+
+#logo {
+ float: left;
+ width: 1.7rem;
+ margin: 0.94rem 0 0 -2rem;
+}
+
+#invert {
+ float: right;
+ margin: 1.2rem 0 0;
+ height: 1rem;
+ width: 1rem;
+ background: #bbb;
+ border-radius: 1rem;
+ cursor: pointer;
+}
+#invert:hover { background: #1d73c9 }
+#invert::before {
+ content: "";
+ display: block;
+ height: 2rem;
+ width: 2rem;
+ position: relative;
+ left: -.5rem;
+ top: -.5rem;
+ border-radius: 1rem;
+}
+
+#feed, #message-me {
+ box-sizing: content-box;
+ display: inline-block;
+ position: relative;
+ height: 1rem;
+ width: 1rem;
+ margin: -.6rem 0;
+ vertical-align: -.05rem;
+ background: #fff;
+ overflow: hidden;
+ outline: 0;
+ border: .6rem solid transparent;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+#feed {
+ margin-left: .15rem;
+ border-right-width: .4rem;
+}
+#message-me { border-left-width: .4rem; }
+#feed::before,
+#message-me::before,
+#message-me::after {
+ content: "";
+ display: block;
+ position: absolute;
+ left: 0;
+}
+#feed::before {
+ height: .8rem;
+ width: .8rem;
+ bottom: 0;
+ transform: translate(-50%,50%);
+ border-radius: 100%;
+ background: #bbb;
+ box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #bbb;
+}
+#feed:hover::before {
+ background: #1d73c9;
+ box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #1d73c9;
+}
+#message-me::before {
+ background: #bbb;
+ height: .75rem;
+ width: 1rem;
+}
+#message-me::after {
+ height: 0;
+ width: .1rem;
+ border-top: .4rem solid #bbb;
+ border-right: .6rem solid transparent;
+ bottom: 0;
+}
+#message-me:hover::before { background: #1d73c9 }
+#message-me:hover::after { border-top-color: #1d73c9 }
+
+body {
+ position: relative;
+ min-height: 100%;
+ overflow-x: hidden;
+}
+
+main {
+ position: relative;
+ max-width: 36rem;
+ margin: 0 auto;
+ padding: calc(2vw + .7rem) 2.2rem;
+}
+
+main * { margin: 1rem 0 }
+
+[lang=jpn], [lang=jpn] * {
+ font-size: 17px;
+}
+
+[lang=jbo], [lang=jbo] * {
+ font-family: "crisa", "Lato", sans-serif;
+ font-size: 19px;
+}
+
+.header-anchor {
+ float: left;
+ display: inline-block;
+ margin: 0 0 0 -1rem;
+ font-weight: normal;
+}
+
+summary {
+ margin-bottom: 0;
+ cursor: pointer;
+}
+
+details > summary { list-style: none }
+details > summary::-webkit-details-marker { display: none }
+
+summary::before {
+ content: "";
+ display: block;
+ height: 0;
+ width: 0;
+ border: .4rem solid transparent;
+ border-left: .7rem solid #bbb;
+ border-right-width: 0;
+ float: left;
+ margin: .35rem 0 0 -1.2rem;
+}
+
+summary:hover::before { border-left-color: #1d73c9; }
+
+details[open] > summary::before {
+ border: .4rem solid transparent;
+ border-top: .7rem solid #bbb;
+ border-bottom-width: 0;
+ margin: .4rem 0 0 -1.3rem;
+}
+
+details[open] > summary:hover::before { border-top-color: #1d73c9; }
+
+blockquote {
+ padding-left: 1.2rem;
+ box-shadow: 2px 0 0 rgba(0,0,0,.2) inset;
+}
+
+ul ul, ul ol, ol ul, ol ol, li {
+ margin: .4rem 0;
+ padding: revert;
+}
+
+ol > li:first-child:nth-last-child(n+10),
+ol > li:first-child:nth-last-child(n+10) ~ li {
+ list-style-type: decimal-leading-zero;
+}
+
+hr {
+ border: 0;
+ border-top: .5px solid rgba(0,0,0,.2);
+}
+
+h1, h1 * { font-size: 26px }
+h2, h2 * { font-size: 22px }
+
+img:not(.emoji) {
+ display: block;
+ max-width: 100%;
+ margin: 1.5rem 0;
+}
+
+img.emoji {
+ height: 1rem;
+ width: 1rem;
+ margin: 0 .05rem 0 .1rem;
+ vertical-align: -.1rem;
+}
+
+img.hero {
+ display: block;
+ width: 100vw;
+ max-width: none;
+ margin: 2rem calc(50% - 50vw);
+}
+
+a {
+ text-decoration: none;
+ color: #1d73c9;
+}
+a:hover, a:hover *, ins * { text-decoration: underline }
+a:visited { color: #955eba }
+a:active { color: #ab4642 }
+
+.irc { padding-left: 1.8rem }
+.irc > p { text-indent: -1.8rem }
+.irc * {
+ margin: 0;
+ text-indent: 0;
+}
+
+mark {
+ color: transparent;
+ background: #444;
+}
+mark:hover {
+ color: #000;
+ background: transparent;
+}
+
+mark:not(:hover) code,
+mark:not(:hover) .emoji { opacity: 0 }
+
+code {
+ background: #e6e6e6;
+ margin: 0 .2rem;
+ box-shadow:
+ .2rem .08rem #e6e6e6,
+ .2rem -.08rem #e6e6e6,
+ -.2rem .08rem #e6e6e6,
+ -.2rem -.08rem #e6e6e6;
+ white-space: nowrap;
+}
+
+/* Highlight.js - Base16 Default Dark */
+.hljs{color:#d8d8d8;background:#181818}.hljs ::selection,.hljs::selection{background-color:#383838;color:#d8d8d8}.hljs-comment{color:#585858}.hljs-tag{color:#b8b8b8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#d8d8d8}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ab4642}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#dc9656}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#f7ca88}.hljs-strong{font-weight:700;color:#f7ca88}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#a1b56c}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#86c1b9}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#7cafc2}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#ba8baf}.hljs-emphasis{color:#ba8baf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#a16946}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}
+
+p code, p code * {
+ font-family: "Hack", monospace;
+ font-size: 16px;
+}
+
+pre, pre * {
+ font-family: "Hack", monospace;
+ font-size: 15px;
+ line-height: 1.4em;
+}
+
+pre code {
+ display: block;
+ margin: 0 auto;
+ padding: 0.8rem 1rem;
+ max-width: 33.6rem;
+ background: transparent;
+ white-space: inherit;
+ box-shadow: none;
+}
+
+pre.hljs:hover code {
+ box-shadow: -.5px 0 #fff6;
+}
+
+pre .code-line {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+pre .code-line::before {
+ content: attr(data-line-number);
+ display: inline-block;
+ width: 8rem;
+ text-align: right;
+ position: absolute;
+ margin-left: -9.8rem;
+ color: transparent;
+}
+
+pre:hover .code-line::before {
+ color: #fff8;
+}
+
+pre {
+ margin: 1em -100%; /* old browsers fallback */
+ margin: 1rem calc(50% - 50vw);
+ padding: 0 2rem;
+ background: #e6e6e6;
+ overflow-x: auto;
+ line-height: 1em;
+}
+
+kbd {
+ background: #eee;
+ margin: 0 .1rem;
+ padding: .05rem .35rem;
+ vertical-align: .07rem;
+ font-family: "Hack", monospace;
+ font-size: 15px;
+ border: 1px solid #ccc;
+ border-radius: .3rem;
+ box-shadow: 0 2px 0 #ddd;
+ white-space: nowrap;
+}
+
+#tags { word-spacing: .5rem; }
+.tag { white-space: nowrap; }
+
+nav {
+ position: relative;
+ margin-bottom: 0;
+ border-top: .5px solid rgba(0,0,0,.2);
+ padding-top: 1rem;
+}
+nav::after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+nav a:not(:hover) {
+ color: #999;
+}
+
+#up, #back, #next, #prev, #first, #last { display: block }
+#next, #prev, #first, #last, #end { width: 40% }
+#first, #last { position: relative }
+
+#up {
+ margin: 0 0 0 -.2rem;
+ position: absolute;
+ top: 2vw;
+}
+
+#back {
+ float: left;
+ margin: .9rem 0 0 -1.8rem;
+ padding: .5rem;
+}
+
+#up::after, #back::after {
+ content: "";
+ display: block;
+ height: 0;
+ width: 0;
+ border: .4rem solid transparent;
+}
+
+#up::after {
+ margin: .6rem 1.5rem .6rem .3rem;
+ border-bottom: .7rem solid #bbb;
+ border-top-width: 0;
+}
+
+#back::after {
+ border-right: .7rem solid #bbb;
+ border-left-width: 0;
+}
+
+#up:hover::after { border-bottom-color: #1d73c9 }
+#back:hover::after { border-right-color: #1d73c9 }
+
+#next, #last, #end {
+ float: right;
+ margin: 0 -1.2rem 0 0;
+ text-align: right;
+}
+
+#next + #last { margin: 2rem -40% 0 0 }
+#first { margin: .5rem 0 0 -1.2rem }
+#prev { margin: 0 0 .5rem -1.2rem }
+
+#next::after {
+ content: "";
+ display: inline-block;
+ height: 0;
+ width: 0;
+ margin-left: .5rem;
+ border: .4rem solid transparent;
+ border-left: .7rem solid #bbb;
+ border-right-width: 0;
+ vertical-align: -.05rem;
+}
+#next:hover::after { border-left-color: currentColor }
+
+#last::after {
+ content: "";
+ display: inline-block;
+ height: 0;
+ width: 0;
+ margin: 0 .1rem 0 .5rem;
+ border: .4rem solid transparent;
+ border-left: .6rem solid #bbb;
+ border-right-width: 0;
+ vertical-align: -.05rem;
+}
+#last::before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ right: 0;
+ top: .37rem;
+ height: .8rem;
+ width: .15rem;
+ background: #bbb;
+}
+#last:hover::after { border-left-color: currentColor }
+#last:hover::before { background: currentColor }
+
+#first::before {
+ content: "";
+ display: inline-block;
+ height: 0;
+ width: 0;
+ margin: 0 .5rem 0 .1rem;
+ border: .4rem solid transparent;
+ border-right: .6rem solid #bbb;
+ border-left-width: 0;
+ vertical-align: -.05rem;
+}
+#first::after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ left: 0;
+ top: .37rem;
+ height: .8rem;
+ width: .15rem;
+ background: #bbb;
+}
+#first:hover::before { border-right-color: currentColor }
+#first:hover::after { background: currentColor }
+
+#prev::before {
+ content: "";
+ display: inline-block;
+ height: 0;
+ width: 0;
+ margin-right: .5rem;
+ border: .4rem solid transparent;
+ border-right: .7rem solid #bbb;
+ border-left-width: 0;
+ vertical-align: -.05rem;
+}
+#prev:hover::before { border-right-color: currentColor }
+
+#end { padding: 0 1.2rem .5rem 0 }
+#end::after {
+ content: "";
+ display: block;
+ float: right;
+ margin: .35rem .1rem 0 .2rem;
+ height: .8rem;
+ width: .8rem;
+ transform: rotate(45deg);
+ box-shadow: 0 0 0 .24rem #ab4642 inset;
+}
+
+#like-post {
+ display: block;
+ position: relative;
+ height: 1.7rem;
+ width: 1.7rem;
+ margin: -.05rem auto -1.65em;
+ padding: .6rem .55rem;
+ text-align: center;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+#like-post span {
+ margin: 0;
+ position: relative;
+ transform: rotate(45deg);
+}
+#like-post span, #like-post span::before, #like-post span::after {
+ display: block;
+ height: .6rem;
+ width: .6rem;
+ background: #bbb;
+}
+#like-post.liked span, #like-post.liked span::before, #like-post.liked span::after,
+#like-post:hover span, #like-post:hover span::before, #like-post:hover span::after {
+ background: #955eba;
+}
+#like-post span::before, #like-post span::after {
+ content: "";
+ position: absolute;
+ border-radius: .5rem;
+}
+#like-post span::before { top: -.3rem; }
+#like-post span::after { left: -.3rem; }