feat(www): YEAH!

8 files changed, 502 insertions, 0 deletions

diff --git a/www/assets/base-style.css b/www/assets/base-style.css
new file mode 100644
index 0000000..4ee87d6
--- /dev/null
+++ b/www/assets/base-style.css
@@ -0,0 +1,115 @@
+html {
+  width: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+  --fg-color: black;
+  --bg-color: white;
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+}
+
+.mono {
+  font-family: monospace;
+}
+
+a.mono-link,
+.mono-link a,
+.mono-link .fake-link {
+  font-family: monospace;
+}
+
+.toast {
+  font-size: large;
+  font-family: monospace;
+  color: var(--bg-color);
+  background-color: var(--fg-color);
+  padding: 0.5em 0.3em;
+  border-radius: 6px;
+
+  position: fixed;
+  z-index: 1;
+  top: 4px;
+  left: 50vw;
+  transform: translateX(-50%);
+}
+
+.chroma {
+  overflow-x: scroll;
+  padding-left: 1px;
+  padding-right: 4px;
+  border-radius: 3px;
+}
+
+nav {
+  font-size: large;
+}
+
+#slogan {
+  color: white;
+  width: 100%;
+  padding: 0.5em 1em;
+  text-align: center;
+  background-color: dodgerblue;
+  user-select: none;
+
+  & > * {
+    user-select: text;
+  }
+}
+
+#main-article {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 880px;
+  padding: 0 1em;
+  margin-top: 1em;
+}
+
+#license a {
+  font-family: initial;
+  text-decoration: none;
+}
+
+#license-text {
+  font-family: monospace;
+  text-decoration: initial;
+}
+
+#license-img-container img {
+  height: 1em;
+  vertical-align: middle;
+}
+
+body[data-theme="dark"] {
+  --fg-color: white;
+  --bg-color: black;
+
+  & a:link {
+    color:#34ffd9;
+  }
+
+  & a:visited {
+    color:#abcac4;
+  }
+
+  & #slogan {
+    color: var(--fg-color);
+    background-color: midnightblue;
+  }
+
+  & :is(.chroma,.chroma *) {
+    background-color: hsl(0, 0%, 1.5%);
+
+    & .n {
+      color: var(--fg-color);
+    }
+  }
+}
diff --git a/www/assets/catppuccin-latte.css b/www/assets/catppuccin-latte.css
new file mode 100644
index 0000000..00c0669
--- /dev/null
+++ b/www/assets/catppuccin-latte.css
@@ -0,0 +1,88 @@
+/* Generated using: hugo gen chromastyles --style=catppuccin-latte */
+
+/* Background */ .bg { color:#4c4f69;background-color:#eff1f5; }
+/* PreWrapper */ .chroma { color:#4c4f69;background-color:#eff1f5; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color:#d20f39 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+/* LineHighlight */ .chroma .hl { background-color:#bcc0cc }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#8c8fa1 }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#8c8fa1 }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#8839ef }
+/* KeywordConstant */ .chroma .kc { color:#fe640b }
+/* KeywordDeclaration */ .chroma .kd { color:#d20f39 }
+/* KeywordNamespace */ .chroma .kn { color:#179299 }
+/* KeywordPseudo */ .chroma .kp { color:#8839ef }
+/* KeywordReserved */ .chroma .kr { color:#8839ef }
+/* KeywordType */ .chroma .kt { color:#d20f39 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color:#1e66f5 }
+/* NameBuiltin */ .chroma .nb { color:#04a5e5 }
+/* NameBuiltinPseudo */ .chroma .bp { color:#04a5e5 }
+/* NameClass */ .chroma .nc { color:#df8e1d }
+/* NameConstant */ .chroma .no { color:#df8e1d }
+/* NameDecorator */ .chroma .nd { color:#1e66f5;font-weight:bold }
+/* NameEntity */ .chroma .ni { color:#179299 }
+/* NameException */ .chroma .ne { color:#fe640b }
+/* NameFunction */ .chroma .nf { color:#1e66f5 }
+/* NameFunctionMagic */ .chroma .fm { color:#1e66f5 }
+/* NameLabel */ .chroma .nl { color:#04a5e5 }
+/* NameNamespace */ .chroma .nn { color:#fe640b }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color:#fe640b }
+/* NameTag */ .chroma .nt { color:#8839ef }
+/* NameVariable */ .chroma .nv { color:#dc8a78 }
+/* NameVariableClass */ .chroma .vc { color:#dc8a78 }
+/* NameVariableGlobal */ .chroma .vg { color:#dc8a78 }
+/* NameVariableInstance */ .chroma .vi { color:#dc8a78 }
+/* NameVariableMagic */ .chroma .vm { color:#dc8a78 }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color:#40a02b }
+/* LiteralStringAffix */ .chroma .sa { color:#d20f39 }
+/* LiteralStringBacktick */ .chroma .sb { color:#40a02b }
+/* LiteralStringChar */ .chroma .sc { color:#40a02b }
+/* LiteralStringDelimiter */ .chroma .dl { color:#1e66f5 }
+/* LiteralStringDoc */ .chroma .sd { color:#9ca0b0 }
+/* LiteralStringDouble */ .chroma .s2 { color:#40a02b }
+/* LiteralStringEscape */ .chroma .se { color:#1e66f5 }
+/* LiteralStringHeredoc */ .chroma .sh { color:#9ca0b0 }
+/* LiteralStringInterpol */ .chroma .si { color:#40a02b }
+/* LiteralStringOther */ .chroma .sx { color:#40a02b }
+/* LiteralStringRegex */ .chroma .sr { color:#179299 }
+/* LiteralStringSingle */ .chroma .s1 { color:#40a02b }
+/* LiteralStringSymbol */ .chroma .ss { color:#40a02b }
+/* LiteralNumber */ .chroma .m { color:#fe640b }
+/* LiteralNumberBin */ .chroma .mb { color:#fe640b }
+/* LiteralNumberFloat */ .chroma .mf { color:#fe640b }
+/* LiteralNumberHex */ .chroma .mh { color:#fe640b }
+/* LiteralNumberInteger */ .chroma .mi { color:#fe640b }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#fe640b }
+/* LiteralNumberOct */ .chroma .mo { color:#fe640b }
+/* Operator */ .chroma .o { color:#04a5e5;font-weight:bold }
+/* OperatorWord */ .chroma .ow { color:#04a5e5;font-weight:bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color:#9ca0b0;font-style:italic }
+/* CommentHashbang */ .chroma .ch { color:#9ca0b0;font-style:italic }
+/* CommentMultiline */ .chroma .cm { color:#9ca0b0;font-style:italic }
+/* CommentSingle */ .chroma .c1 { color:#9ca0b0;font-style:italic }
+/* CommentSpecial */ .chroma .cs { color:#9ca0b0;font-style:italic }
+/* CommentPreproc */ .chroma .cp { color:#9ca0b0;font-style:italic }
+/* CommentPreprocFile */ .chroma .cpf { color:#9ca0b0;font-weight:bold;font-style:italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color:#d20f39;background-color:#ccd0da }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr { color:#d20f39 }
+/* GenericHeading */ .chroma .gh { color:#fe640b;font-weight:bold }
+/* GenericInserted */ .chroma .gi { color:#40a02b;background-color:#ccd0da }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:#fe640b;font-weight:bold }
+/* GenericTraceback */ .chroma .gt { color:#d20f39 }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* TextWhitespace */ .chroma .w {  }
diff --git a/www/assets/catppuccin-mocha.css b/www/assets/catppuccin-mocha.css
new file mode 100644
index 0000000..4d9a04c
--- /dev/null
+++ b/www/assets/catppuccin-mocha.css
@@ -0,0 +1,88 @@
+/* Generated using: hugo gen chromastyles --style=catppuccin-mocha */
+
+/* Background */ .bg { color:#cdd6f4;background-color:#1e1e2e; }
+/* PreWrapper */ .chroma { color:#cdd6f4;background-color:#1e1e2e; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color:#f38ba8 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+/* LineHighlight */ .chroma .hl { background-color:#45475a }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f849c }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f849c }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#cba6f7 }
+/* KeywordConstant */ .chroma .kc { color:#fab387 }
+/* KeywordDeclaration */ .chroma .kd { color:#f38ba8 }
+/* KeywordNamespace */ .chroma .kn { color:#94e2d5 }
+/* KeywordPseudo */ .chroma .kp { color:#cba6f7 }
+/* KeywordReserved */ .chroma .kr { color:#cba6f7 }
+/* KeywordType */ .chroma .kt { color:#f38ba8 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color:#89b4fa }
+/* NameBuiltin */ .chroma .nb { color:#89dceb }
+/* NameBuiltinPseudo */ .chroma .bp { color:#89dceb }
+/* NameClass */ .chroma .nc { color:#f9e2af }
+/* NameConstant */ .chroma .no { color:#f9e2af }
+/* NameDecorator */ .chroma .nd { color:#89b4fa;font-weight:bold }
+/* NameEntity */ .chroma .ni { color:#94e2d5 }
+/* NameException */ .chroma .ne { color:#fab387 }
+/* NameFunction */ .chroma .nf { color:#89b4fa }
+/* NameFunctionMagic */ .chroma .fm { color:#89b4fa }
+/* NameLabel */ .chroma .nl { color:#89dceb }
+/* NameNamespace */ .chroma .nn { color:#fab387 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color:#fab387 }
+/* NameTag */ .chroma .nt { color:#cba6f7 }
+/* NameVariable */ .chroma .nv { color:#f5e0dc }
+/* NameVariableClass */ .chroma .vc { color:#f5e0dc }
+/* NameVariableGlobal */ .chroma .vg { color:#f5e0dc }
+/* NameVariableInstance */ .chroma .vi { color:#f5e0dc }
+/* NameVariableMagic */ .chroma .vm { color:#f5e0dc }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color:#a6e3a1 }
+/* LiteralStringAffix */ .chroma .sa { color:#f38ba8 }
+/* LiteralStringBacktick */ .chroma .sb { color:#a6e3a1 }
+/* LiteralStringChar */ .chroma .sc { color:#a6e3a1 }
+/* LiteralStringDelimiter */ .chroma .dl { color:#89b4fa }
+/* LiteralStringDoc */ .chroma .sd { color:#6c7086 }
+/* LiteralStringDouble */ .chroma .s2 { color:#a6e3a1 }
+/* LiteralStringEscape */ .chroma .se { color:#89b4fa }
+/* LiteralStringHeredoc */ .chroma .sh { color:#6c7086 }
+/* LiteralStringInterpol */ .chroma .si { color:#a6e3a1 }
+/* LiteralStringOther */ .chroma .sx { color:#a6e3a1 }
+/* LiteralStringRegex */ .chroma .sr { color:#94e2d5 }
+/* LiteralStringSingle */ .chroma .s1 { color:#a6e3a1 }
+/* LiteralStringSymbol */ .chroma .ss { color:#a6e3a1 }
+/* LiteralNumber */ .chroma .m { color:#fab387 }
+/* LiteralNumberBin */ .chroma .mb { color:#fab387 }
+/* LiteralNumberFloat */ .chroma .mf { color:#fab387 }
+/* LiteralNumberHex */ .chroma .mh { color:#fab387 }
+/* LiteralNumberInteger */ .chroma .mi { color:#fab387 }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#fab387 }
+/* LiteralNumberOct */ .chroma .mo { color:#fab387 }
+/* Operator */ .chroma .o { color:#89dceb;font-weight:bold }
+/* OperatorWord */ .chroma .ow { color:#89dceb;font-weight:bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color:#6c7086;font-style:italic }
+/* CommentHashbang */ .chroma .ch { color:#6c7086;font-style:italic }
+/* CommentMultiline */ .chroma .cm { color:#6c7086;font-style:italic }
+/* CommentSingle */ .chroma .c1 { color:#6c7086;font-style:italic }
+/* CommentSpecial */ .chroma .cs { color:#6c7086;font-style:italic }
+/* CommentPreproc */ .chroma .cp { color:#6c7086;font-style:italic }
+/* CommentPreprocFile */ .chroma .cpf { color:#6c7086;font-weight:bold;font-style:italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color:#f38ba8;background-color:#313244 }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr { color:#f38ba8 }
+/* GenericHeading */ .chroma .gh { color:#fab387;font-weight:bold }
+/* GenericInserted */ .chroma .gi { color:#a6e3a1;background-color:#313244 }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:#fab387;font-weight:bold }
+/* GenericTraceback */ .chroma .gt { color:#f38ba8 }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* TextWhitespace */ .chroma .w {  }
diff --git a/www/assets/color-scheme.ts b/www/assets/color-scheme.ts
new file mode 100644
index 0000000..62a1b5c
--- /dev/null
+++ b/www/assets/color-scheme.ts
@@ -0,0 +1,90 @@
+const key = "color-scheme"
+
+type scheme = "dark" | "light" | null
+
+function createResetTimer(cleanup: () => void, timeout = 1) {
+  let tag = 0
+  return () => {
+    clearTimeout(tag)
+    tag = setTimeout(() => {
+      cleanup()
+    }, timeout * 1000)
+  }
+}
+
+let current = localStorage.getItem(key) as scheme
+
+let inited = false
+
+function createToast(duration: number = 1): (text: string) => void {
+  const toast = document.createElement("div")
+  toast.className = "toast"
+
+  const reset = createResetTimer(() => {
+      toast.remove()
+  }, duration)
+
+  return (text) => {
+    if (!toast.isConnected) {
+      document.body.appendChild(toast)
+    }
+    toast.textContent = text
+    reset()
+  }
+}
+
+const themeToast = createToast()
+
+function setTheme(value: scheme) {
+  let message = ""
+  current = value
+
+  if (value == null) {
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+    value = prefersDarkScheme ? "dark" : "light"
+    message = `theme: system(${value})`
+    localStorage.removeItem(key)
+  } else {
+    message = `theme: force(${value})`
+    localStorage.setItem(key, value)
+  }
+
+  document.body.dataset["theme"] = value
+
+  if (inited) {
+    themeToast(message)
+  }
+}
+
+setTheme(current)
+inited = true
+
+function next(scheme: scheme): scheme {
+  switch (scheme) {
+    case "dark":
+      return "light"
+    case "light":
+      return null
+    default:
+      return "dark"
+  }
+}
+
+window.addEventListener("load", () => {
+  const slogon = document.getElementById("slogan")!
+  let clicks: number = 0
+
+  const reset = createResetTimer(() => {
+    clicks = 0
+  })
+
+  slogon.addEventListener("click", () => {
+    reset()
+    clicks += 1
+    if (clicks === 3) {
+      setTheme(next(current))
+      clicks = 0
+    }
+  })
+})
+
diff --git a/www/assets/github-mark.png b/www/assets/github-mark.png
new file mode 100644
index 0000000..6cb3b70
--- /dev/null
+++ b/www/assets/github-mark.png
diff --git a/www/assets/partials/preview/article.css b/www/assets/partials/preview/article.css
new file mode 100644
index 0000000..6e93669
--- /dev/null
+++ b/www/assets/partials/preview/article.css
@@ -0,0 +1,42 @@
+.article-preview {
+  font-size: 0.95em;
+  padding-inline: 0.5em;
+  padding-block: 0.5em;
+  margin-block-end: 0.5em;
+  border-radius: 3px;
+  background-color: hsl(33, 100%, 98%);
+
+  & > p {
+    font-size: 0.9em;
+    line-height: 1.4;
+    margin-inline-start: 0.3em;
+    margin-block: 0;
+  }
+
+  & > .title {
+    margin-block-start: 0;
+    margin-block-end: 0.3em;
+  }
+
+  & > .date {
+    font-size: small;
+    float: right;
+    margin-inline-end: 1.5em;
+    color: hsl(0, 0%, 25%);
+  }
+
+  & > .content {
+    overflow: hidden;
+    height: 3lh;
+  }
+}
+
+body[data-theme="dark"]  {
+  & .article-preview {
+    background-color: hsl(0, 0%, 3%);
+
+    & > .date {
+      color: hsl(0, 0%, 75%);
+    }
+  }
+}
diff --git a/www/assets/real-home.css b/www/assets/real-home.css
new file mode 100644
index 0000000..c1355b5
--- /dev/null
+++ b/www/assets/real-home.css
@@ -0,0 +1,61 @@
+#slogan {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+}
+
+#title-name {
+  font-family: monospace;
+  color: var(--bg-color);
+  background-color: var(--fg-color);
+}
+
+#avatar {
+  float: right;
+}
+
+#recent-posts {
+  margin-block-end: 1.5em;
+}
+
+#friends-container {
+  display: flex;
+  gap: 1em;
+}
+
+.friend {
+  flex-grow: 0;
+  text-align: center;
+}
+
+.friend a {
+  font-family: unset;
+}
+
+.friend-avatar {
+  object-fit: cover;
+}
+
+.friend-github {
+  width: 1em;
+  vertical-align: middle;
+  margin-right: -0.5em;
+}
+
+.friend-tag {
+  font-size: 0.8em;
+}
+
+.citation {
+  margin: auto;
+}
+
+.citation figcaption {
+  text-align: right;
+}
+
+body[data-theme="dark"] {
+  & .friend-github {
+    filter: invert(1);
+  }
+}
diff --git a/www/assets/single.css b/www/assets/single.css
new file mode 100644
index 0000000..09a0e29
--- /dev/null
+++ b/www/assets/single.css
@@ -0,0 +1,18 @@
+.post-info {
+  margin-block: 0;
+  font-size: 0.9em;
+  display: flex;
+  flex-wrap: wrap;
+
+  & > .created {
+    margin-inline-end: auto;
+  }
+}
+
+.end-hr {
+  border: none;
+  width: 8em;
+  margin-block-start: 1.5em;
+  margin-inline-start: 0;
+  border-top: 1px dashed black;
+}