hexo-theme-gnix 9.0.0 → 10.0.0

package/source/css/default.css

@@ -1,22 +1,92 @@
 @charset "UTF-8";
 
 :root {
-  --subtext1: color-mix(in oklch, var(--text) 90%, var(--mantle));
-  --subtext0: color-mix(in oklch, var(--text) 80%, var(--mantle));
+  /* color */
+  --subtext1: color-mix(in oklch, var(--text) 90%, var(--base));
+  --subtext0: color-mix(in oklch, var(--text) 80%, var(--base));
   --surface0: color-mix(in oklch, var(--base) 80%, var(--text));
   --surface1: color-mix(in oklch, var(--base) 78%, var(--text));
   --surface2: color-mix(in oklch, var(--base) 67%, var(--text));
   --overlay0: color-mix(in oklch, var(--base) 56%, var(--text));
   --overlay1: color-mix(in oklch, var(--base) 45%, var(--text));
   --overlay2: color-mix(in oklch, var(--base) 34%, var(--text));
-
-  --font-serif: New York, Georgia, Noto Serif CJK, STFangsong, STSong, Songti SC, serif;
-  --font-sans-serif: system-ui, sans-serif;
+  /* font */
+  --font-serif: Gentium, ChillKai, Baskerville, New York, Georgia, Noto Serif CJK, STFangsong, STSong, Songti SC, serif;
+  --font-sans-serif: Avenir, system-ui, sans-serif;
   --font-mono: "SF Mono", "Maple Mono NF CN Local", "Maple Mono NF CN", Monaco, Consolas, monospace;
-  --font-handwriting: "Bradley Hand", "homemade-apple", cursive;
+  --font-handwriting: "Bradley Hand", "homemade-apple", XingKai SC, cursive;
+  --article-font-size: 1rem;
+  --article-font-family: var(--font-serif);
+  --article-line-height: 1.7;
+  --article-font-weight: 400;
+  --article-bold-font-weight: 700;
+  /* misc */
   --radius: 12px;
 }
 
+:root[data-article-font-size="small"] {
+  --article-font-size: 0.875rem;
+}
+
+:root[data-article-font-size="medium-small"] {
+  --article-font-size: 0.9375rem;
+}
+
+:root[data-article-font-size="medium"] {
+  --article-font-size: 1rem;
+}
+
+:root[data-article-font-size="medium-large"] {
+  --article-font-size: 1.0625rem;
+}
+
+:root[data-article-font-size="large"] {
+  --article-font-size: 1.125rem;
+}
+
+:root[data-article-font-family="serif"] {
+  --article-font-family: var(--font-serif);
+}
+
+:root[data-article-font-family="sans-serif"] {
+  --article-font-family: var(--font-sans-serif);
+}
+
+:root[data-article-font-family="mono"] {
+  --article-font-family: var(--font-mono);
+}
+
+:root[data-article-font-family="handwriting"] {
+  --article-font-family: var(--font-handwriting);
+}
+
+:root[data-article-line-height="compact"] {
+  --article-line-height: 1.55;
+}
+
+:root[data-article-line-height="normal"] {
+  --article-line-height: 1.7;
+}
+
+:root[data-article-line-height="relaxed"] {
+  --article-line-height: 1.85;
+}
+
+:root[data-article-font-weight="light"] {
+  --article-font-weight: 300;
+  --article-bold-font-weight: 700;
+}
+
+:root[data-article-font-weight="regular"] {
+  --article-font-weight: 400;
+  --article-bold-font-weight: 700;
+}
+
+:root[data-article-font-weight="medium"] {
+  --article-font-weight: 500;
+  --article-bold-font-weight: 700;
+}
+
 /* #region Color */
 :where([data-theme="latte"]) {
   color-scheme: light;
@@ -84,6 +154,28 @@
   --crust: #d8dee9;
 }
 
