Skip to content

Commit 12030b8

Browse files
Mujojo03Mujojo03
committed
fix(theme): prevent white flash during page load
1 parent 4b159bd commit 12030b8

12 files changed

Lines changed: 227 additions & 78 deletions

File tree

‎Gemfile.lock‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ GEM
33
specs:
44
addressable (2.8.7)
55
public_suffix (>= 2.0.2, < 7.0)
6-
base64 (0.2.0)
7-
bigdecimal (3.1.9)
6+
base64 (0.3.0)
7+
bigdecimal (3.3.1)
88
colorator (1.1.0)
99
concurrent-ruby (1.3.5)
10-
csv (3.3.2)
10+
csv (3.3.5)
1111
em-websocket (0.5.3)
1212
eventmachine (>= 0.12.9)
1313
http_parser.rb (~> 0)
1414
eventmachine (1.2.7)
15-
ffi (1.17.1)
15+
ffi (1.17.2)
1616
forwardable-extended (2.6.0)
17-
google-protobuf (4.29.3)
17+
google-protobuf (4.33.0)
1818
bigdecimal
1919
rake (>= 13)
2020
http_parser.rb (0.8.0)
@@ -50,7 +50,7 @@ GEM
5050
jekyll (>= 3.7, < 5.0)
5151
jekyll-watch (2.2.1)
5252
listen (~> 3.0)
53-
json (2.10.1)
53+
json (2.15.1)
5454
kramdown (2.5.1)
5555
rexml (>= 3.3.9)
5656
kramdown-parser-gfm (1.1.0)
@@ -62,16 +62,16 @@ GEM
6262
mercenary (0.4.0)
6363
pathutil (0.16.2)
6464
forwardable-extended (~> 2.6)
65-
public_suffix (6.0.1)
66-
rake (13.2.1)
65+
public_suffix (6.0.2)
66+
rake (13.3.0)
6767
rb-fsevent (0.11.2)
6868
rb-inotify (0.11.1)
6969
ffi (~> 1.0)
70-
rexml (3.4.1)
71-
rouge (4.5.1)
70+
rexml (3.4.4)
71+
rouge (4.6.1)
7272
safe_yaml (1.0.5)
73-
sass-embedded (1.85.0)
74-
google-protobuf (~> 4.29)
73+
sass-embedded (1.93.2)
74+
google-protobuf (~> 4.31)
7575
rake (>= 13)
7676
terminal-table (3.0.2)
7777
unicode-display_width (>= 1.1.1, < 3)

‎_includes/footer.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
<footer class="Footer">
2-
<div class="Footer-border">
3-
==============================================================================================================================================================
4-
</div>
5-
<div class="Footer-inner">
6-
<div class="Footer-source">
7-
<a href="https://github.com/BitDevsNBO/bitdevsnbo.org" target="_blank" rel="noopener nofollow">Source available on Github</a>
1+
<body>
2+
<header>...</header>
3+
<main>...</main>
4+
<footer class="Footer">
5+
<div class="Footer-border">
6+
==============================================================================================================================================================
87
</div>
9-
<div class="Footer-rss">
10-
<a href="/feed.xml">RSS Feed</a>
8+
<div class="Footer-inner">
9+
<div class="Footer-source">
10+
<a href="https://github.com/BitDevsNBO/bitdevsnbo.org" target="_blank" rel="noopener nofollow">Source available on Github</a>
11+
</div>
12+
<div class="Footer-rss">
13+
<a href="/feed.xml">RSS Feed</a>
14+
</div>
1115
</div>
12-
</div>
13-
</footer>
16+
</footer>
17+
</body>

‎_includes/head.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
<head>
22

3+
<script>
4+
// Immediately apply saved theme before styles load
5+
(function() {
6+
try {
7+
const storedTheme = localStorage.getItem('theme');
8+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
9+
const theme = storedTheme || (prefersDark ? 'dark' : 'light');
10+
document.documentElement.setAttribute('data-theme', theme);
11+
} catch (e) {}
12+
})();
13+
</script>
14+
315
<title>
416
{% if page.title == "Home" %}
517
{{ site.data.settings.title }} | {{ site.data.settings.tagline }}

