hexo-theme-gnix 12.0.0 → 14.0.0

package/source/css/default.css

@@ -251,9 +251,37 @@ 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);
 }
 
+.site-toast {
+  position: fixed;
+  top: 10rem;
+  left: 50%;
+  z-index: 102;
+  max-width: min(90vw, 32rem);
+  padding: 0.7rem 1rem;
+  border: 1px solid var(--surface2);
+  border-radius: 0.75rem;
+  background: var(--surface1);
+  color: var(--text);
+  box-shadow: 0 0.75rem 2rem -1rem hsl(from var(--text) h s l / 0.35);
+  font-size: 0.875rem;
+  line-height: 1.35;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateX(-50%) translateY(-2rem);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.site-toast.is-visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
 .navbar-main,
 .navbar-menu {
   user-select: none;
@@ -530,21 +558,32 @@ html {
 /* #region Navbar */
 
 .navbar {
-  min-height: 4rem;
+  min-height: 3.5rem;
   position: sticky;
-  top: env(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+  top: 0;
   left: 0;
   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);
   }
 }
 
@@ -553,7 +592,7 @@ html {
   margin: 0 auto;
   width: auto;
   display: flex;
-  min-height: 4rem;
+  min-height: 3.5rem;
 
   button {
     background: none;
@@ -562,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;
@@ -575,33 +633,63 @@ html {
   flex-grow: 0;
   flex-shrink: 0;
   letter-spacing: 0.05em;
-  transition: color 0.18s ease;
+  transition: color 220ms ease;
 }
 
-.navbar-start .navbar-item.is-active {
-  color: var(--text);
-  font-weight: 500;
-}
+@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.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-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);
   }
 }
 
@@ -645,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;
@@ -707,61 +752,54 @@ html {
 
 .footer {
   user-select: none;
-  padding: 3rem 1.5rem 6rem;
   position: relative;
-  border-top: 0.5px solid var(--surface0);
-
-  iconify-icon {
-    font-size: 1.2rem;
-  }
-}
-
-.footer-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  grid-gap: 1.5rem;
-  align-items: start;
+  padding: 4rem 1.5rem 3rem;
+  text-align: center;
+  color: var(--overlay0);
+  font-family: var(--font-mono);
 }
 
-.footer-column {
+.footer-brand {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 0.25rem;
 }
 
-.footer-title {
-  font-family: homemade-apple, var(--font-handwriting);
-  font-weight: bolder;
-  font-size: 1.1rem;
-  margin-bottom: 0.25rem;
+.footer-credit,
+.footer-credit > a {
+  font-size: 0.75rem;
+  font-weight: 400;
+  margin: 0;
+  letter-spacing: 0.06em;
+  color: inherit;
 }
 
-.footer-heading {
-  font-weight: bolder;
-  font-family: var(--font-serif);
+.footer-author {
+  font-size: 0.8125rem;
   font-style: italic;
-  font-size: 1.1rem;
-  margin-bottom: 0.25rem;
+  font-family: homemade-apple, var(--font-handwriting);
+  color: var(--subtext0);
+  font-weight: 600;
+  letter-spacing: 0.01em;
 }
 
 .footer-meta {
-  font-size: 0.75rem;
-  color: var(--subtext0);
-  line-height: 1.6;
+  font-size: 0.65rem;
+  font-weight: 400;
+  margin: 0;
+  line-height: 1.8;
+  letter-spacing: 0.02em;
 }
 
-.footer-links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem 1rem;
-  align-items: center;
+.footer-icp {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s ease;
 }
 
-.footer-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  color: var(--subtext0);
+.footer-icp:hover {
+  color: var(--lavender);
 }
 
 /* #endregion Footer */
@@ -825,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 {
@@ -1248,7 +1287,6 @@ small {
 /* #endregion Content */
 
 article,
-aside,
 figure,
 footer,
 header,
@@ -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);
     }

package/source/css/optional/mermaid.css

@@ -19,7 +19,12 @@
   opacity: 0;
   transition: opacity 0.2s ease;
 }
-.mermaid-wrapper:hover .mermaid-toolbar {
+@media (hover: hover) and (pointer: fine) {
+  .mermaid-wrapper:hover .mermaid-toolbar {
+    opacity: 1;
+  }
+}
+.mermaid-wrapper.is-controls-visible .mermaid-toolbar {
   opacity: 1;
 }
 .mermaid-view-container {
@@ -57,7 +62,12 @@
   grid-template-rows: repeat(3, 1fr);
   gap: 4px;
 }
-.mermaid-wrapper:hover .mermaid-viewer-grid-panel {
+@media (hover: hover) and (pointer: fine) {
+  .mermaid-wrapper:hover .mermaid-viewer-grid-panel {
+    opacity: 1;
+  }
+}
+.mermaid-wrapper.is-controls-visible .mermaid-viewer-grid-panel {
   opacity: 1;
 }
 .mermaid-viewer-grid-panel .grid-row {
@@ -112,10 +122,6 @@
   .mermaid-wrapper {
     border-radius: 3px;
   }
-  .mermaid-toolbar,
-  .mermaid-viewer-grid-panel {
-    opacity: 1;
-  }
   .btn {
     width: 28px;
     height: 28px;

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/shiki/shiki.css

@@ -56,7 +56,8 @@ figure.shiki {
   overflow: auto;
   background: var(--mantle);
   color: var(--text);
-  iconify-icon {
+  svg {
+    width: 1em;
     color: transparent;
     cursor: pointer;
     transition:
@@ -65,7 +66,7 @@ figure.shiki {
   }
 
   &:hover {
-    iconify-icon {
+    svg {
       color: var(--text);
       &:hover {
         color: var(--blue);
@@ -165,13 +166,13 @@ figure.shiki {
   align-items: center;
   font-size: 1em;
   cursor: pointer;
-  > iconify-icon {
+  > svg {
     padding: 6px 0;
     animation: code-expand-pulse 1.2s infinite;
     transition: transform 0.3s ease;
   }
 
-  &.expand-done > iconify-icon {
+  &.expand-done > svg {
     transform: rotate(180deg);
   }
 }