@veluai/velu 0.1.13 → 0.1.14

package/runtime/velu-ui/components/page-footer.css

@@ -1,130 +1,130 @@
-/* PageFooter — docs site footer. Vertical rhythm + columns / socials
-   are composed from Stack / Switcher / Cluster primitives in the JSX;
-   this file owns only chrome (typography, link colors, icon sizing).
-   Light / dark via [data-theme] via the velu-ui tokens. */
-
-.velu-footer {
-  padding-block: var(--s2);
-  padding-inline: var(--s3);
-  /* Matches the header — same subtle hairline (--surface-color
-     resolves to #f2f3f4 in light / #323334 in dark). */
-  border-block-start: var(--border-width) solid var(--surface-color);
-  color: var(--text-color);
-  /* Opaque so the footer visually eclipses the fixed sidebar / TOC
-     when the page scrolls into it (DocsPage gives the footer a higher
-     z-index than the asides). */
-  background: var(--page-bg);
-}
-
-/* ── Container — wraps the brand row + columns row, centered in the
-   footer. fit-content sizes it to the wider of the two rows; margin
-   auto centers that block within the footer's padding box. */
-.velu-footer__container {
-  inline-size: fit-content;
-  max-inline-size: 100%;
-  margin-inline: auto;
-}
-
-/* Columns row — flex-wrap with split gaps. column-gap is fluid via
-   clamp(): scales with viewport width between a floor (--s4) and a
-   ceiling (calc(var(--s5) * 7)) so it shrinks gracefully on narrow
-   screens. row-gap is small (used only when columns wrap onto a new
-   line). */
-.velu-footer__row--columns {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  column-gap: clamp(var(--s4), 12vw, calc(var(--s5) * 7));
-  row-gap: var(--s2);
-}
-
-/* ── Brand row ──────────────────────────────────────────────────────── */
-/* Brand sits on its own row, hugged to the inline-start (align-self:
-   flex-start stops the outer column-Stack from stretching it across
-   the full row width). */
-.velu-footer__brand,
-.velu-footer__brand-link {
-  align-self: flex-start;
-  color: var(--text-color);
-}
-.velu-footer__brand-link {
-  text-decoration: none;
-  color: inherit;
-}
-.velu-footer__mark {
-  flex: none;
-  inline-size: calc(var(--icon-size-lg) * (32 / 24));
-  block-size: var(--icon-size-lg);
-  color: var(--accent-color);
-}
-/* Outfit Light, per the brand spec — falls back to --font-sans. */
-.velu-footer__wordmark {
-  font-family: var(--font-brand);
-  font-weight: var(--weight-light);
-  font-size: var(--f-h4);
-  line-height: 1;
-  letter-spacing: -0.01em;
-  color: var(--text-color);
-}
-
-/* ── Link columns ───────────────────────────────────────────────────── */
-.velu-footer__column-title {
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  color: var(--text-color);
-}
-.velu-footer__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-/* Footer text is always full-contrast (--text-color) — no muted greys.
-   Links shift to the accent color on hover; no underline.
-   line-height: 1.4 overrides the body's 1.75 so menu links don't sit
-   in a tall box (kept the columns from looking spread out). */
-.velu-footer__link {
-  display: inline-block;
-  font-size: var(--f-h6);
-  font-weight: var(--weight-light);
-  line-height: 1.4;
-  color: var(--text-color);
-  text-decoration: none;
-  transition: color 0.12s ease;
-}
-.velu-footer__link:hover {
-  color: var(--accent-color);
-}
-
-/* ── Social row ─────────────────────────────────────────────────────── */
-/* 2em × 2em (32×32 at 16px base) buttons; the glyph fills ~1.25em so a
-   little breathing room remains around it. Each kind gets its OWN
-   brand color (set via the data-kind attribute below). Monochrome
-   brands (github, x) inherit --text-color so they theme correctly. */
-.velu-footer__social {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  inline-size: 2em;
-  block-size: 2em;
-  padding: 0;
-  color: var(--text-color);
-  text-decoration: none;
-  transition: opacity 0.12s ease;
-}
-.velu-footer__social:hover {
-  opacity: 0.78;
-}
-.velu-footer__social svg {
-  inline-size: var(--icon-size-lg);
-  block-size: var(--icon-size-lg);
-}
-/* Brand colors — YouTube red, LinkedIn blue. GitHub + X stay
-   --text-color (their canonical brand is monochrome and follows the
-   surrounding theme). */
-.velu-footer__social[data-kind='youtube'] {
-  color: #ff0000;
-}
-.velu-footer__social[data-kind='linkedin'] {
-  color: #0a66c2;
-}
+/* PageFooter — docs site footer. Vertical rhythm + columns / socials
+   are composed from Stack / Switcher / Cluster primitives in the JSX;
+   this file owns only chrome (typography, link colors, icon sizing).
+   Light / dark via [data-theme] via the velu-ui tokens. */
+
+.velu-footer {
+  padding-block: var(--s2);
+  padding-inline: var(--s3);
+  /* Matches the header — same subtle hairline (--surface-color
+     resolves to #f2f3f4 in light / #323334 in dark). */
+  border-block-start: var(--border-width) solid var(--surface-color);
+  color: var(--text-color);
+  /* Opaque so the footer visually eclipses the fixed sidebar / TOC
+     when the page scrolls into it (DocsPage gives the footer a higher
+     z-index than the asides). */
+  background: var(--page-bg);
+}
+
+/* ── Container — wraps the brand row + columns row, centered in the
+   footer. fit-content sizes it to the wider of the two rows; margin
+   auto centers that block within the footer's padding box. */
+.velu-footer__container {
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  margin-inline: auto;
+}
+
+/* Columns row — flex-wrap with split gaps. column-gap is fluid via
+   clamp(): scales with viewport width between a floor (--s4) and a
+   ceiling (calc(var(--s5) * 7)) so it shrinks gracefully on narrow
+   screens. row-gap is small (used only when columns wrap onto a new
+   line). */
+.velu-footer__row--columns {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  column-gap: clamp(var(--s4), 12vw, calc(var(--s5) * 7));
+  row-gap: var(--s2);
+}
+
+/* ── Brand row ──────────────────────────────────────────────────────── */
+/* Brand sits on its own row, hugged to the inline-start (align-self:
+   flex-start stops the outer column-Stack from stretching it across
+   the full row width). */
+.velu-footer__brand,
+.velu-footer__brand-link {
+  align-self: flex-start;
+  color: var(--text-color);
+}
+.velu-footer__brand-link {
+  text-decoration: none;
+  color: inherit;
+}
+.velu-footer__mark {
+  flex: none;
+  inline-size: calc(var(--icon-size-lg) * (32 / 24));
+  block-size: var(--icon-size-lg);
+  color: var(--accent-color);
+}
+/* Outfit Light, per the brand spec — falls back to --font-sans. */
+.velu-footer__wordmark {
+  font-family: var(--font-brand);
+  font-weight: var(--weight-light);
+  font-size: var(--f-h4);
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--text-color);
+}
+
+/* ── Link columns ───────────────────────────────────────────────────── */
+.velu-footer__column-title {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+.velu-footer__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/* Footer text is always full-contrast (--text-color) — no muted greys.
+   Links shift to the accent color on hover; no underline.
+   line-height: 1.4 overrides the body's 1.75 so menu links don't sit
+   in a tall box (kept the columns from looking spread out). */
+.velu-footer__link {
+  display: inline-block;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  line-height: 1.4;
+  color: var(--text-color);
+  text-decoration: none;
+  transition: color 0.12s ease;
+}
+.velu-footer__link:hover {
+  color: var(--accent-color);
+}
+
+/* ── Social row ─────────────────────────────────────────────────────── */
+/* 2em × 2em (32×32 at 16px base) buttons; the glyph fills ~1.25em so a
+   little breathing room remains around it. Each kind gets its OWN
+   brand color (set via the data-kind attribute below). Monochrome
+   brands (github, x) inherit --text-color so they theme correctly. */
+.velu-footer__social {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: 2em;
+  block-size: 2em;
+  padding: 0;
+  color: var(--text-color);
+  text-decoration: none;
+  transition: opacity 0.12s ease;
+}
+.velu-footer__social:hover {
+  opacity: 0.78;
+}
+.velu-footer__social svg {
+  inline-size: var(--icon-size-lg);
+  block-size: var(--icon-size-lg);
+}
+/* Brand colors — YouTube red, LinkedIn blue. GitHub + X stay
+   --text-color (their canonical brand is monochrome and follows the
+   surrounding theme). */
+.velu-footer__social[data-kind='youtube'] {
+  color: #ff0000;
+}
+.velu-footer__social[data-kind='linkedin'] {
+  color: #0a66c2;
+}