hexo-theme-gnix 7.0.0 → 9.0.0

package/source/css/default.css

@@ -1,12 +1,20 @@
 @charset "UTF-8";
 
 :root {
-  --font-serif: New York, PT Serif, Georgia, serif;
-  --font-sans-serif: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, system-ui, sans-serif;
-  --font-mono: "RecMonoCasual Nerd Font", "Maple Mono NF CN Local", "Maple Mono NF CN", "SF Mono", "SF Pro", Monaco, Consolas, monospace;
+  --subtext1: color-mix(in oklch, var(--text) 90%, var(--mantle));
+  --subtext0: color-mix(in oklch, var(--text) 80%, var(--mantle));
+  --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-mono: "SF Mono", "Maple Mono NF CN Local", "Maple Mono NF CN", Monaco, Consolas, monospace;
   --font-handwriting: "Bradley Hand", "homemade-apple", cursive;
   --radius: 12px;
-  --spaceing: 0.25rem;
 }
 
 /* #region Color */
@@ -27,14 +35,6 @@
   --blue: #1e66f5;
   --lavender: #7287fd;
   --text: #4c4f69;
-  --subtext1: #5c5f77;
-  --subtext0: #6c6f85;
-  --overlay2: #7c7f93;
-  --overlay1: #8c8fa1;
-  --overlay0: #9ca0b0;
-  --surface2: #acb0be;
-  --surface1: #bcc0cc;
-  --surface0: #ccd0da;
   --base: #eff1f5;
   --mantle: #e6e9ef;
   --crust: #dce0e8;
@@ -57,14 +57,6 @@
   --blue: #9ccfd8;
   --lavender: #c4a7e7;
   --text: #e0def4;
-  --subtext1: #908caa;
-  --subtext0: #6e6a86;
-  --overlay2: #57526e;
-  --overlay1: #454158;
-  --overlay0: #3c3b4d;
-  --surface2: #302d41;
-  --surface1: #26233a;
-  --surface0: #1f1d2e;
   --base: #191726;
   --mantle: #161422;
   --crust: #11111b;
@@ -87,14 +79,6 @@
   --blue: #81a1c1;
   --lavender: #5e81ac;
   --text: #4c566a;
-  --subtext1: #3b4252;
-  --subtext0: #434c5e;
-  --overlay2: #4c566a;
-  --overlay1: #5a657a;
-  --overlay0: #686e7e;
-  --surface2: #76809f;
-  --surface1: #7d8fa3;
-  --surface0: #8fa3b0;
   --base: #eceff4;
   --mantle: #e5e9f0;
   --crust: #d8dee9;
@@ -117,14 +101,6 @@
   --blue: #89b4fa;
   --lavender: #b4befe;
   --text: #cdd6f4;
-  --subtext1: #bac2de;
-  --subtext0: #a6adc8;
-  --overlay2: #9399b2;
-  --overlay1: #7f849c;
-  --overlay0: #6c7086;
-  --surface2: #585b70;
-  --surface1: #45475a;
-  --surface0: #313244;
   --base: #1e1e2e;
   --mantle: #181825;
   --crust: #11111b;
@@ -147,14 +123,6 @@
   --blue: #7aa2f7;
   --lavender: #82aaff;
   --text: #c0caf5;
-  --subtext1: #a9b1d6;
-  --subtext0: #9aa5ce;
-  --overlay2: #787c99;
-  --overlay1: #565f89;
-  --overlay0: #414868;
-  --surface2: #414868;
-  --surface1: #33467c;
-  --surface0: #24283b;
   --base: #1a1b26;
   --mantle: #16161e;
   --crust: #101014;
@@ -177,14 +145,6 @@
   --blue: #5e81ac;
   --lavender: #81a1c1;
   --text: #eceff4;
-  --subtext1: #e5e9f0;
-  --subtext0: #d8dee9;
-  --overlay2: #4c566a;
-  --overlay1: #434c5e;
-  --overlay0: #3b4252;
-  --surface2: #434c5e;
-  --surface1: #3b4252;
-  --surface0: #3b4252;
   --base: #2e3440;
   --mantle: #292e39;
   --crust: #242933;
