hexo-theme-gnix 6.2.0 → 8.0.0

package/source/css/default.css

@@ -1,12 +1,20 @@
 @charset "UTF-8";
 
 :root {
-  --font-serif: Georgia, "Times New Roman", Times, "Songti SC", "STSong", serif;
+  --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: STFangsong, STSong, New York, Songti SC, Georgia, serif;
   --font-sans-serif: 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;
+  --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;
   --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.5;
+  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 {
@@ -254,6 +225,13 @@ hr {
   src: local("MapleMono-NF-CN-Regular");
 }
 
+@font-face {
+  font-family: "NewYork";
+  src: local("New York"), local("New York Text"), local("New York Display");
+  font-weight: 400 700;
+  font-style: normal;
+}
+
 @font-face {
   font-family: doto;
   font-style: normal;
@@ -274,6 +252,7 @@ hr {
 
 @font-face {
   font-family: homemade-apple;
+  font-display: swap;
   src:
     local("Homemade Apple"),
     local("HomemadeApple-Regular"),
@@ -293,7 +272,6 @@ h3,
 h4,
 h5,
 h6,
-hr,
 html,
 iframe,
 legend,
@@ -325,34 +303,18 @@ html {
   overflow-y: scroll;
 }
 
-body {
-  min-height: 100%;
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-}
-
-.toc-text,
-.footer-grid,
-.widget {
-  font-family: var(--font-sans-serif);
-}
-
 .card {
   max-width: 100%;
   position: relative;
   overflow: visible;
-  border-radius: var(--radius);
-  border: 0.5px dashed var(--surface0);
+  border: 0.5px solid var(--surface0);
 }
-
 .card + .card {
-  margin-top: 1.5rem;
+  border-top: none;
 }
 
 .card-content {
   padding: 1.25rem;
-  border-radius: 0;
 }
 
 /* #region Navbar */
@@ -364,7 +326,6 @@ body {
   left: 0;
   right: 0;
   z-index: 100;
-  font-family: var(--font-sans-serif);
   border-bottom: 0.5px solid var(--surface0);
 }
 
@@ -390,7 +351,6 @@ body {
   color: var(--subtext1);
   align-items: center;
   display: flex;
-  font-size: 1.1rem;
   padding: 0 0.5rem;
   position: relative;
   flex-grow: 0;
@@ -403,8 +363,6 @@ body {
   }
 
   .navbar-item:hover {
-    scale: 1.1;
-    transition: all 0.2s ease;
     color: var(--lavender);
   }
 }
@@ -413,55 +371,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);
   }
 }
 
@@ -473,12 +414,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,
@@ -486,21 +428,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;
 }
@@ -515,41 +458,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;
 }
@@ -576,7 +511,7 @@ body {
   flex-grow: 1;
   margin: 0 auto;
   position: relative;
-  max-width: 1080px;
+  max-width: 960px;
 }
 
 /* #region Footer */
