Initial commit

static/css/main.css

@@ -0,0 +1,223 @@
+:root {
+  --pm: #0fa0ce;
+  --bd: #e1e1e1;
+  --bg: #fff;
+  --ft: #222;
+  --tag: #333;
+
+  --w-mobile: 640px;
+}
+
+html.dark {
+  --bg: #262d33;
+  --ft: #eee;
+  --bd: #555;
+  --tag: #999;
+}
+
+body {
+  font-family: Helvetica, sans-serif;
+  max-width: var(--w-mobile);
+  margin: 50px auto 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--ft);
+  background-color: var(--bg);
+  transition-property: background-color, border-color, color;
+  transition-duration: .5s;
+}
+
+h1,h2,h3,h4,h5 {
+  font-family: 'Noto Serif SC', 'Times New Roman', sans-serif;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+p {
+  margin-top: 0;
+  line-height: 1.5;
+  text-align: left;
+}
+
+hr {
+  margin: 30px 0;
+  border-width: 0;
+  border-top: 1px solid var(--bd);
+}
+
+a {
+  text-decoration: none;
+}
+
+a:not(.icon) {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--pm);
+  background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 50%, var(--pm) 50% );
+  background-size: 100% 200%;
+  transition: background-position .2s ease-in-out;
+}
+
+a:not(.icon):hover,
+a:not(.icon):focus {
+  background-position: 0 100%;
+  color: #fff;
+}
+
+.icon:hover {
+  transform: translateY(-5px);
+  transition: transform .3s ease-in-out;
+}
+
+main {
+  animation: showup 0.7s;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+}
+
+.jc-bt {
+  justify-content: space-between;
+}
+
+.as-s {
+  align-self: start;
+}
+
+.ai-c {
+  align-items: center;
+}
+
+.gap-0_5 {
+  gap: .8rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.lg-1 {
+  font-size: 1.2em;
+}
+
+.sm-1 {
+  font-size: .8em;
+}
+
+.mtb-1 {
+  margin: 1em 0;
+}
+
+.mtb-2 {
+  margin: 2em 0;
+}
+
+.mb-1 {
+  margin-bottom: 1em;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mt-2 {
+  margin-top: 2em;
+}
+
+.ml-1 {
+  margin-left: 1em;
+}
+
+.btn {
+  cursor: pointer;
+}
+
+.hidden {
+  display: none;
+}
+
+.tag {
+  font-size: .7em;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  background-color: var(--pm);
+  border-radius: 20px;
+  padding: 2px 8px;
+}
+
+@keyframes showup {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (max-width: 640px) {
+  body {
+    margin: 1em 2em;
+  }
+
+  .row-mob {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+  }
+
+  .al-c-mob {
+    align-items: center;
+  }
+
+  .col-rev-mob {
+    flex-direction: column-reverse;
+  }
+
+  .sm-2-mob {
+    font-size: .8em;
+  }
+
+  .mb-0_5-mob {
+    margin-bottom: .5em;
+  }
+
+  .mb-1_5-mob {
+    margin-bottom: 1.5em;
+  }
+}
+
+/* Scroll bar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgb(128 128 128 / 70%);
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  background: rgb(128 128 128 / 20%);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgb(128 128 128 / 100%);
+}

static/css/md.css

@@ -0,0 +1,26 @@
+.md blockquote {
+  font-family: 'Inter';
+  background-color: rgba(148, 148, 149, 0.08) ;
+  margin: 1.5em 0px;
+  padding: 1.1em 20px 1px 20px;
+  border-left: 8px solid var(--pm);
+  font-style: italic;
+}
+
+.md table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  display: block;
+  max-width: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.md table th {
+  background-color: var(--bg);
+}
+
+table th, table td {
+  padding: 10px 20px;
+  border: 1px solid var(--bd);
+}

static/css/prism-dark.css

@@ -0,0 +1,289 @@
+/* https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css */
+pre[class*="language-"],
+code[class*="language-"] {
+  color: #d4d4d4;
+  font-size: 13px;
+  text-shadow: none;
+  font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono",
+    "Courier New", monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+  text-shadow: none;
+  background: #75a7ca;
+}
+
+@media print {
+  pre[class*="language-"],
+  code[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  background: #292929;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  color: #db4c69;
+  background: #f9f2f4;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+  opacity: 0.7;
+}
+
+.token.doctype .token.doctype-tag {
+  color: #569cd6;
+}
+
+.token.doctype .token.name {
+  color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+  color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+  color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+  color: #ce9178;
+}
+
+.language-css .token.string.url {
+  text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+  color: #d4d4d4;
+}
+
+.token.operator.arrow {
+  color: #569cd6;
+}
+
+.token.atrule {
+  color: #ce9178;
+}
+
+.token.atrule .token.rule {
+  color: #c586c0;
+}
+
+.token.atrule .token.url {
+  color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+  color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.keyword {
+  color: #569cd6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+  color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+  color: #dcdcaa;
+}
+
+.token.regex {
+  color: #d16969;
+}
+
+.token.important {
+  color: #569cd6;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.constant {
+  color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+  color: #4ec9b0;
+}
+
+.token.console {
+  color: #9cdcfe;
+}
+
+.token.parameter {
+  color: #9cdcfe;
+}
+
+.token.interpolation {
+  color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+  color: #569cd6;
+}
+
+.token.boolean {
+  color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+  color: #9cdcfe;
+}
+
+.token.selector {
+  color: #d7ba7d;
+}
+
+.token.escape {
+  color: #d7ba7d;
+}
+
+.token.tag {
+  color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+  color: #808080;
+}
+
+.token.cdata {
+  color: #808080;
+}
+
+.token.attr-name {
+  color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+  color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+  color: #d4d4d4;
+}
+
+.token.entity {
+  color: #569cd6;
+}
+
+.token.namespace {
+  color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+  color: #9cdcfe;
+}
+
+pre[class*="language-css"],
+code[class*="language-css"] {
+  color: #ce9178;
+}
+
+pre[class*="language-html"],
+code[class*="language-html"] {
+  color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+  color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+  color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[data-line] {
+  position: relative;
+}
+
+pre[class*="language-"] > code[class*="language-"] {
+  position: relative;
+  z-index: 1;
+}
+
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+  background: #f7ebc6;
+  box-shadow: inset 5px 0 0 #f7d87c;
+  z-index: 0;
+  pointer-events: none;
+  line-height: inherit;
+  white-space: pre;
+}

static/css/syntax.css

@@ -0,0 +1,122 @@
+pre[class*="language-"],
+code[class*="language-"] {
+  color: #d4d4d4;
+  font-size: 13px;
+  text-shadow: none;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  line-height: 1.5;
+  color: #d4d4d4;
+}
+
+.chroma {
+  background-color: #292929;
+  margin: .5em 0;
+}
+
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: auto;
+  overflow: auto;
+  display: block;
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+  color: #999;
+  display: block;
+  padding-left: .5em;
+  padding-right: 1em;
+  text-align: right;
+  line-height: 1.5;
+  font-size: 13px;
+}
+
+/* Keyword */
+.chroma .kc,
+.chroma .kd,
+.chroma .kn,
+.chroma .kp,
+.chroma .kr,
+.chroma .kt,
+.chroma .k,
+.chroma .si {
+  color: #569cd6;
+}
+
+.chroma .na {
+  color: #9cdcfe;
+}
+
+.chroma .n,
+.chroma .nb,
+.chroma .bp,
+.chroma .nc,
+.chroma .no,
+.chroma .nd,
+.chroma .ni,
+.chroma .ne,
+.chroma .nf,
+.chroma .fm,
+.chroma .nl,
+.chroma .nn {
+  color: #3f4c50;
+}
+
+/* NameProperty */
+.chroma .py,
+.chroma .nt,
+.chroma .nv,
+.chroma .vc,
+.chroma .vg,
+.chroma .vi,
+.chroma .vm {
+  color: #569cd6;
+}
+
+/* LiteralString */
+.chroma .s,
+.chroma .sa,
+.chroma .sb,
+.chroma .sc,
+.chroma .dl,
+.chroma .sd,
+.chroma .s2,
+.chroma .se,
+.chroma .sh,
+.chroma .sx,
+.chroma .sr,
+.chroma .s1,
+.chroma .ss {
+  color: #ce9178;
+}
+/* LiteralNumber */
+.chroma .m,
+.chroma .mb,
+.chroma .mf,
+.chroma .mh,
+.chroma .mi,
+.chroma .il,
+.chroma .mo {
+  color: #b5cea8;
+}
+
+/* Comment */
+.chroma .c,
+.chroma .ch,
+.chroma .cm,
+.chroma .c1,
+.chroma .cs {
+  color: #517043;
+}
+

static/js/main.js

@@ -0,0 +1,18 @@
+window.addEventListener('DOMContentLoaded', function () {
+  const light = '🌝', dark = '🌚';
+  const LIGHT = 'light', DARK = 'dark';
+  const themeSwitcher = document.getElementById('theme-switcher');
+
+  themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark;
+
+  themeSwitcher.addEventListener('click', function () {
+    const currentTheme = localStorage.theme,
+      newTheme = currentTheme === LIGHT ? DARK : LIGHT,
+      { classList } = document.querySelector('html'),
+      text = newTheme === LIGHT ? light : dark;
+    classList.remove(currentTheme);
+    classList.add(newTheme);
+    localStorage.theme = newTheme;
+    themeSwitcher.innerHTML = text;
+  })
+});