From 70b9f2e90bbd3776a83dcc85e6ba89d95e341f64 Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Sat, 27 Feb 2021 02:49:34 -0700 Subject: Actually fix light-dark button, feels nice --- luevano/index.html | 95 +++++++++++++++++++++++--------------------- static/css/dark.css | 14 ++++++- static/css/general_style.css | 15 +++++++ static/css/light.css | 14 ++++++- 4 files changed, 89 insertions(+), 49 deletions(-) diff --git a/luevano/index.html b/luevano/index.html index f1f1f05..15bda0a 100644 --- a/luevano/index.html +++ b/luevano/index.html @@ -14,6 +14,14 @@ +
+ + + +
- - - -
-

- Welcome! -

- -

- My name is David Luévano and this is my little piece of internet. -

- -

- I plan on doing all sort of stuff here, including a blog and stuff like an interactive gameboy where everyone who participates plays together (think "twitch plays pokemon" and more recently "twitter plays pokemon"). -

- -

- But for now, this place is under construction (as you may notice from most links being broken).
- - Under construction -

-
- - +
+ +
+

+ Welcome! +

+ +

+ My name is David Luévano and this is my little piece of internet. +

+ +

+ I plan on doing all sort of stuff here, including a blog and stuff like an interactive gameboy where everyone who participates plays together (think "twitch plays pokemon" and more recently "twitter plays pokemon"). +

+ +

+ But for now, this place is under construction (as you may notice from most links being broken).
+ + Under construction +

+
+ + + diff --git a/static/css/dark.css b/static/css/dark.css index 29af64b..13a3ea3 100644 --- a/static/css/dark.css +++ b/static/css/dark.css @@ -20,10 +20,12 @@ --fg-acc4: var(--color14); --fg-acc5: var(--color15); - --switch-bg: var(--color1); - --switch-slider: var(--color4); + --switch-bg: var(--color3); + --switch-slider: var(--color0); --switch-toggled-bg: var(--color10); --switch-ol: var(--color4); + --switch-moon: var(--color3); + --switch-sun: var(--color13); } html { @@ -61,6 +63,14 @@ h3 { background-color: var(--switch-bg); } +#theme-switcher-container i.fa-moon { + color: var(--switch-moon); +} + +#theme-switcher-container i.fa-sun { + color: var(--switch-sun); +} + .slider:before { background-color: var(--switch-slider); } diff --git a/static/css/general_style.css b/static/css/general_style.css index e49edb7..a4e032e 100644 --- a/static/css/general_style.css +++ b/static/css/general_style.css @@ -26,6 +26,21 @@ a{ height: 1rem; } +/* specifically the theme switcher */ +#theme-switcher-container { + position: absolute; + top: 1.6em; + --hardcoded-pos: calc(50vw - 25.2em); + --resized-pos: calc(0.4px + 0.5em); + --calculated-pos: max(var(--hardcoded-pos), var(--resized-pos)); + right: var(--calculated-pos); +} + +#theme-switcher-container i { + position: relative; + top: -0.2em; +} + .switch input { opacity: 0; width: 0; diff --git a/static/css/light.css b/static/css/light.css index cee7f22..b295ccf 100644 --- a/static/css/light.css +++ b/static/css/light.css @@ -20,10 +20,12 @@ --fg-acc4: var(--color14); --fg-acc5: var(--color15); - --switch-bg: var(--color1); + --switch-bg: var(--color3); --switch-slider: var(--color4); --switch-toggled-bg: var(--color10); - --switch-ol: var(--color4); + --switch-ol: var(--color0); + --switch-moon: var(--color3); + --switch-sun: var(--color13); } html { @@ -61,6 +63,14 @@ h3 { background-color: var(--switch-bg); } +#theme-switcher-container i.fa-moon { + color: var(--switch-moon); +} + +#theme-switcher-container i.fa-sun { + color: var(--switch-sun); +} + .slider:before { background-color: var(--switch-slider); } -- cgit v1.2.3-54-g00ecf