@blaaiz/docs-core 0.4.0 → 0.6.0

package/styles/docs.css

@@ -127,12 +127,17 @@ button:has(kbd) {
   position: absolute;
   inset: 0 0 auto 0;
   height: 2.75rem;
-  background: color-mix(in oklab, var(--color-fd-card) 88%, black);
+  background: color-mix(in oklab, var(--color-fd-card) 94%, black);
   border-bottom: 1px solid var(--color-fd-border);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
 
+/* Dark cards are already near black; the strip needs a deeper mix to read. */
+.dark #nd-page figure.shiki::before {
+  background: color-mix(in oklab, var(--color-fd-card) 88%, black);
+}
+
 #nd-page figure.shiki::after {
   content: '';
   position: absolute;
@@ -273,3 +278,93 @@ body {
   width: 15px;
   height: 15px;
 }
+
+/* --- The top bar's action cluster and second row ------------------------- */
+
+/* Actions at the end of row one: extras, the secondary link, sign-out, and
+   the primary button. */
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.nav-actions__secondary,
+.nav-actions__signout {
+  border: none;
+  background: none;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-fd-muted-foreground);
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.15s;
+  white-space: nowrap;
+}
+
+.nav-actions__secondary:hover,
+.nav-actions__signout:hover {
+  color: var(--color-fd-foreground);
+}
+
+.nav-actions__primary {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.4375rem 1rem;
+  border-radius: 999px;
+  background: var(--color-fd-primary);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: opacity 0.15s;
+}
+
+.nav-actions__primary:hover {
+  opacity: 0.9;
+}
+
+/* Dark-mode primaries run light, so the button's text runs dark. */
+.dark .nav-actions__primary {
+  color: #000;
+}
+
+/* The second row: the section links, under the utility row. */
+.site-subnav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.875rem;
+  padding-inline: 1rem;
+  border-bottom: 1px solid color-mix(in oklab, var(--color-fd-border) 60%, transparent);
+  background: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
+  backdrop-filter: blur(16px);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.site-subnav > * {
+  flex-shrink: 0;
+}
+
+/* The sidebar's section headings: the separators the headings sidebar style
+   renders for top-level groups. fumadocs marks them as bare <p> rows. */
+#nd-sidebar [data-radix-scroll-area-viewport] p {
+  font-weight: 600;
+}
+
+/* The docs header draws its own rules under both rows; run them as faint as
+   the landing's, so the chrome doesn't outweigh the content. */
+#nd-subnav [data-header-body],
+#nd-subnav [data-header-tabs] {
+  border-color: color-mix(in oklab, var(--color-fd-border) 60%, transparent);
+}
+
+/* The navbar tabs render only the title node, so the section icon travels
+   inside it (docsLayoutTabs); size it like the landing's links. */
+#nd-subnav [data-header-tabs] svg {
+  width: 15px;
+  height: 15px;
+}

package/styles/home.css

@@ -1,3 +1,32 @@
+/* The landing's top bar stands as tall as the docs pages' rendered header
+   (72px), so the two layouts read as one site. #nd-nav exists only in the
+   home layout; the docs layout's header is #nd-subnav. */
+#nd-nav {
+  height: 4.5rem;
+}
+
+#nd-nav nav {
+  height: 4.5rem;
+}
+
+/* The landing header's rule, as faint as the subnav's. */
+#nd-nav > div {
+  border-color: color-mix(in oklab, var(--color-fd-border) 60%, transparent);
+}
+
+/* On the landing the section links render as a sticky row under the top bar
+   (the home layout's header slot replaces its navbar rather than wrapping it,
+   so the row lives outside the header there). The row is full-bleed while the
+   header centres its content to --fd-layout-width, so the padding re-derives
+   that inset; the extra 0.625rem is the first link's own padding, backed out
+   so its icon sits flush with the logo above. */
+.site-subnav--home {
+  position: sticky;
+  top: 4.5rem;
+  z-index: 30;
+  padding-inline: max(0.375rem, calc((100% - var(--fd-layout-width, 100%)) / 2 + 0.375rem));
+}
+
 /*
  * @blaaiz/docs-core — the landing-page layout.
  *
@@ -37,7 +66,11 @@
  */
 
 .home-page {
-  --home-gutter: clamp(1.25rem, 4vw, 3.5rem);
+  /* The gutter re-derives the header's centred inset (--fd-layout-width plus
+     its 1rem padding), so every section's content column starts where the
+     logo does. Sections stay full-bleed: the inset is padding, so backgrounds
+     and borders still run edge to edge. */
+  --home-gutter: max(1rem, calc((100% - var(--fd-layout-width, 100%)) / 2 + 1rem));
   --home-mono: var(--font-code, var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace));
   width: 100%;
   padding-bottom: 5rem;