Initial commit

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
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..964510b
--- /dev/null
+++ b/static/favicon.png
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; }