aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoradam <56338480+adastx@users.noreply.github.com>2022-08-28 10:16:39 +0200
committeradam <56338480+adastx@users.noreply.github.com>2022-08-28 10:20:56 +0200
commitc7ba27acc50b06f0f7c2cced9b609a15cc9552d9 (patch)
treef4f7625186f5841ddec667989660a51c0897ce06
parent77cfc954e906edbf9a72aae5fa5fa091e58b014a (diff)
Added option to toggle dark mode
-rw-r--r--dst/.files4
-rw-r--r--dst/ase.html38
-rw-r--r--dst/game.html38
-rw-r--r--dst/index.html38
-rw-r--r--dst/scripts/darktheme.js27
-rw-r--r--dst/spo.html38
-rw-r--r--dst/styles/style.css64
-rw-r--r--src/_footer.html35
-rw-r--r--src/_header.html3
-rw-r--r--src/scripts/darktheme.js27
-rw-r--r--src/styles/style.css64
11 files changed, 254 insertions, 122 deletions
diff --git a/dst/.files b/dst/.files
index 1917e09..a425f16 100644
--- a/dst/.files
+++ b/dst/.files
@@ -1,5 +1 @@
./styles/style.css
-./game.md
-./index.md
-./ase.md
-./spo.md
diff --git a/dst/ase.html b/dst/ase.html
index d722783..344a253 100644
--- a/dst/ase.html
+++ b/dst/ase.html
@@ -8,11 +8,14 @@
<title>Q1. Software Process Model - Waterfall &mdash; adast.xyz</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&nbsp;&bull;&nbsp;&nbsp;
+ <a id="darkmodetoggle" class="fa fa-moon-o" onclick="switchTheme()" aria-hidden="true"></a>
</header>
<h2>⚠️ Test Site ⚠️</h2>
<h1 id="q1.-software-process-model---waterfall">Q1. Software Process Model - Waterfall</h1>
@@ -923,20 +926,23 @@ Makes the development and release process faster and more robust.</p>
<p>Automated access to well defined environments.
Tools like Docker for containerization or Virtual Machines.</p>
- <footer>
- <a href="/" class="homepage-link">adast.xyz</a>
- &nbsp;&mdash;&nbsp;
- <a href="https://git.adast.xyz/explore/repos">Gitea</a>
- &nbsp;&bull;&nbsp;
- <a href="https://github.com/adastx">Github</a>
- &nbsp;&bull;&nbsp;
- <a href="https://odysee.com/@adamski:f">Odysee</a>
- &nbsp;&bull;&nbsp;
- <a href="https://youtube.com/c/adamski1">Youtube</a>
- &nbsp;&bull;&nbsp;
- <a href="https://www.twitch.tv/adastx">Twitch</a>
- &nbsp;&bull;&nbsp;
- <a href="https://steamcommunity.com/id/adastx">Steam</a>
- </footer>
- </body>
+<footer>
+ <a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&mdash;&nbsp;
+ <a href="https://git.adast.xyz/explore/repos">Gitea</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://github.com/adastx">Github</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://odysee.com/@adamski:f">Odysee</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://youtube.com/c/adamski1">Youtube</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://www.twitch.tv/adastx">Twitch</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://steamcommunity.com/id/adastx">Steam</a>
+</footer>
+
+<script src="scripts/darktheme.js"></script>
+</body>
+
</html>
diff --git a/dst/game.html b/dst/game.html
index 349dbd7..f814e39 100644
--- a/dst/game.html
+++ b/dst/game.html
@@ -8,11 +8,14 @@
<title>Project Aftershock &mdash; adast.xyz</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&nbsp;&bull;&nbsp;&nbsp;
+ <a id="darkmodetoggle" class="fa fa-moon-o" onclick="switchTheme()" aria-hidden="true"></a>
</header>
<h2>⚠️ Test Site ⚠️</h2>
<h1 id="project-aftershock">Project Aftershock</h1>
@@ -40,20 +43,23 @@
<p>&#10148;&#8194;<a href="https://www.youtube.com/c/adamski1">Gameplay clips</a><br/>
&#10148;&#8194;<a href="https://trello.com/b/ycQyrouQ">Follow my progress</a></p>
- <footer>
- <a href="/" class="homepage-link">adast.xyz</a>
- &nbsp;&mdash;&nbsp;
- <a href="https://git.adast.xyz/explore/repos">Gitea</a>
- &nbsp;&bull;&nbsp;
- <a href="https://github.com/adastx">Github</a>
- &nbsp;&bull;&nbsp;
- <a href="https://odysee.com/@adamski:f">Odysee</a>
- &nbsp;&bull;&nbsp;
- <a href="https://youtube.com/c/adamski1">Youtube</a>
- &nbsp;&bull;&nbsp;
- <a href="https://www.twitch.tv/adastx">Twitch</a>
- &nbsp;&bull;&nbsp;
- <a href="https://steamcommunity.com/id/adastx">Steam</a>
- </footer>
- </body>
+<footer>
+ <a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&mdash;&nbsp;
+ <a href="https://git.adast.xyz/explore/repos">Gitea</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://github.com/adastx">Github</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://odysee.com/@adamski:f">Odysee</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://youtube.com/c/adamski1">Youtube</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://www.twitch.tv/adastx">Twitch</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://steamcommunity.com/id/adastx">Steam</a>
+</footer>
+
+<script src="scripts/darktheme.js"></script>
+</body>
+
</html>
diff --git a/dst/index.html b/dst/index.html
index e1f5271..0b82a1c 100644
--- a/dst/index.html
+++ b/dst/index.html
@@ -8,11 +8,14 @@
<title>adast.xyz</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&nbsp;&bull;&nbsp;&nbsp;
+ <a id="darkmodetoggle" class="fa fa-moon-o" onclick="switchTheme()" aria-hidden="true"></a>
</header>
<h2>⚠️ Test Site ⚠️</h2>
<p>Hello there!</p>
@@ -24,20 +27,23 @@
<h2 id="posts">Posts</h2>
<p>&#10148;&#8194;<a href="game.html">Project Aftershock</a></p>
- <footer>
- <a href="/" class="homepage-link">adast.xyz</a>
- &nbsp;&mdash;&nbsp;
- <a href="https://git.adast.xyz/explore/repos">Gitea</a>
- &nbsp;&bull;&nbsp;
- <a href="https://github.com/adastx">Github</a>
- &nbsp;&bull;&nbsp;
- <a href="https://odysee.com/@adamski:f">Odysee</a>
- &nbsp;&bull;&nbsp;
- <a href="https://youtube.com/c/adamski1">Youtube</a>
- &nbsp;&bull;&nbsp;
- <a href="https://www.twitch.tv/adastx">Twitch</a>
- &nbsp;&bull;&nbsp;
- <a href="https://steamcommunity.com/id/adastx">Steam</a>
- </footer>
- </body>
+<footer>
+ <a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&mdash;&nbsp;
+ <a href="https://git.adast.xyz/explore/repos">Gitea</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://github.com/adastx">Github</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://odysee.com/@adamski:f">Odysee</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://youtube.com/c/adamski1">Youtube</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://www.twitch.tv/adastx">Twitch</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://steamcommunity.com/id/adastx">Steam</a>
+</footer>
+
+<script src="scripts/darktheme.js"></script>
+</body>
+
</html>
diff --git a/dst/scripts/darktheme.js b/dst/scripts/darktheme.js
new file mode 100644
index 0000000..a06aca2
--- /dev/null
+++ b/dst/scripts/darktheme.js
@@ -0,0 +1,27 @@
+// Get the theme toggle input
+const currentTheme = localStorage.getItem("theme"); // If the current local storage item can be found
+
+if (window.matchMedia
+ && window.matchMedia("(prefers-color-scheme: dark)").matches
+ && !localStorage.getItem("theme")) {
+ localStorage.setItem("theme", "dark");
+}
+
+// Function that will switch the theme based on the if the theme toggle is checked or not
+function switchTheme() {
+ if (document.body.classList.contains('dark-mode')) {
+ document.body.classList.remove("dark-mode");
+ localStorage.setItem("theme", "light");
+ } else {
+ document.body.classList.add("dark-mode");
+ localStorage.setItem("theme", "dark");
+ }
+}
+// Get the current theme from local storage
+if (currentTheme === "dark") {
+ document.body.classList.add("dark-mode");
+ localStorage.setItem("theme", "dark");
+} else {
+ document.body.classList.remove("dark-mode");
+ localStorage.setItem("theme", "light");
+}
diff --git a/dst/spo.html b/dst/spo.html
index 4c98507..f875571 100644
--- a/dst/spo.html
+++ b/dst/spo.html
@@ -8,11 +8,14 @@
<title>Exam &mdash; adast.xyz</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&nbsp;&bull;&nbsp;&nbsp;
+ <a id="darkmodetoggle" class="fa fa-moon-o" onclick="switchTheme()" aria-hidden="true"></a>
</header>
<h2>⚠️ Test Site ⚠️</h2>
<h1 id="exam">Exam</h1>
@@ -673,20 +676,23 @@ Synthesized and inherited attributes.</p>
<h2 id="contextual-analysis">Contextual analysis</h2>
<p>Identification and type checking are combined into a depth-first traversal of the AST.</p>
- <footer>
- <a href="/" class="homepage-link">adast.xyz</a>
- &nbsp;&mdash;&nbsp;
- <a href="https://git.adast.xyz/explore/repos">Gitea</a>
- &nbsp;&bull;&nbsp;
- <a href="https://github.com/adastx">Github</a>
- &nbsp;&bull;&nbsp;
- <a href="https://odysee.com/@adamski:f">Odysee</a>
- &nbsp;&bull;&nbsp;
- <a href="https://youtube.com/c/adamski1">Youtube</a>
- &nbsp;&bull;&nbsp;
- <a href="https://www.twitch.tv/adastx">Twitch</a>
- &nbsp;&bull;&nbsp;
- <a href="https://steamcommunity.com/id/adastx">Steam</a>
- </footer>
- </body>
+<footer>
+ <a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&mdash;&nbsp;
+ <a href="https://git.adast.xyz/explore/repos">Gitea</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://github.com/adastx">Github</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://odysee.com/@adamski:f">Odysee</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://youtube.com/c/adamski1">Youtube</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://www.twitch.tv/adastx">Twitch</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://steamcommunity.com/id/adastx">Steam</a>
+</footer>
+
+<script src="scripts/darktheme.js"></script>
+</body>
+
</html>
diff --git a/dst/styles/style.css b/dst/styles/style.css
index c5f9a89..0cee77a 100644
--- a/dst/styles/style.css
+++ b/dst/styles/style.css
@@ -1,13 +1,23 @@
:root {
- --bg: #181a1b;
- --bg-light: #222;
- --fg: #ddd;
- --gray: #888;
- --gray-light: #555;
- --yellow: #fda;
- --yellow-dark: #ca8;
- --yellow-warm: #e6c79a;
- --wine: #c65a5a
+ --bg: #f3f3f3;
+ --fg: #181a1b;
+ --link: #006697;
+ --code: #e8e8e8;
+ --footer: #828997;
+ --home-link: #c02c38;
+ --quote-border: #c678dd;
+ --theme-toggle: #4078f2;
+}
+
+.dark-mode {
+ --bg: #282c34;
+ --fg: #a6adba;
+ --link: #56b6c2;
+ --code: #363a45;
+ --footer: #828997;
+ --home-link: #e06c75;
+ --quote-border: #c678dd;
+ --theme-toggle: #5d8ffc;
}
body {
@@ -20,9 +30,18 @@ body {
}
header {
+ overflow:hidden;
margin-top: 1em;
font-size: 2em;
- color: var(--gray);
+ color: var(--footer);
+}
+
+.nav-left {
+ float:left;
+}
+
+.nav-right {
+ float:right;
}
footer {
@@ -30,17 +49,16 @@ footer {
margin-bottom: 1.5em;
text-align: center;
font-size: 0.95em;
- color: var(--gray);
+ color: var(--footer);
}
a {
- color: var(--yellow);
+ color: var(--link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
- text-decoration-color: var(--yellow-dark);
}
pre > code {
@@ -53,8 +71,8 @@ pre > code {
pre, code {
font-family: 'Fira Code', monospace;
font-size: 0.98em;
- color: var(--fg);
- background-color: var(--bg-light);
+ /* color: var(--fg); */
+ background-color: var(--code);
border-radius: 5px;
}
@@ -74,14 +92,22 @@ img {
}
blockquote {
- background-color: var(--bg-light);
- border-left: 5px solid var(--yellow-warm);
+ background-color: var(--code);
+ border-left: 5px solid var(--quote-border);
border-radius: 5px;
margin: 0em 1em;
padding-left: 1em;
}
.homepage-link {
- color: var(--wine);
- text-decoration-color: var(--gray-light);
+ color: var(--home-link);
+}
+
+#darkmodetoggle {
+ color: var(--theme-toggle);
+}
+
+#darkmodetoggle:hover {
+ cursor: pointer;
+ text-decoration: none;
}
diff --git a/src/_footer.html b/src/_footer.html
index ca3390b..9dd7db1 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -1,17 +1,20 @@
- <footer>
- <a href="/" class="homepage-link">adast.xyz</a>
- &nbsp;&mdash;&nbsp;
- <a href="https://git.adast.xyz/explore/repos">Gitea</a>
- &nbsp;&bull;&nbsp;
- <a href="https://github.com/adastx">Github</a>
- &nbsp;&bull;&nbsp;
- <a href="https://odysee.com/@adamski:f">Odysee</a>
- &nbsp;&bull;&nbsp;
- <a href="https://youtube.com/c/adamski1">Youtube</a>
- &nbsp;&bull;&nbsp;
- <a href="https://www.twitch.tv/adastx">Twitch</a>
- &nbsp;&bull;&nbsp;
- <a href="https://steamcommunity.com/id/adastx">Steam</a>
- </footer>
- </body>
+<footer>
+ <a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&mdash;&nbsp;
+ <a href="https://git.adast.xyz/explore/repos">Gitea</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://github.com/adastx">Github</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://odysee.com/@adamski:f">Odysee</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://youtube.com/c/adamski1">Youtube</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://www.twitch.tv/adastx">Twitch</a>
+ &nbsp;&bull;&nbsp;
+ <a href="https://steamcommunity.com/id/adastx">Steam</a>
+</footer>
+
+<script src="scripts/darktheme.js"></script>
+</body>
+
</html>
diff --git a/src/_header.html b/src/_header.html
index d5ecc9f..9521b9c 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -8,10 +8,13 @@
<title></title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<a href="/" class="homepage-link">adast.xyz</a>
+ &nbsp;&nbsp;&bull;&nbsp;&nbsp;
+ <a id="darkmodetoggle" class="fa fa-moon-o" onclick="switchTheme()" aria-hidden="true"></a>
</header>
<h2>⚠️ Test Site ⚠️</h2>
diff --git a/src/scripts/darktheme.js b/src/scripts/darktheme.js
new file mode 100644
index 0000000..a06aca2
--- /dev/null
+++ b/src/scripts/darktheme.js
@@ -0,0 +1,27 @@
+// Get the theme toggle input
+const currentTheme = localStorage.getItem("theme"); // If the current local storage item can be found
+
+if (window.matchMedia
+ && window.matchMedia("(prefers-color-scheme: dark)").matches
+ && !localStorage.getItem("theme")) {
+ localStorage.setItem("theme", "dark");
+}
+
+// Function that will switch the theme based on the if the theme toggle is checked or not
+function switchTheme() {
+ if (document.body.classList.contains('dark-mode')) {
+ document.body.classList.remove("dark-mode");
+ localStorage.setItem("theme", "light");
+ } else {
+ document.body.classList.add("dark-mode");
+ localStorage.setItem("theme", "dark");
+ }
+}
+// Get the current theme from local storage
+if (currentTheme === "dark") {
+ document.body.classList.add("dark-mode");
+ localStorage.setItem("theme", "dark");
+} else {
+ document.body.classList.remove("dark-mode");
+ localStorage.setItem("theme", "light");
+}
diff --git a/src/styles/style.css b/src/styles/style.css
index c5f9a89..0cee77a 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,13 +1,23 @@
:root {
- --bg: #181a1b;
- --bg-light: #222;
- --fg: #ddd;
- --gray: #888;
- --gray-light: #555;
- --yellow: #fda;
- --yellow-dark: #ca8;
- --yellow-warm: #e6c79a;
- --wine: #c65a5a
+ --bg: #f3f3f3;
+ --fg: #181a1b;
+ --link: #006697;
+ --code: #e8e8e8;
+ --footer: #828997;
+ --home-link: #c02c38;
+ --quote-border: #c678dd;
+ --theme-toggle: #4078f2;
+}
+
+.dark-mode {
+ --bg: #282c34;
+ --fg: #a6adba;
+ --link: #56b6c2;
+ --code: #363a45;
+ --footer: #828997;
+ --home-link: #e06c75;
+ --quote-border: #c678dd;
+ --theme-toggle: #5d8ffc;
}
body {
@@ -20,9 +30,18 @@ body {
}
header {
+ overflow:hidden;
margin-top: 1em;
font-size: 2em;
- color: var(--gray);
+ color: var(--footer);
+}
+
+.nav-left {
+ float:left;
+}
+
+.nav-right {
+ float:right;
}
footer {
@@ -30,17 +49,16 @@ footer {
margin-bottom: 1.5em;
text-align: center;
font-size: 0.95em;
- color: var(--gray);
+ color: var(--footer);
}
a {
- color: var(--yellow);
+ color: var(--link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
- text-decoration-color: var(--yellow-dark);
}
pre > code {
@@ -53,8 +71,8 @@ pre > code {
pre, code {
font-family: 'Fira Code', monospace;
font-size: 0.98em;
- color: var(--fg);
- background-color: var(--bg-light);
+ /* color: var(--fg); */
+ background-color: var(--code);
border-radius: 5px;
}
@@ -74,14 +92,22 @@ img {
}
blockquote {
- background-color: var(--bg-light);
- border-left: 5px solid var(--yellow-warm);
+ background-color: var(--code);
+ border-left: 5px solid var(--quote-border);
border-radius: 5px;
margin: 0em 1em;
padding-left: 1em;
}
.homepage-link {
- color: var(--wine);
- text-decoration-color: var(--gray-light);
+ color: var(--home-link);
+}
+
+#darkmodetoggle {
+ color: var(--theme-toggle);
+}
+
+#darkmodetoggle:hover {
+ cursor: pointer;
+ text-decoration: none;
}