summaryrefslogtreecommitdiff
path: root/src/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/index.html')
-rw-r--r--src/index.html103
1 files changed, 18 insertions, 85 deletions
diff --git a/src/index.html b/src/index.html
index 835f76d..7af4350 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,79 +6,12 @@
<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>
+ <body class="demo-page">
<header>
<nav>
- <a href="/">Home</a>
- <a href="/demo.html">Components</a>
+ <a href="/demo.html">Home</a>
+ <a href="/">Components</a>
</nav>
<input type="checkbox" id="theme-toggle" class="toggle" aria-label="Toggle dark mode" />
</header>
@@ -96,14 +29,14 @@
<div class="component-grid">
<div class="component-box">
<span class="component-label">Primary</span>
- <div style="display: flex; align-items: center">
+ <div class="demo-swatch-row">
<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="demo-swatch-row">
<div
class="color-swatch"
style="background: var(--primary-light)"
@@ -113,7 +46,7 @@
</div>
<div class="component-box">
<span class="component-label">Primary Dark</span>
- <div style="display: flex; align-items: center">
+ <div class="demo-swatch-row">
<div class="color-swatch" style="background: var(--primary-dark)"></div>
<code>#c84d86</code>
</div>
@@ -124,14 +57,14 @@
<div class="component-grid">
<div class="component-box">
<span class="component-label">Secondary</span>
- <div style="display: flex; align-items: center">
+ <div class="demo-swatch-row">
<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="demo-swatch-row">
<div
class="color-swatch"
style="background: var(--secondary-light)"
@@ -141,7 +74,7 @@
</div>
<div class="component-box">
<span class="component-label">Secondary Dark</span>
- <div style="display: flex; align-items: center">
+ <div class="demo-swatch-row">
<div
class="color-swatch"
style="background: var(--secondary-dark)"
@@ -155,28 +88,28 @@
<div class="component-grid">
<div class="component-box">
<span class="component-label">Success</span>
- <div style="display: flex; align-items: center">
+ <div class="demo-swatch-row">
<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="demo-swatch-row">
<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="demo-swatch-row">
<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="demo-swatch-row">
<div class="color-swatch" style="background: var(--info)"></div>
<code>#2b6cb0</code>
</div>
@@ -252,13 +185,13 @@
<legend>Checkboxes</legend>
<div class="form-group">
<input type="checkbox" id="check1" />
- <label for="check1" style="display: inline; margin: 0">
+ <label for="check1" class="demo-inline-label">
Checkbox 1
</label>
</div>
<div class="form-group">
<input type="checkbox" id="check2" />
- <label for="check2" style="display: inline; margin: 0">
+ <label for="check2" class="demo-inline-label">
Checkbox 2
</label>
</div>
@@ -268,13 +201,13 @@
<legend>Radio Buttons</legend>
<div class="form-group">
<input type="radio" id="radio1" name="radio-group" />
- <label for="radio1" style="display: inline; margin: 0">
+ <label for="radio1" class="demo-inline-label">
Option A
</label>
</div>
<div class="form-group">
<input type="radio" id="radio2" name="radio-group" />
- <label for="radio2" style="display: inline; margin: 0">
+ <label for="radio2" class="demo-inline-label">
Option B
</label>
</div>
@@ -366,7 +299,7 @@
vertical padding.
</p>
- <div class="component-box mt-md mb-lg mx-auto" style="max-width: 400px">
+ <div class="component-box mt-md mb-lg mx-auto demo-example-box">
<p class="text-center">Example: Component with margin and padding utilities</p>
</div>
</article>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-05 17:10:53 +0000