+:where([data-theme="song_ci"]) {
+  color-scheme: light;
+  --rosewater: #d8a48f;
+  --flamingo: #c87363;
+  --pink: #c04851;
+  --mauve: #7f5a83;
+  --red: #b13a2e;
+  --maroon: #9a3f3f;
+  --peach: #d68a3a;
+  --yellow: #c99a2e;
+  --green: #5f8f6f;
+  --teal: #2f7d73;
+  --sky: #73a6a1;
+  --sapphire: #2d6f8f;
+  --blue: #2f5597;
+  --lavender: #6f6a9f;
+  --text: #0f4c20;
+  --base: #f4efe3;
+  --mantle: #f1efea;
+  --crust: #c4d1b5;
+}
+
 :where([data-theme="mocha"]) {
   color-scheme: dark;
   --rosewater: #f5e0dc;
@@ -162,15 +254,9 @@ body {
   font-family: var(--font-sans-serif);
 }
 
-.article-licensing {
-  color: var(--subtext1);
-  border-top: 0.1px dashed var(--surface0);
-}
-
 .navbar-main,
 .navbar-menu {
   user-select: none;
-  background: var(--mantle);
 }
 
 .task-list-item-checkbox {
@@ -219,6 +305,133 @@ hr {
 
 /* #region Font */
 
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/bold-italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/book.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 450;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/book-bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 450;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/book-bold-italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 450;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/book-italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 450;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/book-medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/book-medium-italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/book-semi-bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/book-semi-bold-italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/extra-bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/extra-bold-italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/medium-italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/main.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/semi-bold-italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gentium";
+  src: url("https://fontsapi.zeoseven.com/2105/semi-bold.ttf.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}
+
 @font-face {
   font-family: "Maple Mono NF CN Local";
   font-weight: 100 900;
@@ -301,6 +514,7 @@ html {
   min-width: 300px;
   overflow-x: hidden;
   overflow-y: scroll;
+  /* scroll-behavior: smooth; */
 }
 
 .card {
@@ -322,9 +536,18 @@ html {
   left: 0;
   right: 0;
   z-index: 100;
+  background: var(--mantle);
   border-bottom: 0.5px solid var(--surface0);
 }
 
+@media screen and (min-width: 1024px) {
+  .navbar {
+    -webkit-backdrop-filter: blur(18px) saturate(1.35);
+    backdrop-filter: blur(18px) saturate(1.35);
+    background: hsl(from var(--mantle) h s l / 0.75);
+  }
+}
+
 .navbar-container {
   flex-grow: 1;
   margin: 0 auto;
@@ -344,13 +567,32 @@ html {
 }
 
 .navbar-item {
-  color: var(--subtext1);
+  color: var(--subtext0);
   align-items: center;
   display: flex;
   padding: 0 0.5rem;
   position: relative;
   flex-grow: 0;
   flex-shrink: 0;
+  letter-spacing: 0.05em;
+  transition: color 0.18s ease;
+}
+
+.navbar-start .navbar-item.is-active {
+  color: var(--text);
+  font-weight: 500;
+}
+
+.navbar-start .navbar-item.is-active::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0.875rem;
+  width: 1.45em;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.36;
+  transform: translateX(-50%);
 }
 
 .navbar-end {
@@ -387,11 +629,10 @@ html {
   color: var(--text);
   padding: 0.75rem 1.25rem;
   cursor: pointer;
-  font-size: 2rem;
-  font-family: system-ui;
-  font-variation-settings:
-    "wght" 200,
-    "wdth" 400;
+  font-size: clamp(1.35rem, 2vw, 2rem);
+  letter-spacing: clamp(0.1em, 0.3vw, 0.3em);
+  font-family: "Bradley Hand", var(--font-serif);
+  font-style: italic;
 
   &.is-focused,
   &:hover {
@@ -411,7 +652,8 @@ html {
   align-items: center;
   display: flex;
   text-align: center;
-  font-family: var(--font-mono);
+  font-family: var(--font-serif);
+  font-style: italic;
 }
 
 .pagination-link.is-current {
@@ -425,7 +667,7 @@ html {
 .pagination-previous {
   user-select: none;
   color: var(--subtext0);
-  padding: 0 0.5em;
+  padding: 0 1rem;
   display: inline-flex;
   min-width: 1.5em;
 }
@@ -539,11 +781,15 @@ html {
 
 .footer-title {
   font-family: homemade-apple, var(--font-handwriting);
+  font-weight: bolder;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
 }
 
-.footer-title,
 .footer-heading {
   font-weight: bolder;
+  font-family: var(--font-serif);
+  font-style: italic;
   font-size: 1.1rem;
   margin-bottom: 0.25rem;
 }
@@ -566,11 +812,6 @@ html {
   align-items: center;
   gap: 0.4rem;
   color: var(--subtext0);
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 /* #endregion Footer */
@@ -584,7 +825,6 @@ html {
 .content {
   overflow: auto;
   word-wrap: break-word;
-  font-size: 1rem;
   color: var(--subtext1);
 
   ::selection {
@@ -595,7 +835,8 @@ html {
 
   a.header-anchor {
     color: var(--text);
-    font-family: var(--font-serif);
+    font-family: var(--article-font-family);
+    text-decoration: none;
     &::after {
       margin-left: 0.4em;
       opacity: 0;
@@ -610,15 +851,16 @@ html {
 
   sup.footnote-ref > a,
   li.footnote-item,
-  a.footnote-backref,
-  a.header-anchor,
   h2,
   h3,
   h4,
   h5,
   h6 {
     scroll-margin-top: 5rem;
-    scroll-behavior: smooth;
+  }
+
+  .footnote-ref > a,
+  .footnote-backref {
     text-decoration: none;
   }
 
@@ -691,7 +933,7 @@ html {
   pre,
   details {
     margin-bottom: 1.5rem;
-    line-height: 1.7;
+    line-height: var(--article-line-height);
   }
 
   li {
@@ -777,6 +1019,66 @@ html {
     margin-bottom: 1rem;
   }
 
+  .ratex {
+    max-width: 100%;
+    line-height: 0;
+    color: var(--text);
+
+    svg {
+      display: block;
+      flex: 0 0 auto;
+      fill: currentColor;
+
+      [fill] {
+        fill: currentColor !important;
+      }
+
+      [stroke] {
+        stroke: currentColor !important;
+      }
+    }
+  }
+
+  .ratex-inline {
+    display: inline-flex;
+    align-items: center;
+    max-width: min(100%, 22em);
+    margin: 0 0.08em;
+    overflow-x: auto;
+    overflow-y: hidden;
+    vertical-align: -0.32em;
+
+    svg {
+      width: auto;
+      max-width: none;
+      height: 1.42em;
+    }
+    /* 分数 */
+    &:has(rect) {
+      vertical-align: -0.45em;
+      svg {
+        height: 2em;
+      }
+    }
+  }
+
+  .ratex-display {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    max-width: 100%;
+    margin: 1.5rem 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    svg {
+      width: auto;
+      height: auto;
+      max-width: min(100%, calc(100vw - 2.5rem));
+      max-height: min(4.5em, 20vh);
+    }
+  }
+
   pre {
     overflow-x: auto;
     font-size: 0.85em;
@@ -811,16 +1113,47 @@ html {
 
   a {
     text-decoration: underline;
-    text-decoration-color: var(--subtext1);
+    text-underline-offset: 3.5px;
+    text-decoration-thickness: 1px;
+    text-decoration-color: hsl(from var(--lavender) h s l / 0.8);
     color: var(--text);
     &:hover {
+      text-decoration-color: var(--blue);
       text-decoration-thickness: 2px;
     }
   }
+
+  aside {
+    display: block;
+    margin: 1.5rem 0;
+    padding: 0.4rem 0 0.4rem 1rem;
+    color: var(--subtext0);
+    font-size: 0.875em;
+    line-height: 1.55;
+    border-left: 2px solid var(--surface1);
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+article.card-content .content {
+  font-size: var(--article-font-size);
+  font-family: var(--article-font-family);
+  line-height: var(--article-line-height);
+  font-weight: var(--article-font-weight);
+}
+
+article.card-content .content :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
+  font-weight: var(--article-bold-font-weight);
 }
 
 .footnotes {
-  font-family: var(--font-serif);
   font-size: 0.9em;
 }
 
@@ -862,6 +1195,8 @@ blockquote {
   margin: 1.5rem 0;
   border-left: 2px solid var(--red);
   font-family: Georgia, Kai, var(--font-serif);
+  font-style: italic;
+  font-synthesis: none;
 
   &:before {
     content: "”";
@@ -967,15 +1302,12 @@ section {
   display: block;
 }
 
-.article:has(.article-licensing) {
-  padding-bottom: 0 !important;
-}
-
 /* #region Article Meta*/
 
 .article-title {
+  font-family: var(--article-font-family);
   font-size: 1.75em;
-  font-family: var(--font-serif);
+  font-weight: 500;
   line-height: 1.2;
   margin-bottom: 0.3em;
   text-wrap: balance;
@@ -1030,8 +1362,12 @@ section {
   }
 }
 
-.article-excerpt {
+em,
+.article-excerpt,
+.footnotes {
   font-family: var(--font-serif);
+  font-style: italic;
+  font-synthesis: none;
 }
 
 .article-tags {
@@ -1051,80 +1387,776 @@ section {
   }
 }
 
-/* #endregion Article Meta */
-
-/* #region Licensing */
-
-.article-licensing {
-  display: block;
-  position: relative;
-  margin: 2rem -1.25rem 0 -1.25rem;
-  padding: 1.25rem;
-  z-index: 0;
-  border-radius: 0 0 24px 24px;
-  overflow: hidden;
-  justify-content: space-between;
+.article-footer.article-meta-bar {
+  margin-bottom: 1rem;
 }
 
-.article-licensing-bg-icon {
-  position: absolute;
-  z-index: -1;
-  right: -50px;
-  top: -88px;
-  font-size: 200px;
-  opacity: 0.1;
-  pointer-events: none;
+.article-title-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
 }
 
-.licensing-title {
-  margin-bottom: 0.75rem;
-  line-height: 1.2;
+.article-action-btn {
+  display: inline-flex;
+  width: 1.5rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--subtext1);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--mauve);
+  }
+
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
 }
 
-.licensing-title p:not(:last-child) {
-  margin-bottom: 0.25rem;
+.article-popover {
+  padding: 0;
 }
 
-.licensing-meta {
-  .level-item p {
-    margin-right: 1.5rem;
-    margin-bottom: 0;
-    font-size: 0.7rem;
+.article-popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--surface0);
+
+  h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0;
+    color: var(--text);
   }
+}
 
-  iconify-icon {
-    font-size: 1.5em;
-    vertical-align: bottom;
+.article-popover-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--subtext0);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--text);
+    background-color: var(--surface0);
   }
 
-  a {
-    color: inherit;
+  &:focus-visible {
+    outline: 2px solid var(--mauve);
+    outline-offset: 2px;
   }
 }
 
-/* #endregion Licensing */
+.article-popover-body {
+  padding: 1.25rem;
+  max-height: 70vh;
+  overflow-y: auto;
+}
 
-/* #region Search */
+.language-switch-popover {
+  width: min(24rem, 90vw);
+}
 
-input.searchbox-input {
-  color: inherit;
-  background-color: inherit;
-  font-family: inherit;
-  border: none;
-  outline: 0;
-  flex-grow: 1;
-  box-sizing: border-box;
-  padding: 0.75em 0 0.75em 1.25em;
+.language-switch-popover-body {
+  p {
+    margin: 0;
+    color: var(--subtext1);
+    line-height: 1.7;
+  }
 }
 
-.searchbox,
-.searchbox-container {
-  align-items: center;
-  flex-direction: column;
-  line-height: 1.25em;
+.language-switch-popover-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
 }
 
-.searchbox-container {
+.language-switch-popover-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.25rem;
+  padding: 0.4rem 0.85rem;
+  border: 1px solid var(--surface1);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+  line-height: 1.2;
+
+  &:hover {
+    border-color: var(--mauve);
+    color: var(--mauve);
+  }
+
+  &.is-primary {
+    border-color: var(--blue);
+    background: var(--blue);
+    color: var(--base);
+
+    &:hover {
+      border-color: var(--mauve);
+      background: var(--mauve);
+      color: var(--base);
+    }
+  }
+}
+
+.font-settings-column,
+.font-preview-column {
+  min-width: 0;
+}
+
+.font-setting-group {
+  margin-bottom: 1.25rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.font-setting-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--subtext1);
+  margin-bottom: 0.75rem;
+}
+
+.font-size-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.font-size-btn {
+  --font-size-preview: 16px;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 3em;
+  padding: 0;
+  background: transparent;
+  color: var(--subtext0);
+  border: 1px solid transparent;
+  cursor: pointer;
+
+  &.is-active,
+  &:hover {
+    border-color: var(--mauve);
+    border-radius: 100px;
+    color: var(--mauve);
+    background-color: hsl(from var(--mauve) h s l / 0.08);
+  }
+}
+
+.font-size-btn[data-size="small"] {
+  --font-size-preview: 12px;
+}
+
+.font-size-btn[data-size="medium-small"] {
+  --font-size-preview: 14px;
+}
+
+.font-size-btn[data-size="medium"] {
+  --font-size-preview: 16px;
+}
+
+.font-size-btn[data-size="medium-large"] {
+  --font-size-preview: 18px;
+}
+
+.font-size-btn[data-size="large"] {
+  --font-size-preview: 20px;
+}
+
+.font-size-preview {
+  font-size: var(--font-size-preview);
+  font-weight: 500;
+}
+
+.font-weight-selector {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  padding: 0.25rem;
+  background: hsl(from var(--surface0) h s l / 0.35);
+  border: 1px solid var(--surface0);
+  border-radius: 14px;
+}
+
+.font-weight-btn {
+  --font-weight-preview: 400;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 3rem;
+  padding: 0.625rem 0.5rem;
+  background: transparent;
+  color: var(--subtext0);
+  border: none;
+  border-radius: 10px;
+  font-weight: var(--font-weight-preview);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--text);
+    background-color: hsl(from var(--surface1) h s l / 0.55);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mauve);
+    outline-offset: 2px;
+  }
+
+  &.is-active {
+    color: var(--mauve);
+    background-color: hsl(from var(--mauve) h s l / 0.08);
+    box-shadow: inset 0 0 0 1px hsl(from var(--mauve) h s l / 0.28);
+  }
+}
+
+.font-line-height-control {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0.875rem;
+  background: hsl(from var(--surface0) h s l / 0.35);
+  border: 1px solid var(--surface0);
+  border-radius: 12px;
+}
+
+.font-line-height-slider {
+  width: 100%;
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  height: 1.5rem;
+  background: transparent;
+  accent-color: var(--mauve);
+  cursor: pointer;
+}
+
+.font-line-height-slider::-webkit-slider-runnable-track {
+  height: 0.35rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, hsl(from var(--mauve) h s l / 0.92), hsl(from var(--surface0) h s l / 0.65));
+}
+
+.font-line-height-slider::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  margin-top: calc((0.35rem - 1rem) / 2);
+  border: 2px solid var(--mantle);
+  border-radius: 50%;
+  background: var(--mauve);
+  box-shadow: 0 0 0 1px hsl(from var(--mauve) h s l / 0.22);
+}
+
+.font-line-height-slider::-moz-range-track {
+  height: 0.35rem;
+  border: none;
+  border-radius: 999px;
+  background: linear-gradient(90deg, hsl(from var(--mauve) h s l / 0.92), hsl(from var(--surface0) h s l / 0.65));
+}
+
+.font-line-height-slider::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--mantle);
+  border-radius: 50%;
+  background: var(--mauve);
+  box-shadow: 0 0 0 1px hsl(from var(--mauve) h s l / 0.22);
+}
+
+.font-line-height-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--subtext0);
+  white-space: nowrap;
+}
+
+.font-line-height-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--subtext0);
+  padding-inline: 0.125rem;
+}
+
+.font-line-height-value {
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.font-weight-btn[data-weight="light"] {
+  --font-weight-preview: 300;
+}
+
+.font-weight-btn[data-weight="regular"] {
+  --font-weight-preview: 400;
+}
+
+.font-weight-btn[data-weight="medium"] {
+  --font-weight-preview: 500;
+}
+
+.font-option-name {
+  max-width: 100%;
+  font-size: 0.8125rem;
+  line-height: 1.2;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.font-custom-form {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.font-custom-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.5rem 0;
+  background: transparent;
+  border: 0;
+  color: var(--text);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+
+.font-custom-toggle-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.95rem;
+  height: 0.95rem;
+  color: var(--subtext0);
+  line-height: 1;
+  transform: rotate(0deg);
+  transform-origin: 50% 50%;
+  transition:
+    transform 0.18s ease,
+    color 0.18s ease;
+}
+
+.font-custom-toggle-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.font-custom-toggle:hover .font-custom-toggle-icon,
+.font-custom-toggle[aria-expanded="true"] .font-custom-toggle-icon {
+  color: var(--mauve);
+}
+
+.font-custom-toggle[aria-expanded="true"] .font-custom-toggle-icon {
+  transform: rotate(45deg);
+}
+
+.font-custom-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  gap: 0;
+  opacity: 0;
+  transform: translateY(-0.25rem);
+  transition:
+    grid-template-rows 0.24s ease,
+    opacity 0.2s ease,
+    transform 0.24s ease,
+    gap 0.24s ease;
+  overflow: hidden;
+}
+
+.font-custom-panel[data-expanded="true"] {
+  grid-template-rows: 1fr;
+  gap: 0.75rem;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.font-custom-panel-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.font-custom-label-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.font-custom-help-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  flex: 0 0 auto;
+  color: var(--subtext0);
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.font-custom-help-btn:hover,
+.font-custom-help-btn:focus-visible {
+  color: var(--mauve);
+}
+
+.font-custom-help-btn:focus-visible {
+  outline: 2px solid var(--mauve);
+  outline-offset: 2px;
+}
+
+.font-custom-help-popover {
+  max-width: min(22rem, calc(100vw - 2rem));
+  padding: 0.75rem 0.875rem;
+  color: var(--text);
+  background: var(--base);
+  border: 1px solid var(--surface0);
+  border-radius: 12px;
+  box-shadow:
+    0 18px 42px -24px rgba(0, 0, 0, 0.45),
+    0 0 0 1px hsl(from var(--surface0) h s l / 0.2);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
+.font-custom-help-popover:popover-open {
+  position: fixed;
+  inset: auto auto auto auto;
+  width: fit-content;
+  height: auto;
+  margin: 0;
+  background: var(--base);
+  backdrop-filter: none;
+  display: block;
+  z-index: 60;
+}
+
+.font-custom-field {
+  display: grid;
+  gap: 0.375rem;
+  min-width: 0;
+  color: var(--subtext0);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.font-custom-field :is(input, textarea) {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0.625rem 0.75rem;
+  color: var(--text);
+  background: hsl(from var(--surface0) h s l / 0.35);
+  border: 1px solid var(--surface0);
+  border-radius: 10px;
+  font: 0.8125rem / 1.45 var(--font-mono);
+  outline: none;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.font-custom-field textarea {
+  resize: vertical;
+}
+
+.font-custom-field :is(input, textarea)::placeholder {
+  color: var(--overlay1);
+}
+
+.font-custom-field :is(input, textarea):focus {
+  border-color: var(--mauve);
+  background: hsl(from var(--surface0) h s l / 0.52);
+  box-shadow: 0 0 0 3px hsl(from var(--mauve) h s l / 0.1);
+}
+
+.font-custom-family-grid {
+  display: grid;
+  gap: 0.625rem;
+}
+
+.font-custom-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.font-custom-actions button {
+  min-height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 10px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.font-custom-apply {
+  color: var(--base);
+  background: var(--mauve);
+  border: 1px solid var(--mauve);
+}
+
+.font-custom-apply:hover {
+  background: color-mix(in oklch, var(--mauve) 88%, var(--text));
+}
+
+.font-custom-reset {
+  color: var(--subtext0);
+  background: transparent;
+  border: 1px solid var(--surface0);
+}
+
+.font-custom-reset:hover {
+  color: var(--text);
+  border-color: var(--overlay0);
+  background: hsl(from var(--surface0) h s l / 0.45);
+}
+
+.font-type-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.font-type-btn {
+  --font-type-preview-family: var(--font-serif);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.875rem 0.5rem;
+  background: transparent;
+  border: 1.5px solid var(--surface0);
+  border-radius: 10px;
+  color: var(--subtext0);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: var(--overlay0);
+    color: var(--text);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mauve);
+    outline-offset: 2px;
+  }
+
+  &.is-active {
+    border-color: var(--mauve);
+    color: var(--mauve);
+    background-color: hsl(from var(--mauve) h s l / 0.08);
+  }
+}
+
+.font-type-btn[data-font="serif"] {
+  --font-type-preview-family: var(--font-serif);
+}
+
+.font-type-btn[data-font="sans-serif"] {
+  --font-type-preview-family: var(--font-sans-serif);
+}
+
+.font-type-btn[data-font="mono"] {
+  --font-type-preview-family: var(--font-mono);
+}
+
+.font-type-btn[data-font="handwriting"] {
+  --font-type-preview-family: var(--font-handwriting);
+}
+
+.font-type-preview {
+  font-size: 1.5rem;
+  font-family: var(--font-type-preview-family);
+  line-height: 1;
+}
+
+.font-type-name {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.font-preview-box {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  font-size: var(--article-font-size);
+  font-family: var(--article-font-family);
+  line-height: var(--article-line-height);
+  font-weight: var(--article-font-weight);
+  padding: 0.875rem 1rem;
+  background: var(--base);
+  border: 1px solid var(--surface0);
+  border-radius: 10px;
+
+  .font-preview-title {
+    font-size: 1.1em;
+    font-weight: var(--article-bold-font-weight);
+    color: var(--text);
+    margin: 0 0 0.375rem 0;
+    line-height: 1.4;
+  }
+
+  .font-preview-excerpt {
+    font-size: 0.9em;
+    color: var(--subtext0);
+    margin: 0;
+    line-height: inherit;
+  }
+
+  :is(strong, b) {
+    font-weight: var(--article-bold-font-weight);
+  }
+}
+
+.article-info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.article-info-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.article-info-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--base);
+  color: var(--subtext0);
+  margin-top: 0.125rem;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.article-info-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+  flex: 1;
+  padding-top: 0.125rem;
+}
+
+.article-info-label {
+  font-size: 0.75rem;
+  color: var(--subtext0);
+  font-weight: 500;
+}
+
+.article-info-value {
+  font-size: 0.875rem;
+  color: var(--text);
+  word-break: break-word;
+
+  a {
+    color: var(--lavender);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.article-comment-popover {
+  width: min(920px, 92vw);
+}
+
+.article-comment-popover-body {
+  width: min(920px, 92vw);
+  max-height: min(72vh, 760px);
+  padding: 0;
+}
+
+.article-comment-panel#comments {
+  border-top: 0;
+}
+
+.article-comment-panel {
+  padding: 1.25rem;
+
+  .twikoo {
+    margin: 0;
+  }
+}
+
+/* #endregion Article Meta */
+
+/* #region Search */
+
+input.searchbox-input {
+  color: inherit;
+  background-color: inherit;
+  font-family: inherit;
+  border: none;
+  outline: 0;
+  flex-grow: 1;
+  box-sizing: border-box;
+  padding: 0.75em 0 0.75em 1.25em;
+}
+
+.searchbox,
+.searchbox-container {
+  align-items: center;
+  flex-direction: column;
+  line-height: 1.25em;
+}
+
+.searchbox-container {
   background-color: var(--mantle);
   border: 2px solid var(--surface0);
   color: var(--text);
@@ -1280,6 +2312,42 @@ input.searchbox-input {
     line-height: 0;
     display: flex;
   }
+
+  &.article-popover {
+    position: fixed;
+    width: fit-content;
+    height: fit-content;
+    inset: 0;
+    margin: auto;
+    max-width: 90vw;
+    max-height: 85vh;
+    border: 1px solid var(--surface0);
+    border-radius: 16px;
+    background: var(--mantle);
+    color: var(--text);
+    box-shadow:
+      0 20px 60px -15px rgba(0, 0, 0, 0.3),
+      0 0 0 1px var(--surface0);
+    overflow: hidden;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+
+    &::backdrop {
+      background: hsl(from var(--mantle) h s l / 0.7);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+
+    &.article-font-popover {
+      max-width: min(460px, 90vw);
+    }
+
+    &.article-comment-popover {
+      width: min(920px, 92vw);
+      max-width: min(920px, 92vw);
+    }
+  }
+
   &#theme-selector-popover {
     display: flex;
     align-items: center;
@@ -1293,6 +2361,7 @@ input.searchbox-input {
     overflow-y: auto;
     padding: 0;
     list-style: none;
+    font-family: var(--article-font-family);
   }
 
   .toc-item {
@@ -1327,8 +2396,3 @@ input.searchbox-input {
     }
   }
 }
-
-/* #endregion TOC */
-#comments {
-  border-top: 1px dashed var(--surface0);
-}