‎_includes/header.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,25 @@
33
<div class="Header-logo">
44
<a href="{{ site.github.url }}/">{{ site.data.settings.title }}</a>
55
</div>
6+
67
<nav class="Header-nav">
78
{% for item in site.data.settings.menu %}
89
{% if item.external %}
9-
<a href="{{ item.url }}" target="_blank" rel="noopener nofollow">
10+
<a href="{{ item.url }}" target="_blank" rel="noopener nofollow">
1011
{{ item.name }}
11-
</a>
12+
</a>
1213
{% else %}
1314
<a href="{{ site.github.url }}{{ item.url }}">{{ item.name }}</a>
1415
{% endif %}
1516
{% endfor %}
17+
18+
<!-- 🌙☀️ Theme Toggle Button -->
19+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
20+
🌙
21+
</button>
1622
</nav>
1723
</div>
24+
1825
<div class="Header-border">
1926
==============================================================================================================================================================
2027
</div>

‎_layouts/default.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@
1313

1414
{% include footer.html %}
1515

16-
<div>
16+
</div>
17+
18+
<!-- ✅ Load theme toggle script -->
19+
<script src="{{ '/assets/js/script.js' | relative_url }}" defer></script>
1720

1821
</body>
1922

20-
</html>
23+
</html>

‎assets/css/_footer.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.Footer {
22
margin-top: 2rem;
3-
color: $font-color;
3+
color: var(--font-color);
44
padding: 2rem;
55
text-align: center;
66

@@ -9,7 +9,7 @@
99
margin-bottom: 1em;
1010
overflow: hidden;
1111
user-select: none;
12-
color: $font-color;
12+
color: var(--font-color);
1313
}
1414

1515
&-inner {
@@ -19,16 +19,16 @@
1919
gap: 1rem;
2020

2121
a {
22-
color: $primary-color; // orange
22+
color: var(--primary-color);
2323
opacity: 1;
2424
text-decoration: none;
2525
font-weight: 500;
26-
transition: opacity 0.2s ease, color 0.2s ease;
26+
transition: opacity 0.1s ease, color 0.1s ease;
2727

2828
&:hover {
2929
opacity: 0.9;
30-
color: lighten($primary-color, 10%);
30+
color: var(--link-hover-color, var(--primary-color));
3131
}
3232
}
3333
}
34-
}
34+
}

‎assets/css/_global.scss‎

