rizzo-css 0.0.55 → 0.0.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/README.md +2 -2
  2. package/bin/rizzo-css.js +48 -30
  3. package/package.json +1 -1
  4. package/scaffold/svelte/variants/full/src/routes/+layout.svelte +9 -0
  5. package/scaffold/vanilla/README-RIZZO.md +5 -4
  6. package/scaffold/vanilla/components/accordion.html +4 -0
  7. package/scaffold/vanilla/components/alert-dialog.html +4 -0
  8. package/scaffold/vanilla/components/alert.html +4 -0
  9. package/scaffold/vanilla/components/aspect-ratio.html +4 -0
  10. package/scaffold/vanilla/components/avatar.html +4 -0
  11. package/scaffold/vanilla/components/back-to-top.html +4 -0
  12. package/scaffold/vanilla/components/badge.html +4 -0
  13. package/scaffold/vanilla/components/breadcrumb.html +4 -0
  14. package/scaffold/vanilla/components/button-group.html +4 -0
  15. package/scaffold/vanilla/components/button.html +4 -0
  16. package/scaffold/vanilla/components/cards.html +4 -0
  17. package/scaffold/vanilla/components/collapsible.html +4 -0
  18. package/scaffold/vanilla/components/context-menu.html +4 -0
  19. package/scaffold/vanilla/components/copy-to-clipboard.html +4 -0
  20. package/scaffold/vanilla/components/dashboard.html +4 -0
  21. package/scaffold/vanilla/components/divider.html +4 -0
  22. package/scaffold/vanilla/components/docs-sidebar.html +4 -0
  23. package/scaffold/vanilla/components/dropdown.html +4 -0
  24. package/scaffold/vanilla/components/empty.html +4 -0
  25. package/scaffold/vanilla/components/font-switcher.html +4 -0
  26. package/scaffold/vanilla/components/footer.html +4 -0
  27. package/scaffold/vanilla/components/forms.html +4 -0
  28. package/scaffold/vanilla/components/hover-card.html +4 -0
  29. package/scaffold/vanilla/components/icons.html +4 -0
  30. package/scaffold/vanilla/components/index.html +4 -0
  31. package/scaffold/vanilla/components/kbd.html +4 -0
  32. package/scaffold/vanilla/components/label.html +4 -0
  33. package/scaffold/vanilla/components/modal.html +4 -0
  34. package/scaffold/vanilla/components/navbar.html +4 -0
  35. package/scaffold/vanilla/components/pagination.html +4 -0
  36. package/scaffold/vanilla/components/popover.html +4 -0
  37. package/scaffold/vanilla/components/progress-bar.html +4 -0
  38. package/scaffold/vanilla/components/resizable.html +4 -0
  39. package/scaffold/vanilla/components/scroll-area.html +4 -0
  40. package/scaffold/vanilla/components/search.html +4 -0
  41. package/scaffold/vanilla/components/separator.html +4 -0
  42. package/scaffold/vanilla/components/settings.html +4 -0
  43. package/scaffold/vanilla/components/sheet.html +4 -0
  44. package/scaffold/vanilla/components/skeleton.html +4 -0
  45. package/scaffold/vanilla/components/slider.html +4 -0
  46. package/scaffold/vanilla/components/sound-effects.html +4 -0
  47. package/scaffold/vanilla/components/spinner.html +4 -0
  48. package/scaffold/vanilla/components/switch.html +4 -0
  49. package/scaffold/vanilla/components/table.html +4 -0
  50. package/scaffold/vanilla/components/tabs.html +4 -0
  51. package/scaffold/vanilla/components/theme-switcher.html +4 -0
  52. package/scaffold/vanilla/components/toast.html +4 -0
  53. package/scaffold/vanilla/components/toggle-group.html +4 -0
  54. package/scaffold/vanilla/components/toggle.html +4 -0
  55. package/scaffold/vanilla/components/tooltip.html +4 -0
  56. package/scaffold/vanilla/index.html +4 -0
  57. package/scaffold/vanilla/variants/docs/getting-started.html +35 -0
package/README.md CHANGED
@@ -53,7 +53,7 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
53
53
 