@@ -585,6 +520,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;
@@ -605,11 +541,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;
@@ -652,10 +587,8 @@ 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 {
     color: inherit;
@@ -665,6 +598,7 @@ body {
 
   a.header-anchor {
     color: var(--text);
+    font-family: var(--font-serif);
 
     &:hover::after {
       margin-left: 0.2em;
@@ -672,12 +606,23 @@ body {
     }
   }
 
+  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: 2em;
+    margin: 1rem 0;
     border-bottom: 0.8px solid var(--surface0);
 
     > a.header-anchor:hover::after {
@@ -686,10 +631,7 @@ body {
   }
 
   h3 {
-    font-size: 1.875em;
-    font-weight: 700;
-    line-height: 1.25;
-    letter-spacing: -0.015em;
+    font-size: 1.75em;
     margin: 1.2rem 0 1rem;
 
     > a.header-anchor:hover::after {
@@ -699,9 +641,6 @@ body {
 
   h4 {
     font-size: 1.5em;
-    font-weight: 600;
-    line-height: 1.25;
-    letter-spacing: -0.01em;
     margin: 1.2rem 0 1rem;
 
     > a.header-anchor:hover::after {
@@ -710,10 +649,7 @@ body {
   }
 
   h5 {
-    font-size: 1.35em;
-    font-weight: 600;
-    line-height: 1.25;
-    letter-spacing: -0.005em;
+    font-size: 1.25em;
     margin: 1.2rem 0 1rem;
 
     > a.header-anchor:hover::after {
@@ -723,8 +659,6 @@ body {
 
   h6 {
     font-size: 1.1em;
-    font-weight: 600;
-    line-height: 1.25;
     margin: 1.2rem 0 1rem;
 
     > a.header-anchor:hover::after {
@@ -732,10 +666,6 @@ body {
     }
   }
 
-  .p:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-
   p,
   ol,
   dl,
@@ -744,12 +674,17 @@ body {
     margin-bottom: 1rem;
   }
 
+  li {
+    margin-bottom: 0.5rem;
+  }
+
   p:last-child,
   .tabs-tabs-wrapper:last-child {
     margin-bottom: 0;
   }
 
   img,
+  iframe,
   video {
     display: block;
     max-width: 100%;
@@ -768,7 +703,8 @@ body {
   button.physical-btn,
   kbd {
     display: inline-block;
-    padding: 0.1em 0.3em;
+    padding: 0 0.3em;
+    margin: 0 0.3em;
     font-family: var(--font-mono);
     font-size: 0.85em;
     color: var(--subtext0);
@@ -782,11 +718,10 @@ body {
     top: -3px;
     transition:
       top 0.1s ease,
-      border-bottom-width 0.1s ease,
-      box-shadow 0.1s ease;
+      border-bottom-width 0.1s ease;
 
     &:active {
-      top: 0px;
+      top: 0;
     }
   }
 
@@ -819,10 +754,6 @@ body {
     margin-bottom: 1rem;
   }
 
-  iframe {
-    overflow: auto;
-  }
-
   figure {
     margin: 1em 2.5rem;
     text-align: center;
@@ -845,7 +776,6 @@ body {
   }
 
   pre {
-    -webkit-overflow-scrolling: touch;
     overflow-x: auto;
     font-size: 0.85em;
     padding: 1rem;
@@ -877,30 +807,13 @@ body {
     position: relative;
   }
 
-  a[href*="apple"]::before,
-  a[href*="github"]::before,
-  a[href*="wikipedia"]::before,
-  a[href*="youtube"]::before {
-    font-family: var(--font-mono);
-    font-size: 1em;
-    padding-left: 0.5em;
-    color: var(--lavender);
-  }
-
-  a[href*="github"]::before {
-    content: " ";
-  }
-
-  a[href*="wikipedia"]::before {
-    content: "󰖬 ";
-  }
-
-  a[href*="youtube"]::before {
-    content: " ";
-  }
-
-  a[href*="apple"]::before {
-    content: " ";
+  a {
+    text-decoration: underline;
+    text-decoration-color: var(--subtext1);
+    color: var(--text);
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
   }
 }
 
@@ -922,6 +835,9 @@ td,
 th {
   vertical-align: middle;
   padding: 0.75em 1em;
+  &:not([align]) {
+    text-align: left;
+  }
 }
 
 thead th {
@@ -930,11 +846,6 @@ thead th {
   padding: 1em;
 }
 
-td:not([align]),
-th:not([align]) {
-  text-align: left;
-}
-
 tbody tr td {
   border-bottom: 1px solid var(--surface0);
 }
@@ -945,11 +856,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: "”";
@@ -962,16 +872,24 @@ 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 {
   list-style-type: none;
+  padding-left: 0.5rem;
 }
 
 li.task-list-item {
   position: relative;
   padding-left: 1.75rem;
-  font-size: 1rem;
   list-style: none;
 }
 
@@ -985,18 +903,17 @@ input.task-list-item-checkbox {
   position: absolute;
   left: 0;
   top: 0.15rem;
-}
-
-input.task-list-item-checkbox:checked::before {
-  content: "";
-  font-family: var(--font-mono);
-  color: var(--base);
-  position: absolute;
-  top: 50%;
-  left: 40%;
-  transform: translate(-50%, -50%);
-  font-size: 0.9rem;
-  font-weight: 700;
+  &:checked::before {
+    content: "";
+    font-family: var(--font-mono);
+    color: var(--base);
+    position: absolute;
+    top: 50%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    font-size: 0.9rem;
+    font-weight: 700;
+  }
 }
 
 .medium-zoom-overlay {
@@ -1013,23 +930,14 @@ input.task-list-item-checkbox:checked::before {
 .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 {
@@ -1047,10 +955,6 @@ small {
 
 /* #endregion Content */
 
-:target {
-  scroll-margin-top: 5rem;
-}
-
 article,
 aside,
 figure,
@@ -1068,16 +972,13 @@ section {
 /* #region Article Meta*/
 
 .article-title {
-  font-family: var(--font-sans-serif);
-  font-size: 2.75em;
-  font-weight: bold;
+  font-size: 2.25em;
+  font-family: var(--font-serif);
   line-height: 1.2;
-  letter-spacing: -0.02em;
   margin-bottom: 0.3em;
-  color: var(--text);
 
   > a {
-    color: inherit;
+    color: var(--text);
   }
 }
 
@@ -1092,7 +993,7 @@ section {
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 
   a {
     color: var(--subtext0);
@@ -1108,17 +1009,17 @@ section {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.3rem;
+  gap: 0.2rem;
 }
 
 .article-tags-inline {
   /* Push to the right */
+  gap: 0.8rem;
   margin-left: auto;
 }
 
 .meta-separator {
   color: var(--overlay0);
-  padding: 0 0.1em;
 }
 
 /* #endregion Article Meta */
@@ -1132,7 +1033,6 @@ section {
   padding: 1.25rem;
   z-index: 0;
   border-radius: 0 0 24px 24px;
-  box-shadow: none;
   overflow: hidden;
   justify-content: space-between;
 }
@@ -1157,8 +1057,9 @@ section {
 }
 
 .licensing-meta {
-  .level-item {
+  .level-item p {
     margin-right: 1.5rem;
+    margin-bottom: 0;
     font-size: 0.75rem;
   }
 
@@ -1176,26 +1077,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;
@@ -1289,7 +1170,6 @@ input.searchbox-input {
   position: relative;
   display: block;
   overflow: hidden;
-  border-radius: var(--radius) var(--radius) 0 0;
   height: 380px;
 
   img {
@@ -1313,23 +1193,109 @@ input.searchbox-input {
   }
 }
 
-/* html.is-changing .transition-fade {
-  view-transition-name: main;
-}
+/* #region TOC */
 
-::view-transition-old(main) {
-  animation: fade 0.5s ease-in-out both;
+.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);
+    }
+  }
 }
 
-::view-transition-new(main) {
-  animation: fade 0.5s ease-in-out both reverse;
+: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;
+  }
 }
 
-@keyframes fade {
-  from {
-    opacity: 1;
+#icarus-toc-container {
+  .toc {
+    max-height: 80vh;
+    overflow-y: auto;
+    padding: 0;
+    list-style: none;
+  }
+
+  .toc-item {
+    margin-bottom: 0.5rem;
   }
-  to {
-    opacity: 0;
+
+  .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 */