starlight-theme-nova 0.0.1 → 0.0.3

package/lib/markdown.css

@@ -0,0 +1,37 @@
+.sl-markdown-content {
+  /* Style the Markdown heading links. */
+  :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) > a {
+    color: var(--sl-color-white);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  code:not(:where(.not-content *)) {
+    border-radius: 0.25rem;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--sl-color-border-inline-code);
+    background-color: var(--sl-color-bg-inline-code);
+    padding: 0.125rem 0.25rem;
+  }
+}
+
+/* <code> inside asides */
+@supports (
+  border-color: color-mix(
+      in srgb,
+      var(--sl-color-asides-text-accent) 12%,
+      transparent
+    )
+) {
+  .sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
+    border-color: color-mix(
+      in srgb,
+      var(--sl-color-asides-text-accent) 12%,
+      transparent
+    );
+  }
+}

package/lib/styles.gen.css

@@ -15,9 +15,13 @@
     --sl-color-gray-5: #374151;
     --sl-color-gray-6: #1f2937;
     --sl-color-black: #030712;
+
     --sl-color-accent-low: #030712;
     --sl-color-accent: #4b5563;
     --sl-color-accent-high: #f3f4f6;
+
+    --sl-color-bg-inline-code: #1f2937;
+    --sl-color-border-inline-code: #374151;
   }
 
   /* Light mode Starlight theme variables */
@@ -31,76 +35,88 @@
     --sl-color-gray-6: #e5e7eb;
     --sl-color-gray-7: #f3f4f6;
     --sl-color-black: white;
+
     --sl-color-accent-low: #e5e7eb;
     --sl-color-accent: #1f2937;
     --sl-color-accent-high: #111827;
-  }
-
-  /* Style the Markdown heading links. */
-  .sl-markdown-content
-    :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))
-    > a {
-    color: var(--sl-color-white);
-    text-decoration: none;
 
-    &:hover {
-      text-decoration: underline;
-    }
+    --sl-color-bg-inline-code: #f3f4f6;
+    --sl-color-border-inline-code: #d1d5db;
   }
 
 /* layer: shortcuts */
 .nova-code-copy-button-icon-check{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;width:100%;height:100%;}
 .nova-code-copy-button-icon-clipboard{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;width:100%;height:100%;}