@@ -192,7 +152,14 @@
 
 body {
   background: var(--mantle);
-  color: var(--text);
+  color: var(--subtext1);
+  min-height: 100%;
+  line-height: 1.7;
+  display: flex;
+  flex-direction: column;
+  /* Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace */
+  text-autospace: normal;
+  font-family: var(--font-sans-serif);
 }
 
 .article-licensing {
@@ -233,7 +200,11 @@ mark {
 }
 
 hr {
-  background-color: var(--surface0);
+  border: none;
+  display: block;
+  margin: 1.5rem 0;
+  background: transparent;
+  border-top: 2px dotted var(--surface0);
 }
 
 .searchbox-result-item.active span {
@@ -281,6 +252,7 @@ hr {
 
 @font-face {
   font-family: homemade-apple;
+  font-display: swap;
   src:
     local("Homemade Apple"),
     local("HomemadeApple-Regular"),
@@ -300,7 +272,6 @@ h3,
 h4,
 h5,
 h6,
-hr,
 html,
 iframe,
 legend,
@@ -332,34 +303,14 @@ html {
   overflow-y: scroll;
 }
 
-body {
-  min-height: 100%;
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  /* Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace */
-  text-autospace: normal;
-}
-
-.toc-text,
-.footer-grid,
-.widget {
-  font-family: var(--font-sans-serif);
-}
-
 .card {
   max-width: 100%;
   position: relative;
   overflow: visible;
-  border: 1px solid var(--surface0);
-}
-.card + .card {
-  border-top: none;
 }
 
 .card-content {
-  padding: 1.25rem;
-  border-radius: 0;
+  padding: 1.25em 1.25rem 0 1.25rem;
 }
 
 /* #region Navbar */
@@ -371,7 +322,6 @@ body {
   left: 0;
   right: 0;
   z-index: 100;
-  font-family: var(--font-sans-serif);
   border-bottom: 0.5px solid var(--surface0);
 }
 
@@ -397,7 +347,6 @@ body {
   color: var(--subtext1);
   align-items: center;
   display: flex;
-  font-size: 1.1rem;
   padding: 0 0.5rem;
   position: relative;
   flex-grow: 0;
@@ -410,8 +359,6 @@ body {
   }
 
   .navbar-item:hover {
-    scale: 1.1;
-    transition: all 0.2s ease;
     color: var(--lavender);
   }
 }
@@ -420,55 +367,38 @@ body {
 
 /* #region Theme Selector */
 
-#theme-selector-modal {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  visibility: hidden;
-  pointer-events: none;
-  backdrop-filter: blur(8px);
+#theme-selector-popover:focus {
+  outline: none;
 }
 
 .theme-selector-list {
-  background-color: hsl(from var(--mantle) h s l / 0.8);
-  border-radius: var(--radius);
-  border: 2px solid var(--mauve);
-  width: 90%;
+  width: 90vw;
   max-width: 480px;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
   padding: 0.5rem;
-}
-
-#theme-selector-modal.is-active {
-  visibility: visible;
-  pointer-events: auto;
+  overflow: hidden;
 }
 
 .theme-option {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  padding: 1rem 1.25rem;
-  border-radius: 6px;
+  background-color: inherit;
+  border: none;
+  outline: none;
+  color: var(--text);
+  padding: 0.75rem 1.25rem;
   cursor: pointer;
-  position: relative;
+  font-size: 2rem;
+  font-family: system-ui;
+  font-variation-settings:
+    "wght" 200,
+    "wdth" 400;
 
   &.is-focused,
   &:hover {
     color: var(--rosewater);
   }
-
-  .theme-name {
-    flex: 1;
-    font-size: 1.5rem;
-    word-spacing: 0.5rem;
-    letter-spacing: 0.05rem;
-    font-family: var(--font-serif);
+  &.is-active {
+    color: var(--blue);
   }
 }
 
@@ -480,12 +410,13 @@ body {
 .pagination-list {
   align-items: center;
   display: flex;
-  justify-content: center;
   text-align: center;
+  font-family: var(--font-mono);
 }
 
 .pagination-link.is-current {
-  color: var(--lavender);
+  color: var(--text);
+  font-weight: bold;
 }
 
 .pagination-ellipsis,
@@ -493,21 +424,22 @@ body {
 .pagination-next,
 .pagination-previous {
   user-select: none;
-  height: 2.5em;
-  border-radius: 10px;
-  font-weight: bold;
-  color: var(--text);
-  margin: 0.25rem;
+  color: var(--subtext0);
   padding: 0 0.5em;
-  justify-content: center;
-  text-align: center;
-  align-items: center;
   display: inline-flex;
-  position: relative;
-  vertical-align: top;
   min-width: 1.5em;
 }
 
+.pagination-previous {
+  margin-right: auto;
+  margin-left: 0.5rem;
+}
+
+.pagination-next {
+  margin-left: auto;
+  margin-right: 0.5rem;
+}
+
 .pagination-list {
   flex-wrap: wrap;
 }
@@ -522,41 +454,33 @@ body {
 }
 
 .tabs-tabs-header {
-  display: flex;
-  padding: 0 10px;
+  padding: 0 0.5rem;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .tabs-tab-button {
-  flex: 1;
-  padding: 0.5em 0;
+  padding: 0.5em 1rem;
   border: none;
+  border-bottom: 2px solid transparent;
   background: 0 0;
   font-size: 1em;
-  font-weight: bold;
   cursor: pointer;
   position: relative;
   transition: color 0.3s ease;
   outline: 0;
-  font-family: var(--font-sans-serif);
-  color: var(--text);
+  color: var(--subtext0);
+  flex: 0 0 auto;
+  white-space: nowrap;
 
   &:hover,
   &.active {
-    color: var(--lavender);
+    color: var(--text);
+    border-color: var(--text);
   }
 }
 
-.tabs-tab-button.active::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: var(--lavender);
-  animation: slideIn 0.3s ease;
-}
-
 .tabs-tabs-container {
   padding: 0.8em 0 10px 0;
 }
@@ -583,7 +507,8 @@ body {
   flex-grow: 1;
   margin: 0 auto;
   position: relative;
-  max-width: 960px;
+  max-width: 50em;
+  counter-reset: h2-counter;
 }
 
 /* #region Footer */
@@ -592,6 +517,7 @@ body {
   user-select: none;
   padding: 3rem 1.5rem 6rem;
   position: relative;
+  border-top: 0.5px solid var(--surface0);
 
   iconify-icon {
     font-size: 1.2rem;
@@ -612,11 +538,10 @@ body {
 }
 
 .footer-title {
-  font-weight: bolder;
-  font-size: 1.1rem;
-  margin-bottom: 0.25rem;
+  font-family: homemade-apple, var(--font-handwriting);
 }
 
+.footer-title,
 .footer-heading {
   font-weight: bolder;
   font-size: 1.1rem;
@@ -659,10 +584,7 @@ body {
 .content {
   overflow: auto;
   word-wrap: break-word;
-  font-family: var(--font-sans-serif);
   font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: -0.003em;
   color: var(--subtext1);
 
   ::selection {
@@ -673,32 +595,60 @@ body {
 
   a.header-anchor {
     color: var(--text);
+    font-family: var(--font-serif);
+    &::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;
+    text-decoration: none;
+  }
+
   h2 {
-    font-size: 2.25em;
-    font-weight: 700;
-    line-height: 1.25;
-    letter-spacing: -0.02em;
-    margin: 1rem 0 1rem;
+    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.875em;
-    font-weight: 700;
-    line-height: 1.25;
-    letter-spacing: -0.015em;
-    margin: 1.2rem 0 1rem;
+    font-size: 1.45em;
+    margin: 1.4rem 0 1rem;
+    line-height: 1.35;
 
     > a.header-anchor:hover::after {
       content: "###";
@@ -706,11 +656,9 @@ body {
   }
 
   h4 {
-    font-size: 1.5em;
-    font-weight: 600;
-    line-height: 1.25;
-    letter-spacing: -0.01em;
-    margin: 1.2rem 0 1rem;
+    font-size: 1.35em;
+    margin: 1.3rem 0 1rem;
+    line-height: 1.4;
 
     > a.header-anchor:hover::after {
       content: "####";
@@ -718,12 +666,9 @@ body {
   }
 
   h5 {
-    font-size: 1.35em;
-    font-weight: 600;
-    line-height: 1.25;
-    font-variant-caps: all-petite-caps;
-    letter-spacing: -0.005em;
+    font-size: 1.25em;
     margin: 1.2rem 0 1rem;
+    line-height: 1.4;
 
     > a.header-anchor:hover::after {
       content: "#####";
@@ -732,10 +677,8 @@ body {
 
   h6 {
     font-size: 1.1em;
-    font-weight: 600;
-    line-height: 1.25;
-    font-variant-caps: all-petite-caps;
     margin: 1.2rem 0 1rem;
+    line-height: 1.45;
 
     > a.header-anchor:hover::after {
       content: "######";
@@ -747,7 +690,8 @@ body {
   dl,
   pre,
   details {
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.7;
   }
 
   li {
@@ -760,19 +704,23 @@ body {
   }
 
   img,
+  iframe,
   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,
@@ -796,7 +744,7 @@ body {
       border-bottom-width 0.1s ease;
 
     &:active {
-      top: 0px;
+      top: 0;
     }
   }
 
@@ -829,33 +777,7 @@ body {
     margin-bottom: 1rem;
   }
 
-  iframe {
-    overflow: auto;
-  }
-
-  figure {
-    margin: 1em 2.5rem;
-    text-align: center;
-  }
-
-  figure:not(:first-child) {
-    margin-top: 1.5rem;
-  }
-
-  figure:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-
-  figure img {
-    display: inline-block;
-  }
-
-  figure figcaption {
-    font-style: italic;
-  }
-
   pre {
-    -webkit-overflow-scrolling: touch;
     overflow-x: auto;
     font-size: 0.85em;
     padding: 1rem;
@@ -888,51 +810,11 @@ body {
   }
 
   a {
-    font-weight: 500;
     text-decoration: underline;
-    text-underline-offset: 3px;
     text-decoration-color: var(--subtext1);
     color: var(--text);
     &:hover {
-      color: var(--lavender);
-      text-decoration: none;
-    }
-  }
-
-  a[href*="apple"]::before,
-  a[href*="github"]::before,
-  a[href*="wikipedia"]::before,
-  a[href*="youtube"]::before {
-    font-size: 1.2em;
-    font-family: var(--font-mono);
-    text-decoration: none;
-    display: inline-block;
-    padding-right: 0.5em;
-  }
-
-  a[href*="github"]::before {
-    content: " ";
-  }
-
-  a[href*="wikipedia"]::before {
-    content: "󰖬 ";
-  }
-
-  a[href*="youtube"]::before {
-    content: " ";
-  }
-
-  a[href*="apple"]::before {
-    content: "";
-  }
-
-  a.header-anchor,
-  .footnote-ref a,
-  .footnotes-item a,
-  a.footnote-backref {
-    text-decoration: none;
-    &:hover {
-      color: inherit;
+      text-decoration-thickness: 2px;
     }
   }
 }
@@ -955,6 +837,9 @@ td,
 th {
   vertical-align: middle;
   padding: 0.75em 1em;
+  &:not([align]) {
+    text-align: left;
+  }
 }
 
 thead th {
@@ -963,11 +848,6 @@ thead th {
   padding: 1em;
 }
 
-td:not([align]),
-th:not([align]) {
-  text-align: left;
-}
-
 tbody tr td {
   border-bottom: 1px solid var(--surface0);
 }
@@ -978,11 +858,10 @@ tbody tr:last-child td {
 
 blockquote {
   position: relative;
-  padding: 1.5rem 2rem 1.5rem 3rem;
+  padding: 0.7rem 2.5rem;
   margin: 1.5rem 0;
   border-left: 2px solid var(--red);
-  border-radius: 0 8px 8px 0;
-  font-family: var(--font-serif);
+  font-family: Georgia, Kai, var(--font-serif);
 
   &:before {
     content: "”";
@@ -995,6 +874,14 @@ blockquote {
     opacity: 0.3;
     line-height: 1;
   }
+
+  cite {
+    display: block;
+    text-align: right;
+    margin-top: 0.5em;
+    color: var(--subtext0);
+    font-style: italic;
+  }
 }
 
 ul.contains-task-list {
@@ -1045,23 +932,14 @@ input.task-list-item-checkbox {
 .heimu {
   color: var(--text);
   background-color: var(--text);
-}
-
-.heimu:hover {
-  color: var(--base);
+  &:hover {
+    color: var(--base);
+  }
 }
 
 strong {
   font-weight: bolder;
   padding: 0 0.15em;
-  /* color: var(--maroon); */
-}
-
-hr {
-  border: none;
-  display: block;
-  height: 0.1em;
-  margin: 1.5rem 0;
 }
 
 a strong {
@@ -1079,10 +957,6 @@ small {
 
 /* #endregion Content */
 
-:target {
-  scroll-margin-top: 5rem;
-}
-
 article,
 aside,
 figure,
@@ -1100,10 +974,11 @@ section {
 /* #region Article Meta*/
 
 .article-title {
-  font-family: var(--font-sans-serif);
-  font-size: 2.25em;
+  font-size: 1.75em;
+  font-family: var(--font-serif);
   line-height: 1.2;
   margin-bottom: 0.3em;
+  text-wrap: balance;
 
   > a {
     color: var(--text);
@@ -1114,8 +989,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;
@@ -1132,24 +1005,52 @@ 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);
 }
 
+.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;
+  }
+}
+
+.article-excerpt {
+  font-family: var(--font-serif);
+}
+
+.article-tags {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+}
+
+.article-read-more {
+  color: var(--subtext0);
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--blue);
+  }
+}
+
 /* #endregion Article Meta */
 
 /* #region Licensing */
@@ -1161,7 +1062,6 @@ section {
   padding: 1.25rem;
   z-index: 0;
   border-radius: 0 0 24px 24px;
-  box-shadow: none;
   overflow: hidden;
   justify-content: space-between;
 }
@@ -1189,7 +1089,7 @@ section {
   .level-item p {
     margin-right: 1.5rem;
     margin-bottom: 0;
-    font-size: 0.75rem;
+    font-size: 0.7rem;
   }
 
   iconify-icon {
@@ -1206,26 +1106,6 @@ section {
 
 /* #region Search */
 
-.searchbox {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-  font-family: var(--font-mono);
-  line-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  display: flex;
-
-  &.show {
-    opacity: 1;
-    visibility: visible;
-    backdrop-filter: blur(5px);
-  }
-}
-
 input.searchbox-input {
   color: inherit;
   background-color: inherit;
@@ -1320,6 +1200,7 @@ input.searchbox-input {
   display: block;
   overflow: hidden;
   height: 380px;
+  border-radius: var(--radius);
 
   img {
     display: block;
@@ -1341,3 +1222,113 @@ input.searchbox-input {
     z-index: 2;
   }
 }
+
+/* #region TOC */
+
+.toc-button {
+  position: fixed;
+  top: 7rem;
+  left: 2rem;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+
+  > span {
+    background-color: hsl(from var(--text) h s l / 0.5);
+    height: 2px;
+    left: calc(50% - 8px);
+    position: absolute;
+    width: 1rem;
+
+    &:nth-child(1) {
+      top: calc(50% - 6px);
+    }
+
+    &:nth-child(2) {
+      width: 0.75rem;
+      top: calc(50% - 1px);
+    }
+
+    &:nth-child(3) {
+      top: calc(50% + 4px);
+    }
+  }
+}
+
+:popover-open {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  border: none;
+  background: hsl(from var(--mantle) h s l / 0.7);
+  backdrop-filter: blur(10px);
+  &.toc-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+  }
+
+  &.searchbox {
+    font-family: var(--font-mono);
+    line-height: 0;
+    display: flex;
+  }
+  &#theme-selector-popover {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+#icarus-toc-container {
+  .toc {
+    max-height: 80vh;
+    overflow-y: auto;
+    padding: 0;
+    list-style: none;
+  }
+
+  .toc-item {
+    margin-bottom: 0.5rem;
+  }
+
+  .toc-child {
+    padding-left: 1.5rem;
+    list-style: none;
+  }
+
+  .toc-text {
+    display: inline;
+    color: var(--subtext0);
+
+    .toc-level-2 & {
+      color: var(--text);
+      font-size: 1.8rem;
+    }
+    .toc-level-3 & {
+      color: var(--subtext1);
+      font-size: 1.5rem;
+    }
+    .toc-level-4 & {
+      font-size: 1.25rem;
+    }
+    .toc-level-6 & {
+      font-size: 0.875rem;
+    }
+    &:hover {
+      color: var(--mauve);
+    }
+  }
+}
+
+/* #endregion TOC */
+#comments {
+  border-top: 1px dashed var(--surface0);
+}