hexo-theme-gnix 13.0.0 → 14.0.0

package/source/css/default.css

@@ -251,6 +251,7 @@ body {
   flex-direction: column;
   /* Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace */
   text-autospace: normal;
+  font-synthesis: none;
   font-family: var(--font-sans-serif);
 }
 
@@ -557,7 +558,7 @@ html {
 /* #region Navbar */
 
 .navbar {
-  min-height: 4rem;
+  min-height: 3.5rem;
   position: sticky;
   padding-top: env(safe-area-inset-top);
   top: 0;
@@ -565,14 +566,24 @@ html {
   right: 0;
   z-index: 100;
   background: var(--mantle);
-  border-bottom: 0.5px solid var(--surface0);
+}
+
+.navbar::after {
+  content: "";
+  position: absolute;
+  left: 8%;
+  right: 8%;
+  bottom: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent 0%, hsl(from var(--surface0) h s l / 0.75) 22%, hsl(from var(--surface0) h s l / 0.75) 78%, transparent 100%);
+  pointer-events: none;
 }
 
 @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);
+    -webkit-backdrop-filter: blur(20px) saturate(1.4);
+    backdrop-filter: blur(20px) saturate(1.4);
+    background: hsl(from var(--mantle) h s l / 0.72);
   }
 }
 
