Skip to content

Add alert, switch, avatar components with docs and landing refresh #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
TorstenDittmann wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Add alert, switch, avatar components with docs and landing refresh #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ae78186
Add alert, switch, and avatar components with docs and landing refresh
cursoragent Sep 19, 2026
bc68cf1
Redesign docs landing and chrome for a sharper site identity
cursoragent Sep 19, 2026
06f177b
Strengthen landing hero atmosphere and vertical balance
cursoragent Sep 19, 2026
53b9b5c
Fix typography vertical rhythm wiped by margin-block: 0
cursoragent Sep 19, 2026
7078f58
Add SaaS, dashboard, and blog example projects
cursoragent Sep 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 133 additions & 58 deletions apps/docs/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -61,143 +79,190 @@
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 {
display: flex;
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 {
padding: 1.5rem;
}

.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-block: 0 0.5rem;
letter-spacing: -0.03em;
}

.docs-content > p:first-of-type {
margin-bottom: 2rem;
color: var(--color-muted);
margin-block: 0 2rem;
color: var(--site-muted);
font-size: 1.125rem;
line-height: 1.65;
}

.docs-content h2 {
margin-block-start: 2.75rem;
}

/* 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) {
Expand All @@ -212,4 +277,14 @@ body {
.docs-content {
padding: 1.5rem;
}

.docs-header ul {
gap: 0.9rem;
}
}

/* Full-height shells for immersive examples */
[data-layout="website"],
[data-layout="dashboard"] {
min-height: 100vh;
}
5 changes: 5 additions & 0 deletions apps/docs/src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
name="description"
content="launch.css - A classless CSS framework for semantic HTML"
/>
<link rel="preconnect" href="https://fonts.bunny.net" />
<link
href="https://fonts.bunny.net/css?family=ibm-plex-mono:400,500|outfit:400,500,600,700,800"
rel="stylesheet"
/>
%sveltekit.head%
</head>
<body>
Expand Down
Loading
Loading