hexo-theme-gnix 8.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: STFangsong, STSong, New York, Songti SC, Georgia, serif;
-  --font-sans-serif: system-ui, sans-serif;
-  --font-mono: "SF Mono", "SF Pro", "Maple Mono NF CN Local", "Maple Mono NF CN", Monaco, Consolas, monospace;
-  --font-handwriting: "Bradley Hand", "homemade-apple", cursive;
+  /* 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", 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;
@@ -154,7 +246,7 @@ body {
   background: var(--mantle);
   color: var(--subtext1);
   min-height: 100%;
-  line-height: 1.5;
+  line-height: 1.7;
   display: flex;
   flex-direction: column;
   /* Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace */
@@ -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,20 +514,17 @@ html {
   min-width: 300px;
   overflow-x: hidden;
   overflow-y: scroll;
+  /* scroll-behavior: smooth; */
 }
 
 .card {
   max-width: 100%;
   position: relative;
   overflow: visible;
-  border: 0.5px solid var(--surface0);
-}
-.card + .card {
-  border-top: none;
 }
 
 .card-content {
-  padding: 1.25rem;
+  padding: 1.25em 1.25rem 0 1.25rem;
 }
 
 /* #region Navbar */
@@ -326,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;
@@ -348,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 {
@@ -391,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 {
@@ -415,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 {
@@ -429,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;
 }
@@ -511,7 +749,8 @@ html {
   flex-grow: 1;
   margin: 0 auto;
   position: relative;
-  max-width: 960px;
+  max-width: 50em;
+  counter-reset: h2-counter;
 }
 
 /* #region Footer */
@@ -542,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;
 }
@@ -569,11 +812,6 @@ html {
   align-items: center;
   gap: 0.4rem;
   color: var(--subtext0);
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 /* #endregion Footer */
@@ -587,7 +825,6 @@ html {
 .content {
   overflow: auto;
   word-wrap: break-word;
-  font-size: 1rem;
   color: var(--subtext1);
 
   ::selection {
@@ -598,41 +835,62 @@ 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;
+      color: var(--surface0);
+      transition: opacity 0.2s ease;
+    }
 
     &:hover::after {
-      margin-left: 0.2em;
-      color: var(--surface0);
+      opacity: 1;
     }
   }
 
   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;
   }
 
   h2 {
-    font-size: 2em;
-    margin: 1rem 0;
+    font-size: 1.5em;
+    margin: 1.5rem 0 1rem;
+    line-height: 1.3;
     border-bottom: 0.8px solid var(--surface0);
 
-    > a.header-anchor:hover::after {
-      content: "##";
+    > a.header-anchor {
+      counter-increment: h2-counter;
+      &::before {
+        content: counter(h2-counter, decimal-leading-zero) ".";
+        color: var(--flamingo);
+        font-family: var(--font-mono);
+        padding-right: 0.2em;
+        font-size: 0.75em;
+        font-variant-numeric: tabular-nums;
+      }
+
+      &:hover::after {
+        content: "##";
+      }
     }
   }
 
   h3 {
-    font-size: 1.75em;
-    margin: 1.2rem 0 1rem;
+    font-size: 1.45em;
+    margin: 1.4rem 0 1rem;
+    line-height: 1.35;
 
     > a.header-anchor:hover::after {
       content: "###";
@@ -640,8 +898,9 @@ html {
   }
 
   h4 {
-    font-size: 1.5em;
-    margin: 1.2rem 0 1rem;
+    font-size: 1.35em;
+    margin: 1.3rem 0 1rem;
+    line-height: 1.4;
 
     > a.header-anchor:hover::after {
       content: "####";
@@ -651,6 +910,7 @@ html {
   h5 {
     font-size: 1.25em;
     margin: 1.2rem 0 1rem;
+    line-height: 1.4;
 
     > a.header-anchor:hover::after {
       content: "#####";
@@ -660,6 +920,7 @@ html {
   h6 {
     font-size: 1.1em;
     margin: 1.2rem 0 1rem;
+    line-height: 1.45;
 
     > a.header-anchor:hover::after {
       content: "######";
@@ -671,7 +932,8 @@ html {
   dl,
   pre,
   details {
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
+    line-height: var(--article-line-height);
   }
 
   li {
@@ -688,16 +950,19 @@ html {
   video {
     display: block;
     max-width: 100%;
-    margin: 0 auto;
+    margin: 0 auto 0.5rem auto;
 
     &:hover {
       cursor: pointer;
     }
   }
+  figure {
+    text-align: center;
+  }
 
-  video,
-  .pic {
-    margin: 1em auto;
+  figcaption {
+    font-style: italic;
+    font-family: var(--font-serif);
   }
 
   button.physical-btn,
@@ -754,25 +1019,64 @@ html {
     margin-bottom: 1rem;
   }
 
-  figure {
-    margin: 1em 2.5rem;
-    text-align: center;
-  }
+  .ratex {
+    max-width: 100%;
+    line-height: 0;
+    color: var(--text);
 
-  figure:not(:first-child) {
-    margin-top: 1.5rem;
-  }
+    svg {
+      display: block;
+      flex: 0 0 auto;
+      fill: currentColor;
 
-  figure:not(:last-child) {
-    margin-bottom: 1rem;
+      [fill] {
+        fill: currentColor !important;
+      }
+
+      [stroke] {
+        stroke: currentColor !important;
+      }
+    }
   }
 
-  figure img {
-    display: inline-block;
+  .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;
+      }
+    }
   }
 
-  figure figcaption {
-    font-style: italic;
+  .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 {
@@ -809,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;
 }
 
@@ -860,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: "”";
@@ -965,17 +1302,15 @@ section {
   display: block;
 }
 
-.article:has(.article-licensing) {
-  padding-bottom: 0 !important;
-}
-
 /* #region Article Meta*/
 
 .article-title {
-  font-size: 2.25em;
-  font-family: var(--font-serif);
+  font-family: var(--article-font-family);
+  font-size: 1.75em;
+  font-weight: 500;
   line-height: 1.2;
   margin-bottom: 0.3em;
+  text-wrap: balance;
 
   > a {
     color: var(--text);
@@ -986,8 +1321,6 @@ section {
   font-family: var(--font-mono);
   overflow: auto;
   padding-bottom: 0.5em;
-  margin-bottom: 1rem;
-  border-bottom: 1px dashed var(--surface0);
   color: var(--subtext0);
   display: flex;
   align-items: center;
@@ -1004,80 +1337,808 @@ section {
   }
 }
 
-.article-meta-info,
-.article-tags-inline {
+.article-meta-info {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.2rem;
 }
 
-.article-tags-inline {
-  /* Push to the right */
-  gap: 0.8rem;
-  margin-left: auto;
-}
-
 .meta-separator {
   color: var(--overlay0);
 }
 
-/* #endregion Article Meta */
+.article-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px dashed var(--surface0);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  & + .content {
+    margin-top: 1rem;
+  }
+}
 
-/* #region Licensing */
+em,
+.article-excerpt,
+.footnotes {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-synthesis: none;
+}
 
-.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-tags {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.2rem;
 }
 
-.article-licensing-bg-icon {
-  position: absolute;
-  z-index: -1;
-  right: -50px;
-  top: -88px;
-  font-size: 200px;
-  opacity: 0.1;
-  pointer-events: none;
+.article-read-more {
+  color: var(--subtext0);
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--blue);
+  }
 }
 
-.licensing-title {
-  margin-bottom: 0.75rem;
-  line-height: 1.2;
+.article-footer.article-meta-bar {
+  margin-bottom: 1rem;
 }
 
-.licensing-title p:not(:last-child) {
-  margin-bottom: 0.25rem;
+.article-title-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
 }
 
-.licensing-meta {
-  .level-item p {
-    margin-right: 1.5rem;
-    margin-bottom: 0;
-    font-size: 0.75rem;
-  }
+.article-action-btn {
+  display: inline-flex;
+  width: 1.5rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--subtext1);
+  cursor: pointer;
 
-  iconify-icon {
-    font-size: 1.5em;
-    vertical-align: bottom;
+  &:hover {
+    color: var(--mauve);
   }
 
-  a {
-    color: inherit;
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
   }
 }
 
-/* #endregion Licensing */
-
-/* #region Search */
+.article-popover {
+  padding: 0;
+}
 
-input.searchbox-input {
+.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);
+  }
+}
+
+.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);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mauve);
+    outline-offset: 2px;
+  }
+}
+
+.article-popover-body {
+  padding: 1.25rem;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.language-switch-popover {
+  width: min(24rem, 90vw);
+}
+
+.language-switch-popover-body {
+  p {
+    margin: 0;
+    color: var(--subtext1);
+    line-height: 1.7;
+  }
+}
+
+.language-switch-popover-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.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;
@@ -1171,6 +2232,7 @@ input.searchbox-input {
   display: block;
   overflow: hidden;
   height: 380px;
+  border-radius: var(--radius);
 
   img {
     display: block;
@@ -1250,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;
@@ -1263,6 +2361,7 @@ input.searchbox-input {
     overflow-y: auto;
     padding: 0;
     list-style: none;
+    font-family: var(--article-font-family);
   }
 
   .toc-item {
@@ -1297,5 +2396,3 @@ input.searchbox-input {
     }
   }
 }
-
-/* #endregion TOC */