diff options
| author | Elizabeth Hunt <me@liz.coffee> | 2025-12-14 16:14:29 -0800 |
|---|---|---|
| committer | Elizabeth Hunt <me@liz.coffee> | 2025-12-14 16:17:29 -0800 |
| commit | 8ec712c8c884110600954860c21f58107455cfdc (patch) | |
| tree | 5e5b16ec8b0a1d15d58beae5bc8a7fd5285c6d0e /src/index.html | |
| parent | db0d9b80b4412a46cae0e58997f4baa7213948e3 (diff) | |
| download | adelie-8ec712c8c884110600954860c21f58107455cfdc.tar.gz adelie-8ec712c8c884110600954860c21f58107455cfdc.zip | |
Move to typescript
Diffstat (limited to 'src/index.html')
| -rw-r--r-- | src/index.html | 1167 |
1 files changed, 575 insertions, 592 deletions
diff --git a/src/index.html b/src/index.html index c5f83a2..b20e703 100644 --- a/src/index.html +++ b/src/index.html @@ -1,599 +1,582 @@ <!doctype html> <html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Liz CSS - Framework Demo</title> - <link rel="stylesheet" href="/bundle.css" /> - <link rel="icon" href="/img/favicon.ico" /> - <style> - .demo-section { - margin-bottom: var(--space-xl); - } - - .component-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--space-md); - margin: var(--space-md) 0; - } - - .component-box { - border: var(--border-width) solid var(--border); - padding: var(--space-md); - background: var(--surface); - box-shadow: - inset 1px 1px 0 var(--border-light), - inset -1px -1px 0 var(--border-dark), - var(--shadow-box); - } - - .component-box > :last-child { - margin-bottom: 0; - } - - .component-label { - display: block; - font-size: 0.75rem; - color: var(--muted); - margin-bottom: var(--space-xs); - text-transform: uppercase; - letter-spacing: 0.05em; - } - - .button-row { - display: flex; - gap: var(--space-sm); - flex-wrap: wrap; - margin: var(--space-md) 0; - } - - .form-group { - margin-bottom: var(--space-md); - } - - code { - background: var(--bg); - padding: 0.25rem 0.5rem; - border: 1px solid var(--border-light); - font-size: 0.875rem; - font-family: var(--font-mono); - } - - .color-swatch { - display: inline-block; - width: 40px; - height: 40px; - border: var(--border-width) solid var(--border); - margin-right: var(--space-sm); - vertical-align: middle; - box-shadow: - inset 1px 1px 0 var(--border-light), - inset -1px -1px 0 var(--border-dark), - var(--shadow-sm); - } - </style> - </head> - <body> - <header> - <nav> - <a href="/">Home</a> - <a href="/demo.html">Components</a> - </nav> - <input type="checkbox" id="theme-toggle" class="toggle" aria-label="Toggle dark mode" /> - </header> - - <main> - <!-- Color Palette --> - <article> - <h2>Color Palette</h2> - <p>A retro-themed minimal CSS framework with carefully selected colors for light and dark modes.</p> - - <h3>Primary Colors</h3> - <div class="component-grid"> - <div class="component-box"> - <span class="component-label">Primary</span> - <div style="display: flex; align-items: center;"> - <div - class="color-swatch" - style="background: var(--primary);" - ></div> - <code>#e56aa6</code> - </div> - </div> - <div class="component-box"> - <span class="component-label">Primary Light</span> - <div style="display: flex; align-items: center;"> - <div - class="color-swatch" - style="background: var(--primary-light);" - ></div> - <code>#f08dbe</code> - </div> - </div> - <div class="component-box"> - <span class="component-label">Primary Dark</span> - <div style="display: flex; align-items: center;"> - <div - class="color-swatch" - style="background: var(--primary-dark);" - ></div> - <code>#c84d86</code> - </div> - </div> - </div> - - <h3>Secondary Colors</h3> - <div class="component-grid"> - <div class="component-box"> - <span class="component-label">Secondary</span> - <div style="display: flex; align-items: center;"> - <div - class="color-swatch" - style="background: var(--secondary);" - ></div> - <code>#b69cff</code> - </div> - </div> - <div class="component-box"> - <span class="component-label">Secondary Light</span> - <div style="display: flex; align-items: center;"> - <div - class="color-swatch" - style="background: var(--secondary-light);" - ></div> - <code>#d7c8ff</code> - </div> - </div> - <div class="component-box"> - <span class="component-label">Secondary Dark</span> - <div style="display: flex; align-items: center;"> - <div - class="color-swatch" - style="background: var(--secondary-dark);" - ></div> - <code>#8f78d6</code> - </div> - </div> - </div> - - <h3>Status Colors</h3> - <div class="component-grid"> - <div class="component-box"> - <span class="component-label">Success</span> - <div style="display: flex; align-items: center;"> - <div - class="color-swatch" - style="background: var(--success);" - ></div> - <code>#2e8b57</code> - </div> - </div> - <div class="component-box"> - <span class="component-label">Error</span> - <div style="display: flex; align-items: center;"> - <div class="color-swatch" style="background: var(--error);"></div> - <code>#b3261e</code> - </div> - </div> - <div class="component-box"> - <span class="component-label">Warning</span> - <div style="display: flex; align-items: center;"> - <div - class="color-swatch" - style="background: var(--warning);" - ></div> - <code>#b7791f</code> - </div> - </div> - <div class="component-box"> - <span class="component-label">Info</span> - <div style="display: flex; align-items: center;"> - <div class="color-swatch" style="background: var(--info);"></div> - <code>#2b6cb0</code> - </div> - </div> - </div> - </article> - - <!-- Buttons --> - <article> - <h2>Buttons</h2> - <p>Retro-styled buttons with multiple variants and states.</p> - - <h3>Basic Buttons</h3> - <div class="button-row"> - <button>Default (Secondary)</button> - <button class="primary">Primary</button> - <button class="secondary">Secondary</button> - <button class="contrast">Contrast</button> - </div> - - <h3>Status Buttons</h3> - <div class="button-row"> - <button class="success">Success</button> - <button class="error">Error</button> - <button class="warning">Warning</button> - <button class="info">Info</button> - </div> - - <h3>Button States</h3> - <div class="button-row"> - <button>Normal</button> - <button disabled>Disabled</button> - </div> - </article> - - <!-- Forms --> - <article> - <h2>Forms</h2> - <p>Complete form styling with retro aesthetics.</p> - - <form> - <div class="form-group"> - <label for="text-input">Text Input</label> - <input - type="text" - id="text-input" - placeholder="Enter some text..." - /> - </div> - - <div class="form-group"> - <label for="email-input">Email Input</label> - <input - type="email" - id="email-input" - placeholder="you@example.com" - /> - </div> - - <div class="form-group"> - <label for="number-input">Number Input</label> - <input type="number" id="number-input" placeholder="42" /> - </div> - - <div class="form-group"> - <label for="textarea">Textarea</label> - <textarea - id="textarea" - placeholder="Write your message here..." - ></textarea> - </div> - - <div class="form-group"> - <label for="select">Select Dropdown</label> - <select id="select"> - <option>Choose an option</option> - <option>Option 1</option> - <option>Option 2</option> - <option>Option 3</option> - </select> - </div> - - <fieldset> - <legend>Checkboxes</legend> - <div class="form-group"> - <input type="checkbox" id="check1" /> - <label for="check1" style="display: inline; margin: 0;"> - Checkbox 1 - </label> - </div> - <div class="form-group"> - <input type="checkbox" id="check2" /> - <label for="check2" style="display: inline; margin: 0;"> - Checkbox 2 - </label> - </div> - </fieldset> - - <fieldset> - <legend>Radio Buttons</legend> - <div class="form-group"> - <input type="radio" id="radio1" name="radio-group" /> - <label for="radio1" style="display: inline; margin: 0;"> - Option A - </label> - </div> - <div class="form-group"> - <input type="radio" id="radio2" name="radio-group" /> - <label for="radio2" style="display: inline; margin: 0;"> - Option B - </label> - </div> - </fieldset> - - <div class="button-row mt-md"> - <button type="submit" class="primary">Submit</button> - <button type="reset" class="secondary">Reset</button> - <button type="button" class="contrast">Cancel</button> - </div> - </form> - </article> - - <!-- Alerts --> - <article> - <h2>Alerts</h2> - <p>Status messages and notifications with semantic colors.</p> - - <div class="alert info"> - <strong>ℹ️ Info:</strong> This is an informational message. - </div> - - <div class="alert success"> - <strong>✓ Success:</strong> Operation completed successfully! - </div> - - <div class="alert warning"> - <strong>⚠️ Warning:</strong> Please review this before proceeding. - </div> - - <div class="alert error"> - <strong>✗ Error:</strong> Something went wrong. Please try again. - </div> - </article> - - <!-- Badges --> - <article> - <h2>Badges & Pills</h2> - <p>Small inline elements for labels, tags, and status indicators.</p> - - <h3>Default Badges</h3> - <p> - <span class="badge">Default</span> - <span class="badge primary">Primary</span> - <span class="badge secondary">Secondary</span> - <span class="badge contrast">Contrast</span> - </p> - - <h3>Status Badges</h3> - <p> - <span class="badge success">✓ Success</span> - <span class="badge error">✗ Error</span> - <span class="badge warning">⚠️ Warning</span> - <span class="badge info">ℹ️ Info</span> - </p> - </article> - - <!-- Typography & Helpers --> - <article> - <h2>Typography & Helper Classes</h2> - <p>Text utilities and spacing helpers for quick styling.</p> - - <h3>Text Colors</h3> - <p> - Default text <span class="text-muted">(muted)</span> - <span class="text-success">success text</span> - <span class="text-error">error text</span> - <span class="text-warning">warning text</span> - <span class="text-info">info text</span> - <span class="text-contrast">contrast text</span> - </p> - - <h3>Text Alignment</h3> - <p class="text-left">Left aligned</p> - <p class="text-center">Center aligned</p> - <p class="text-right">Right aligned</p> - - <h3>Spacing Helpers</h3> - <p> - Use <code>.mt-xs</code>, <code>.mt-sm</code>, <code>.mt-md</code>, - <code>.mt-lg</code>, <code>.mt-xl</code> for margin-top. - </p> - <p> - Use <code>.mb-xs</code>, <code>.mb-sm</code>, <code>.mb-md</code>, - <code>.mb-lg</code>, <code>.mb-xl</code> for margin-bottom. - </p> - <p> - Use <code>.mx-auto</code> for horizontal centering and - <code>.py-md</code> for vertical padding. - </p> - - <div class="component-box mt-md mb-lg mx-auto" style="max-width: 400px;"> - <p class="text-center">Example: Component with margin and padding utilities</p> - </div> - </article> - - <!-- Headings --> - <article> - <h2>Heading Styles</h2> - <h1>Heading 1</h1> - <h2>Heading 2</h2> - <h3>Heading 3</h3> - <h4>Heading 4</h4> - <h5>Heading 5</h5> - <h6>Heading 6</h6> - </article> - - <!-- Lists --> - <article> - <h2>Lists</h2> - - <h3>Unordered List</h3> - <ul> - <li>Item one with some text</li> - <li>Item two with more text</li> - <li>Item three with even more text</li> - <li>Nested lists: - <ul> - <li>Sub-item one</li> - <li>Sub-item two</li> - </ul> - </li> - </ul> - - <h3>Ordered List</h3> - <ol> - <li>First step in the process</li> - <li>Second step follows naturally</li> - <li>Third step completes the sequence</li> - </ol> - </article> - - <!-- Blockquotes --> - <article> - <h2>Blockquotes</h2> - <blockquote> - "The best time to plant a tree was 20 years ago. The second best time is now." - <br /> - <small>— Chinese Proverb</small> - </blockquote> - </article> - - <!-- Links --> - <article> - <h2>Links</h2> - <p> - This is a <a href="#demo">hyperlink</a> styled with the framework. Links - have a bottom border and change color on hover. You can use them - <a href="#inline">inline within text</a> or as standalone elements. - </p> - </article> - - <!-- Tables --> - <article> - <h2>Tables</h2> - <p>Tables with retro styling, alternating row colors, and hover effects.</p> - <table> - <thead> - <tr> - <th>Feature</th> - <th>Light Mode</th> - <th>Dark Mode</th> - </tr> - </thead> - <tbody> - <tr> - <td>Background</td> - <td>Warm cream</td> - <td>Warm taupe</td> - </tr> - <tr> - <td>Buttons</td> - <td>Lavender primary</td> - <td>Rose primary</td> - </tr> - <tr> - <td>Borders</td> - <td>Retro 90s beveled</td> - <td>Retro 90s beveled</td> - </tr> - <tr> - <td>Accents</td> - <td>Pink & brown</td> - <td>Pink & brown</td> - </tr> - </tbody> - </table> - </article> - - <!-- Code --> - <article> - <h2>Code</h2> - <p>Inline <code>const x = 42;</code> looks different from block code:</p> - <pre><code class="language-javascript">function retro() { + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Liz CSS - Framework Demo</title> + <script> + window.ASSET_BASE = 'ASSET_BASE_PLACEHOLDER'; + </script> + <link rel="stylesheet" href="/bundle.css" /> + <link rel="icon" href="/img/favicon.ico" /> + <style> + .demo-section { + margin-bottom: var(--space-xl); + } + + .component-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: var(--space-md); + margin: var(--space-md) 0; + } + + .component-box { + border: var(--border-width) solid var(--border); + padding: var(--space-md); + background: var(--surface); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + var(--shadow-box); + } + + .component-box > :last-child { + margin-bottom: 0; + } + + .component-label { + display: block; + font-size: 0.75rem; + color: var(--muted); + margin-bottom: var(--space-xs); + text-transform: uppercase; + letter-spacing: 0.05em; + } + + .button-row { + display: flex; + gap: var(--space-sm); + flex-wrap: wrap; + margin: var(--space-md) 0; + } + + .form-group { + margin-bottom: var(--space-md); + } + + code { + background: var(--bg); + padding: 0.25rem 0.5rem; + border: 1px solid var(--border-light); + font-size: 0.875rem; + font-family: var(--font-mono); + } + + .color-swatch { + display: inline-block; + width: 40px; + height: 40px; + border: var(--border-width) solid var(--border); + margin-right: var(--space-sm); + vertical-align: middle; + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + var(--shadow-sm); + } + </style> + </head> + <body> + <header> + <nav> + <a href="/">Home</a> + <a href="/demo.html">Components</a> + </nav> + <input type="checkbox" id="theme-toggle" class="toggle" aria-label="Toggle dark mode" /> + </header> + + <main> + <!-- Color Palette --> + <article> + <h2>Color Palette</h2> + <p> + A retro-themed minimal CSS framework with carefully selected colors for light + and dark modes. + </p> + + <h3>Primary Colors</h3> + <div class="component-grid"> + <div class="component-box"> + <span class="component-label">Primary</span> + <div style="display: flex; align-items: center"> + <div class="color-swatch" style="background: var(--primary)"></div> + <code>#e56aa6</code> + </div> + </div> + <div class="component-box"> + <span class="component-label">Primary Light</span> + <div style="display: flex; align-items: center"> + <div + class="color-swatch" + style="background: var(--primary-light)" + ></div> + <code>#f08dbe</code> + </div> + </div> + <div class="component-box"> + <span class="component-label">Primary Dark</span> + <div style="display: flex; align-items: center"> + <div class="color-swatch" style="background: var(--primary-dark)"></div> + <code>#c84d86</code> + </div> + </div> + </div> + + <h3>Secondary Colors</h3> + <div class="component-grid"> + <div class="component-box"> + <span class="component-label">Secondary</span> + <div style="display: flex; align-items: center"> + <div class="color-swatch" style="background: var(--secondary)"></div> + <code>#b69cff</code> + </div> + </div> + <div class="component-box"> + <span class="component-label">Secondary Light</span> + <div style="display: flex; align-items: center"> + <div + class="color-swatch" + style="background: var(--secondary-light)" + ></div> + <code>#d7c8ff</code> + </div> + </div> + <div class="component-box"> + <span class="component-label">Secondary Dark</span> + <div style="display: flex; align-items: center"> + <div + class="color-swatch" + style="background: var(--secondary-dark)" + ></div> + <code>#8f78d6</code> + </div> + </div> + </div> + + <h3>Status Colors</h3> + <div class="component-grid"> + <div class="component-box"> + <span class="component-label">Success</span> + <div style="display: flex; align-items: center"> + <div class="color-swatch" style="background: var(--success)"></div> + <code>#2e8b57</code> + </div> + </div> + <div class="component-box"> + <span class="component-label">Error</span> + <div style="display: flex; align-items: center"> + <div class="color-swatch" style="background: var(--error)"></div> + <code>#b3261e</code> + </div> + </div> + <div class="component-box"> + <span class="component-label">Warning</span> + <div style="display: flex; align-items: center"> + <div class="color-swatch" style="background: var(--warning)"></div> + <code>#b7791f</code> + </div> + </div> + <div class="component-box"> + <span class="component-label">Info</span> + <div style="display: flex; align-items: center"> + <div class="color-swatch" style="background: var(--info)"></div> + <code>#2b6cb0</code> + </div> + </div> + </div> + </article> + + <!-- Buttons --> + <article> + <h2>Buttons</h2> + <p>Retro-styled buttons with multiple variants and states.</p> + + <h3>Basic Buttons</h3> + <div class="button-row"> + <button>Default (Secondary)</button> + <button class="primary">Primary</button> + <button class="secondary">Secondary</button> + <button class="contrast">Contrast</button> + </div> + + <h3>Status Buttons</h3> + <div class="button-row"> + <button class="success">Success</button> + <button class="error">Error</button> + <button class="warning">Warning</button> + <button class="info">Info</button> + </div> + + <h3>Button States</h3> + <div class="button-row"> + <button>Normal</button> + <button disabled>Disabled</button> + </div> + </article> + + <!-- Forms --> + <article> + <h2>Forms</h2> + <p>Complete form styling with retro aesthetics.</p> + + <form> + <div class="form-group"> + <label for="text-input">Text Input</label> + <input type="text" id="text-input" placeholder="Enter some text..." /> + </div> + + <div class="form-group"> + <label for="email-input">Email Input</label> + <input type="email" id="email-input" placeholder="you@example.com" /> + </div> + + <div class="form-group"> + <label for="number-input">Number Input</label> + <input type="number" id="number-input" placeholder="42" /> + </div> + + <div class="form-group"> + <label for="textarea">Textarea</label> + <textarea id="textarea" placeholder="Write your message here..."></textarea> + </div> + + <div class="form-group"> + <label for="select">Select Dropdown</label> + <select id="select"> + <option>Choose an option</option> + <option>Option 1</option> + <option>Option 2</option> + <option>Option 3</option> + </select> + </div> + + <fieldset> + <legend>Checkboxes</legend> + <div class="form-group"> + <input type="checkbox" id="check1" /> + <label for="check1" style="display: inline; margin: 0"> + Checkbox 1 + </label> + </div> + <div class="form-group"> + <input type="checkbox" id="check2" /> + <label for="check2" style="display: inline; margin: 0"> + Checkbox 2 + </label> + </div> + </fieldset> + + <fieldset> + <legend>Radio Buttons</legend> + <div class="form-group"> + <input type="radio" id="radio1" name="radio-group" /> + <label for="radio1" style="display: inline; margin: 0"> + Option A + </label> + </div> + <div class="form-group"> + <input type="radio" id="radio2" name="radio-group" /> + <label for="radio2" style="display: inline; margin: 0"> + Option B + </label> + </div> + </fieldset> + + <div class="button-row mt-md"> + <button type="submit" class="primary">Submit</button> + <button type="reset" class="secondary">Reset</button> + <button type="button" class="contrast">Cancel</button> + </div> + </form> + </article> + + <!-- Alerts --> + <article> + <h2>Alerts</h2> + <p>Status messages and notifications with semantic colors.</p> + + <div class="alert info"> + <strong>ℹ️ Info:</strong> This is an informational message. + </div> + + <div class="alert success"> + <strong>✓ Success:</strong> Operation completed successfully! + </div> + + <div class="alert warning"> + <strong>⚠️ Warning:</strong> Please review this before proceeding. + </div> + + <div class="alert error"> + <strong>✗ Error:</strong> Something went wrong. Please try again. + </div> + </article> + + <!-- Badges --> + <article> + <h2>Badges & Pills</h2> + <p>Small inline elements for labels, tags, and status indicators.</p> + + <h3>Default Badges</h3> + <p> + <span class="badge">Default</span> + <span class="badge primary">Primary</span> + <span class="badge secondary">Secondary</span> + <span class="badge contrast">Contrast</span> + </p> + + <h3>Status Badges</h3> + <p> + <span class="badge success">✓ Success</span> + <span class="badge error">✗ Error</span> + <span class="badge warning">⚠️ Warning</span> + <span class="badge info">ℹ️ Info</span> + </p> + </article> + + <!-- Typography & Helpers --> + <article> + <h2>Typography & Helper Classes</h2> + <p>Text utilities and spacing helpers for quick styling.</p> + + <h3>Text Colors</h3> + <p> + Default text <span class="text-muted">(muted)</span> + <span class="text-success">success text</span> + <span class="text-error">error text</span> + <span class="text-warning">warning text</span> + <span class="text-info">info text</span> + <span class="text-contrast">contrast text</span> + </p> + + <h3>Text Alignment</h3> + <p class="text-left">Left aligned</p> + <p class="text-center">Center aligned</p> + <p class="text-right">Right aligned</p> + + <h3>Spacing Helpers</h3> + <p> + Use <code>.mt-xs</code>, <code>.mt-sm</code>, <code>.mt-md</code>, + <code>.mt-lg</code>, <code>.mt-xl</code> for margin-top. + </p> + <p> + Use <code>.mb-xs</code>, <code>.mb-sm</code>, <code>.mb-md</code>, + <code>.mb-lg</code>, <code>.mb-xl</code> for margin-bottom. + </p> + <p> + Use <code>.mx-auto</code> for horizontal centering and <code>.py-md</code> for + vertical padding. + </p> + + <div class="component-box mt-md mb-lg mx-auto" style="max-width: 400px"> + <p class="text-center">Example: Component with margin and padding utilities</p> + </div> + </article> + + <!-- Headings --> + <article> + <h2>Heading Styles</h2> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> + </article> + + <!-- Lists --> + <article> + <h2>Lists</h2> + + <h3>Unordered List</h3> + <ul> + <li>Item one with some text</li> + <li>Item two with more text</li> + <li>Item three with even more text</li> + <li> + Nested lists: + <ul> + <li>Sub-item one</li> + <li>Sub-item two</li> + </ul> + </li> + </ul> + + <h3>Ordered List</h3> + <ol> + <li>First step in the process</li> + <li>Second step follows naturally</li> + <li>Third step completes the sequence</li> + </ol> + </article> + + <!-- Blockquotes --> + <article> + <h2>Blockquotes</h2> + <blockquote> + "The best time to plant a tree was 20 years ago. The second best time is now." + <br /> + <small>— Chinese Proverb</small> + </blockquote> + </article> + + <!-- Links --> + <article> + <h2>Links</h2> + <p> + This is a <a href="#demo">hyperlink</a> styled with the framework. Links have a + bottom border and change color on hover. You can use them + <a href="#inline">inline within text</a> or as standalone elements. + </p> + </article> + + <!-- Tables --> + <article> + <h2>Tables</h2> + <p>Tables with retro styling, alternating row colors, and hover effects.</p> + <table> + <thead> + <tr> + <th>Feature</th> + <th>Light Mode</th> + <th>Dark Mode</th> + </tr> + </thead> + <tbody> + <tr> + <td>Background</td> + <td>Warm cream</td> + <td>Warm taupe</td> + </tr> + <tr> + <td>Buttons</td> + <td>Lavender primary</td> + <td>Rose primary</td> + </tr> + <tr> + <td>Borders</td> + <td>Retro 90s beveled</td> + <td>Retro 90s beveled</td> + </tr> + <tr> + <td>Accents</td> + <td>Pink & brown</td> + <td>Pink & brown</td> + </tr> + </tbody> + </table> + </article> + + <!-- Code --> + <article> + <h2>Code</h2> + <p>Inline <code>const x = 42;</code> looks different from block code:</p> + <pre><code class="language-javascript">function retro() { return "That's totally rad!"; } retro(); // "That's totally rad!"</code></pre> - </article> - - <!-- Dividers --> - <article> - <h2>Dividers</h2> - <p>Use <code><hr></code> to separate content sections:</p> - <hr /> - <p>Content after the divider looks fresh and organized.</p> - </article> - - <!-- Form Validation --> - <article> - <h2>Form Validation</h2> - <p>Invalid inputs show a red border when they fail validation.</p> - <form> - <div class="form-group"> - <label for="valid-email">Valid Email</label> - <input - type="email" - id="valid-email" - placeholder="you@example.com" - value="user@example.com" - /> - </div> - <div class="form-group"> - <label for="invalid-email">Invalid Email</label> - <input - type="email" - id="invalid-email" - placeholder="you@example.com" - value="not-an-email" - /> - </div> - <div class="form-group"> - <label for="required-field">Required Field (empty = invalid)</label> - <input - type="text" - id="required-field" - placeholder="This field is required" - required - /> - </div> - </form> - </article> - - <!-- Button Groups --> - <article> - <h2>Button Groups</h2> - <p>Combine buttons into a group with the <code>.button-group</code> class:</p> - <div class="button-group mt-md"> - <button class="primary">First</button> - <button class="secondary">Second</button> - <button class="contrast">Third</button> - </div> - </article> - - <!-- Toggle Switches --> - <article> - <h2>Toggle Switches</h2> - <p>Use checkboxes with the <code>.toggle</code> class to create stylish toggle switches:</p> - <div class="form-group mt-md"> - <input type="checkbox" id="toggle1" class="toggle" /> - <label for="toggle1">Dark mode</label> - </div> - <div class="form-group"> - <input type="checkbox" id="toggle2" class="toggle" checked /> - <label for="toggle2">Notifications enabled</label> - </div> - <div class="form-group"> - <input type="checkbox" id="toggle3" class="toggle" /> - <label for="toggle3">Auto-save</label> - </div> - </article> - - <!-- Range Sliders --> - <article> - <h2>Range Sliders</h2> - <p>Native range inputs styled with retro beveled appearance:</p> - <div class="form-group mt-md"> - <label for="volume">Volume</label> - <input type="range" id="volume" min="0" max="100" value="50" /> - </div> - <div class="form-group"> - <label for="brightness">Brightness</label> - <input type="range" id="brightness" min="0" max="100" value="75" /> - </div> - <div class="form-group"> - <label for="saturation">Saturation</label> - <input type="range" id="saturation" min="0" max="100" value="25" /> - </div> - </article> - - </main> - - <footer> - <p>© 2025 Liz CSS Framework. Made with coffee and retro vibes.</p> - </footer> - - <script src="/bundle.js"></script> - </body> + </article> + + <!-- Dividers --> + <article> + <h2>Dividers</h2> + <p>Use <code><hr></code> to separate content sections:</p> + <hr /> + <p>Content after the divider looks fresh and organized.</p> + </article> + + <!-- Form Validation --> + <article> + <h2>Form Validation</h2> + <p>Invalid inputs show a red border when they fail validation.</p> + <form> + <div class="form-group"> + <label for="valid-email">Valid Email</label> + <input + type="email" + id="valid-email" + placeholder="you@example.com" + value="user@example.com" + /> + </div> + <div class="form-group"> + <label for="invalid-email">Invalid Email</label> + <input + type="email" + id="invalid-email" + placeholder="you@example.com" + value="not-an-email" + /> + </div> + <div class="form-group"> + <label for="required-field">Required Field (empty = invalid)</label> + <input + type="text" + id="required-field" + placeholder="This field is required" + required + /> + </div> + </form> + </article> + + <!-- Button Groups --> + <article> + <h2>Button Groups</h2> + <p>Combine buttons into a group with the <code>.button-group</code> class:</p> + <div class="button-group mt-md"> + <button class="primary">First</button> + <button class="secondary">Second</button> + <button class="contrast">Third</button> + </div> + </article> + + <!-- Toggle Switches --> + <article> + <h2>Toggle Switches</h2> + <p> + Use checkboxes with the <code>.toggle</code> class to create stylish toggle + switches: + </p> + <div class="form-group mt-md"> + <input type="checkbox" id="toggle1" class="toggle" /> + <label for="toggle1">Dark mode</label> + </div> + <div class="form-group"> + <input type="checkbox" id="toggle2" class="toggle" checked /> + <label for="toggle2">Notifications enabled</label> + </div> + <div class="form-group"> + <input type="checkbox" id="toggle3" class="toggle" /> + <label for="toggle3">Auto-save</label> + </div> + </article> + + <!-- Range Sliders --> + <article> + <h2>Range Sliders</h2> + <p>Native range inputs styled with retro beveled appearance:</p> + <div class="form-group mt-md"> + <label for="volume">Volume</label> + <input type="range" id="volume" min="0" max="100" value="50" /> + </div> + <div class="form-group"> + <label for="brightness">Brightness</label> + <input type="range" id="brightness" min="0" max="100" value="75" /> + </div> + <div class="form-group"> + <label for="saturation">Saturation</label> + <input type="range" id="saturation" min="0" max="100" value="25" /> + </div> + </article> + </main> + + <footer> + <p>© 2025 Liz CSS Framework. Made with coffee and retro vibes.</p> + </footer> + + <script src="/bundle.js"></script> + </body> </html> |