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 --- index.html | 593 ------------------------------------------------------ static/index.html | 593 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 593 insertions(+), 593 deletions(-) delete mode 100644 index.html create mode 100644 static/index.html diff --git a/index.html b/index.html deleted file mode 100644 index dcaa56b..0000000 --- a/index.html +++ /dev/null @@ -1,593 +0,0 @@ - - - - - - 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:

-
- - -
-
- - -
-
- - -
-
- -
- - - - - - 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