From 4aa32a5b1132bfcd39c2b49d7c0f968bee59493c Mon Sep 17 00:00:00 2001 From: violette Date: Tue, 6 Feb 2024 10:26:10 -0500 Subject: [PATCH] theme ; WIP ; TODO light mode switch + first page + english pages --- themes/violette/assets/css/main.css | 129 ++++++++++++++++-- themes/violette/layouts/_default/baseof.html | 23 ++-- .../layouts/partials/darkModeToggle.html | 1 + themes/violette/layouts/partials/header.html | 2 +- themes/violette/layouts/partials/menu.html | 6 + 5 files changed, 139 insertions(+), 22 deletions(-) create mode 100644 themes/violette/layouts/partials/darkModeToggle.html diff --git a/themes/violette/assets/css/main.css b/themes/violette/assets/css/main.css index 3b3edf9..71a0c1a 100644 --- a/themes/violette/assets/css/main.css +++ b/themes/violette/assets/css/main.css @@ -1,39 +1,113 @@ +:root { + --bg: white; + --border: white; + --text: black; + + --text-pink-dark: #ed61e1; + --text-mauve-dark: #c282e0; + + --text-pink-light: #ed61e1; + --text-mauve-light: #c282e0; + + --text-pink: blue; + --text-mauve: #c282e0; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg:black; + --text:white; + --text-pink: var(--text-pink-dark); + --text-mauve: var(--text-mauve-dark); +} + +#color-mode:checked ~ .color-scheme-wrapper { + --bg:black; + --text:white; + --text-pink: var(--text-pink-dark) + --text-mauve: var(--text-mauve-dark) +} + +@media (prefers-color-scheme: dark) { + #color-mode:checked ~ .color-scheme-wrapper { + --bg:white; + --text:black; + --text-pink: var(--text-pink-light) + --text-mauve: var(--text-mauve-light) + } +} + +.color-scheme-wrapper { + min-height:100vh; + background:var(--bg); + color:var(--text); +} + +.margin { + background:var(--bg); + color:var(--text); + padding-left: 20px; + padding-right: 20px; +} + +#color-mode { + display: none; +} + body { - color: #fff; - background-color: #111; font-family: sans-serif; line-height: 1.5; - margin: 1rem; + margin: 0; } header { + background-color: var(--bg); + color: var(--text); border-bottom: 1px solid #222; margin-bottom: 1rem; } h1 { width: 100%; + padding-top: 10px; + color: var(--text-pink); text-align: center; - color: #c282e0; transition: 300ms color; + margin-top: 0; } h1:hover { - color: #5082cf; + color: var(--text-mauve); transition-duration: 500ms; } +h2 { + color: var(--text-pink); + transition: 300ms color; +} + +h2:hover { + color: var(--text-mauve); + transition-duration: 500ms; +} + +h3 { + color: var(--text-pink); + padding-left: 20px; +} footer { border-top: 1px solid #222; - margin-top: 1rem; + margin-top: 0; + padding-top: 0; width: 100%; display: flex; position: sticky; - background-color: #111; } .footer { + color: var(--text); + background-color: var(--bg); align-items: center; width: 100%; display: flex; @@ -41,17 +115,48 @@ footer { gap: 10px; } - .nav { display: flex; list-style-type: none; -} - -li { margin: 5pt; } -a { +main { + background-color: var(--bg); + border-bottom: 1rem solid var(--bg); +} + +.nav-right { + display: flex; + align-items:flex-end; + justify-content: flex-end; + list-style-type: none; + width: 100%; +} + +li { + padding-left: 5pt; + padding-right: 5pt; +} + +ul { + padding-right: 5pt; + margin-left: 5pt; +} + +a, label { color: #c282e0; text-decoration: none; } + +.toggle-dark { + align-self: flex-end; + width: auto; + padding-right: 20pt; + padding-left: 20pt; +} + +.toggle-dark label { + width: 100%; + display: block; +} diff --git a/themes/violette/layouts/_default/baseof.html b/themes/violette/layouts/_default/baseof.html index 17121b8..f92650c 100644 --- a/themes/violette/layouts/_default/baseof.html +++ b/themes/violette/layouts/_default/baseof.html @@ -6,15 +6,20 @@ {{ partialCached "favicon.html" . }} {{ end }} + -
- {{ partial "header.html" . }} -
-
- {{ block "main" . }}{{ end }} -
- + +
+
+
+ {{ partial "header.html" . }} +
+
+ {{ block "main" . }}{{ end }} +
+
+ {{ partial "footer.html" . }} +
+
diff --git a/themes/violette/layouts/partials/darkModeToggle.html b/themes/violette/layouts/partials/darkModeToggle.html new file mode 100644 index 0000000..9b51248 --- /dev/null +++ b/themes/violette/layouts/partials/darkModeToggle.html @@ -0,0 +1 @@ + diff --git a/themes/violette/layouts/partials/header.html b/themes/violette/layouts/partials/header.html index 7980a00..e258dc2 100644 --- a/themes/violette/layouts/partials/header.html +++ b/themes/violette/layouts/partials/header.html @@ -1,2 +1,2 @@

{{ site.Title }}

-{{ partial "menu.html" (dict "menuID" "main" "page" .) }} +{{ partial "menu.html" (dict "menuID" "main" "page" .) }} diff --git a/themes/violette/layouts/partials/menu.html b/themes/violette/layouts/partials/menu.html index 19bfffd..270dd15 100644 --- a/themes/violette/layouts/partials/menu.html +++ b/themes/violette/layouts/partials/menu.html @@ -47,5 +47,11 @@ Renders a menu for the given menu ID. {{- end }} + {{- end }} +
  • + {{- partial "partials/darkModeToggle.html" }} + +
    • {{- end }} +