Fix the dark theme from flashing at you every page load
This commit is contained in:
parent
df4979192e
commit
567b4a64fc
5 changed files with 29 additions and 8 deletions
|
@ -42,6 +42,7 @@
|
||||||
color:#7ccbd5;
|
color:#7ccbd5;
|
||||||
font-size:17px;
|
font-size:17px;
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sb_img {
|
.sb_img {
|
||||||
|
@ -75,6 +76,11 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--elm-inv-bg-color);
|
||||||
|
color: var(--text-inv-color);
|
||||||
|
}
|
||||||
|
|
||||||
.personal { color:#fc3f5b; }
|
.personal { color:#fc3f5b; }
|
||||||
.nixfox { color:#2abafc; }
|
.nixfox { color:#2abafc; }
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,9 @@
|
||||||
[data-theme="light"] {
|
[data-theme="light"] {
|
||||||
--bg-color: #DDE1E9;
|
--bg-color: #DDE1E9;
|
||||||
--elm-bg-color: #EFF1F5;
|
--elm-bg-color: #EFF1F5;
|
||||||
|
--elm-inv-bg-color: #1F2223;
|
||||||
--text-color: #141414;
|
--text-color: #141414;
|
||||||
|
--text-inv-color: #DBD8D4;
|
||||||
--subtext-color: #6c7387;
|
--subtext-color: #6c7387;
|
||||||
--link-color: #b7162e;
|
--link-color: #b7162e;
|
||||||
}
|
}
|
||||||
|
@ -16,18 +18,24 @@
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
--bg-color: #181A1B;
|
--bg-color: #181A1B;
|
||||||
--elm-bg-color: #1F2223;
|
--elm-bg-color: #1F2223;
|
||||||
|
--elm-inv-bg-color: #EFF1F5;
|
||||||
--text-color: #DBD8D4;
|
--text-color: #DBD8D4;
|
||||||
|
--text-inv-color: #141414;
|
||||||
--subtext-color: #8991a5;
|
--subtext-color: #8991a5;
|
||||||
--link-color: #DB4E63;
|
--link-color: #DB4E63;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
.preload {
|
||||||
background-color: var(--bg-color);
|
transition: none !important;
|
||||||
|
animation-duration: 0.001s !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
|
||||||
padding-bottom: 5em;
|
padding-bottom: 5em;
|
||||||
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
|
@ -44,7 +52,6 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
font-weight: bold;
|
|
||||||
outline: 3px solid;
|
outline: 3px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -60,7 +67,7 @@ h1 {
|
||||||
max-width: 50em;
|
max-width: 50em;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
top: 3em;
|
top: 2em;
|
||||||
left: 6.5em;
|
left: 6.5em;
|
||||||
|
|
||||||
padding: 3em;
|
padding: 3em;
|
||||||
|
|
3
static/nofade.js
Normal file
3
static/nofade.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
document.body.classList.remove("preload");
|
||||||
|
});
|
|
@ -1,18 +1,23 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" data-theme="light" data-sidebar="shown">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<html lang="en">
|
||||||
|
<html data-theme="light">
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>nixfox den</title>
|
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono">
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
<link rel="stylesheet" href="/style.css">
|
<link rel="stylesheet" href="/style.css">
|
||||||
<link rel="stylesheet" href="/sidebar.css">
|
<link rel="stylesheet" href="/sidebar.css">
|
||||||
|
|
||||||
|
<script type="text/javascript" src="nofade.js"></script>
|
||||||
|
|
||||||
|
<title>nixfox den</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body class="preload">
|
||||||
{% include "sidebar.html" %}
|
{% include "sidebar.html" %}
|
||||||
|
|
||||||
<button type="button" class="sidebar-toggle" id="sidebar-toggle" aria-pressed="false"></button>
|
<button type="button" class="sidebar-toggle" id="sidebar-toggle" aria-pressed="false"></button>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue