diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/favicon.ico | bin | 0 -> 99678 bytes | |||
| -rw-r--r-- | static/favicon.png | bin | 0 -> 7196 bytes | |||
| -rw-r--r-- | static/main.js | 41 | ||||
| -rw-r--r-- | static/style.css | 516 |
4 files changed, 557 insertions, 0 deletions
diff --git a/static/favicon.ico b/static/favicon.ico Binary files differnew file mode 100644 index 0000000..6640c4e --- /dev/null +++ b/static/favicon.ico diff --git a/static/favicon.png b/static/favicon.png Binary files differnew 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; } |
