summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorElizabeth Hunt <me@liz.coffee>2025-12-13 00:42:50 -0800
committerElizabeth Hunt <me@liz.coffee>2025-12-13 00:42:50 -0800
commit4cb732c77da7c350a656f1d12504b499fb2d80c5 (patch)
tree3912241fda458d920e8f2f98fb20845ab005c8f2 /index.html
parent15369496ecc4f8bd2b170b9afc2c2c0558ae97ad (diff)
downloadadelie-4cb732c77da7c350a656f1d12504b499fb2d80c5.tar.gz
adelie-4cb732c77da7c350a656f1d12504b499fb2d80c5.zip
Move index to static
Diffstat (limited to 'index.html')
-rw-r--r--index.html593
1 files changed, 0 insertions, 593 deletions
diff --git a/index.html b/index.html
deleted file mode 100644
index dcaa56b..0000000
--- a/index.html
+++ /dev/null
@@ -1,593 +0,0 @@
-<!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="/static/css/style.css" />
- <link rel="icon" href="/static/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: 2px solid var(--border-light);
- padding: var(--space-md);
- background: var(--surface);
- box-shadow: 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: 2px solid var(--border-light);
- margin-right: var(--space-sm);
- vertical-align: middle;
- box-shadow: 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>#ff69b4</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>#ff85c0</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>#ff4a9f</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>#b19cd9</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>#c4b5fd</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>#9d7eb8</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>#4caf50</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>#f44336</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>#ff9800</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>#2196f3</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>function retro() {
- return "That's totally rad!";
-}
-
-retro(); // "That's totally rad!"</code></pre>
- </article>
-
- <!-- Dividers -->
- <article>
- <h2>Dividers</h2>
- <p>Use <code>&lt;hr&gt;</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>&copy; 2025 Liz CSS Framework. Made with coffee and retro vibes.</p>
- </footer>
-
- <script src="/static/js/script.js"></script>
- </body>
-</html>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-05 17:01:42 +0000