hexo-theme-gnix 5.0.1 → 5.0.3

package/layout/common/article.jsx

@@ -34,7 +34,7 @@ module.exports = class extends Component {
     return (
       <Fragment>
         {/* Main content */}
-        <div class="card article-wrapper">
+        <div class="card">
           {/* Cover image */}
           {cover ? (
             <ArticleCover

package/layout/common/navbar.jsx

@@ -38,23 +38,8 @@ class Navbar extends Component {
     return (
       <nav class="navbar navbar-main" onclick="handleNavbarClick(event);">
         <div class="navbar-container">
-          <a href={siteUrl}>
-            <svg
-              fill="var(--flamingo)"
-              viewBox="0 0 1182.000000 750.000000"
-              width="5em"
-              height="100%"
-              role="img"
-              aria-label="Blog Logo"
-            >
-              <g
-                transform="translate(0.000000,930.000000) scale(0.100000,-0.100000)"
-                stroke="none"
-              >
-                <path d="M4915 7175 c-238 -39 -533 -139 -794 -270 -549 -275 -1067 -758 -1291 -1205 -73 -145 -95 -225 -94 -345 0 -120 23 -188 86 -260 203 -231 774 -132 1521 262 185 97 298 161 372 209 l30 19 -19 -30 c-11 -16 -50 -74 -88 -130 l-69 -100 -102 -46 c-564 -253 -1269 -905 -1508 -1394 -118 -241 -121 -414 -9 -525 149 -150 390 -86 629 165 150 158 405 524 664 951 80 132 212 348 294 480 l148 239 70 24 c84 28 203 38 262 22 57 -16 100 -54 115 -102 20 -69 78 -90 123 -45 l24 24 15 -22 c9 -15 11 -28 5 -37 -16 -26 -9 -34 10 -11 12 13 31 22 48 22 39 0 46 6 88 78 73 125 268 348 406 464 115 98 227 147 230 101 3 -48 -7 -88 -58 -232 -91 -257 -76 -348 63 -374 88 -17 295 69 544 226 l135 85 5 -92 c10 -163 74 -226 232 -226 155 0 283 58 523 235 61 45 141 107 179 138 38 32 72 57 76 57 4 0 18 -31 30 -69 l22 -70 -79 -93 c-139 -162 -240 -309 -300 -433 -48 -101 -43 -157 17 -170 44 -10 77 15 91 67 18 70 161 276 292 423 l44 50 41 -37 c102 -92 323 -101 573 -22 97 30 292 121 394 184 98 60 293 207 306 231 17 33 7 80 -22 102 -35 25 -52 19 -136 -50 -232 -191 -517 -330 -761 -370 -130 -21 -200 -13 -248 29 -18 16 -34 36 -34 44 0 7 55 63 123 125 304 277 553 444 736 495 61 17 62 17 77 -4 10 -14 26 -22 45 -22 45 0 67 16 75 56 5 29 2 40 -17 61 -41 43 -92 63 -162 63 -174 0 -434 -158 -805 -491 -68 -61 -125 -109 -126 -107 -1 1 -17 34 -35 71 -34 70 -76 108 -133 122 -22 6 -36 -3 -99 -60 -97 -89 -338 -270 -433 -324 -144 -82 -255 -110 -304 -75 -44 30 -24 141 53 294 24 47 52 94 64 104 29 26 26 52 -8 87 -22 21 -39 29 -66 29 -49 0 -69 -12 -104 -63 -33 -48 -307 -240 -486 -340 -108 -60 -241 -117 -274 -117 -27 0 -26 12 5 85 99 233 127 382 85 462 -33 66 -73 88 -156 88 -106 -1 -183 -45 -337 -194 -43 -41 -78 -71 -78 -68 0 10 60 118 82 146 63 82 -57 168 -131 94 -33 -34 -137 -260 -241 -522 l-77 -194 -17 49 c-22 68 -63 115 -134 152 -70 37 -173 54 -266 45 l-60 -6 79 114 c143 210 249 343 339 429 229 217 236 225 242 257 5 26 1 37 -19 57 -16 16 -37 26 -54 26 -39 0 -142 -80 -250 -193 -99 -104 -201 -187 -378 -305 -429 -286 -1057 -565 -1435 -636 -95 -18 -257 -21 -315 -5 -51 14 -110 73 -124 124 -47 168 80 462 316 736 425 490 995 840 1638 1004 235 60 436 71 493 27 23 -17 27 -26 24 -61 -3 -52 9 -76 47 -89 60 -21 101 26 101 116 0 85 -34 132 -125 174 -45 20 -68 23 -215 25 -107 1 -197 -3 -255 -12z m-536 -2152 c-13 -21 -54 -87 -93 -148 -38 -60 -130 -211 -204 -335 -156 -261 -360 -571 -492 -750 -203 -275 -393 -411 -497 -356 -117 60 -104 230 34 458 176 292 619 737 985 990 88 61 271 177 281 177 5 1 -2 -16 -14 -36z" />{" "}
-                <path d="M7073 6016 c-60 -27 -83 -120 -42 -165 49 -53 119 -51 168 5 82 93 -11 212 -126 160z" />{" "}
-              </g>
-            </svg>
+          <a href={siteUrl} style={"font-family: homemade-apple; color: var(--text); display: flex; align-items: center; padding: 0 1em;"}>
+              GnixAij
           </a>
           <div class="navbar-menu">
             {Object.keys(menu).length ? (

package/layout/layout.jsx

@@ -19,7 +19,7 @@ module.exports = class extends Component {
           <Navbar config={config} helper={helper} page={page} />
           <ThemeSelector />
           <section class="section">
-            <div class="main-content" dangerouslySetInnerHTML={{ __html: body }} ></div>
+            <div class="main-content" id="swup" dangerouslySetInnerHTML={{ __html: body }} ></div>
           </section>
           <Footer site={site} config={config} helper={helper} />
           <Scripts site={site} config={config} helper={helper} page={page} />

package/layout/plugin/swup.jsx

@@ -6,12 +6,22 @@ class Swup extends Component {
       return null;
     }
 
-    const swupScript =
-      'const swup = new Swup({ containers: [".main-content"], });';
+    const swupScript = `
+const swup = new Swup({
+  containers: ["#swup"],
+  cache: true,
+  plugins: [
+    new SwupHeadPlugin({
+      persistTags: true
+    })
+  ]
+});
+`;
     return (
       <Fragment>
         <script src="/js/host/swup/Swup.umd.min.js"></script>
-        <script dangerouslySetInnerHTML={{ __html: swupScript }}> </script>
+        <script src="/js/host/swup/head-plugin.umd.min.js"></script>
+        <script dangerouslySetInnerHTML={{ __html: swupScript }}></script>
       </Fragment>
     );
   }

package/layout/tag.jsx

@@ -1,5 +1,33 @@
 const { Component, Fragment } = require("../include/util/common");
 const Index = require("./index");
+const breadcrumb_css = `
+  .breadcrumb {
+    color: var(--blue);
+    white-space: nowrap;
+    font-family: Monaspace Radon, var(--font-mono);
+
+    a {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      padding: 0 0.1em;
+    }
+
+    ul {
+      align-items: flex-start;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+    }
+
+    li {
+      align-items: center;
+      display: flex;
+      a {
+        color: var(--yellow);
+      }
+    }
+  }`;
 
 module.exports = class extends Component {
   render() {
@@ -8,15 +36,15 @@ module.exports = class extends Component {
 
     return (
       <Fragment>
+        <style>{breadcrumb_css}</style>
         <nav class="breadcrumb" aria-label="breadcrumbs">
           <ul>
             <li>
-              {" "}
               <font style="color: var(--green)">$</font>&nbsp;ls&nbsp;
-              <a href={url_for("/tags/")}>{_p("common.tag", Infinity)}</a>
+              <a href={url_for("/tags/")}>{_p("common.tag", Infinity)}/</a>
             </li>
-            <li class="is-active">
-              <a href="#" aria-current="page">
+            <li>
+              <a href="#" aria-current="page" style="cursor: default; pointer-events: none; color: var(--mauve);">
                 {page.tag}
               </a>
             </li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-gnix",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "author": "Efterklang <gaojiaxing0220@gmail.com>",
   "license": "MIT",
   "description": "Second generation of Hexo theme Icarus, now with Catppuccin flavor and night mode support.",

package/source/css/default.css

@@ -4,9 +4,9 @@
   --font-serif:
     "PT Serif", Georgia, "Times New Roman", Times, "Songti SC", "STSong", serif;
   --font-sans-serif:
-    Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  --font-monospace:
+    Avenir, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+    "Open Sans", "Helvetica Neue", sans-serif;
+  --font-mono:
     "Maple Mono NF CN Local", "Maple Mono NF CN", "SF Mono", "SF Pro", Monaco,
     Consolas, "Liberation Mono", "Courier New", monospace;
   --font-article:
@@ -14,6 +14,8 @@
     "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
     "Source Han Sans CN", sans-serif;
   --font-handwriting: "Bradley Hand", "homemade-apple", cursive;
+  --radius: 12px;
+  --spaceing: 0.25rem;
 }
 
 /* #region Color */
@@ -205,39 +207,6 @@ a:hover {
   color: var(--blue);
 }
 
-a.header-anchor:hover::after {
-  margin-left: 0.2em;
-  color: var(--surface0);
-}
-
-a.header-anchor {
-  color: var(--text);
-}
-
-h3 a.header-anchor {
-  &:hover::after {
-    content: "###";
-  }
-}
-
-h4 a.header-anchor {
-  &:hover::after {
-    content: "####";
-  }
-}
-
-h5 a.header-anchor {
-  &:hover::after {
-    content: "#####";
-  }
-}
-
-h6 a.header-anchor {
-  &:hover::after {
-    content: "######";
-  }
-}
-
 mark {
   background-color: var(--yellow);
 }
@@ -250,10 +219,6 @@ mark {
   accent-color: var(--mauve);
 }
 
-blockquote::before {
-  color: var(--red);
-}
-
 .article-licensing {
   color: var(--subtext1);
   border-top: 0.1px dashed var(--surface0);
@@ -262,7 +227,7 @@ blockquote::before {
 .navbar-main,
 .navbar-menu {
   user-select: none;
-  background: hsl(from var(--mantle) h s l / 0.95);
+  background: var(--mantle);
 }
 
 body {
@@ -270,19 +235,11 @@ body {
   color: var(--text);
 }
 
-.card {
-  border: 0.5px dashed var(--surface0);
-}
-
 input.task-list-item-checkbox:checked {
   background-color: var(--green);
   border-color: var(--green);
 }
 
-.navbar-item {
-  color: var(--text);
-}
-
 hr {
   background-color: var(--surface0);
 }
@@ -361,15 +318,14 @@ input:-webkit-autofill {
 
 @font-face {
   font-family: homemade-apple;
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/css/font/woff2/HomemadeApple.woff2) format("woff2");
+  src:
+    local("Homemade Apple"),
+    local("HomemadeApple-Regular"),
+    url(/css/font/woff2/HomemadeApple.woff2) format("woff2");
 }
 
 /* #endregion */
 
-blockquote,
 body,
 dd,
 dl,
@@ -423,7 +379,6 @@ body {
   flex-direction: column;
 }
 
-.breadcrumb,
 .pagination-ellipsis,
 .pagination-link,
 .pagination-next,
@@ -435,49 +390,10 @@ body {
   user-select: none;
 }
 
-.breadcrumb:not(:last-child),
 .pagination:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-.breadcrumb {
-  white-space: nowrap;
-  font-family: "Monaspace Radon", var(--font-monospace);
-}
-
-.breadcrumb a {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding: 0 0.1em;
-}
-
-.breadcrumb li {
-  align-items: center;
-  display: flex;
-}
-
-.breadcrumb li:first-child a {
-  padding-left: 0;
-}
-
-.breadcrumb li.is-active a {
-  cursor: default;
-  pointer-events: none;
-}
-
-.breadcrumb li + li::before {
-  content: "\0002f";
-}
-
-.breadcrumb ol,
-.breadcrumb ul {
-  align-items: flex-start;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
 .toc-text,
 .footer,
 .widget {
@@ -487,8 +403,9 @@ body {
 .card {
   max-width: 100%;
   position: relative;
-  border-radius: 24px;
   overflow: visible;
+  border-radius: var(--radius);
+  border: 0.5px dashed var(--surface0);
 }
 
 .card + .card {
@@ -511,6 +428,7 @@ body {
   transition: transform 0.3s ease-in-out;
   z-index: 100;
   font-family: var(--font-sans-serif);
+  border-bottom: 0.5px solid var(--surface0);
 }
 
 .navbar-container {
@@ -531,27 +449,18 @@ body {
   transform: translateY(-100%);
 }
 
-.navbar-menu {
-  display: none;
-}
-
 .navbar-item {
+  color: var(--subtext1);
   align-items: center;
   display: flex;
   font-size: 1.1rem;
-  padding: 0 0.4rem;
+  padding: 0 0.5rem;
   position: relative;
   flex-grow: 0;
   flex-shrink: 0;
-}
-
-.navbar-item svg {
-  width: 15px;
-}
-
-.navbar-menu {
-  flex-grow: 1;
-  flex-shrink: 0;
+  svg {
+    width: 15px;
+  }
 }
 
 /* #endregion Navbar */
@@ -612,7 +521,7 @@ body {
 .theme-selector-hint {
   font-size: 0.875rem;
   color: var(--subtext0);
-  font-family: var(--font-monospace);
+  font-family: var(--font-mono);
 }
 
 .theme-selector-list {
@@ -795,7 +704,7 @@ body {
   flex-grow: 1;
   margin: 0 auto;
   position: relative;
-  max-width: 980px;
+  max-width: 1080px;
 }
 
 /* #region Footer */
@@ -882,6 +791,15 @@ body {
     text-decoration-color: var(--mauve);
   }
 
+  a.header-anchor {
+    color: var(--text);
+
+    &:hover::after {
+      margin-left: 0.2em;
+      color: var(--surface0);
+    }
+  }
+
   h2 {
     font-size: 2.25em;
     font-weight: 700;
@@ -890,9 +808,7 @@ body {
     margin: 1rem 0 1rem;
     border-bottom: 0.8px solid var(--surface0);
 
-    a.header-anchor {
-      color: var(--text);
-
+    > a.header-anchor {
       &:hover::after {
         content: "##";
       }
@@ -905,6 +821,12 @@ body {
     line-height: 1.25;
     letter-spacing: -0.015em;
     margin: 1.2rem 0 1rem;
+
+    > a.header-anchor {
+      &:hover::after {
+        content: "###";
+      }
+    }
   }
 
   h4 {
@@ -913,6 +835,12 @@ body {
     line-height: 1.25;
     letter-spacing: -0.01em;
     margin: 1.2rem 0 1rem;
+
+    > a.header-anchor {
+      &:hover::after {
+        content: "####";
+      }
+    }
   }
 
   h5 {
@@ -921,6 +849,12 @@ body {
     line-height: 1.25;
     letter-spacing: -0.005em;
     margin: 1.2rem 0 1rem;
+
+    > a.header-anchor {
+      &:hover::after {
+        content: "#####";
+      }
+    }
   }
 
   h6 {
@@ -928,6 +862,12 @@ body {
     font-weight: 600;
     line-height: 1.25;
     margin: 1.2rem 0 1rem;
+
+    > a.header-anchor {
+      &:hover::after {
+        content: "######";
+      }
+    }
   }
 
   .p:not(:last-child) {
@@ -935,37 +875,34 @@ body {
   }
 
   p,
-  blockquote,
   ol,
   dl,
   pre,
   details {
-    margin-top: 0;
     margin-bottom: 1rem;
   }
 
   p:last-child,
-  ul:last-child,
-  ol:last-child,
   .tabs-tabs-wrapper:last-child {
     margin-bottom: 0;
   }
 
-  li + li {
-    margin-top: 0.25em;
-  }
-
   img,
   video {
     display: block;
     max-width: 100%;
-    margin: 0 auto 0 auto;
+    margin: 0 auto;
 
     &:hover {
       cursor: pointer;
     }
   }
 
+  video,
+  .pic {
+    margin: 1em auto;
+  }
+
   ol {
     list-style-position: outside;
     padding-left: 2em;
@@ -1035,14 +972,12 @@ body {
 
   code {
     font-size: 0.85em;
-    font-weight: 400;
-    font-family: var(--font-monospace);
-    padding: 0 0.15em;
-    margin: 0 0.1em;
+    font-family: var(--font-mono);
+    padding: 0 0.25em;
     background-color: var(--base);
     color: var(--subtext1);
     border: 1px solid var(--surface0);
-    border-radius: 6px;
+    border-radius: 4px;
   }
 
   sub,
@@ -1060,7 +995,7 @@ body {
   a[href*="github"]::before,
   a[href*="wikipedia"]::before,
   a[href*="youtube"]::before {
-    font-family: var(--font-monospace);
+    font-family: var(--font-mono);
     font-size: 1em;
     padding-left: 0.5em;
     color: var(--lavender);
@@ -1089,6 +1024,8 @@ body {
 }
 
 table {
+  table-layout: fixed;
+  word-wrap: break-word;
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
@@ -1131,20 +1068,18 @@ blockquote {
   border-left: 2px solid var(--red);
   border-radius: 0 8px 8px 0;
   font-family: var(--font-serif);
-  font-style: italic;
-  font-size: 1rem;
-  line-height: 1.5;
-}
 
-blockquote:before {
-  content: "”";
-  position: absolute;
-  left: 0.5rem;
-  top: 0.2rem;
-  font-size: 3rem;
-  font-weight: 700;
-  opacity: 0.3;
-  line-height: 1;
+  &:before {
+    content: "”";
+    color: var(--red);
+    position: absolute;
+    left: 0.5rem;
+    top: 0.2rem;
+    font-size: 3rem;
+    font-weight: 700;
+    opacity: 0.3;
+    line-height: 1;
+  }
 }
 
 ul.contains-task-list {
@@ -1172,7 +1107,7 @@ input.task-list-item-checkbox {
 
 input.task-list-item-checkbox:checked::before {
   content: "";
-  font-family: var(--font-monospace);
+  font-family: var(--font-mono);
   color: var(--base);
   position: absolute;
   top: 50%;
@@ -1263,15 +1198,14 @@ section {
   letter-spacing: -0.02em;
   margin-bottom: 0.3em;
   color: var(--text);
-  word-break: break-word;
-}
 
-.article-title a {
-  color: inherit;
+  > a {
+    color: inherit;
+  }
 }
 
 .article-header-meta {
-  font-family: var(--font-monospace);
+  font-family: var(--font-mono);
   overflow: auto;
   padding-bottom: 0.5em;
   margin-bottom: 1rem;
@@ -1370,7 +1304,7 @@ section {
   width: 100%;
   height: 100%;
   z-index: 100;
-  font-family: monospace, var(--font-monospace);
+  font-family: monospace, var(--font-mono);
   line-height: 0;
   opacity: 0;
   visibility: hidden;
@@ -1471,7 +1405,7 @@ input.searchbox-input {
   position: relative;
   display: block;
   overflow: hidden;
-  border-radius: 24px 24px 0 0;
+  border-radius: var(--radius) var(--radius) 0 0;
   height: 380px;
 
   .cover-image-placeholder {
@@ -1496,4 +1430,3 @@ input.searchbox-input {
 }
 
 /* #endregion Article Cover */
-

package/source/css/responsive/desktop.css

@@ -12,28 +12,28 @@
 }
 
 /* navbar */
-.navbar-main .navbar-menu,
-.navbar-main .navbar-start,
-.navbar-main .navbar-end {
+.navbar-menu,
+.navbar-start,
+.navbar-end {
   align-items: stretch;
   display: flex;
   padding: 0;
   flex-shrink: 0;
 }
 
-.navbar-main .navbar-menu {
+.navbar-menu {
   flex-grow: 1;
   flex-shrink: 0;
   overflow-x: auto;
   background-color: transparent;
 }
 
-.navbar-main .navbar-start {
+.navbar-start {
   justify-content: flex-start;
   margin-right: auto;
 }
 
-.navbar-main .navbar-end {
+.navbar-end {
   justify-content: flex-end;
   margin-left: auto;
 }
@@ -161,4 +161,4 @@
   padding: 0;
   margin: 0;
   display: contents;
-}
+}

package/source/css/responsive/mobile.css

@@ -13,6 +13,7 @@ span.year {
 
 table {
   font-size: 14px;
+  word-wrap: break-word;
 }
 
 table th,

package/source/css/responsive/touch.css

@@ -1,7 +1,8 @@
 /* This is used for mobile and tablet devices */
 /* #region Navbar */
 /* Navbar Burger */
-.navbar-main .navbar-menu {
+.navbar-menu {
+  display: none;
   padding: 0.5rem 0;
 }
 

package/source/css/shiki/shiki.css

@@ -1,5 +1,5 @@
 .code-title {
-  font-size: .75em;
+  font-size: 0.75em;
   font-style: italic;
 }
 
@@ -33,20 +33,39 @@ code span {
 }
 
 figure.shiki {
-  margin: 0 0 24px;
+  margin: 0.5em 0;
   border-radius: 8px;
   border: 0.5px solid var(--surface0);
   overflow: auto;
   background: var(--mantle);
   color: var(--text);
+
+  iconify-icon {
+    color: transparent;
+    cursor: pointer;
+    transition:
+      color 0.3s,
+      transform 0.3s ease;
+  }
+
+  &:hover {
+    iconify-icon {
+      color: var(--text);
+
+      &:hover {
+        color: var(--blue);
+        transform: scale(1.2);
+      }
+    }
+  }
 }
 
 .shiki-tools {
   display: flex;
   min-height: 1.5em;
   justify-content: space-between;
-  font-family: var(--font-monospace);
-  padding: 0 15px;
+  font-family: var(--font-mono);
+  padding: 0.3em 1em;
   user-select: none;
   overflow: hidden;
   position: relative;
@@ -66,18 +85,6 @@ figure.shiki {
     min-width: 0;
   }
 
-  iconify-icon {
-    cursor: pointer;
-    transition:
-      color 0.3s,
-      transform 0.3s ease;
-
-    &:hover {
-      transform: scale(1.1);
-      color: var(--blue);
-    }
-  }
-
   > .right {
     gap: 10px;
     display: flex;
@@ -85,15 +92,6 @@ figure.shiki {
   }
 }
 
-.shiki-tools .expand {
-  font-size: 1.2em;
-  margin-left: -2px;
-}
-
-.shiki-tools .expand.closed {
-  transform: rotate(90deg);
-}
-
 .shiki-tools > .right > .copy-notice {
   position: absolute;
   white-space: nowrap;
@@ -115,15 +113,14 @@ figure.shiki {
 .traffic-lights {
   display: flex;
   align-items: center;
-  padding-right: 8px;
-  margin-left: -7px;
+  margin-left: -0.5em;
 }
 
 .traffic-light {
-  width: 14px;
-  height: 14px;
+  width: 0.8em;
+  height: 0.8em;
   border-radius: 50%;
-  margin-left: 8px;
+  margin-left: 0.5em;
   position: relative;
 
   &.red {
@@ -140,7 +137,6 @@ figure.shiki {
 }
 
 @keyframes code-expand-pulse {
-
   0%,
   to {
     opacity: 0.6;
@@ -186,23 +182,7 @@ pre.shiki {
     border: none !important;
     width: 100%;
     margin: 0;
-    font-family: var(--font-monospace);
-
-    > span.line {
-      display: block;
-      width: fit-content;
-      min-width: 100%;
-
-      &:before {
-        content: counter(step);
-        counter-increment: step;
-        width: 1.2rem;
-        margin-right: 1.2rem;
-        display: inline-block;
-        text-align: right;
-        color: #738a9466;
-      }
-    }
+    font-family: var(--font-mono);
   }
 }
 
@@ -225,10 +205,12 @@ figure.shiki[data-collapsible="true"]:not(.expanded) > pre.shiki:after {
   height: 80px;
   pointer-events: none;
   z-index: 1;
-  background: linear-gradient(transparent 0%,
-      hsl(from var(--mantle) h s l / 0.8),
-      30%,
-      var(--mantle) 100%);
+  background: linear-gradient(
+    transparent 0%,
+    hsl(from var(--mantle) h s l / 0.8),
+    30%,
+    var(--mantle) 100%
+  );
   opacity: 1;
 }
 
@@ -236,6 +218,22 @@ figure.shiki[data-collapsible="true"].expanded > .code-expand-btn {
   transform: translateY(0);
 }
 
+span.line {
+  display: block;
+  width: fit-content;
+  min-width: 100%;
+
+  &:before {
+    content: counter(step);
+    counter-increment: step;
+    width: 1.2rem;
+    margin-right: 1.2rem;
+    display: inline-block;
+    text-align: right;
+    color: var(--subtext0);
+  }
+}
+
 span.line.diff {
   &.remove {
     background-color: hsl(from var(--red) h s l / 0.2);
@@ -1655,4 +1653,4 @@ pre.shiki.has-focused > code {
   --shiki-nord-font-weight: inherit;
   --shiki-tokyo: #89ddff;
   --shiki-tokyo-font-weight: bold;
-}
+}

package/source/js/host/swup/head-plugin.umd.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).SwupHeadPlugin=t()}(this,function(){function e(){return e=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},e.apply(this,arguments)}const t=e=>String(e).split(".").map(e=>String(parseInt(e||"0",10))).concat(["0","0"]).slice(0,3).join(".");class n{constructor(){this.isSwupPlugin=!0,this.swup=void 0,this.version=void 0,this.requires={},this.handlersToUnregister=[]}mount(){}unmount(){this.handlersToUnregister.forEach(e=>e()),this.handlersToUnregister=[]}_beforeMount(){if(!this.name)throw new Error("You must define a name of plugin when creating a class.")}_afterUnmount(){}_checkRequirements(){return"object"!=typeof this.requires||Object.entries(this.requires).forEach(([e,n])=>{if(!function(e,n,r){const s=function(e,t){var n;if("swup"===e)return null!=(n=t.version)?n:"";{var r;const n=t.findPlugin(e);return null!=(r=null==n?void 0:n.version)?r:""}}(e,r);return!!s&&((e,n)=>n.every(n=>{const[,r,s]=n.match(/^([\D]+)?(.*)$/)||[];var o,i;return((e,t)=>{const n={"":e=>0===e,">":e=>e>0,">=":e=>e>=0,"<":e=>e<0,"<=":e=>e<=0};return(n[t]||n[""])(e)})((i=s,o=t(o=e),i=t(i),o.localeCompare(i,void 0,{numeric:!0})),r||">=")}))(s,n)}(e,n=Array.isArray(n)?n:[n],this.swup)){const t=`${e} ${n.join(", ")}`;throw new Error(`Plugin version mismatch: ${this.name} requires ${t}`)}}),!0}on(e,t,n={}){var r;t=!(r=t).name.startsWith("bound ")||r.hasOwnProperty("prototype")?t.bind(this):t;const s=this.swup.hooks.on(e,t,n);return this.handlersToUnregister.push(s),s}once(t,n,r={}){return this.on(t,n,e({},r,{once:!0}))}before(t,n,r={}){return this.on(t,n,e({},r,{before:!0}))}replace(t,n,r={}){return this.on(t,n,e({},r,{replace:!0}))}off(e,t){return this.swup.hooks.off(e,t)}}function r(e){return"title"!==e.localName&&!e.matches("[data-swup-theme]")}function s(e,t){return e.outerHTML===t.outerHTML}function o(e,t){void 0===t&&(t=[]);const n=Array.from(e.attributes);return t.length?n.filter(e=>{let{name:n}=e;return t.some(e=>e instanceof RegExp?e.test(n):n===e)}):n}function i(e){return e.matches("link[rel=stylesheet][href]")}return class extends n{constructor(e){void 0===e&&(e={}),super();const t=this;this.name="SwupHeadPlugin",this.requires={swup:">=4.6"},this.defaults={persistTags:!1,persistAssets:!1,awaitAssets:!1,attributes:["lang","dir"],timeout:3e3},this.options=void 0,this.updateHead=function(e,n){try{const{awaitAssets:n,attributes:u,timeout:a}=t.options,l=e.to.document,{removed:c,added:h}=function(e,t,n){let{shouldPersist:o=()=>!1}=void 0===n?{}:n;const i=Array.from(e.children),u=Array.from(t.children),a=(l=i,u.reduce((e,t,n)=>(l.some(e=>s(t,e))||e.push({el:t,index:n}),e),[]));var l;const c=function(e,t){return e.reduce((e,n)=>(t.some(e=>s(n,e))||e.push({el:n}),e),[])}(i,u);c.reverse().filter(e=>{let{el:t}=e;return r(t)}).filter(e=>{let{el:t}=e;return!o(t)}).forEach(t=>{let{el:n}=t;return e.removeChild(n)});const h=a.filter(e=>{let{el:t}=e;return r(t)}).map(t=>{let n=t.el.cloneNode(!0);return e.insertBefore(n,e.children[(t.index||0)+1]||null),{...t,el:n}});return{removed:c.map(e=>{let{el:t}=e;return t}),added:h.map(e=>{let{el:t}=e;return t})}}(document.head,l.head,{shouldPersist:e=>t.isPersistentTag(e)});t.swup.log(`Removed ${c.length} / added ${h.length} tags in head`),u?.length&&function(e,t,n){void 0===n&&(n=[]);const r=new Set;for(const{name:s,value:i}of o(t,n))e.setAttribute(s,i),r.add(s);for(const{name:t}of o(e,n))r.has(t)||e.removeAttribute(t)}(document.documentElement,l.documentElement,u);const d=function(){if(n){const n=(void 0===(e=a)&&(e=0),h.filter(i).map(t=>function(e,t){let n;void 0===t&&(t=0);const r=t=>{e.sheet?t():n=setTimeout(()=>r(t),10)};return new Promise(s=>{r(()=>s(e)),t>0&&setTimeout(()=>{n&&clearTimeout(n),s(e)},t)})}(t,e))),r=function(){if(n.length)return t.swup.log(`Waiting for ${n.length} assets to load`),Promise.resolve(Promise.all(n)).then(function(){})}();if(r&&r.then)return r.then(function(){})}var e}();return Promise.resolve(d&&d.then?d.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},this.options={...this.defaults,...e},this.options.persistAssets&&!this.options.persistTags&&(this.options.persistTags="link[rel=stylesheet], script[src], style")}mount(){this.before("content:replace",this.updateHead)}isPersistentTag(e){const{persistTags:t}=this.options;return"function"==typeof t?t(e):"string"==typeof t&&t.length>0?e.matches(t):Boolean(t)}}});
+//# sourceMappingURL=index.umd.js.map

package/source/js/theme-selector.js

@@ -120,6 +120,7 @@
     const maxIndex = themeOptions.length - 1;
 
     switch (event.key) {
+      case "j":
       case "ArrowDown":
       case "Down":
         event.preventDefault();
@@ -127,6 +128,7 @@
         updateFocus(themeOptions);
         break;
 
+      case "k":
       case "ArrowUp":
       case "Up":
         event.preventDefault();