@@ -581,7 +592,7 @@ html {
   margin: 0 auto;
   width: auto;
   display: flex;
-  min-height: 4rem;
+  min-height: 3.5rem;
 
   button {
     background: none;
@@ -590,10 +601,29 @@ html {
   }
 }
 
+.navbar-main {
+  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .navbar-main.navbar--hidden {
   transform: translateY(-100%);
 }
 
+.navbar-logo {
+  font-family: homemade-apple, var(--font-handwriting);
+  color: var(--subtext1);
+  display: flex;
+  align-items: center;
+  padding: 0 1.25rem;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  transition: color 240ms ease;
+}
+
+.navbar-logo:hover {
+  color: var(--rosewater);
+}
+
 .navbar-item {
   color: var(--subtext0);
   align-items: center;
@@ -603,16 +633,63 @@ html {
   flex-grow: 0;
   flex-shrink: 0;
   letter-spacing: 0.05em;
-  transition: color 0.18s ease;
+  transition: color 220ms ease;
+}
+
+@media screen and (min-width: 1024px) {
+  .navbar-start .navbar-item {
+    font-family: var(--font-sans-serif);
+    font-size: 0.78rem;
+    font-weight: 500;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    padding: 0 0.9rem;
+    color: var(--subtext0);
+  }
+
+  .navbar-start .navbar-item::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 0.95rem;
+    width: 55%;
+    height: 1px;
+    background: var(--rosewater);
+    transform: translateX(-50%) scaleX(0);
+    transform-origin: center;
+    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .navbar-start .navbar-item:hover {
+    color: var(--text);
+  }
+
+  .navbar-start .navbar-item:hover::after {
+    transform: translateX(-50%) scaleX(1);
+  }
 }
 
 .navbar-end {
   svg {
-    width: 1.2em;
+    width: 1.1em;
+    opacity: 0.78;
+    transition:
+      opacity 220ms ease,
+      transform 220ms ease;
+  }
+
+  .navbar-item {
+    padding: 0 0.6rem;
+    transition: color 220ms ease;
   }
 
   .navbar-item:hover {
-    color: var(--lavender);
+    color: var(--text);
+  }
+
+  .navbar-item:hover svg {
+    opacity: 1;
+    transform: translateY(-1px);
   }
 }
 
@@ -656,49 +733,6 @@ html {
 
 /* #endregion Theme Selector */
 
-/* #region Pagination */
-
-.pagination,
-.pagination-list {
-  align-items: center;
-  display: flex;
-  text-align: center;
-  font-family: var(--font-serif);
-  font-style: italic;
-}
-
-.pagination-link.is-current {
-  color: var(--text);
-  font-weight: bold;
-}
-
-.pagination-ellipsis,
-.pagination-link,
-.pagination-next,
-.pagination-previous {
-  user-select: none;
-  color: var(--subtext0);
-  padding: 0 1rem;
-  display: inline-flex;
-  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;
-}
-
-/* #endregion Pagination */
-
 .section {
   padding: 3rem 1.5rem;
   flex-grow: 1;
@@ -722,6 +756,7 @@ html {
   padding: 4rem 1.5rem 3rem;
   text-align: center;
   color: var(--overlay0);
+  font-family: var(--font-mono);
 }
 
 .footer-brand {
@@ -731,11 +766,13 @@ html {
   gap: 0.25rem;
 }
 
-.footer-credit {
+.footer-credit,
+.footer-credit > a {
   font-size: 0.75rem;
   font-weight: 400;
   margin: 0;
   letter-spacing: 0.06em;
+  color: inherit;
 }
 
 .footer-author {
@@ -826,10 +863,11 @@ html {
       &::before {
         content: counter(h2-counter, decimal-leading-zero) ".";
         color: var(--flamingo);
-        font-family: var(--font-mono);
+        font-family: var(--font-serif);
         padding-right: 0.2em;
+        letter-spacing: 0.1rem;
         font-size: 0.75em;
-        font-variant-numeric: tabular-nums;
+        font-variant-numeric: oldstyle-nums;
       }
 
       &:hover::after {
@@ -1303,11 +1341,12 @@ section {
   color: var(--overlay0);
 }
 
-.article-footer {
+.article-meta-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 1rem;
+  margin-bottom: 1rem;
   padding-bottom: 0.75rem;
   border-bottom: 1px dashed var(--surface0);
   font-family: var(--font-mono);
@@ -1332,20 +1371,6 @@ em,
   gap: 0.2rem;
 }
 
-.article-read-more {
-  color: var(--subtext0);
-  text-decoration: none;
-  white-space: nowrap;
-
-  &:hover {
-    color: var(--blue);
-  }
-}
-
-.article-footer.article-meta-bar {
-  margin-bottom: 1rem;
-}
-
 .article-title-actions {
   display: flex;
   align-items: center;
@@ -1423,7 +1448,7 @@ em,
 }
 
 .language-switch-popover {
-  width: min(24rem, 90vw);
+  width: min(40rem, 90vw);
 }
 
 .language-switch-popover-body {
@@ -2041,7 +2066,7 @@ em,
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
-  min-width: 0;
+  min-width: 20rem;
   flex: 1;
   padding-top: 0.125rem;
 }
@@ -2214,8 +2239,8 @@ input.searchbox-input {
 
 .toc-button {
   position: fixed;
-  top: 7rem;
-  left: 2rem;
+  top: 10rem;
+  left: max(2rem, calc(50% - 25em - 10rem));
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
@@ -2276,19 +2301,16 @@ input.searchbox-input {
     margin: auto;
     max-width: 90vw;
     max-height: 85vh;
-    border: 1px solid var(--surface0);
     border-radius: 16px;
-    background: var(--mantle);
+    /* 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);
+      /* background: hsl(from var(--mantle) h s l / 0.7); */
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
     }
@@ -2337,7 +2359,7 @@ input.searchbox-input {
       font-size: 1.8rem;
     }
     .toc-level-3 & {
-      color: var(--overlay1);
+      color: var(--subtext1);
       font-size: 1.5rem;
     }
     .toc-level-4 & {

package/source/css/responsive.css

@@ -110,10 +110,6 @@
     margin-bottom: 0.5rem;
   }
 
-  .is-hidden-mobile {
-    display: none;
-  }
-
   table {
     font-size: 14px;
   }
@@ -140,10 +136,6 @@
     border-radius: 0;
   }
 
-  .pagination {
-    height: 2.5em;
-  }
-
   .article-comment-popover,
   .article-comment-popover-body {
     width: calc(100vw - 1rem);
@@ -169,46 +161,10 @@
 }
 
 @media screen and (min-width: 769px) {
-  .is-hidden-tablet {
-    display: none;
-  }
-
   .level {
     display: flex;
     flex-grow: 1;
   }
-
-  .pagination-list {
-    flex-grow: 1;
-    flex-shrink: 1;
-    justify-content: flex-start;
-    order: 1;
-  }
-
-  .pagination-previous {
-    order: 2;
-  }
-
-  .pagination-next {
-    order: 3;
-  }
-
-  .pagination {
-    justify-content: space-between;
-  }
-
-  .pagination-previous {
-    order: 1;
-  }
-
-  .pagination-list {
-    justify-content: center;
-    order: 2;
-  }
-
-  .pagination-next {
-    order: 3;
-  }
 }
 
 @media screen and (max-width: 1023px) {
@@ -222,7 +178,7 @@
   .navbar-menu.is-active {
     display: block;
     position: fixed;
-    top: 4rem;
+    top: 3.5rem;
     left: 0;
     width: 100%;
     height: 100vh;

package/source/css/tags.css

@@ -8,68 +8,68 @@
 }
 
 .tags-hero {
+  position: relative;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
-  gap: 1.25rem;
-  align-items: start;
-  padding-bottom: 1.25rem;
+  gap: 0.6rem;
+  padding-bottom: 1.5rem;
   border-bottom: 1px solid var(--tags-line);
 }
 
+.tags-hero::after {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  right: 0;
+  height: 2.5px;
+  background: color-mix(in oklch, var(--text) 50%, var(--base));
+}
+
 .tags-eyebrow {
-  margin: 0 0 0.35rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin: 0;
   color: var(--tags-muted);
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: 0.68rem;
   font-weight: 600;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
 }
 
-.tags-hero h1 {
-  margin: 0;
-  color: var(--text);
-  font-family: var(--font-serif);
-  font-size: 2.75rem;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: 0;
+.tags-hero__sep {
+  opacity: 0.3;
 }
 
-.tags-hero__summary {
-  max-width: 34rem;
-  margin: 1rem 0 0;
-  color: var(--subtext1);
+.tags-hero__roman {
+  position: absolute;
+  right: 0;
+  bottom: 1.5rem;
+  color: var(--text);
   font-family: var(--font-serif);
-  font-style: italic;
-}
-
-.tags-stats {
-  display: grid;
-  gap: 0.45rem;
-  margin: 0;
-}
-
-.tags-stats > div {
-  display: grid;
-  grid-template-columns: 4.5rem minmax(0, 1fr);
-  gap: 0.65rem;
-  align-items: baseline;
-}
-
-.tags-stats dt {
-  color: var(--tags-muted);
-  font-family: var(--font-mono);
-  font-size: 0.72rem;
-  text-transform: uppercase;
+  font-size: 5rem;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  opacity: 0.06;
+  line-height: 1;
+  pointer-events: none;
+  user-select: none;
 }
 
-.tags-stats dd {
-  min-width: 0;
+.tags-hero h1 {
   margin: 0;
   color: var(--text);
-  font-weight: 700;
-  overflow-wrap: anywhere;
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-synthesis: none;
+  font-size: 3.5rem;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  position: relative;
+  z-index: 1;
 }
 
 .tags-index {
@@ -142,23 +142,12 @@
     gap: 1.25rem;
   }
 
-  .tags-hero {
-    grid-template-columns: 1fr;
-  }
-
   .tags-hero h1 {
-    font-size: 2.35rem;
-  }
-
-  .tags-stats {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.5rem;
+    font-size: 2.6rem;
   }
 
-  .tags-stats > div {
-    display: block;
-    border-left: 1px solid color-mix(in oklch, var(--tags-line) 72%, transparent);
-    padding: 0 0 0 0.6rem;
+  .tags-hero__roman {
+    font-size: 3.5rem;
   }
 }
 
@@ -168,7 +157,12 @@
   }
 
   .tags-hero h1 {
-    font-size: 2rem;
+    font-size: 2.1rem;
+  }
+
+  .tags-hero__roman {
+    font-size: 2.5rem;
+    opacity: 0.04;
   }
 
   .tags-index {