Skip to content

Commit 6e35446

Browse files
ripixelripixel
committed
feat: enable dark mode support
1 parent 1a401da commit 6e35446

File tree

11 files changed

+352
-69
lines changed

11 files changed

+352
-69
lines changed

‎assets/styles/styles.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -565,6 +565,19 @@ section.intro {
565565
margin: 40px;
566566
}
567567

568+
section.darkmode {
569+
position: fixed;
570+
top: 10px;
571+
right: 10px;
572+
z-index: 10;
573+
}
574+
575+
section.darkmode button {
576+
background: none;
577+
border: none;
578+
cursor: pointer;
579+
}
580+
568581
@media only screen and (max-width: 600px) {
569582
section.intro {
570583
margin: 10px;

‎assets/styles/styles_dark.css

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
.dark code {
2+
background: rgba(0, 0, 0, 0.2);
3+
}
4+
5+
.dark p a {
6+
border-bottom: 1px solid #fff;
7+
}
8+
9+
.dark p a:hover {
10+
color: #ccc;
11+
border-color: #ccc;
12+
}
13+
14+
.dark a.button {
15+
background: rgba(0, 0, 0, 0.2);
16+
border-left: 2px solid #fff;
17+
}
18+
19+
.dark a.rss svg path {
20+
fill: #fff;
21+
}
22+
23+
.dark a.rss:hover svg path {
24+
fill: #ccc;
25+
}
26+
27+
.dark nav {
28+
background: #333;
29+
color: #fff;
30+
}
31+
32+
.dark nav a {
33+
color: #fff;
34+
}
35+
36+
.dark nav a:hover {
37+
color: #ccc;
38+
}
39+
40+
.dark nav.coding {
41+
background: rgb(32, 0, 29);
42+
}
43+
44+
.dark nav.coding a.coding {
45+
border-left: 2px solid #fff;
46+
}
47+
48+
.dark nav.thoughts {
49+
background: rgb(0, 31, 23);
50+
}
51+
52+
.dark nav.thoughts a.thoughts {
53+
border-left: 2px solid #fff;
54+
}
55+
56+
.dark nav.profile {
57+
background: rgb(6, 15, 41);
58+
}
59+
60+
.dark nav.profile a.profile {
61+
border-left: 2px solid #fff;
62+
}
63+
64+
.dark main {
65+
background: #333;
66+
color: #fff;
67+
}
68+
69+
.dark main a {
70+
color: #fff;
71+
}
72+
73+
.dark main.hello {
74+
background: rgb(108, 61, 0);
75+
}
76+
77+
.dark .mentions .item {
78+
background: rgba(0, 0, 0, 0.2);
79+
}
80+
.dark .mention-links img {
81+
background-color: #999;
82+
border-left: 2px solid #fff;
83+
}
84+
85+
.dark .mention-links .comment {
86+
background: #025a44;
87+
}
88+
89+
.dark .details .item {
90+
background: rgba(0, 0, 0, 0.2);
91+
}
92+
93+
.dark main.changelog {
94+
background: #000;
95+
color: #fff;
96+
}
97+
98+
.dark main.changelog a {
99+
color: #333;
100+
border-bottom: 1px solid #333;
101+
}
102+
103+
.dark main.changelog a:hover {
104+
color: #aaa;
105+
border-bottom: 1px solid #aaa;
106+
}
107+
108+
.dark main.coding {
109+
background: rgb(41, 0, 37);
110+
}
111+
112+
.dark main.area.coding {
113+
color: #fff;
114+
background: rgb(41, 0, 37);
115+
}
116+
117+
.dark main.thoughts {
118+
background: rgb(0, 35, 26);
119+
}
120+
121+
.dark main.area.thoughts {
122+
color: #fff;
123+
background: rgb(0, 55, 41);
124+
}
125+
126+
.dark main.thoughts.details {
127+
background: rgb(0, 46, 34);
128+
}
129+
130+
.dark main.thoughts.mentions {
131+
background: rgb(0, 60, 45);
132+
}
133+
134+
.dark main.profile {
135+
background: rgb(8, 20, 55);
136+
}
137+
138+
.dark main.profile.details {
139+
background: rgb(5, 12, 33);
140+
}
141+
142+
.dark main.area.profile {
143+
color: #fff;
144+
background: rgb(8, 20, 55);
145+
}
146+
147+
.dark footer {
148+
background: #111;
149+
color: #777;
150+
}
151+
152+
.dark footer a path {
153+
fill: #777;
154+
}
155+
156+
.dark footer a:hover path {
157+
fill: #ccc;
158+
}
159+
160+
.dark footer .copy a {
161+
color: #777;
162+
border-bottom: 1px solid #777;
163+
}
164+
165+
.dark footer .copy a:hover {
166+
color: #ccc;
167+
border-bottom: 1px solid #ccc;
168+
}
169+
170+
.dark section.intro h1 {
171+
color: rgb(255, 145, 0);
172+
}
173+
174+
.dark section.intro p {
175+
color: #fff;
176+
}
177+
178+
.dark section.welcome {
179+
color: #fff;
180+
border-right: 5px solid #fff;
181+
}
182+
183+
.dark section.welcome.error {
184+
color: #fff;
185+
border-right: 5px solid #fff;
186+
}
187+
188+
.dark section.area {
189+
border-left: 5px solid #fff;
190+
}
191+
192+
.dark .article .header-details {
193+
border-left: 5px solid #fff;
194+
}
195+
196+
.dark .tag {
197+
background: rgba(0, 0, 0, 0.2);
198+
}
199+
200+
@media only screen and (max-width: 400px) {
201+
.dark section.welcome {
202+
border-right: none;
203+
}
204+
}
205+
206+
@media only screen and (max-width: 400px) {
207+
.dark section.area {
208+
border-left: none;
209+
}
210+
}
211+
212+
.lightSun {
213+
display: none;
214+
}
215+
216+
.dark .lightSun {
217+
display: block;
218+
fill: #fff;
219+
}
220+
221+
.dark .darkSun {
222+
display: none;
223+
}

‎pages/404.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55

66
<body>
77
{nav.html}
8+
9+
{darkmode.html}
10+
811
<main class="error">
912
<section class="intro">
1013
<h1 class="name">404... <span class="em2">shit</span></h1>
@@ -24,4 +27,5 @@ <h1 class="name">404... <span class="em2">shit</span></h1>
2427

2528
{footer.html}
2629
</body>
30+
2731
</html>

‎pages/changelog.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<body>
77
{nav.html}
88

9+
{darkmode.html}
10+
911
<main class="changelog article">
1012
<p>What changes have happened to this site?</p>
1113
<section class="area">
@@ -15,4 +17,5 @@
1517

1618
{footer.html}
1719
</body>
20+
1821
</html>

‎pages/coding.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<body>
77
{nav.html}
88

9+
{darkmode.html}
10+
911
<main class="coding">
1012
<p>Shall we take a look at some projects I&apos;ve done?</p>
1113

‎pages/index.html

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ <h1 class="name">ripixel</h1>
1010
<p>Software Engineer & Web Application Creator</p>
1111
</section>
1212

13+
{darkmode.html}
14+
1315
<div class="sections">
1416
<section class="welcome">
1517
<p>
@@ -20,7 +22,7 @@ <h1 class="name">ripixel</h1>
2022
</p>
2123
<p>
2224
I also really, <span class="em2">really</span> like big, bold,
23-
oh-my-gosh-that's-so-bright colours.
25+
oh-my-gosh-that's-so-bright colours (unless you have dark-mode on, of course).
2426
</p>
2527
</section>
2628
</div>
@@ -34,8 +36,8 @@ <h2>Coding &raquo;</h2>
3436
professionally and personally. Let's take a walk down memory lane
3537
and have a look at them.
3638
</p>
37-
</section></a
38-
>
39+
</section>
40+
</a>
3941
</main>
4042
<main class="area thoughts">
4143
<a href="thoughts">
@@ -49,8 +51,8 @@ <h2>Thoughts &raquo;</h2>
4951
possibly even something a little more professional... although who
5052
knows on that last one. This is my personal site after all.
5153
</p>
52-
</section></a
53-
>
54+
</section>
55+
</a>
5456
</main>
5557
<main class="area profile">
5658
<a href="profile">
@@ -65,10 +67,11 @@ <h2>Profile &raquo;</h2>
6567
case that wasn&apos;t enough for you, I&apos;ve put together a lot
6668
more information for you to gobble up.
6769
</p>
68-
</section></a
69-
>
70+
</section>
71+
</a>
7072
</main>
7173

7274
{footer.html}
7375
</body>
76+
7477
</html>

‎pages/profile.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<body>
77
{nav.html}
88

9+
{darkmode.html}
10+
911
<main class="profile">
1012
<section class="area">
1113
<h3>So who am I?</h3>

‎pages/thoughts.html

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,16 @@
66
<body>
77
{nav.html}
88

9+
{darkmode.html}
10+
911
<main class="thoughts">
1012
<p>
1113
A peak inside my brain you ask? Reader, beware...
12-
<a class="rss" href="/rss.xml"
13-
><svg
14-
xmlns="http://www.w3.org/2000/svg"
15-
width="24"
16-
height="24"
17-
viewBox="0 0 24 24"
18-
>
14+
<a class="rss" href="/rss.xml"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
15+
viewBox="0 0 24 24">
1916
<path
20-
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-12.832 20c-1.197 0-2.168-.969-2.168-2.165s.971-2.165 2.168-2.165 2.167.969 2.167 2.165-.97 2.165-2.167 2.165zm5.18 0c-.041-4.029-3.314-7.298-7.348-7.339v-3.207c5.814.041 10.518 4.739 10.561 10.546h-3.213zm5.441 0c-.021-7.063-5.736-12.761-12.789-12.792v-3.208c8.83.031 15.98 7.179 16 16h-3.211z"
21-
/></svg
22-
></a>
17+
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-12.832 20c-1.197 0-2.168-.969-2.168-2.165s.971-2.165 2.168-2.165 2.167.969 2.167 2.165-.97 2.165-2.167 2.165zm5.18 0c-.041-4.029-3.314-7.298-7.348-7.339v-3.207c5.814.041 10.518 4.739 10.561 10.546h-3.213zm5.441 0c-.021-7.063-5.736-12.761-12.789-12.792v-3.208c8.83.031 15.98 7.179 16 16h-3.211z" />
18+
</svg></a>
2319
</p>
2420
<!--START_REP-->
2521
<section class="area">
@@ -35,4 +31,5 @@ <h3>{title}</h3>
3531

3632
{footer.html}
3733
</body>
34+
3835
</html>

0 commit comments

Comments
 (0)