From 4cb732c77da7c350a656f1d12504b499fb2d80c5 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sat, 13 Dec 2025 00:42:50 -0800 Subject: Move index to static --- static/index.html | 593 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 593 insertions(+) create mode 100644 static/index.html (limited to 'static') diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..dcaa56b --- /dev/null +++ b/static/index.html @@ -0,0 +1,593 @@ + + + + + + Liz CSS - Framework Demo + + + + + +
+ + +
+ +
+ +
+

Color Palette

+

A retro-themed minimal CSS framework with carefully selected colors for light and dark modes.

+ +

Primary Colors

+
+
+ Primary +
+
+ #ff69b4 +
+
+
+ Primary Light +
+
+ #ff85c0 +
+
+
+ Primary Dark +
+
+ #ff4a9f +
+
+
+ +

Secondary Colors

+
+
+ Secondary +
+
+ #b19cd9 +
+
+
+ Secondary Light +
+
+ #c4b5fd +
+
+
+ Secondary Dark +
+
+ #9d7eb8 +
+
+
+ +

Status Colors

+
+
+ Success +
+
+ #4caf50 +
+
+
+ Error +
+
+ #f44336 +
+
+
+ Warning +
+
+ #ff9800 +
+
+
+ Info +
+
+ #2196f3 +
+
+
+
+ + +
+

Buttons

+

Retro-styled buttons with multiple variants and states.

+ +

Basic Buttons

+
+ + + + +
+ +

Status Buttons

+
+ + + + +
+ +

Button States

+
+ + +
+
+ + +
+

Forms

+

Complete form styling with retro aesthetics.

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ Checkboxes +
+ + +
+
+ + +
+
+ +
+ Radio Buttons +
+ + +
+
+ + +
+
+ +
+ + + +
+
+
+ + +
+

Alerts

+

Status messages and notifications with semantic colors.

+ +
+ ℹ️ Info: This is an informational message. +
+ +
+ ✓ Success: Operation completed successfully! +
+ +
+ ⚠️ Warning: Please review this before proceeding. +
+ +
+ ✗ Error: Something went wrong. Please try again. +
+
+ + +
+

Badges & Pills

+

Small inline elements for labels, tags, and status indicators.

+ +

Default Badges

+

+ Default + Primary + Secondary + Contrast +

+ +

Status Badges

+

+ ✓ Success + ✗ Error + ⚠️ Warning + ℹ️ Info +

+
+ + +
+

Typography & Helper Classes

+

Text utilities and spacing helpers for quick styling.

+ +

Text Colors

+

+ Default text (muted) + success text + error text + warning text + info text + contrast text +

+ +

Text Alignment

+

Left aligned

+

Center aligned

+

Right aligned

+ +

Spacing Helpers

+

+ Use .mt-xs, .mt-sm, .mt-md, + .mt-lg, .mt-xl for margin-top. +

+

+ Use .mb-xs, .mb-sm, .mb-md, + .mb-lg, .mb-xl for margin-bottom. +

+

+ Use .mx-auto for horizontal centering and + .py-md for vertical padding. +

+ +
+

Example: Component with margin and padding utilities

+
+
+ + +
+

Heading Styles

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ + +
+

Lists

+ +

Unordered List

+
    +
  • Item one with some text
    • +
  • Item two with more text
    • +
  • Item three with even more text
    • +
  • Nested lists: +
      +
    • Sub-item one
      • +
    • Sub-item two
      • +
    +
    • +
+ +

Ordered List

+
    +
  1. First step in the process
    2. +
  2. Second step follows naturally
    3. +
  3. Third step completes the sequence
    4. +
+
+ + +
+

Blockquotes

+
+ "The best time to plant a tree was 20 years ago. The second best time is now." +
+ — Chinese Proverb +
+
+ + +
+

Links

+

+ This is a hyperlink styled with the framework. Links + have a bottom border and change color on hover. You can use them + inline within text or as standalone elements. +

+
+ + +
+

Tables

+

Tables with retro styling, alternating row colors, and hover effects.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureLight ModeDark Mode
BackgroundWarm creamWarm taupe
ButtonsLavender primaryRose primary
BordersRetro 90s beveledRetro 90s beveled
AccentsPink & brownPink & brown
+
+ + +
+

Code

+

Inline const x = 42; looks different from block code:

+ 
function retro() {
+  return "That's totally rad!";
+}
+
+retro(); // "That's totally rad!"
+
+ + +
+

Dividers

+

Use <hr> to separate content sections:

+
+

Content after the divider looks fresh and organized.

+
+ + +
+

Form Validation

+

Invalid inputs show a red border when they fail validation.

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+

Button Groups

+

Combine buttons into a group with the .button-group class:

+
+ + + +
+
+ + +
+

Toggle Switches

+

Use checkboxes with the .toggle class to create stylish toggle switches:

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+

Range Sliders

+

Native range inputs styled with retro beveled appearance:

+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + + + -- cgit v1.2.3-70-g09d2