diff options
| author | David Luevano Alvarado <david@luevano.xyz> | 2021-02-27 02:49:34 -0700 |
|---|---|---|
| committer | David Luevano Alvarado <david@luevano.xyz> | 2021-02-27 02:49:34 -0700 |
| commit | 70b9f2e90bbd3776a83dcc85e6ba89d95e341f64 (patch) | |
| tree | 86f4ad3c07fa49c400b30bd2ce36a43c849defd8 | |
| parent | 54180a1a177b9a11d8348c14a3446529b08daea7 (diff) | |
Actually fix light-dark button, feels nice
| -rw-r--r-- | luevano/index.html | 95 | ||||
| -rw-r--r-- | static/css/dark.css | 14 | ||||
| -rw-r--r-- | static/css/general_style.css | 15 | ||||
| -rw-r--r-- | 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 @@ </head> <body> + <div id="theme-switcher-container"> + <i class="fas fa-sun"></i> + <label class="switch theme"> + <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> + <span class="slider round"></span> + </label> + <i class="fas fa-moon"></i> + </div> <header> <ul class="menubar"> @@ -49,49 +57,46 @@ </li> </ul> </nav> - - <label class="switch"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - - <div class="welcome"> - <h1> - Welcome! - </h1> - - <p> - My name is David Luévano and this is my little piece of internet. - </p> - - <p> - I plan on doing all sort of stuff here, including a <a href="https://blog.luevano.xyz/">blog</a> and stuff like an interactive <a href="https://gb.luevano.xyz/">gameboy</a> where everyone who participates plays together (think "twitch plays pokemon" and more recently "twitter plays pokemon"). - </p> - - <p> - But for now, this place is under construction (as you may notice from most links being broken).<br/> - - <img src="https://static.luevano.xyz/images/gifs/worker1.gif" alt="Under construction"> - </p> - </div> - - <footer class="footer"> - <i class="fas fa-envelope" alt="Email"></i> - Email - <a href="mailto:david@luevano.xyz"> - david@luevano.xyz - </a> - <br> - - <i class="fas fa-rss" alt="RSS"></i> - RSS - <a href="https://blog.luevano.xyz/rss.xml"> - https://blog.luevano.xyz/rss.xml - </a> - <br> - - <i class="fas fa-donate" alt="Donate"></i> - <a href="https://luevano.xyz/donate">Donate</a> - <a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i></a> - </footer> + </header> + + <div class="welcome"> + <h1> + Welcome! + </h1> + + <p> + My name is David Luévano and this is my little piece of internet. + </p> + + <p> + I plan on doing all sort of stuff here, including a <a href="https://blog.luevano.xyz/">blog</a> and stuff like an interactive <a href="https://gb.luevano.xyz/">gameboy</a> where everyone who participates plays together (think "twitch plays pokemon" and more recently "twitter plays pokemon"). + </p> + + <p> + But for now, this place is under construction (as you may notice from most links being broken).<br/> + + <img src="https://static.luevano.xyz/images/gifs/worker1.gif" alt="Under construction"> + </p> + </div> + + <footer class="footer"> + <i class="fas fa-envelope" alt="Email"></i> + Email + <a href="mailto:david@luevano.xyz"> + david@luevano.xyz + </a> + <br> + + <i class="fas fa-rss" alt="RSS"></i> + RSS + <a href="https://blog.luevano.xyz/rss.xml"> + https://blog.luevano.xyz/rss.xml + </a> + <br> + + <i class="fas fa-donate" alt="Donate"></i> + <a href="https://luevano.xyz/donate">Donate</a> + <a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i></a> + </footer> </body> +</html> 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); } |