hexo-theme-gnix 11.0.0 → 13.0.0

package/source/css/callout_blocks.css

@@ -1,14 +1,13 @@
 .callout {
   --callout-color: var(--blue);
-  --callout-icon: lucide-pencil;
   --callout-collapse-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTkgMThsNi02bC02LTYiLz48L3N2Zz4=);
-  background-color: hsl(from var(--callout-color) h s l / 0.2);
+  background-color: hsl(from var(--callout-color) h s l / 0.15);
   border-color: hsl(from var(--callout-color) h s l / 0.5);
   border-radius: 8px;
   border-style: solid;
   border-width: 1.5px;
   margin: 1.5em 0 !important;
-  padding: 10px 12px 10px 15px;
+  padding: 10px 15px;
 
   svg {
     color: var(--callout-color);
@@ -18,19 +17,44 @@
 .callout-title {
   align-items: center;
   color: var(--callout-color);
-  cursor: pointer;
   display: flex;
   font-size: inherit;
   font-weight: bold;
   gap: 7px;
   line-height: 1.3;
   padding: 0;
+  list-style: none;
+}
+
+.callout-title::-webkit-details-marker,
+.callout-title::marker {
+  display: none;
+}
+
+details.callout > .callout-title {
+  cursor: pointer;
+  user-select: none;
+}
+
+details.callout > .callout-title:hover {
+  color: hsl(from var(--callout-color) h s calc(l + 5));
 }
 
-.callout-icon {
+.callout-icon,
+.callout-title-icon {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
+
+  svg {
+    width: 1.1em;
+    height: 1.1em;
+  }
+}
+
+.callout-title-inner {
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .callout-fold {
@@ -39,47 +63,48 @@
   mask-size: 100%;
   -webkit-mask-image: var(--callout-collapse-icon);
   -webkit-mask-size: 100%;
-  height: 20px;
-  width: 20px;
-  transition: 0.1s ease-in-out;
+  height: 1em;
+  width: 1em;
+  flex: 0 0 auto;
+  transition: transform 0.15s ease-in-out;
+}
+
+details[open].callout > .callout-title > .callout-fold {
+  transform: rotate(90deg);
 }
 
 .callout-content {
   padding: 0;
 }
 
-details[close].callout > .callout-title > .callout-fold {
-  transform: rotate(-90deg);
+.callout-content > :first-child {
+  margin-top: 0.5em;
 }
 
-details[open].callout > .callout-title > .callout-fold {
-  transform: rotate(90deg);
+.callout-content > :last-child {
+  margin-bottom: 0;
 }
 
 .callout[data-callout="info"],
 .callout[data-callout="todo"] {
-  --callout-icon: lucide-check-circle-2;
   --callout-color: var(--sapphire);
 }
 
 .callout[data-callout="success"],
 .callout[data-callout="check"],
 .callout[data-callout="done"] {
-  --callout-icon: lucide-check;
   --callout-color: var(--green);
 }
 
 .callout[data-callout="warning"],
 .callout[data-callout="caution"],
 .callout[data-callout="attention"] {
-  --callout-icon: lucide-alert-triangle;
   --callout-color: var(--peach);
 }
 
 .callout[data-callout="question"],
 .callout[data-callout="help"],
 .callout[data-callout="faq"] {
-  --callout-icon: lucide-alert-mark;
   --callout-color: var(--yellow);
 }
 
@@ -89,31 +114,26 @@ details[open].callout > .callout-title > .callout-fold {
 .callout[data-callout="failure"],
 .callout[data-callout="fail"],
 .callout[data-callout="missing"] {
-  --callout-icon: lucide-zap;
   --callout-color: var(--red);
 }
 
 .callout[data-callout="tip"],
 .callout[data-callout="hint"],
 .callout[data-callout="important"] {
-  --callout-icon: lucide-flame;
   --callout-color: var(--pink);
 }
 
 .callout[data-callout="example"] {
-  --callout-icon: lucide-list;
   --callout-color: var(--mauve);
 }
 
 .callout[data-callout="abstract"],
 .callout[data-callout="summary"],
 .callout[data-callout="tldr"] {
-  --callout-icon: lucide-clipboard-list;
   --callout-color: var(--teal);
 }
 
 .callout[data-callout="quote"],
 .callout[data-callout="cite"] {
-  --callout-icon: quote-glyph;
   --callout-color: var(--lavender);
 }

package/source/css/default.css

@@ -254,6 +254,33 @@ body {
   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;
@@ -532,7 +559,8 @@ html {
 .navbar {
   min-height: 4rem;
   position: sticky;
-  top: env(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+  top: 0;
   left: 0;
   right: 0;
   z-index: 100;
@@ -578,23 +606,6 @@ html {
   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 {
   svg {
     width: 1.2em;
@@ -688,56 +699,6 @@ html {
 
 /* #endregion Pagination */
 
-/* #region Tabs */
-
-.tabs-tabs-wrapper {
-  overflow: hidden;
-  margin: 10px auto;
-}
-
-.tabs-tabs-header {
-  padding: 0 0.5rem;
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.tabs-tab-button {
-  padding: 0.5em 1rem;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: 0 0;
-  font-size: 1em;
-  cursor: pointer;
-  position: relative;
-  transition: color 0.3s ease;
-  outline: 0;
-  color: var(--subtext0);
-  flex: 0 0 auto;
-  white-space: nowrap;
-
-  &:hover,
-  &.active {
-    color: var(--text);
-    border-color: var(--text);
-  }
-}
-
-.tabs-tabs-container {
-  padding: 0.8em 0 10px 0;
-}
-
-.tabs-tab-content {
-  display: none;
-}
-
-.tabs-tab-content.active,
-.tabs-tab-content[data-active] {
-  display: block;
-}
-
-/* #endregion Tabs */
-
 .section {
   padding: 3rem 1.5rem;
   flex-grow: 1;
@@ -757,61 +718,51 @@ 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);
 }
 
-.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 {
+  font-size: 0.75rem;
+  font-weight: 400;
+  margin: 0;
+  letter-spacing: 0.06em;
 }
 
-.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 */
@@ -940,8 +891,7 @@ html {
     margin-bottom: 0.5rem;
   }
 
-  p:last-child,
-  .tabs-tabs-wrapper:last-child {
+  p:last-child {
     margin-bottom: 0;
   }
 
@@ -1157,13 +1107,19 @@ article.card-content .content :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
   font-size: 0.9em;
 }
 
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow: auto;
-  margin: 1rem 0;
-  font-size: 1rem;
+.table-wrapper {
+  max-width: 100%;
+  margin: 1.5em 0;
+  overflow-x: auto;
+
+  table {
+    min-width: max-content;
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    overflow: auto;
+    margin: 1rem 0;
+  }
 }
 
 td,
@@ -1293,7 +1249,6 @@ small {
 /* #endregion Content */
 
 article,
-aside,
 figure,
 footer,
 header,
@@ -2382,7 +2337,7 @@ input.searchbox-input {
       font-size: 1.8rem;
     }
     .toc-level-3 & {
-      color: var(--subtext1);
+      color: var(--overlay1);
       font-size: 1.5rem;
     }
     .toc-level-4 & {

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/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);
   }
 }