+.nova-link-button-icon,
+.nova-link-card-icon{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;margin-left:0.5rem;width:1.25rem;height:1.25rem;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-pagination-link-icon-left{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18l-6-6l6-6'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;min-width:1.25rem;min-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-pagination-link-icon-right{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;min-width:1.25rem;min-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-code-container{position:relative;}
 .nova-code-copy-button{position:absolute;right:0.5rem;top:0.5rem;margin:0;width:1.5rem;height:1.5rem;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.25rem;border-style:solid;background-color:rgb(243 244 246 / 0.3) /* #f3f4f6 */;padding:0.25rem;--nova-text-opacity:1;color:rgb(0 0 0 / var(--nova-text-opacity)) /* #000 */;--nova-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.nova-page-frame-header{position:fixed;inset:0;z-index:var(--sl-z-index-navbar);box-sizing:border-box;width:100%;height:var(--sl-nav-height);border-width:0px;border-bottom-width:1px;border-color:var(--sl-color-hairline);border-style:solid;background-color:rgb(255 255 255 / 0.8) /* #fff */;padding-top:var(--sl-nav-pad-y);padding-bottom:var(--sl-nav-pad-y);padding-left:var(--sl-nav-pad-x);padding-right:var(--sl-nav-pad-x);padding-inline-end:var(--sl-nav-pad-x);--nova-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);}
+.nova-link-card{position:relative;display:flex;flex-direction:column;gap:0.5rem;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.75rem;border-style:solid;--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:1rem;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:200ms;}
+.nova-page-frame-header{position:fixed;inset:0;z-index:var(--sl-z-index-navbar);box-sizing:border-box;width:100%;height:var(--sl-nav-height);border-width:0px;border-bottom-width:1px;border-color:var(--sl-color-hairline);border-style:solid;background-color:rgb(255 255 255 / 0.8) /* #fff */;padding-top:var(--sl-nav-pad-y);padding-bottom:var(--sl-nav-pad-y);padding-left:var(--sl-nav-pad-x);padding-right:var(--sl-nav-pad-x);--nova-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);}
+.nova-link-card-link::before{position:absolute;inset:0;content:'';}
 .nova-header-title{margin:-0.25rem;min-width:0;display:flex;overflow:clip;padding:0.25rem;}
+.nova-pagination-link{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;border-radius:0.75rem;padding:0.5rem;color:var(--sl-color-gray-2) /* var(--sl-color-gray-2) */;font-weight:500;text-decoration:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:100ms;}
+.nova-link-button{margin-inline-end:0.5rem;margin-top:0.5rem;margin-bottom:0.5rem;display:inline-flex;align-items:center;justify-content:space-between;border-width:1px;border-color:transparent;border-radius:0.75rem;border-style:solid;padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem;font-weight:500;text-decoration:none;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:200ms;}
 .nova-header{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:0.5rem;}
 .nova-header-actions{display:none;align-items:center;gap:0.5rem;}
+.nova-social-icons-link{width:2rem;height:2rem;display:flex;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-theme-select{width:2rem;height:2rem;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-page-frame{min-height:100vh;display:flex;flex-direction:column;}
+.nova-pagination{min-width:100%;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;gap:0.5rem;padding-left:0.25rem;padding-right:0.25rem;padding-top:0;padding-bottom:1.5rem;}
+.nova-header-nav{display:flex;flex:1 1 0%;flex-direction:row;gap:1rem;overflow-x:auto;padding-left:1rem;padding-right:1rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;}
 .nova-header-search{display:flex;}
+.nova-link-card-link{display:inline-flex;align-items:center;justify-content:space-between;font-size:1.125rem;line-height:1.75rem;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;font-weight:600;text-decoration:none;}
+.nova-pagination-link[rel="next"]{flex-direction:row;}
+.nova-pagination-link[rel="prev"]{flex-direction:row-reverse;}
+.nova-link-button:hover .nova-link-button-icon,
+.nova-link-card:hover .nova-link-card-icon{--nova-translate-x:0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.nova-link-button:active{--nova-translate-x:0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.nova-link-card:active{--nova-translate-x:0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.nova-pagination-link:active[data-side="left"]{--nova-translate-x:-0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.nova-pagination-link:active[data-side="right"]{--nova-translate-x:0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
 .nova-code-copy-button:active{--nova-scale-x:0.9;--nova-scale-y:0.9;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.nova-page-frame-sidebar-pane{border-width:0px;border-color:var(--sl-color-hairline);border-style:solid;}
+.nova-link-button-secondary{border-color:var(--sl-color-gray-5);--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;}
 .dark .nova-code-copy-button{background-color:rgb(75 85 99 / 0.3) /* #4b5563 */;--nova-text-opacity:1;color:rgb(255 255 255 / var(--nova-text-opacity)) /* #fff */;}
+.dark .nova-link-button-primary{--nova-bg-opacity:1;background-color:rgb(243 244 246 / var(--nova-bg-opacity)) /* #f3f4f6 */;--nova-text-opacity:1;color:rgb(17 24 39 / var(--nova-text-opacity)) /* #111827 */;}
+.nova-link-button-primary{--nova-bg-opacity:1;background-color:rgb(0 0 0 / var(--nova-bg-opacity)) /* #000 */;--nova-text-opacity:1;color:rgb(255 255 255 / var(--nova-text-opacity)) /* #fff */;}
+.dark .nova-link-button-secondary,
+.dark .nova-link-card{--nova-bg-opacity:1;background-color:rgb(31 41 55 / var(--nova-bg-opacity)) /* #1f2937 */;--nova-text-opacity:1;color:rgb(229 231 235 / var(--nova-text-opacity)) /* #e5e7eb */;}
 .dark .nova-page-frame-header{background-color:rgb(3 7 18 / 0.5) /* #030712 */;}
 .dark .nova-code-copy-button:hover{background-color:rgb(107 114 128 / 0.5) /* #6b7280 */;}
 .nova-code-copy-button:hover{background-color:rgb(229 231 235 / 0.5) /* #e5e7eb */;}
-[data-has-sidebar] .nova-page-frame-header{padding-inline-end:calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));}
+.dark .nova-link-button-primary:hover{--nova-bg-opacity:1;background-color:rgb(209 213 219 / var(--nova-bg-opacity)) /* #d1d5db */;}
+.nova-link-button-primary:hover{--nova-bg-opacity:1;background-color:rgb(31 41 55 / var(--nova-bg-opacity)) /* #1f2937 */;}
+.dark .nova-link-button-secondary:hover{--nova-bg-opacity:1;background-color:rgb(55 65 81 / var(--nova-bg-opacity)) /* #374151 */;}
+.nova-link-button-secondary:hover{--nova-bg-opacity:1;background-color:rgb(249 250 251 / var(--nova-bg-opacity)) /* #f9fafb */;}
+.dark .nova-link-card:hover{--nova-bg-opacity:1;background-color:rgb(55 65 81 / var(--nova-bg-opacity)) /* #374151 */;}
+.nova-link-card:hover{--nova-bg-opacity:1;background-color:rgb(249 250 251 / var(--nova-bg-opacity)) /* #f9fafb */;--nova-shadow:var(--nova-shadow-inset) 0 4px 6px -1px var(--nova-shadow-color, rgb(0 0 0 / 0.1)),var(--nova-shadow-inset) 0 2px 4px -2px var(--nova-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
+.nova-social-icons-link:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
+.nova-theme-select:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
+.nova-site-title *{font-size:1.125rem;line-height:1.75rem;color:var(--sl-color-text) /* var(--sl-color-text) */;font-weight:600;}
+.nova-header-nav-link{color:var(--sl-color-gray-3) /* var(--sl-color-gray-3) */;text-decoration:none;}
+.dark .nova-link-card-link{--nova-text-opacity:1;color:rgb(229 231 235 / var(--nova-text-opacity)) /* #e5e7eb */;}
+.nova-header-nav-link:hover{color:var(--sl-color-white) /* var(--sl-color-white) */;}
+.nova-pagination-link:hover{color:var(--sl-color-white) /* var(--sl-color-white) */;}
 .nova-code-container .nova-code-copy-button{opacity:0;}
 .nova-code-container:hover .nova-code-copy-button{opacity:1;}
+.nova-link-button:hover{--nova-shadow:var(--nova-shadow-inset) 0 4px 6px -1px var(--nova-shadow-color, rgb(0 0 0 / 0.1)),var(--nova-shadow-inset) 0 2px 4px -2px var(--nova-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
 @media print{
 .nova-header-actions,
 .nova-header-search{display:none;}
 }
+@media (max-width: calc(50rem - 0.1px)){
+.nova-header-nav *{display:none;}
+[data-has-sidebar] .nova-page-frame-header{padding-inline-end:calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));}
+}
 @media (min-width: 50rem){
 .nova-header-search{max-width:15rem;flex:1 1 0%;}
 .nova-header-actions{display:flex;}
+.nova-page-frame-sidebar-pane{border-right-width:1px;}
+.nova-pagination-link{font-size:1.125rem;line-height:1.75rem;}
 }
-/* layer: default */
-.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
-.visible{visibility:visible;}
-.fixed{position:fixed;}
-.relative{position:relative;}
-.isolate{isolation:isolate;}
-.me{margin-inline-end:1rem;}
-.hidden{display:none;}
-.size-8{width:2rem;height:2rem;}
-.flex{display:flex;}
-.flex-1{flex:1 1 0%;}
-.transform{transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
-.rounded-md{border-radius:0.375rem;}
-.hover\:bg-gray-400\/30:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
-.p-2{padding:0.5rem;}
-.color-\[var\(--sl-color-text\)\]{color:var(--sl-color-text) /* var(--sl-color-text) */;}
-.backdrop-filter{-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);}
-.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}
-@media print{
-.print\:hidden{display:none;}
-}
-@media (min-width: 50rem){
-.md\:border-r{border-right-width:1px;}
-}
-@media (min-width: 72rem){
-.lg\:flex{display:flex;}
+@media (min-width: 90rem){
+.nova-header-nav{gap:1.5rem;padding-left:1.5rem;}
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-nova",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -18,6 +18,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./*.css": "./lib/*.css",
+    "./components": "./src/components/index.ts",
     "./components/*.astro": "./src/components/*.astro"
   },
   "files": [

package/src/astro.d.ts

@@ -0,0 +1,6 @@
+declare module '*.astro' {
+  import { type AstroComponentFactory } from 'astro/runtime/server/index.js'
+
+  const content: AstroComponentFactory
+  export default content
+}

package/src/components/Code.astro

@@ -0,0 +1,9 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { Code as CodeComponent } from 'astro:components'
+import { shikiConfig } from '../shiki-config'
+
+type Props = ComponentProps<typeof CodeComponent>
+---
+
+<CodeComponent {...shikiConfig} {...Astro.props} />

package/src/components/CodePackageManagers.astro

@@ -0,0 +1,55 @@
+---
+import { CodeTabItem, CodeTabs } from 'starlight-theme-nova/components'
+
+type PackageManager = 'pnpm' | 'npm' | 'yarn' | 'bun'
+
+interface Props {
+  /**
+   * The package managers to use.
+   *
+   * @default ['pnpm', 'npm', 'yarn', 'bun']
+   */
+  packageManagers?: PackageManager[]
+
+  /**
+   * The packages to install. If you want to install multiple packages, you can pass a space-separated string.
+   */
+  packages: string
+
+  /**
+   * Whether to install the packages as dev dependencies.
+   *
+   * @default false
+   */
+  dev?: boolean
+}
+
+const props: Props = Astro.props
+
+const packageManagers = props.packageManagers ?? ['pnpm', 'npm', 'yarn', 'bun']
+
+function getCode(packageManager: PackageManager) {
+  const parts: string[] = [
+    {
+      pnpm: 'pnpm add',
+      npm: 'npm install',
+      yarn: 'yarn add',
+      bun: 'bun add',
+    }[packageManager],
+
+    props.dev ? '-D' : '',
+
+    props.packages,
+  ]
+
+  return parts.filter(Boolean).join(' ')
+}
+---
+
+<CodeTabs syncKey="code-group-installation">
+  {
+    packageManagers.map((pkg) => (
+      <CodeTabItem label={pkg} lang="shell" code={getCode(pkg)} />
+    ))
+  }
+</CodeTabs>

package/src/components/CodeTabItem.astro

@@ -0,0 +1,13 @@
+---
+import { TabItem } from '@astrojs/starlight/components'
+import Code from './Code.astro'
+import type { ComponentProps } from 'astro/types'
+
+type Props = { label: string } & ComponentProps<typeof Code>
+
+const { label, ...codeProps } = Astro.props
+---
+
+<TabItem label={label}>
+  <Code {...codeProps} />
+</TabItem>

package/src/components/CodeTabs.astro

@@ -0,0 +1,70 @@
+---
+import { Tabs } from '@astrojs/starlight/components'
+
+interface Props {
+  border?: boolean
+  syncKey?: string
+}
+
+const { border = true, syncKey } = Astro.props
+---
+
+<div class:list={['code-tabs', border ? 'code-tabs-border' : undefined]}>
+  <Tabs syncKey={syncKey}>
+    <slot />
+  </Tabs>
+</div>
+
+<style is:global>
+  .sl-markdown-content .code-tabs {
+    overflow: hidden;
+
+    &.code-tabs-border {
+      border-color: var(--sl-color-gray-5);
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 0.5rem;
+    }
+
+    starlight-tabs {
+      margin-top: 0;
+    }
+
+    .tablist-wrapper {
+      scrollbar-width: none;
+
+      [role='tablist'] {
+        border-bottom-width: 1px;
+      }
+
+      [role='tab'] {
+        font-family: var(--sl-font-system-mono);
+        padding-top: 0.5rem;
+        padding-bottom: 0.25rem;
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        font-size: 0.875rem;
+        white-space: nowrap;
+
+        border-bottom-style: solid;
+        border-bottom-width: 0px;
+
+        &[aria-selected='true'] {
+          border-bottom-width: 3px;
+        }
+      }
+    }
+
+    div[role='tabpanel'] {
+      margin: 0;
+    }
+
+    div[role='tabpanel'] pre {
+      border-color: transparent;
+    }
+
+    .astro-code {
+      border-radius: 0;
+    }
+  }
+</style>

package/src/components/Header.astro

@@ -4,13 +4,24 @@ import Search from './Search.astro'
 import SiteTitle from './SiteTitle.astro'
 import SocialIcons from './SocialIcons.astro'
 import ThemeSelect from './ThemeSelect.astro'
+
+import options from 'virtual:starlight-theme-nova/user-config'
+const nav = options.nav ?? []
 ---
 
 <div class="nova-header">
   <div class="nova-header-title">
     <SiteTitle />
   </div>
-  <div class="flex-1"></div>
+  <nav class="nova-header-nav">
+    {
+      nav.map((item) => (
+        <a class="nova-header-nav-link" href={item.href}>
+          {item.label}
+        </a>
+      ))
+    }
+  </nav>
   <div class="nova-header-search">
     <Search />
   </div>

package/src/components/LinkButton.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
+  href: string | URL
+  variant?: 'primary' | 'secondary'
+}
+
+const { class: className, variant = 'primary', ...attrs } = Astro.props
+---
+
+<span class="not-content">
+  <a
+    class:list={[
+      'nova-link-button not-content',
+      variant === 'primary'
+        ? 'nova-link-button-primary'
+        : 'nova-link-button-secondary',
+      className,
+    ]}
+    {...attrs}
+  >
+    <slot />
+    <div class="nova-link-button-icon"></div>
+  </a>
+</span>

package/src/components/LinkCard.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
+  title: string
+  description?: string
+}
+
+const { title, description, class: className, ...attributes } = Astro.props
+---
+
+<div class:list={['nova-link-card not-content', className]}>
+  <a class="nova-link-card-link" {...attributes}>
+    <span set:html={title} />
+    <div class="nova-link-card-icon"></div>
+  </a>
+  {description && <span set:html={description} />}
+</div>

package/src/components/MarkdownContent.astro

@@ -9,7 +9,7 @@ import CodeCopy from './CodeCopy.astro'
 
 <style is:global>
   :root .sl-markdown-content dd:not(:where(.not-content *)) {
-  	padding-inline-start: 2rem;
+    padding-inline-start: 2rem;
   }
 </style>
 

package/src/components/PageFrame.astro

@@ -17,7 +17,7 @@ const { hasSidebar } = Astro.locals.starlightRoute
         <MobileMenuToggle />
         <div
           id="starlight__sidebar"
-          class:list={['sidebar-pane', 'md:border-r border-border']}
+          class:list={['sidebar-pane', 'nova-page-frame-sidebar-pane']}
         >
           <div class="sidebar-content sl-flex">
             <slot name="sidebar" />
@@ -66,9 +66,6 @@ const { hasSidebar } = Astro.locals.starlightRoute
   }
 
   @media (min-width: 50rem) {
-    :global([data-has-sidebar]) .header {
-      padding-inline-end: var(--sl-nav-pad-x);
-    }
     .sidebar-pane {
       --sl-sidebar-visibility: visible;
       width: var(--sl-sidebar-width);

package/src/components/Pagination.astro

@@ -0,0 +1,30 @@
+---
+import PaginationLink from './PaginationLink.astro'
+
+const { dir, pagination } = Astro.locals.starlightRoute
+const { prev, next } = pagination
+const isRtl = dir === 'rtl'
+---
+
+<div class="print:hidden nova-pagination" dir={dir}>
+  {
+    prev && (
+      <PaginationLink
+        label={prev.label}
+        href={prev.href}
+        rel="prev"
+        side={isRtl ? 'right' : 'left'}
+      />
+    )
+  }
+  {
+    next && (
+      <PaginationLink
+        label={next.label}
+        href={next.href}
+        rel="next"
+        side={isRtl ? 'left' : 'right'}
+      />
+    )
+  }
+</div>

package/src/components/PaginationLink.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  label: string
+  href: string
+  rel: 'next' | 'prev'
+  side: 'left' | 'right'
+}
+
+const { label, href, rel, side } = Astro.props
+---
+
+<a href={href} rel={rel} data-side={side} class:list={['nova-pagination-link']}>
+  <span>{label}</span>
+  <span
+    class:list={[
+      side === 'right'
+        ? 'nova-pagination-link-icon-right'
+        : 'nova-pagination-link-icon-left',
+    ]}></span>
+</a>

package/src/components/SiteTitle.astro

@@ -2,11 +2,4 @@
 import Default from '@astrojs/starlight/components/SiteTitle.astro'
 ---
 
-<span class="site-title-wrapper"><Default /></span>
-
-<style>
-  .site-title-wrapper :global(.site-title) {
-    color: var(--sl-color-text);
-    font-size: var(--sl-text-h5);
-  }
-</style>
+<span class="nova-site-title"><Default /></span>

package/src/components/SocialIcons.astro

@@ -10,14 +10,12 @@ const links = Object.entries(config.social || {}) as [Platform, SocialConfig][]
 {
   links.length > 0 && (
     <>
-      {
-        links.map(([platform, { label, url }]) => (
-          <a href={url} rel="me" class="flex p-2 transition hover:bg-gray-400/30 rounded-md size-8 color-[var(--sl-color-text)]">
-            <span class="sr-only">{label}</span>
-            <Icon name={platform} size="1rem" color="currentColor" />
-          </a>
-        ))
-      }
+      {links.map(([platform, { label, url }]) => (
+        <a href={url} rel="me" class="nova-social-icons-link">
+          <span class="sr-only">{label}</span>
+          <Icon name={platform} size="1rem" color="currentColor" />
+        </a>
+      ))}
     </>
   )
 }

package/src/components/ThemeSelect.astro

@@ -2,4 +2,4 @@
 import { Toggle } from 'astro-theme-toggle'
 ---
 
-<Toggle class="size-8 p-2 rounded-md color-[var(--sl-color-text)] hover:bg-gray-400/30 transition-colors" />
+<Toggle class="nova-theme-select" />

package/src/components/TwoColumnContent.astro

@@ -1,4 +1,4 @@
-<div class="lg:flex">
+<div class="lg:sl-flex">
   {
     Astro.locals.starlightRoute.toc && (
       <aside class="right-sidebar-container print:hidden">

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export { default as Code } from './Code.astro'
+export { default as CodePackageManagers } from './CodePackageManagers.astro'
+export { default as CodeTabs } from './CodeTabs.astro'
+export { default as CodeTabItem } from './CodeTabItem.astro'
+export { default as LinkButton } from './LinkButton.astro'
+export { default as LinkCard } from './LinkCard.astro'

package/src/index.ts

@@ -4,6 +4,8 @@ import type {
 } from '@astrojs/starlight/types'
 
 import { shikiConfig } from './shiki-config'
+import type { ThemeNovaOptions } from './user-options'
+import { vitePluginUserConfig } from './virtual-user-config'
 
 const components = {
   Header: 'starlight-theme-nova/components/Header.astro',
@@ -13,12 +15,17 @@ const components = {
   SocialIcons: 'starlight-theme-nova/components/SocialIcons.astro',
   SiteTitle: 'starlight-theme-nova/components/SiteTitle.astro',
   PageFrame: 'starlight-theme-nova/components/PageFrame.astro',
+  Pagination: 'starlight-theme-nova/components/Pagination.astro',
   MobileMenuToggle: 'starlight-theme-nova/components/MobileMenuToggle.astro',
   TwoColumnContent: 'starlight-theme-nova/components/TwoColumnContent.astro',
   MarkdownContent: 'starlight-theme-nova/components/MarkdownContent.astro',
 } as const
 
-export default function starlightThemeNova(): StarlightPlugin {
+export type { ThemeNovaOptions }
+
+export default function starlightThemeNova(
+  options: ThemeNovaOptions = {},
+): StarlightPlugin {
   return {
     name: 'starlight-theme-nova',
     hooks: {
@@ -28,6 +35,7 @@ export default function starlightThemeNova(): StarlightPlugin {
             // Including any user CSS *after* our own.
             'starlight-theme-nova/styles.gen.css',
             'starlight-theme-nova/shiki.css',
+            'starlight-theme-nova/markdown.css',
             ...(config.customCss || []),
           ],
           components: {
@@ -37,6 +45,7 @@ export default function starlightThemeNova(): StarlightPlugin {
           },
           expressiveCode: config.expressiveCode ?? false,
         } satisfies Partial<StarlightUserConfig>
+
         updateConfig(newConfig)
 
         addIntegration({
@@ -47,6 +56,9 @@ export default function starlightThemeNova(): StarlightPlugin {
                 markdown: {
                   shikiConfig,
                 },
+                vite: {
+                  plugins: [vitePluginUserConfig(options)],
+                },
               })
             },
           },

package/src/shiki-config.ts

@@ -10,7 +10,7 @@ import { transformerCopyButton } from './shiki-transformer-copy-button'
 export const shikiConfig: ShikiConfig = {
   themes: {
     light: 'one-light',
-    dark: 'one-dark-pro',
+    dark: 'github-dark-dimmed',
   },
   defaultColor: false,
   transformers: [

package/src/user-options.ts

@@ -0,0 +1,8 @@
+export interface NavItem {
+  label: string
+  href: string
+}
+
+export interface ThemeNovaOptions {
+  nav?: NavItem[]
+}

package/src/virtual-internal.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+
+declare module 'virtual:starlight-theme-nova/user-config' {
+  const options: import('./user-options').ThemeNovaOptions
+  export default options
+}

package/src/virtual-user-config.ts

@@ -0,0 +1,36 @@
+import { type ViteUserConfig } from 'astro'
+
+import type { ThemeNovaOptions } from './user-options'
+
+function resolveVirtualModuleId<T extends string>(id: T): `\0${T}` {
+  return `\0${id}`
+}
+
+/** Vite plugin that exposes user config via virtual modules. */
+export function vitePluginUserConfig(
+  options: ThemeNovaOptions,
+): NonNullable<ViteUserConfig['plugins']>[number] {
+  /** Map of virtual module names to their code contents as strings. */
+  const modules = {
+    'virtual:starlight-theme-nova/user-config': `export default ${JSON.stringify(options)}`,
+  } satisfies Record<string, string>
+
+  /** Mapping names prefixed with `\0` to their original form. */
+  const resolutionMap = Object.fromEntries(
+    (Object.keys(modules) as (keyof typeof modules)[]).map((key) => [
+      resolveVirtualModuleId(key),
+      key,
+    ]),
+  )
+
+  return {
+    name: 'vite-plugin-starlight-theme-nova-user-config',
+    resolveId(id): string | void {
+      if (id in modules) return resolveVirtualModuleId(id)
+    },
+    load(id): string | void {
+      const resolution = resolutionMap[id]
+      if (resolution) return modules[resolution]
+    },
+  }
+}