From 567b4a64fc115277fb1305b13314f361ca4e3f4d Mon Sep 17 00:00:00 2001 From: Bun Date: Thu, 3 Jul 2025 00:19:57 -0400 Subject: [PATCH] Fix the dark theme from flashing at you every page load --- sass/sidebar.scss | 6 ++++++ sass/style.scss | 15 +++++++++++---- static/nofade.js | 3 +++ templates/base.html | 11 ++++++++--- templates/sidebar.html | 2 +- 5 files changed, 29 insertions(+), 8 deletions(-) create mode 100644 static/nofade.js diff --git a/sass/sidebar.scss b/sass/sidebar.scss index c4bd4fe..e89bde4 100644 --- a/sass/sidebar.scss +++ b/sass/sidebar.scss @@ -42,6 +42,7 @@ color:#7ccbd5; font-size:17px; text-decoration:none; + font-weight: bold; } .sb_img { @@ -75,6 +76,11 @@ display: inline-block; } +.theme-toggle:hover { + background-color: var(--elm-inv-bg-color); + color: var(--text-inv-color); +} + .personal { color:#fc3f5b; } .nixfox { color:#2abafc; } diff --git a/sass/style.scss b/sass/style.scss index 7ef785e..aba4af7 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -8,7 +8,9 @@ [data-theme="light"] { --bg-color: #DDE1E9; --elm-bg-color: #EFF1F5; + --elm-inv-bg-color: #1F2223; --text-color: #141414; + --text-inv-color: #DBD8D4; --subtext-color: #6c7387; --link-color: #b7162e; } @@ -16,18 +18,24 @@ [data-theme="dark"] { --bg-color: #181A1B; --elm-bg-color: #1F2223; + --elm-inv-bg-color: #EFF1F5; --text-color: #DBD8D4; + --text-inv-color: #141414; --subtext-color: #8991a5; --link-color: #DB4E63; } -html { - background-color: var(--bg-color); +.preload { + transition: none !important; + animation-duration: 0.001s !important; } body { color: var(--text-color); + background-color: var(--bg-color); + padding-bottom: 5em; + min-height: 100%; } .subtitle { @@ -44,7 +52,6 @@ a { } a:hover { - font-weight: bold; outline: 3px solid; } @@ -60,7 +67,7 @@ h1 { max-width: 50em; margin: auto; - top: 3em; + top: 2em; left: 6.5em; padding: 3em; diff --git a/static/nofade.js b/static/nofade.js new file mode 100644 index 0000000..e4346a5 --- /dev/null +++ b/static/nofade.js @@ -0,0 +1,3 @@ +window.addEventListener("load", () => { + document.body.classList.remove("preload"); +}); diff --git a/templates/base.html b/templates/base.html index eb85afd..34c7eb2 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,18 +1,23 @@ - + + + - nixfox den + + + + nixfox den - + {% include "sidebar.html" %} diff --git a/templates/sidebar.html b/templates/sidebar.html index 519688a..c985861 100644 --- a/templates/sidebar.html +++ b/templates/sidebar.html @@ -2,7 +2,7 @@ teto creature - +
personal
📰 blog