From c3e31bb7c90501d9f22ef000dd99448423755e75 Mon Sep 17 00:00:00 2001 From: wholteza Date: Sat, 4 Oct 2025 16:07:40 +0200 Subject: [PATCH] Working playground --- src/assets/base.css | 44 +++++++++++ src/index.ts | 4 +- src/playground/dropdown.html | 39 ---------- src/playground/playground.html | 130 +++++++++++++++++++++++++++++++++ src/templates/404.html | 27 ++++--- src/templates/index.html | 40 ---------- src/templates/note.html | 41 +---------- 7 files changed, 192 insertions(+), 133 deletions(-) delete mode 100644 src/playground/dropdown.html create mode 100644 src/playground/playground.html diff --git a/src/assets/base.css b/src/assets/base.css index 35cdb22..a6e6280 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -3,7 +3,51 @@ --color-accent: #00FFFF; --color-text: #FFF; + --content-width: 800px; + --font-size-base: 18px; --line-height-base: 26px; --font-family: monospace; + + --space-base: 1rem; +} + +.banner { + margin-top: 1rem; + width: 100%; + height: 40px; + display: flex; + flex-direction: row; + margin-bottom: 1rem; + align-items: center; + flex: 1; + font-family: monospace; +} + +.banner { + .title { + display: flex; + flex-direction: row; + flex: 1; + + .name { + color: #1c1b28; + background-color: #00FFFF; + white-space: nowrap; + padding: 5px; + + a { + color: unset; + text-decoration: none; + } + } + } + + .title::after { + background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px); + content: ""; + display: block; + width: 100%; + margin-left: 10px; + } } diff --git a/src/index.ts b/src/index.ts index 3f13bf3..23ccf86 100644 --- a/src/index.ts +++ b/src/index.ts @@ -36,9 +36,9 @@ new ToolchainBuilder(paths) path: "src/assets/base.css" }, { - path: "src/playground/dropdown.html", + path: "src/playground/playground.html", menuEntry: true, - nameOverride: "Dropdown playground" + nameOverride: "CSS/HTML playground" } ], }), diff --git a/src/playground/dropdown.html b/src/playground/dropdown.html deleted file mode 100644 index 4ea1af4..0000000 --- a/src/playground/dropdown.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - -
- 
-			
-
-
-
-
-
- - - diff --git a/src/playground/playground.html b/src/playground/playground.html new file mode 100644 index 0000000..a7b96d4 --- /dev/null +++ b/src/playground/playground.html @@ -0,0 +1,130 @@ + + + + + + + + + + + +

This is an interactive html and css playground built with minimal JS.

+
+ + + + + diff --git a/src/templates/404.html b/src/templates/404.html index 9857560..dce71aa 100644 --- a/src/templates/404.html +++ b/src/templates/404.html @@ -1,15 +1,18 @@ - - - - Page Not Found - - -
-

404

-

Page Not Found

-

The specified file was not found on this website. Please check the URL for mistakes and try again.

-
- + + + + + Page Not Found + + + +
+

404

+

Page Not Found

+

The specified file was not found on this website. Please check the URL for mistakes and try again.

+
+ + diff --git a/src/templates/index.html b/src/templates/index.html index 47ae13b..c9d98d4 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -85,46 +85,6 @@ } .profile li {} - - .banner { - margin-top: 1rem; - width: 100%; - height: 40px; - display: flex; - flex-direction: row; - margin-bottom: 1rem; - align-items: center; - flex: 1; - font-family: monospace; - } - - .banner { - .title { - display: flex; - flex-direction: row; - flex: 1; - - .name { - color: #1c1b28; - background-color: #00FFFF; - white-space: nowrap; - padding: 5px; - - a { - color: unset; - text-decoration: none; - } - } - } - - .title::after { - background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px); - content: ""; - display: block; - width: 100%; - margin-left: 10px; - } - } diff --git a/src/templates/note.html b/src/templates/note.html index 0003d97..e71e1ea 100644 --- a/src/templates/note.html +++ b/src/templates/note.html @@ -5,6 +5,7 @@ Document +