Lines changed: 63 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,33 @@
1-
html, body {
2-
font-family: $body-font;
1+
@use './variables' as vars;
2+
3+
$large-screen: 1100px !default;
4+
$mid-screen: 800px !default;
5+
$small-screen: 480px !default;
6+
7+
:root {
8+
/* light theme defaults */
9+
--background-color: #ffffff;
10+
--font-color: #000000;
11+
--primary-color: #F7931A;
12+
--link-hover-color: lighten(#F7931A, 10%);
13+
}
14+
15+
/* dark theme runtime overrides */
16+
body.dark-mode {
17+
--background-color: #000000;
18+
--font-color: #ffffff;
19+
--primary-color: #F7931A;
20+
}
21+
22+
html,
23+
body {
24+
font-family: vars.$body-font;
325
font-size: 16px;
426
line-height: 1.5;
5-
background-color: $background-color;
6-
color: $font-color;
27+
background-color: var(--background-color);
28+
color: var(--font-color);
29+
30+
transition: background-color 0.4s ease, color 0.4s ease;
731

832
@media (max-width: $large-screen) {
933
font-size: 14px;
@@ -16,23 +40,44 @@ html, body {
1640
@media (max-width: $small-screen) {
1741
font-size: 12px;
1842
}
43+
44+
/* ✅ Ensures each page fills the viewport height */
45+
min-height: 100vh;
46+
47+
/* Helps prevent layout shift when footer is short */
48+
display: flex;
49+
flex-direction: column;
1950
}
2051

21-
.Site {
22-
max-width: 880px;
23-
margin: 0 auto;
24-
padding: 2rem;
52+
/* ✅ Make sure the body expands correctly for content and footer */
53+
body {
54+
background-color: var(--background-color);
55+
color: var(--font-color);
56+
flex: 1; /* allow content area to grow */
57+
box-sizing: border-box;
2558
}
2659

2760
a {
28-
color: $primary-color;
61+
color: var(--primary-color);
2962
text-decoration: none;
63+
transition: color 0.3s ease;
3064

3165
&:hover {
32-
color: rgba($primary-color, 0.8);
66+
color: var(--link-hover-color, var(--primary-color));
3367
}
3468
}
3569

70+
/* ✅ Keeps layout centered and responsive */
71+
.Site {
72+
max-width: 880px;
73+
margin: 0 auto;
74+
padding: 2rem;
75+
background-color: var(--background-color);
76+
color: var(--font-color);
77+
flex: 1; /* fills remaining height between header and footer */
78+
transition: background-color 0.4s ease, color 0.4s ease;
79+
}
80+
3681
p {
3782
margin-bottom: 1rem;
3883
}
@@ -68,3 +113,11 @@ h4 {
68113
margin-top: 0.5rem;
69114
margin-bottom: 0.5rem;
70115
}
116+
117+
* {
118+
transition: none !important;
119+
}
120+
121+
body.loaded * {
122+
transition: all 0.1s ease;
123+
}

‎assets/css/_header.scss‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1+
// header.scss
2+
3+
@use 'variables' as vars;
4+
15
.Header {
26
margin-bottom: 0.75rem;
7+
background-color: var(--background-color);
8+
color: var(--font-color);
9+
transition: background-color 0.4s ease, color 0.4s ease;
310

411
&-border {
512
opacity: 0.3;
613
margin-top: 0.4rem;
714
overflow: hidden;
815
user-select: none;
9-
color: $font-color; // makes the divider white-ish
16+
color: var(--font-color);
1017
}
1118

1219
&-inner {
@@ -16,35 +23,64 @@
1623
padding: 1rem 0;
1724
}
1825

19-
&-logo {
20-
font-size: 2.2rem;
21-
color: $font-color; // Make sure logo is visible too
26+
&-logo {
27+
font-size: 2.2rem;
28+
color: #F7931A; // static orange color
29+
transition: color 0.3s ease;
30+
31+
@media (max-width: vars.$small-screen) {
32+
font-size: 1.8rem;
33+
}
34+
35+
a {
36+
color: #F7931A; // ensure link inherits orange color
37+
text-decoration: none;
38+
transition: color 0.3s ease;
2239

23-
@media (max-width: $small-screen) {
24-
font-size: 1.8rem;
40+
&:hover {
41+
color: darken(#F7931A, 10%); // slightly darker orange on hover
42+
}
43+
}
44+
}
45+
46+
.theme-toggle {
47+
background: none;
48+
border: 1px solid var(--primary-color);
49+
color: var(--primary-color);
50+
border-radius: 8px;
51+
padding: 0.4rem 0.8rem;
52+
cursor: pointer;
53+
margin-left: 1.5rem;
54+
font-size: 1.1rem;
55+
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
56+
57+
&:hover {
58+
background: var(--primary-color);
59+
color: var(--background-color); /* stays readable in both modes */
2560
}
2661
}
2762

2863
&-nav {
2964
display: flex;
3065
font-size: 1.3rem;
66+
transition: color 0.3s ease;
3167

32-
@media (max-width: $small-screen) {
68+
@media (max-width: vars.$small-screen) {
3369
font-size: 1.1rem;
3470
}
3571

3672
a {
37-
color: $primary-color; // bright orange
38-
opacity: 1; // fully visible
73+
color: var(--primary-color);
74+
opacity: 1;
3975
margin-left: 1.5rem;
4076
text-decoration: none;
4177
font-weight: 500;
42-
transition: opacity 0.2s ease, color 0.2s ease;
78+
transition: opacity 0.1s ease, color 0.1s ease;
4379

4480
&:hover {
45-
color: lighten($primary-color, 10%);
81+
color: var(--link-hover-color, var(--primary-color));
4682
opacity: 0.9;
4783
}
4884
}
4985
}
50-
}
86+
}

‎assets/css/_home.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.Home {
22
&-about {
33
font-size: 1.2rem;
4+
font-weight: bold;
45
}
56

67
&-posts {

0 commit comments

Comments
 (0)