54
54
  With `npx rizzo-css add --path <dir>`, the CLI still suggests the correct href for your framework (e.g. Astro/Svelte get a leading `/` path).
55
55
 
56
- Scaffolds in the package: `scaffold/vanilla/`, `scaffold/astro/base/` and `scaffold/astro/variants/` (docs, dashboard, full), `scaffold/svelte/base/` and `scaffold/svelte/variants/`, plus `scaffold/astro/` and `scaffold/svelte/` (all components), and `scaffold/config/` (font pairs for Settings). **New and existing use the same flow:** choose **Landing** | **Docs** | **Dashboard** | **Full**. Landing/Docs/Dashboard = component picker (all components or pick). Full = site clone. **We never overwrite your existing files**; skipped content goes in **RIZZO-SETUP.md**. You must add the stylesheet `<link>` yourself (CLI prints the exact tag). Every scaffold includes LICENSE-RIZZO, README-RIZZO.md, and .gitignore; Astro/Svelte include package.json and .env.example.
56
+ Scaffolds in the package: `scaffold/vanilla/` (and `scaffold/vanilla/variants/docs`, `dashboard`, `full`), `scaffold/astro/base/` and `scaffold/astro/variants/` (docs, dashboard, full), `scaffold/svelte/base/` and `scaffold/svelte/variants/`, plus `scaffold/astro/` and `scaffold/svelte/` (all components), and `scaffold/config/` (font pairs for Settings). **Every framework gets the same four templates:** **Landing** | **Docs** | **Dashboard** | **Full**. Landing/Docs/Dashboard = component picker (all or pick). Full = site clone (all components). **We never overwrite your existing files**; skipped content goes in **RIZZO-SETUP.md**. You must add the stylesheet `<link>` yourself (CLI prints the exact tag). Every scaffold includes LICENSE-RIZZO, README-RIZZO.md, and .gitignore; Astro/Svelte include package.json and .env.example.
57
57
 
58
58
  ## Use
59
59
 
@@ -68,7 +68,7 @@ import 'rizzo-css';
68
68
  **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
69
69
 
70
70
  ```html
71
- <!-- unpkg (pin version: replace @latest with @0.0.55 or any version) -->
71
+ <!-- unpkg (pin version: replace @latest with @0.0.56 or any version) -->
72
72
  <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
73
73
 
74
74
  <!-- or jsDelivr -->
package/bin/rizzo-css.js CHANGED
@@ -1349,7 +1349,7 @@ function copyVanillaComponents(projectDir, selectedNames, replacements) {
1349
1349
  }
1350
1350
  }
1351
1351
  const indexLinks = slugsToCopy.map((s) => ' <li><a href="' + s + '.html">' + s + '</a></li>').join('\n');
1352
- const navHtml = replacements['{{NAVBAR_HTML}}'] || '';
1352
+ const navHtml = getNavbarHtmlVanilla(title, '../index.html');
1353
1353
  const indexHtml = `<!DOCTYPE html>
1354
1354
  <html lang="en" data-theme="${replacements['{{DATA_THEME}}'] || 'github-dark-classic'}">
1355
1355
  <head>
@@ -2061,7 +2061,7 @@ async function cmdInit(argv) {
2061
2061
  const useAstroBase = selectedTemplate === 'full' && fullAllComponents && framework === 'astro' && existsSync(astroCoreDir) && !useFullVariant;
2062
2062
  const useSvelteBase = selectedTemplate === 'full' && fullAllComponents && framework === 'svelte' && existsSync(svelteCoreDir) && !useFullVariant;
2063
2063
  const useVanillaCore = selectedTemplate === 'full' && fullAllComponents && framework === 'vanilla' && existsSync(getScaffoldVanillaIndex()) && !useFullVariant && selectedVariation === 'landing';
2064
- const useVanillaWithOverlay = selectedTemplate === 'full' && fullAllComponents && framework === 'vanilla' && (selectedVariation === 'docs' || selectedVariation === 'dashboard') && getVariantDir('vanilla', selectedVariation);
2064
+ const useVanillaWithOverlay = selectedTemplate === 'full' && framework === 'vanilla' && (selectedVariation === 'docs' || selectedVariation === 'dashboard') && getVariantDir('vanilla', selectedVariation);
2065
2065
 
2066
2066
  // Full gets all required dependencies so everything works; manual gets deps when user picks (see prompt labels).
2067
2067
  let componentsToCopy = selectedComponents;
@@ -2070,7 +2070,7 @@ async function cmdInit(argv) {
2070
2070
  logAddedDeps(selectedComponents, componentsToCopy, framework);
2071
2071
  }
2072
2072
  let vanillaSoundScript = '';
2073
- if (framework === 'vanilla' && (useVanillaCore || componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects'))) {
2073
+ if (framework === 'vanilla' && (useVanillaCore || useVanillaWithOverlay || componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects'))) {
2074
2074
  const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
2075
2075
  if (existsSync(soundPath)) {
2076
2076
  let script = readFileSync(soundPath, 'utf8');
@@ -2079,17 +2079,20 @@ async function cmdInit(argv) {
2079
2079
  }
2080
2080
  }
2081
2081
 
2082
- // Astro layout: inject Navbar and Settings when those components are selected so the settings menu works.
2083
- if ((framework === 'astro') && (useHandpickAstro || useAstroBase)) {
2084
- const hasNavbar = componentsToCopy.includes('Navbar');
2085
- const hasSettings = componentsToCopy.includes('Settings');
2086
- const hasSound = useAstroBase || hasSettings || componentsToCopy.includes('SoundEffects');
2082
+ // Astro layout: inject Navbar, Settings, Footer when Full variant or when those components are selected.
2083
+ const astroFullLayout = (framework === 'astro') && (useFullVariant || useHandpickAstro || useAstroBase);
2084
+ if (astroFullLayout) {
2085
+ const hasNavbar = useFullVariant || componentsToCopy.includes('Navbar');
2086
+ const hasSettings = useFullVariant || componentsToCopy.includes('Settings');
2087
+ const hasFooter = useFullVariant || componentsToCopy.includes('Footer');
2088
+ const hasSound = useFullVariant || useAstroBase || hasSettings || componentsToCopy.includes('SoundEffects');
2087
2089
  const layoutImports = [];
2088
2090
  if (hasNavbar) layoutImports.push("import Navbar from '../components/rizzo/Navbar.astro';");
2089
2091
  if (hasSettings) layoutImports.push("import Settings from '../components/rizzo/Settings.astro';");
2092
+ if (hasFooter) layoutImports.push("import Footer from '../components/rizzo/Footer.astro';");
2090
2093
  replacements['{{RIZZO_LAYOUT_IMPORTS}}'] = layoutImports.length ? '\n' + layoutImports.join('\n') + '\n' : '\n';
2091
2094
  replacements['{{RIZZO_LAYOUT_BODY_TOP}}'] = hasNavbar ? '\n <Navbar />' : '';
2092
- replacements['{{RIZZO_LAYOUT_BODY_BOTTOM}}'] = hasSettings ? '\n <Settings />' : '';
2095
+ replacements['{{RIZZO_LAYOUT_BODY_BOTTOM}}'] = [hasSettings ? '\n <Settings />' : '', hasFooter ? '\n <Footer />' : ''].filter(Boolean).join('');
2093
2096
  if (hasSound) {
2094
2097
  const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
2095
2098
  if (existsSync(soundPath)) {
@@ -2102,6 +2105,13 @@ async function cmdInit(argv) {
2102
2105
  replacements['{{RIZZO_LAYOUT_BODY_BOTTOM}}'] = '';
2103
2106
  }
2104
2107
 
2108
+ if (useFullVariant && framework === 'svelte') {
2109
+ const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
2110
+ if (existsSync(soundPath)) {
2111
+ replacements['{{RIZZO_SOUND_SCRIPT}}'] = '\n <script>\n' + readFileSync(soundPath, 'utf8') + '\n </script>';
2112
+ }
2113
+ }
2114
+
2105
2115
  // Svelte app.html: inject sound script when Settings or SoundEffects is included (identical behavior to Astro).
2106
2116
  if ((framework === 'svelte') && (useHandpickSvelte || useSvelteBase)) {
2107
2117
  const hasSound = useSvelteBase || componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects');
@@ -2123,6 +2133,7 @@ async function cmdInit(argv) {
2123
2133
  const fullDir = getVariantDir('astro', 'full');
2124
2134
  copyDirRecursiveWithReplacements(fullDir, projectDir, replacements);
2125
2135
  copyRizzoCssAndFontsForAstro(projectDir, cssSource);
2136
+ copyAstroComponents(projectDir, componentsToCopy);
2126
2137
  cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
2127
2138
  if (existsSync(cssTarget) && statSync(cssTarget).size < 5000) {
2128
2139
  console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
@@ -2135,6 +2146,7 @@ async function cmdInit(argv) {
2135
2146
  const fullDir = getVariantDir('svelte', 'full');
2136
2147
  copyDirRecursiveWithReplacements(fullDir, projectDir, replacements);
2137
2148
  copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
2149
+ copySvelteComponents(projectDir, componentsToCopy);
2138
2150
  cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
2139
2151
  if (existsSync(cssTarget) && statSync(cssTarget).size < 5000) {
2140
2152
  console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
@@ -2144,8 +2156,11 @@ async function cmdInit(argv) {
2144
2156
  copyRizzoIcons(projectDir, 'svelte');
2145
2157
  } else if (useFullVariant && framework === 'vanilla') {
2146
2158
  mkdirSync(projectDir, { recursive: true });
2159
+ replacements['{{LINK_HREF}}'] = pathsForScaffold.linkHref || 'css/rizzo.min.css';
2160
+ replacements['{{NAVBAR_HTML}}'] = getNavbarHtmlVanilla(name || 'App', 'index.html');
2147
2161
  const fullDir = getVariantDir('vanilla', 'full');
2148
2162
  copyDirRecursiveWithReplacements(fullDir, projectDir, replacements);
2163
+ copyVanillaComponents(projectDir, Object.keys(VANILLA_COMPONENT_SLUGS), replacements);
2149
2164
  const cssDir = join(projectDir, pathsForScaffold.targetDir);
2150
2165
  cssTarget = join(cssDir, 'rizzo.min.css');
2151
2166
  mkdirSync(cssDir, { recursive: true });
@@ -2230,7 +2245,7 @@ async function cmdInit(argv) {
2230
2245
  copyRizzoIcons(projectDir, 'svelte');
2231
2246
  copySvelteComponents(projectDir, componentsToCopy);
2232
2247
  }
2233
- } else if (useVanillaCore) {
2248
+ } else if (useVanillaCore || useVanillaWithOverlay) {
2234
2249
  const cssDir = join(projectDir, pathsForScaffold.targetDir);
2235
2250
  cssTarget = join(cssDir, 'rizzo.min.css');
2236
2251
  const linkHref = 'css/rizzo.min.css';
@@ -2241,26 +2256,28 @@ async function cmdInit(argv) {
2241
2256
  if (statSync(cssTarget).size < 5000) {
2242
2257
  console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
2243
2258
  }
2244
- const vanillaScaffoldPath = getScaffoldVanillaIndex();
2245
- indexPath = join(projectDir, 'index.html');
2246
- let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
2247
- const navbarForIndex = getNavbarHtmlVanilla(name || 'App', 'index.html');
2248
- indexHtml = indexHtml
2249
- .replace(/\{\{DATA_THEME\}\}/g, theme)
2250
- .replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark)
2251
- .replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight)
2252
- .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
2253
- .replace(/\{\{TITLE\}\}/g, name || 'App')
2254
- .replace(/\{\{LINK_HREF\}\}/g, linkHref)
2255
- .replace(/\{\{NAVBAR_HTML\}\}/g, navbarForIndex);
2256
2259
  const vanillaSkipped = [];
2257
- if (existsSync(indexPath)) {
2258
- vanillaSkipped.push({ relativePath: 'index.html', content: indexHtml });
2259
- } else {
2260
- writeFileSync(indexPath, indexHtml, 'utf8');
2261
- }
2262
2260
  if (useVanillaWithOverlay) {
2263
2261
  copyVariantOverlay(projectDir, 'vanilla', selectedVariation, { ...replacements, '{{LINK_HREF}}': linkHref, '{{TITLE}}': name || 'App', '{{DATA_THEME}}': theme, '{{THEME_LIST_COMMENT}}': themeComment });
2262
+ indexPath = join(projectDir, 'index.html');
2263
+ } else {
2264
+ const vanillaScaffoldPath = getScaffoldVanillaIndex();
2265
+ indexPath = join(projectDir, 'index.html');
2266
+ let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
2267
+ const navbarForIndex = getNavbarHtmlVanilla(name || 'App', 'index.html');
2268
+ indexHtml = indexHtml
2269
+ .replace(/\{\{DATA_THEME\}\}/g, theme)
2270
+ .replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark)
2271
+ .replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight)
2272
+ .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
2273
+ .replace(/\{\{TITLE\}\}/g, name || 'App')
2274
+ .replace(/\{\{LINK_HREF\}\}/g, linkHref)
2275
+ .replace(/\{\{NAVBAR_HTML\}\}/g, navbarForIndex);
2276
+ if (existsSync(indexPath)) {
2277
+ vanillaSkipped.push({ relativePath: 'index.html', content: indexHtml });
2278
+ } else {
2279
+ writeFileSync(indexPath, indexHtml, 'utf8');
2280
+ }
2264
2281
  }
2265
2282
  copyRizzoIcons(projectDir, 'vanilla');
2266
2283
  const vanillaReadme = join(getPackageRoot(), 'scaffold', 'vanilla', SCAFFOLD_README_FILENAME);
@@ -2275,7 +2292,8 @@ async function cmdInit(argv) {
2275
2292
  writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
2276
2293
  }
2277
2294
  const vanillaCoreRepl = { ...replacements, '{{LINK_HREF}}': linkHref };
2278
- copyVanillaComponents(projectDir, Object.keys(VANILLA_COMPONENT_SLUGS), vanillaCoreRepl);
2295
+ const vanillaComponentSet = (useVanillaCore || fullAllComponents) ? Object.keys(VANILLA_COMPONENT_SLUGS) : selectedComponents;
2296
+ copyVanillaComponents(projectDir, vanillaComponentSet, vanillaCoreRepl);
2279
2297
  if (vanillaSkipped.length > 0) {
2280
2298
  writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd('vanilla', { linkHref, theme, defaultDark, defaultLight, skippedFiles: vanillaSkipped }), 'utf8');
2281
2299
  }
@@ -2379,8 +2397,8 @@ async function cmdInit(argv) {
2379
2397
  console.log(' - ' + cssTarget);
2380
2398
  if (indexPath) console.log(' - ' + indexPath);
2381
2399
  if (framework === 'vanilla') {
2382
- if (useVanillaCore) {
2383
- console.log(' - Vanilla JS (full): theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME + '.');
2400
+ if (useVanillaCore || useVanillaWithOverlay) {
2401
+ console.log(' - Vanilla JS (full): theme switcher, js/main.js, icons, component showcase, ' + SCAFFOLD_README_FILENAME + '.' + (useVanillaWithOverlay ? ' (' + selectedVariation + ' template)' : ''));
2384
2402
  } else if (selectedTemplate === 'landing') {
2385
2403
  console.log(' - ' + RIZZO_SETUP_FILE + ' has instructions and snippets.');
2386
2404
  } else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rizzo-css",
3
- "version": "0.0.55",
3
+ "version": "0.0.56",
4
4
  "engines": { "node": ">=18" },
5
5
  "scripts": {
6
6
  "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
package/scaffold/svelte/variants/full/src/routes/+layout.svelte CHANGED
@@ -1 +1,10 @@
1
+ <script lang="ts">
2
+ import Navbar from '$lib/rizzo/Navbar.svelte';
3
+ import Footer from '$lib/rizzo/Footer.svelte';
4
+ import Settings from '$lib/rizzo/Settings.svelte';
5
+ </script>
6
+
7
+ <Navbar siteName="Rizzo CSS" />
1
8
  <slot />
9
+ <Footer />
10
+ <Settings />
package/scaffold/vanilla/README-RIZZO.md CHANGED
@@ -27,7 +27,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
27
27
  - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`
28
28
  - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`
29
29
 
30
- (Replace `@latest` with a specific version, e.g. `@0.0.55`, in production.)
30
+ (Replace `@latest` with a specific version, e.g. `@0.0.56`, in production.)
31
31
 
32
32
  The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
33
33
 
@@ -67,9 +67,10 @@ npx serve .
67
67
  pnpm dlx serve .
68
68
  ```
69
69
 
70
- ## Other scaffolds
70
+ ## Other scaffolds (same four templates for every framework)
71
71
 
72
- - **Astro:** `scaffold/astro/base/` + optional `scaffold/astro/variants/docs`, `dashboard`, or `full`; Landing/Docs/Dashboard add all components (or pick) from `scaffold/astro/` (see README-RIZZO.md).
73
- - **Svelte:** `scaffold/svelte/base/` + optional `scaffold/svelte/variants/docs`, `dashboard`, or `full`; Landing/Docs/Dashboard add all components (or pick) from `scaffold/svelte/` (see README-RIZZO.md).
72
+ - **Vanilla:** Landing uses `scaffold/vanilla/index.html` or `scaffold/landing/`; Docs/Dashboard use `scaffold/vanilla/variants/docs` and `scaffold/vanilla/variants/dashboard`; Full uses `scaffold/vanilla/variants/full/`. All get component picker (all or pick) except Full.
73
+ - **Astro:** `scaffold/astro/base/` + optional `scaffold/astro/variants/docs`, `dashboard`, or `full`; Landing/Docs/Dashboard add all components (or pick) from `scaffold/astro/`.
74
+ - **Svelte:** `scaffold/svelte/base/` + optional `scaffold/svelte/variants/docs`, `dashboard`, or `full`; same flow.
74
75
 
75
76
  Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
package/scaffold/vanilla/variants/docs/getting-started.html ADDED
@@ -0,0 +1,35 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Getting started — {{TITLE}}</title>
7
+ <link rel="stylesheet" href="{{LINK_HREF}}" />
8
+ </head>
9
+ <body>
10
+ <a href="#main-content" class="skip-link">Skip to main content</a>
11
+ <div class="docs-layout">
12
+ <aside class="docs-layout__sidebar" aria-label="Documentation navigation">
13
+ <nav class="docs-layout__nav">
14
+ <a href="index.html" class="docs-layout__nav-link">Home</a>
15
+ <a href="getting-started.html" class="docs-layout__nav-link docs-layout__nav-link--active" aria-current="page">Getting started</a>
16
+ </nav>
17
+ </aside>
18
+ <main id="main-content" class="docs-layout__main">
19
+ <h1>Getting started</h1>
20
+ <p>This is a sample doc page. Add your own content and link new pages from the sidebar.</p>
21
+ <p><a href="index.html" class="btn btn-outline">← Documentation</a></p>
22
+ </main>
23
+ </div>
24
+ <style>
25
+ .docs-layout { display: flex; min-height: 100vh; }
26
+ .docs-layout__sidebar { width: 16rem; flex-shrink: 0; border-right: 1px solid var(--border); padding: var(--spacing-4); background: var(--background-alt); }
27
+ .docs-layout__nav { display: flex; flex-direction: column; gap: var(--spacing-1); }
28
+ .docs-layout__nav-link { display: block; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
29
+ .docs-layout__nav-link:hover { background: var(--background); }
30
+ .docs-layout__nav-link--active { background: var(--accent); color: var(--accent-text); }
31
+ .docs-layout__main { flex: 1; padding: var(--spacing-6); max-width: 65ch; }
32
+ @media (max-width: 768px) { .docs-layout { flex-direction: column; } .docs-layout__sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } }
33
+ </style>
34
+ </body>
35
+ </html>