Skip to content

Commit

Permalink
feat: enable dark mode support
Browse files Browse the repository at this point in the history
  • Loading branch information
ripixel committed Dec 27, 2022
1 parent 1a401da commit 6e35446
Show file tree
Hide file tree
Showing 11 changed files with 352 additions and 69 deletions.
13 changes: 13 additions & 0 deletions assets/styles/styles.css
Expand Up @@ -565,6 +565,19 @@ section.intro {
margin: 40px;
}

section.darkmode {
position: fixed;
top: 10px;
right: 10px;
z-index: 10;
}

section.darkmode button {
background: none;
border: none;
cursor: pointer;
}

@media only screen and (max-width: 600px) {
section.intro {
margin: 10px;
Expand Down
223 changes: 223 additions & 0 deletions assets/styles/styles_dark.css
@@ -0,0 +1,223 @@
.dark code {
background: rgba(0, 0, 0, 0.2);
}

.dark p a {
border-bottom: 1px solid #fff;
}

.dark p a:hover {
color: #ccc;
border-color: #ccc;
}

.dark a.button {
background: rgba(0, 0, 0, 0.2);
border-left: 2px solid #fff;
}

.dark a.rss svg path {
fill: #fff;
}

.dark a.rss:hover svg path {
fill: #ccc;
}

.dark nav {
background: #333;
color: #fff;
}

.dark nav a {
color: #fff;
}

.dark nav a:hover {
color: #ccc;
}

.dark nav.coding {
background: rgb(32, 0, 29);
}

.dark nav.coding a.coding {
border-left: 2px solid #fff;
}

.dark nav.thoughts {
background: rgb(0, 31, 23);
}

.dark nav.thoughts a.thoughts {
border-left: 2px solid #fff;
}

.dark nav.profile {
background: rgb(6, 15, 41);
}

.dark nav.profile a.profile {
border-left: 2px solid #fff;
}

.dark main {
background: #333;
color: #fff;
}

.dark main a {
color: #fff;
}

.dark main.hello {
background: rgb(108, 61, 0);
}

.dark .mentions .item {
background: rgba(0, 0, 0, 0.2);
}
.dark .mention-links img {
background-color: #999;
border-left: 2px solid #fff;
}

.dark .mention-links .comment {
background: #025a44;
}

.dark .details .item {
background: rgba(0, 0, 0, 0.2);
}

.dark main.changelog {
background: #000;
color: #fff;
}

.dark main.changelog a {
color: #333;
border-bottom: 1px solid #333;
}

.dark main.changelog a:hover {
color: #aaa;
border-bottom: 1px solid #aaa;
}

.dark main.coding {
background: rgb(41, 0, 37);
}

.dark main.area.coding {
color: #fff;
background: rgb(41, 0, 37);
}

.dark main.thoughts {
background: rgb(0, 35, 26);
}

.dark main.area.thoughts {
color: #fff;
background: rgb(0, 55, 41);
}

.dark main.thoughts.details {
background: rgb(0, 46, 34);
}

.dark main.thoughts.mentions {
background: rgb(0, 60, 45);
}

.dark main.profile {
background: rgb(8, 20, 55);
}

.dark main.profile.details {
background: rgb(5, 12, 33);
}

.dark main.area.profile {
color: #fff;
background: rgb(8, 20, 55);
}

.dark footer {
background: #111;
color: #777;
}

.dark footer a path {
fill: #777;
}

.dark footer a:hover path {
fill: #ccc;
}

.dark footer .copy a {
color: #777;
border-bottom: 1px solid #777;
}

.dark footer .copy a:hover {
color: #ccc;
border-bottom: 1px solid #ccc;
}

.dark section.intro h1 {
color: rgb(255, 145, 0);
}

.dark section.intro p {
color: #fff;
}

.dark section.welcome {
color: #fff;
border-right: 5px solid #fff;
}

.dark section.welcome.error {
color: #fff;
border-right: 5px solid #fff;
}

.dark section.area {
border-left: 5px solid #fff;
}

.dark .article .header-details {
border-left: 5px solid #fff;
}

.dark .tag {
background: rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 400px) {
.dark section.welcome {
border-right: none;
}
}

@media only screen and (max-width: 400px) {
.dark section.area {
border-left: none;
}
}

.lightSun {
display: none;
}

.dark .lightSun {
display: block;
fill: #fff;
}

.dark .darkSun {
display: none;
}
4 changes: 4 additions & 0 deletions pages/404.html
Expand Up @@ -5,6 +5,9 @@

<body>
{nav.html}

{darkmode.html}

<main class="error">
<section class="intro">
<h1 class="name">404... <span class="em2">shit</span></h1>
Expand All @@ -24,4 +27,5 @@ <h1 class="name">404... <span class="em2">shit</span></h1>

{footer.html}
</body>

</html>
3 changes: 3 additions & 0 deletions pages/changelog.html
Expand Up @@ -6,6 +6,8 @@
<body>
{nav.html}

{darkmode.html}

<main class="changelog article">
<p>What changes have happened to this site?</p>
<section class="area">
Expand All @@ -15,4 +17,5 @@

{footer.html}
</body>

</html>
2 changes: 2 additions & 0 deletions pages/coding.html
Expand Up @@ -6,6 +6,8 @@
<body>
{nav.html}

{darkmode.html}

<main class="coding">
<p>Shall we take a look at some projects I&apos;ve done?</p>

Expand Down
17 changes: 10 additions & 7 deletions pages/index.html
Expand Up @@ -10,6 +10,8 @@ <h1 class="name">ripixel</h1>
<p>Software Engineer & Web Application Creator</p>
</section>

{darkmode.html}

<div class="sections">
<section class="welcome">
<p>
Expand All @@ -20,7 +22,7 @@ <h1 class="name">ripixel</h1>
</p>
<p>
I also really, <span class="em2">really</span> like big, bold,
oh-my-gosh-that's-so-bright colours.
oh-my-gosh-that's-so-bright colours (unless you have dark-mode on, of course).
</p>
</section>
</div>
Expand All @@ -34,8 +36,8 @@ <h2>Coding &raquo;</h2>
professionally and personally. Let's take a walk down memory lane
and have a look at them.
</p>
</section></a
>
</section>
</a>
</main>
<main class="area thoughts">
<a href="thoughts">
Expand All @@ -49,8 +51,8 @@ <h2>Thoughts &raquo;</h2>
possibly even something a little more professional... although who
knows on that last one. This is my personal site after all.
</p>
</section></a
>
</section>
</a>
</main>
<main class="area profile">
<a href="profile">
Expand All @@ -65,10 +67,11 @@ <h2>Profile &raquo;</h2>
case that wasn&apos;t enough for you, I&apos;ve put together a lot
more information for you to gobble up.
</p>
</section></a
>
</section>
</a>
</main>

{footer.html}
</body>

</html>
2 changes: 2 additions & 0 deletions pages/profile.html
Expand Up @@ -6,6 +6,8 @@
<body>
{nav.html}

{darkmode.html}

<main class="profile">
<section class="area">
<h3>So who am I?</h3>
Expand Down
17 changes: 7 additions & 10 deletions pages/thoughts.html
Expand Up @@ -6,20 +6,16 @@
<body>
{nav.html}

{darkmode.html}

<main class="thoughts">
<p>
A peak inside my brain you ask? Reader, beware...
<a class="rss" href="/rss.xml"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<a class="rss" href="/rss.xml"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24">
<path
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"
/></svg
></a>
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" />
</svg></a>
</p>
<!--START_REP-->
<section class="area">
Expand All @@ -35,4 +31,5 @@ <h3>{title}</h3>

{footer.html}
</body>

</html>

0 comments on commit 6e35446

Please sign in to comment.