From ae7818695ac75dd87b9bb290685dd4a0ed814b30 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 19 Sep 2026 11:40:30 +0000 Subject: [PATCH 1/5] Add alert, switch, and avatar components with docs and landing refresh Ship a 1.2.0-shaped slice: new classless alert/switch/avatar styles, docs for those plus card/timeline/meter/kbd, mark/dl polish, fixed GitHub links, and a landing page that demos the framework live. Co-authored-by: Torsten Dittmann --- apps/docs/src/routes/+layout.svelte | 15 +- apps/docs/src/routes/+page.svelte | 273 ++++++++++++++++-- .../routes/docs/components/alert/+page.svelte | 68 +++++ .../docs/components/avatar/+page.svelte | 64 ++++ .../routes/docs/components/card/+page.svelte | 58 ++++ .../routes/docs/components/kbd/+page.svelte | 38 +++ .../routes/docs/components/meter/+page.svelte | 54 ++++ .../docs/components/timeline/+page.svelte | 50 ++++ .../docs/forms/checkbox-radio/+page.svelte | 19 ++ .../getting-started/installation/+page.svelte | 2 +- bun.lock | 2 +- packages/main/package.json | 2 +- packages/main/src/compoments/_alert.scss | 30 ++ packages/main/src/compoments/_avatar.scss | 37 +++ packages/main/src/compoments/_index.scss | 3 + packages/main/src/compoments/_list.scss | 18 ++ packages/main/src/compoments/_switch.scss | 51 ++++ packages/main/src/compoments/_typography.scss | 13 + 18 files changed, 767 insertions(+), 30 deletions(-) create mode 100644 apps/docs/src/routes/docs/components/alert/+page.svelte create mode 100644 apps/docs/src/routes/docs/components/avatar/+page.svelte create mode 100644 apps/docs/src/routes/docs/components/card/+page.svelte create mode 100644 apps/docs/src/routes/docs/components/kbd/+page.svelte create mode 100644 apps/docs/src/routes/docs/components/meter/+page.svelte create mode 100644 apps/docs/src/routes/docs/components/timeline/+page.svelte create mode 100644 packages/main/src/compoments/_alert.scss create mode 100644 packages/main/src/compoments/_avatar.scss create mode 100644 packages/main/src/compoments/_switch.scss diff --git a/apps/docs/src/routes/+layout.svelte b/apps/docs/src/routes/+layout.svelte index 97baf6d..db5a676 100644 --- a/apps/docs/src/routes/+layout.svelte +++ b/apps/docs/src/routes/+layout.svelte @@ -58,13 +58,22 @@ title: "Accordion", href: "/docs/components/accordion", }, + { title: "Alert", href: "/docs/components/alert" }, + { title: "Avatar", href: "/docs/components/avatar" }, + { title: "Card", href: "/docs/components/card" }, { title: "Dialog", href: "/docs/components/dialog" }, - { title: "Tabs", href: "/docs/components/tabs" }, - { title: "Tables", href: "/docs/components/tables" }, + { title: "Kbd", href: "/docs/components/kbd" }, + { title: "Meter", href: "/docs/components/meter" }, { title: "Progress", href: "/docs/components/progress", }, + { title: "Tables", href: "/docs/components/tables" }, + { title: "Tabs", href: "/docs/components/tabs" }, + { + title: "Timeline", + href: "/docs/components/timeline", + }, { title: "Tooltip", href: "/docs/components/tooltip" }, ], }, @@ -94,7 +103,7 @@
  • Docs
  • Theme Builder
  • - GitHub
    • diff --git a/apps/docs/src/routes/+page.svelte b/apps/docs/src/routes/+page.svelte index 880dd0a..db0f0f9 100644 --- a/apps/docs/src/routes/+page.svelte +++ b/apps/docs/src/routes/+page.svelte @@ -1,50 +1,275 @@ + + - launch.css - Classless CSS Framework + launch.css — Classless CSS Framework + -
    -

    launch.css

    -

    A classless CSS framework for semantic HTML

    -
    - Get Started - GitHub +
    + +
    +

    Classless CSS

    +

    launch.css

    +

    + Style semantic HTML directly — no class names, no setup ritual. + Ship the interface now; refine the look later. +

    +

    + Get Started + Theme Builder + GitHub +

    +
    +
    + +
    +
    +

    No classes. Still polished.

    +

    + Buttons, alerts, switches, and more — styled from HTML and ARIA + alone. +

    +
    + +
    +
    + Your project is ready. Write HTML and launch.css does the rest. +
    + +

    + Launch avatar + Welcome back — press ⌘ + K to search. +

    + +

    + + + +

    + + + +
    + What’s included? +

    + Layouts, forms, dialogs, tabs, timelines, meters, and theme + tokens via color-scheme. +

    +
    + +
    + Trial ends in 3 days — upgrade anytime from settings. +
    +
    +
    +

    Install in one line

    +

    Then import it and write semantic HTML.

    +
    + + + +

    + Or drop in a CDN link — see + full installation. +

    +
    + diff --git a/apps/docs/src/routes/docs/components/alert/+page.svelte b/apps/docs/src/routes/docs/components/alert/+page.svelte new file mode 100644 index 0000000..0691a2b --- /dev/null +++ b/apps/docs/src/routes/docs/components/alert/+page.svelte @@ -0,0 +1,68 @@ + + + + Alert - launch.css + + +

    Alert

    +

    + Notices and feedback messages using ARIA roles — no classes required. +

    + +

    Status

    +

    + Use role="status" for non-critical updates that should be + announced politely to assistive technology. +

    + + + Your changes have been saved. +
    `} +/> + +

    Alert

    +

    + Use role="alert" for important, time-sensitive messages. +

    + + + Connection lost. Trying to reconnect… +
    `} +/> + +

    Note

    + + + Tip: prefer semantic HTML and ARIA attributes over utility classes. +`} +/> + +

    Danger Variant

    +

    + Include error, danger, or warning in + the aria-label to get the danger surface. +

    + + + Payment failed. Please check your card details. + + +
    + Your trial ends in 3 days. +
    `} +/> + +

    With Rich Content

    + + + Update available +

    Version 1.2.0 is ready. Refresh to get the latest styles.

    +`} +/> diff --git a/apps/docs/src/routes/docs/components/avatar/+page.svelte b/apps/docs/src/routes/docs/components/avatar/+page.svelte new file mode 100644 index 0000000..197f765 --- /dev/null +++ b/apps/docs/src/routes/docs/components/avatar/+page.svelte @@ -0,0 +1,64 @@ + + + + Avatar - launch.css + + +

    Avatar

    +

    + Circular profile images triggered by alt text containing + “avatar” or “profile” — no classes needed. +

    + +

    Basic Avatar

    + +`} +/> + +

    Inline With Text

    + + + Sam profile + Sam Rivera +

    `} +/> + +

    Multiple Avatars

    + + + Alex avatar + Jordan avatar + Riley avatar +

    `} +/> + +

    How It Works

    +
      +
    • + Any img whose alt contains + avatar or profile (case-insensitive) is + styled as a circle +
      • +
    • Images are cropped with object-fit: cover
      • +
    • Missing or broken images fall back to the alt text
      • +
    diff --git a/apps/docs/src/routes/docs/components/card/+page.svelte b/apps/docs/src/routes/docs/components/card/+page.svelte new file mode 100644 index 0000000..965407a --- /dev/null +++ b/apps/docs/src/routes/docs/components/card/+page.svelte @@ -0,0 +1,58 @@ + + + + Card - launch.css + + +

    Card

    +

    + Every section is styled as a bordered, padded card — write + semantic HTML and get layout for free. +

    + +

    Basic Card

    + + +

    Getting started

    +

    Install launch.css and write semantic HTML. No class names required.

    + +`} +/> + +

    Multiple Cards

    + + +
    +

    Zero classes

    +

    Style elements directly with sensible defaults.

    +
    +
    +

    Light & dark

    +

    Themes via color-scheme — no JavaScript needed.

    +
    +
    +

    Layouts

    +

    Website and dashboard layouts with a data attribute.

    +
    +`} +/> + +

    Card With Form

    + + +

    Subscribe

    +

    Get product updates in your inbox.

    +
    + + +
    +`} +/> diff --git a/apps/docs/src/routes/docs/components/kbd/+page.svelte b/apps/docs/src/routes/docs/components/kbd/+page.svelte new file mode 100644 index 0000000..60daaf5 --- /dev/null +++ b/apps/docs/src/routes/docs/components/kbd/+page.svelte @@ -0,0 +1,38 @@ + + + + Kbd - launch.css + + +

    Kbd

    +

    + Keyboard key affordances with the native kbd element. +

    + +

    Basic Keys

    + +Press Enter to submit.

    `} +/> + +

    Key Combinations

    + + + Save with Ctrl + S +

    +

    + Open search with ⌘ + K +

    `} +/> + +

    In Instructions

    + + + Focus the address bar with Ctrl + L, type a URL, + then press Enter. +

    `} +/> diff --git a/apps/docs/src/routes/docs/components/meter/+page.svelte b/apps/docs/src/routes/docs/components/meter/+page.svelte new file mode 100644 index 0000000..1d5dc18 --- /dev/null +++ b/apps/docs/src/routes/docs/components/meter/+page.svelte @@ -0,0 +1,54 @@ + + + + Meter - launch.css + + +

    Meter

    +

    + Scalar measurements with the native meter element — optimum + ranges get distinct colors automatically. +

    + +

    Basic Meter

    + + + Disk usage + 60% +`} +/> + +

    Optimum Ranges

    +

    + Set low, high, and optimum to drive + green / yellow / red fills based on the current value. +

    + + + Battery (optimum) + 85% + + + + +`} +/> + +

    Inline Meter

    + + + Storage used: + 7 out of 10 +

    `} +/> diff --git a/apps/docs/src/routes/docs/components/timeline/+page.svelte b/apps/docs/src/routes/docs/components/timeline/+page.svelte new file mode 100644 index 0000000..b68601f --- /dev/null +++ b/apps/docs/src/routes/docs/components/timeline/+page.svelte @@ -0,0 +1,50 @@ + + + + Timeline - launch.css + + +

    Timeline

    +

    + Vertical timelines using a list with + aria-label containing “timeline”. +

    + +

    Basic Timeline

    + + +
  • + + Kickoff +

    Project started with the first design draft.

    +
    • +
  • + + Beta release +

    Public beta with theme support and layouts.

    +
    • +
  • + + 1.2.0 +

    Alerts, switches, avatars, and refreshed docs.

    +
    • +`} +/> + +

    How It Works

    +
      +
    • + Use role="list" with an + aria-label that includes timeline +
      • +
    • + Mark the active item with aria-current="step" +
      • +
    • + Optional time children are muted and spaced above the + content +
      • +
    diff --git a/apps/docs/src/routes/docs/forms/checkbox-radio/+page.svelte b/apps/docs/src/routes/docs/forms/checkbox-radio/+page.svelte index 6adb918..bcbd7eb 100644 --- a/apps/docs/src/routes/docs/forms/checkbox-radio/+page.svelte +++ b/apps/docs/src/routes/docs/forms/checkbox-radio/+page.svelte @@ -69,3 +69,22 @@ Enable notifications `} /> + +

    Switch States

    + + + + Dark mode + + + + +`} +/> diff --git a/apps/docs/src/routes/docs/getting-started/installation/+page.svelte b/apps/docs/src/routes/docs/getting-started/installation/+page.svelte index 15b4207..f74f77b 100644 --- a/apps/docs/src/routes/docs/getting-started/installation/+page.svelte +++ b/apps/docs/src/routes/docs/getting-started/installation/+page.svelte @@ -57,7 +57,7 @@ import 'launch.css';`}

    Download

    You can also download the CSS file directly from GitHub releases and include it in your project.

    diff --git a/bun.lock b/bun.lock index 28e02fc..cd9ef03 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ }, "packages/main": { "name": "launch.css", - "version": "1.1.6", + "version": "1.2.0", "devDependencies": { "modern-normalize": "^3.0.1", "publint": "^0.3.15", diff --git a/packages/main/package.json b/packages/main/package.json index 0f42431..3b04ae4 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,7 +1,7 @@ { "name": "launch.css", "type": "module", - "version": "1.1.6", + "version": "1.2.0", "description": "A classless CSS framework built for speed. Style your website later—build it now.", "homepage": "https://launch-css.dev", "main": "dist/index.css", diff --git a/packages/main/src/compoments/_alert.scss b/packages/main/src/compoments/_alert.scss new file mode 100644 index 0000000..1662639 --- /dev/null +++ b/packages/main/src/compoments/_alert.scss @@ -0,0 +1,30 @@ +[role="alert"], +[role="status"], +[role="note"] { + display: block; + border-width: 1px; + border-style: solid; + border-color: var(--border); + border-radius: calc(0.5rem - 2px); + background-color: var(--background-secondary); + padding: 0.75rem 1rem; + color: var(--color); + font-size: 0.875rem; + line-height: 1.5rem; + + &[aria-label*="error" i], + &[aria-label*="danger" i], + &[aria-label*="warning" i] { + border-color: var(--background-danger); + background-color: var(--background-danger); + color: var(--color-danger); + } + + > :first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } +} diff --git a/packages/main/src/compoments/_avatar.scss b/packages/main/src/compoments/_avatar.scss new file mode 100644 index 0000000..eadf77a --- /dev/null +++ b/packages/main/src/compoments/_avatar.scss @@ -0,0 +1,37 @@ +img[alt*="avatar" i], +img[alt*="profile" i] { + display: inline-block; + vertical-align: middle; + border: 1px solid var(--border); + border-radius: 50%; + width: 2.5rem; + height: 2.5rem; + object-fit: cover; +} + +img[alt*="avatar" i]:not([src]), +img[alt*="profile" i]:not([src]) { + display: inline-flex; + justify-content: center; + align-items: center; + background: var(--background-secondary); + color: var(--color-muted); + font-weight: 500; + font-size: 0.875rem; +} + +img[alt*="avatar" i]::after, +img[alt*="profile" i]::after { + display: flex; + justify-content: center; + align-items: center; + background: var(--background-secondary); + width: 100%; + height: 100%; + content: attr(alt); + color: var(--color-muted); + font-weight: 500; + font-size: 0.75rem; + line-height: 1; + text-align: center; +} diff --git a/packages/main/src/compoments/_index.scss b/packages/main/src/compoments/_index.scss index fcfe8f9..5c008f5 100644 --- a/packages/main/src/compoments/_index.scss +++ b/packages/main/src/compoments/_index.scss @@ -9,6 +9,9 @@ @use "meter"; @use "dialog"; @use "accordion"; +@use "alert"; +@use "avatar"; +@use "switch"; @use "grid"; @use "card"; @use "table"; diff --git a/packages/main/src/compoments/_list.scss b/packages/main/src/compoments/_list.scss index a0f5e1d..a01038c 100644 --- a/packages/main/src/compoments/_list.scss +++ b/packages/main/src/compoments/_list.scss @@ -6,3 +6,21 @@ ol { margin: 0.5rem; } } + +dl { + margin: 0; + + dt { + margin-top: 1rem; + font-weight: 600; + + &:first-child { + margin-top: 0; + } + } + + dd { + margin: 0.25rem 0 0; + color: var(--color-muted); + } +} diff --git a/packages/main/src/compoments/_switch.scss b/packages/main/src/compoments/_switch.scss new file mode 100644 index 0000000..a596a8a --- /dev/null +++ b/packages/main/src/compoments/_switch.scss @@ -0,0 +1,51 @@ +input[type="checkbox"][role="switch"] { + appearance: none; + -webkit-appearance: none; + position: relative; + flex-shrink: 0; + cursor: pointer; + margin: 0; + border: 1px solid var(--border); + border-radius: 9999px; + background-color: var(--background-secondary); + width: 2.75rem; + height: 1.5rem; + accent-color: unset; + transition: + background-color 0.15s ease, + border-color 0.15s ease; + + &::before { + position: absolute; + top: 0.125rem; + left: 0.125rem; + border-radius: 50%; + background-color: var(--color); + width: 1.125rem; + height: 1.125rem; + content: ""; + transition: transform 0.15s ease; + } + + &:checked { + border-color: var(--background-primary); + background-color: var(--background-primary); + + &::before { + background-color: var(--color-primary); + transform: translateX(1.25rem); + } + } + + &:focus-visible { + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + } + + &:disabled, + &[aria-disabled="true"] { + opacity: 0.5; + cursor: not-allowed; + } +} diff --git a/packages/main/src/compoments/_typography.scss b/packages/main/src/compoments/_typography.scss index 1b6b987..5bca4a8 100644 --- a/packages/main/src/compoments/_typography.scss +++ b/packages/main/src/compoments/_typography.scss @@ -95,6 +95,19 @@ small { font-size: 0.875em; } +mark { + border-radius: 0.125rem; + background-color: light-dark(#fef08a, #854d0e); + padding: 0.125rem 0.25rem; + color: light-dark(#422006, #fef9c3); +} + +abbr { + cursor: help; + text-decoration: underline dotted; + text-underline-offset: 2px; +} + sub, sup { position: relative; From bc68cf11324d10462a9ee8aae05177d0f16a67e1 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 19 Sep 2026 12:30:11 +0000 Subject: [PATCH 2/5] Redesign docs landing and chrome for a sharper site identity Replace the flat stacked landing with a brand-first hero, full-bleed product proof surface, and tighter docs chrome (Outfit + Plex Mono). Co-authored-by: Torsten Dittmann --- apps/docs/src/app.css | 179 +++++++---- apps/docs/src/app.html | 5 + apps/docs/src/routes/+layout.svelte | 23 +- apps/docs/src/routes/+page.svelte | 477 ++++++++++++++++++---------- 4 files changed, 449 insertions(+), 235 deletions(-) diff --git a/apps/docs/src/app.css b/apps/docs/src/app.css index 092ee4a..694a723 100644 --- a/apps/docs/src/app.css +++ b/apps/docs/src/app.css @@ -1,56 +1,74 @@ @import "launch.css"; -/* Syntax highlighting - works in light and dark mode */ +:root { + --site-font: "Outfit", var(--font-family); + --site-mono: "IBM Plex Mono", ui-monospace, monospace; + --site-ink: light-dark(#18181b, #fafafa); + --site-muted: light-dark(#52525b, #a1a1aa); + --site-line: light-dark(#e4e4e7, #27272a); + --site-panel: light-dark(#ffffff, #09090b); + --site-wash: light-dark(#f4f4f5, #0c0c0e); +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; + font-family: var(--site-font); +} + +/* Syntax highlighting */ .hljs { background: transparent; - color: light-dark(#24292e, #e1e4e8); + color: light-dark(#27272a, #e4e4e7); + font-family: var(--site-mono); } .hljs-comment, .hljs-quote { - color: light-dark(#6a737d, #6a737d); + color: light-dark(#71717a, #71717a); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-tag { - color: light-dark(#d73a49, #f97583); + color: light-dark(#b45309, #fbbf24); } .hljs-string, .hljs-attr, .hljs-addition { - color: light-dark(#032f62, #9ecbff); + color: light-dark(#0f766e, #5eead4); } .hljs-number, .hljs-literal { - color: light-dark(#005cc5, #79b8ff); + color: light-dark(#1d4ed8, #93c5fd); } .hljs-name, .hljs-attribute { - color: light-dark(#22863a, #85e89d); + color: light-dark(#047857, #6ee7b7); } .hljs-function, .hljs-title { - color: light-dark(#6f42c1, #b392f0); + color: light-dark(#b45309, #fcd34d); } .hljs-built_in, .hljs-type { - color: light-dark(#005cc5, #79b8ff); + color: light-dark(#1d4ed8, #93c5fd); } .hljs-deletion { - color: light-dark(#b31d28, #fdaeb7); + color: light-dark(#b91c1c, #fca5a5); } .hljs-selector-class, .hljs-selector-id { - color: light-dark(#6f42c1, #b392f0); + color: light-dark(#a16207, #fde68a); } .hljs-emphasis { @@ -61,23 +79,31 @@ font-weight: bold; } -/* Documentation-specific styles */ - -/* Override body styling for docs layout */ -body { - display: flex; - flex-direction: column; - min-height: 100vh; -} - /* Header */ .docs-header { position: sticky; top: 0; z-index: 100; - border-bottom: 1px solid var(--border); - background: var(--background); - padding: 0.75rem 1.5rem; + border-bottom: 1px solid transparent; + background: color-mix(in srgb, var(--site-panel) 82%, transparent); + padding: 0.85rem 1.5rem; + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + transition: + background 0.2s ease, + border-color 0.2s ease; +} + +.docs-header:not(.docs-header-home) { + border-bottom-color: var(--site-line); +} + +.docs-header-home { + position: absolute; + inset-inline: 0; + background: transparent; + backdrop-filter: none; + -webkit-backdrop-filter: none; } .docs-header nav { @@ -85,27 +111,50 @@ body { justify-content: space-between; align-items: center; margin: 0 auto; - max-width: 80rem; + max-width: 72rem; +} + +.docs-brand { + color: var(--site-ink); + font-weight: 700; + font-size: 1.05rem; + letter-spacing: -0.03em; + text-decoration: none; } .docs-header a { - color: inherit; + color: var(--site-muted); + font-weight: 500; + font-size: 0.9rem; text-decoration: none; + transition: color 0.15s ease; +} + +.docs-header a:hover, +.docs-header a[aria-current="page"] { + color: var(--site-ink); } .docs-header ul { display: flex; - gap: 1.5rem; + align-items: center; + gap: 1.25rem; margin: 0; padding: 0; list-style: none; } -/* Code preview component */ +.site-main-home { + flex: 1; +} + +/* Code preview */ .code-preview { - margin-block: 1rem; - border: 1px solid var(--border); - border-radius: 0.5rem; + margin-block: 1.25rem; + border: 1px solid var(--site-line); + border-radius: 0.75rem; + background: var(--site-panel); + overflow: hidden; } .code-preview-render { @@ -113,91 +162,103 @@ body { } .code-preview-code { - border-top: 1px solid var(--border); - background: var(--background-secondary); + border-top: 1px solid var(--site-line); + background: var(--site-wash); } .code-preview-code pre { margin: 0; - padding: 1rem; + padding: 1rem 1.25rem; overflow-x: auto; - font-size: 0.875rem; - line-height: 1.5; + font-size: 0.8125rem; + line-height: 1.6; + font-family: var(--site-mono); } .code-preview-code code { background: transparent; padding: 0; + font-family: inherit; } -/* Sidebar navigation */ +/* Sidebar */ .docs-sidebar { position: sticky; top: 3.5rem; - border-right: 1px solid var(--border); - padding: 1rem; + border-right: 1px solid var(--site-line); + padding: 1.25rem 0.75rem; height: calc(100vh - 3.5rem); overflow-y: auto; + background: var(--site-wash); } .docs-sidebar nav { display: flex; flex-direction: column; - gap: 0.25rem; + gap: 0.15rem; } .docs-sidebar a { - border-radius: 0.375rem; - padding: 0.5rem 0.75rem; - color: inherit; + border-radius: 0.5rem; + padding: 0.45rem 0.75rem; + color: var(--site-muted); + font-weight: 500; font-size: 0.875rem; text-decoration: none; + transition: + background 0.15s ease, + color 0.15s ease; } .docs-sidebar a:hover { - background: var(--background-secondary); + background: color-mix(in srgb, var(--site-panel) 70%, transparent); + color: var(--site-ink); } .docs-sidebar a[aria-current="page"] { - background: var(--background-secondary); - font-weight: 500; + background: var(--site-panel); + box-shadow: 0 0 0 1px var(--site-line); + color: var(--site-ink); + font-weight: 600; } .docs-sidebar h3 { - margin: 1rem 0 0.5rem 0.75rem; - color: var(--color-muted); + margin: 1.25rem 0 0.4rem 0.75rem; + color: var(--site-muted); font-weight: 600; - font-size: 0.75rem; - letter-spacing: 0.05em; + font-size: 0.7rem; + letter-spacing: 0.08em; text-transform: uppercase; } .docs-sidebar h3:first-child { - margin-top: 0; + margin-top: 0.25rem; } -/* Main content area */ +/* Content */ .docs-content { - padding: 2rem 3rem; + padding: 2.5rem 3rem 4rem; min-width: 0; - max-width: 48rem; + max-width: 46rem; } .docs-content h1 { - margin-bottom: 0.5rem; + margin-bottom: 0.35rem; + letter-spacing: -0.03em; } .docs-content > p:first-of-type { margin-bottom: 2rem; - color: var(--color-muted); + color: var(--site-muted); font-size: 1.125rem; + line-height: 1.65; } -/* Dashboard layout grid */ .docs-layout { display: grid; - grid-template-columns: 16rem 1fr; + grid-template-columns: 15.5rem 1fr; flex: 1; + background: var(--site-panel); } @media (max-width: 768px) { @@ -212,4 +273,8 @@ body { .docs-content { padding: 1.5rem; } + + .docs-header ul { + gap: 0.9rem; + } } diff --git a/apps/docs/src/app.html b/apps/docs/src/app.html index 36b964a..b2ac99c 100644 --- a/apps/docs/src/app.html +++ b/apps/docs/src/app.html @@ -8,6 +8,11 @@ name="description" content="launch.css - A classless CSS framework for semantic HTML" /> + + %sveltekit.head% diff --git a/apps/docs/src/routes/+layout.svelte b/apps/docs/src/routes/+layout.svelte index db5a676..40dabdb 100644 --- a/apps/docs/src/routes/+layout.svelte +++ b/apps/docs/src/routes/+layout.svelte @@ -90,18 +90,31 @@ let { children } = $props(); let isDocsPage = $derived(page.url.pathname.startsWith("/docs")); + let isHome = $derived(page.url.pathname === "/"); launch.css Documentation -
    +