Merge branch 'theme-changer' into 'master'

Theme changer

See merge request Syndamia/syndamiadotcom!4

10 files changed, 277 insertions, 116 deletions

diff --git a/src/_footer.html b/src/_footer.html
index c242d2f..df63dea 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -1,6 +1,6 @@
 	</article>
 
-	<img id="scrollBtn" class="link-tab" src="/img/chevrons-up-tabler.svg" alt="^">
+	<img id="scrollBtn" class="link-tab unzoomable btn" src="/img/chevrons-up-tabler.svg" alt="^">
 
 	<nav class="footer">
 		<a href="mailto:syndamia@protonmail.com" target="_blank" class="link-tab" title="Have a comment or suggestion? Mail me!">Have a comment or suggestion? Mail me!</a>
@@ -21,7 +21,7 @@
 		<a href="https://kristaps.bsd.lv/lowdown/" target="_blank" class="link-tab">lowdown by Kristaps Dzonsons</a>
 	</nav>
 
-	<script type="text/javascript" src="/scripts/image-show.js" integrity="sha512-h6tSRbF10wJWN7lud7oHdLqqXNzYVlRVWFrTTJ7pBlFN3JKHRnzfPP7QnlOHuJgTg3I99xu4Ughyzj0Wn/BJTw==" crossorigin="anonymous"></script>
+	<script type="text/javascript" src="/scripts/image-show.js" integrity="sha512-nvHl7jQO5YAE/K8KUPwF0m1Oq2mT6I8hNZYby4abaxIuJe6F60L1BDtYsJYB/1+A7iExW+i7YREL886qzCJt7A==" crossorigin="anonymous"></script>
 	<script type="text/javascript" src="/scripts/back-to-top.js" integrity="sha512-yih1opqueA2DkNTsRo8JG7r/haDe3VaHpV08Vs79tDYI9Goe+QpDNSPjpZDszDBQOrIIX7ZKZA4QJ0J+fxkn5w==" crossorigin="anonymous"></script>
 </body>
 
diff --git a/src/_header.html b/src/_header.html
index 911b6d5..f00f341 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -11,6 +11,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="/styles.css">
 	<link rel="stylesheet" href="/darkmode.css">
+	<script type="text/javascript" src="/scripts/theme-changer-preload.js" integrity="sha512-x1W8CvHGWZh1WcCWqXLMRbABh951y7a7tU+nNt0Goz42rR7ZrfAE+IOE/IDRpdAPc1CJtxUoZ8G/zxreGa+KCg==" crossorigin="anonymous"></script>
 	<meta name="description" content="[DESCRIPTION]">
 	<meta property="og:type" content="website">
 	<meta property="og:title" content="[TITLE]">
@@ -30,10 +31,14 @@
 			<a href="/courses" class="link-tab">Courses</a>
 			<a href="/blog" class="link-tab">Blog</a> ||
 		</span>
-			<span>
+		<span>
 			<a href="/about" class="link-tab">About</a>
 			<a href="/contact" class="link-tab">Contact</a>
 		</span>
+		<span>
+			<img id="changeThemeBtn" class="link-tab unzoomable btn" src="/img/sun-tabler.svg" alt="Light">
+			<script type="text/javascript" src="/scripts/theme-changer.js" integrity="sha512-ZmN9dZP4m7fv3W3DHbA9pnK3Y44LnD4Be1Pn8Wdu4wFutZZSfZ1vNoIKNZ2J7QK9NHImYPjyNPxN2/l6y9P7pA==" crossorigin="anonymous"></script>
+		</span>
 	</nav>
 
 	<article>
diff --git a/src/darkmode.css b/src/darkmode.css
index e1b0a72..8e6583a 100644
--- a/src/darkmode.css
+++ b/src/darkmode.css
@@ -1,41 +1,25 @@
 :root {
+  --fg-color: #ffeede;
+  --bg-color: #262626;
+  --fg-selection-color: #001121;
+  --bg-selection-color: #81949f;
+  --border-color: #777;
+  --blockquote-color: #919191;
+  --blockquote-border-color: #919191;
+  --header-color: #d49408;
+  --link-tab-fg-color: #ffeede;
   --link-tab-bg-color: #464646;
   --link-tab-bg-hover-color: #d47408;
-  --bold-color: #d49408;
-}
-
-
-::-moz-selection {
-  color: #001121;
-  background: #81949f;
-}
-
-::selection {
-  color: #001121;
-  background: #81949f;
-}
-
-*,
-hr,
-article > table tr,
-article > table td,
-article > table th {
-  color: #ffeede;
-  border-color: #777;
-  background-color: #262626;
-}
-
-blockquote {
-  border-color: #919191;
-}
-
-blockquote * {
-  color: #919191;
-}
-
-h1, h2, h3, h4, h5, h6, b {
-  color: var(--bold-color);
-  border-color: #777;
+  --strong-color: #c35b5b;
+  --a-color: #b47494;
+  --a-hover-color: #da8db3;
+  --code-bg-color: #414141;
+  --pre-bg-color: #414141;
+  --em-color: #999908;
+  --td-border-color: #777;
+  --tr-bg-color: #262626;
+  --tr-border-color: #777;
+  --alternating-row-color: #323232;
 }
 
   /* This selects the link images, next to headings */
@@ -43,36 +27,3 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
   /* Refer to styles.css on why this is necessary */
   filter: none; 
 }
-
-strong {
-  color: #c35b5b;
-}
-
-body > :not(nav) a, a strong {
-  color: #b47494;
-  border-bottom: 1px dashed;
-}
-
-body > :not(nav) a:hover, a strong:hover {
-  color: #da8db3;
-}
-
-pre, code {
-  background-color: #414141 !important;
-}
-
-i, em {
-  color: #999908;
-}
-
-table * {
-  background-color: inherit;
-}
-
-article > table tr:nth-child(2n) td {
-  background-color: #323232;
-}
-
-.link-tab {
-  color: #ffeede;
-}
diff --git a/src/img/moon-tabler.svg b/src/img/moon-tabler.svg
new file mode 100644
index 0000000..376f924
--- /dev/null
+++ b/src/img/moon-tabler.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-moon"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="moon-tabler.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="m 12,3 c 0.132,0 0.263,0 0.393,0 A 7.5,7.5 0 0 0 20.313,15.446 9,9 0 1 1 12,2.992 Z"
+     id="path4"
+     style="stroke:#ffffff" />
+</svg>
diff --git a/src/img/sun-tabler.svg b/src/img/sun-tabler.svg
new file mode 100644
index 0000000..3c1c587
--- /dev/null
+++ b/src/img/sun-tabler.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-sun"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="sun-tabler.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <circle
+     cx="12"
+     cy="12"
+     r="4"
+     id="circle4"
+     style="stroke:#ffeede" />
+  <path
+     d="m 3,12 h 1 m 8,-9 v 1 m 8,8 h 1 m -9,8 v 1 M 5.6,5.6 6.3,6.3 M 18.4,5.6 17.7,6.3 m 0,11.4 0.7,0.7 M 6.3,17.7 5.6,18.4"
+     id="path6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/regarding-js.md b/src/regarding-js.md
index 8253fd4..0bc6afb 100644
--- a/src/regarding-js.md
+++ b/src/regarding-js.md
@@ -3,9 +3,11 @@
 ---
 ---
 
-On 20.02.2022 I decided to lift the "ban" on usage of JavaScript in this website. This gives me the freedom to implement some useful features for those that have it enabled. **Any content that doesn't depend on JavaScript will be perfectly consumable without it! There isn't and never will be anything that violates a user's privacy!**
+On 20.02.2022 I decided to lift the "ban" on usage of JavaScript in this website. This gives me the freedom to implement some useful features for those that have it enabled. **Any content that doesn't depend on JavaScript will be perfectly consumable without it!**
 
-To keep everything transparent, all pages on [Web Apps]() will require JavaScript to run and for everything else I will list information here.
+Any user data that might be saved isn't, and never will be, used for purposes not listed here. There isn't, and won't ever be, any form of tracking or data collection that isn't required for some feature (listed here).
+
+All pages on [Web Apps](/web-apps) will require JavaScript to run and for everything else I will list information here.
 
 ## Implemented features
 [![🔗](/img/link-tabler.svg)](#Implemented%20features)
@@ -14,4 +16,18 @@ To keep everything transparent, all pages on [Web Apps]() will require JavaScrip
 |---|---|---|
 |Click to zoom on images|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/image-show.js)|[Link](/scripts/image-show.js)|
 |Automatically appearing button to scroll to top|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/back-to-top.js)|[Link](/scripts/back-to-top.js)|
+|Change theme between light and dark (split in two files)|[Link F1](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer-preload.js) [Link F2](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer.js)|[Link F1](/scripts/theme-changer-preload.js) [Link F2](/scripts/theme-changer.js)|
+
+## Data in browser storage
+[![🔗](/img/link-tabler.svg)](#Data%20in%20browser%20storage)
+
+<p></p>
+
+### Local storage
+[![🔗](/img/link-tabler.svg)](#Local%20storage)
+
+|Description|Key|Values|
+|---|---|---|
+|Saves which theme should be loaded|`theme`|`dark`\|`light`|
 
+<p></p>
diff --git a/src/scripts/image-show.js b/src/scripts/image-show.js
index 961242e..8664ef4 100644
--- a/src/scripts/image-show.js
+++ b/src/scripts/image-show.js
@@ -18,7 +18,7 @@ function clickToView() {
 const images = document.getElementsByTagName('img');
 
 for (const image of images) {
-	if (image.alt !== '🔗' && image.id !== 'scrollBtn') {
+	if (image.alt !== '🔗' && !image.classList.contains('unzoomable')) {
 		image.onclick = clickToView;
 	}
 }
diff --git a/src/scripts/theme-changer-preload.js b/src/scripts/theme-changer-preload.js
new file mode 100644
index 0000000..bb53b6c
--- /dev/null
+++ b/src/scripts/theme-changer-preload.js
@@ -0,0 +1,4 @@
+const darkThemeStyle = document.styleSheets[1];
+
+if (localStorage.getItem('theme') === 'light')
+	darkThemeStyle.disabled = true;
diff --git a/src/scripts/theme-changer.js b/src/scripts/theme-changer.js
new file mode 100644
index 0000000..4b5ca1b
--- /dev/null
+++ b/src/scripts/theme-changer.js
@@ -0,0 +1,19 @@
+const themeBtn = document.getElementById('changeThemeBtn');
+
+if (darkThemeStyle.disabled)
+	themeBtn.src = '/img/moon-tabler.svg';
+
+themeBtn.style.display = 'initial';
+
+themeBtn.onclick = function() {
+	darkThemeStyle.disabled = !darkThemeStyle.disabled;
+
+	if (localStorage.getItem('theme') !== 'light') {
+		themeBtn.src = '/img/moon-tabler.svg';
+		localStorage.setItem('theme', 'light');
+	}
+	else {
+		themeBtn.src = '/img/sun-tabler.svg';
+		localStorage.setItem('theme', 'dark');
+	}
+}
diff --git a/src/styles.css b/src/styles.css
index 6f464fc..f8a7dcf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,6 +1,25 @@
 :root {
+  --fg-color: black;
+  --bg-color: white;
+  --fg-selection-color: white;
+  --bg-selection-color: #338fff;
+  --border-color: black;
+  --blockquote-color: #6a737d;
+  --blockquote-border-color: #dfe2e5;
+  --header-color: black;
+  --link-tab-fg-color: white;
   --link-tab-bg-color: #303030;
   --link-tab-bg-hover-color: #004080;
+  --strong-color: black;
+  --a-color: #004080;
+  --a-hover-color: #004080;
+  --code-bg-color: #e2e4e6;
+  --pre-bg-color: #f6f8fa;
+  --em-color: black;
+  --td-border-color: #dfe2e5;
+  --tr-bg-color: #fff;
+  --tr-border-color: #c6cbd1;
+  --alternating-row-color: #f6f8fa;
 }
 
 /* Custom scrollbar style */
@@ -21,10 +40,25 @@
   background: #555;
 }
 
+/* Custom mouse text selection colors */
+
+::-moz-selection {
+  color: var(--fg-selection-color);
+  background: var(--bg-selection-color);
+}
+
+::selection {
+  color: var(--fg-selection-color);
+  background: var(--bg-selection-color);
+}
+
 /* Global */
 
 body {
   min-height: calc(100vh - 16px);
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
 }
 
 body, td, th {
@@ -32,6 +66,11 @@ body, td, th {
   line-height: 1.5em;
 }
 
+h1, h2, h3, h4, h5, h6, b {
+  color: var(--header-color);
+  border-color: var(--border-color);
+}
+
 h1 {
   font-size: 1.7em;
   line-height: 1.2em;
@@ -45,7 +84,7 @@ h1 ~ h1 {
 h2 {
   font-size: 1.35em;
   padding-bottom: 0.25em;
-  border-bottom: 2px solid black;
+  border-bottom: 2px solid var(--border-color);
 }
 
 h3 {
@@ -63,12 +102,32 @@ img {
 }
 
 img, hr {
-  border: 1px solid black;
+  border: 1px solid var(--border-color);
+}
+
+strong {
+  color: var(--strong-color);
 }
 
 a {
   text-decoration: none;
-  color: var(--link-tab-bg-hover-color);
+}
+
+a * {
+  color: var(--fg-color);
+}
+
+body > :not(nav) a, a strong {
+  color: var(--a-color);
+  border-bottom: 1px dashed;
+}
+
+body > :not(nav) a:hover, a strong:hover {
+  color: var(--a-hover-color);
+}
+
+i, em {
+  color: var(--em-color);
 }
 
 article {
@@ -90,10 +149,14 @@ table code {
 h2, h3, h4, h5, h6, .about-header {
   display: inline-block;
   margin-block-start: 0.4em;
-  margin-block-end: 0.5em; /* Account for it being an inline block, as opposed to a normal block */
+  margin-block-end: 0.16em;
   line-height: 1.25em;
 }
 
+.about-header:first-child {
+  margin-block-start: 0.83em;
+}
+
 h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .about-p {
   display: inline;
 }
@@ -147,7 +210,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
 .link-tab {
   font-weight: normal;
   padding: 10px;
-  color: white;
+  color: var(--link-tab-fg-color);
   background-color: var(--link-tab-bg-color);
 }
 
@@ -155,12 +218,6 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
   background-color: var(--link-tab-bg-hover-color);
 }
 
-#changeThemeButton {
-  vertical-align: middle;
-  margin-top: -0.2em;
-  border: none !important;
-}
-
 /* Index page styling */
 
 #index-contents-img {
@@ -171,7 +228,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
   #index-contents {
     display: flex;
     align-items: center;
-    justify-content: center;	
+    justify-content: center;
   }
 
   #index-contents-text {
@@ -189,8 +246,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
 
 /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
 
-code,
-pre {
+code, pre {
   font-family: monospace;
   font-size: 1em;
 }
@@ -199,20 +255,10 @@ code {
   padding: .2em .4em;
   margin: 0;
   font-size: 85%;
-  background-color: rgba(40,46,52,.5);
+  background-color: var(--code-bg-color);
   border-radius: 3px;
 }
 
-pre > code {
-  padding: 0;
-  margin: 0;
-  font-size: 100%;
-  word-break: normal;
-  white-space: pre;
-  background: transparent;
-  border: 0;
-}
-
 pre code {
   display: inline;
   max-width: auto;
@@ -221,7 +267,17 @@ pre code {
   overflow: visible;
   line-height: inherit;
   word-wrap: normal;
-  background-color: initial;
+  background-color: var(--code-bg-color);
+  border: 0;
+}
+
+pre > code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background-color: inherit;
   border: 0;
 }
 
@@ -230,7 +286,7 @@ pre {
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  background-color: #f6f8fa;
+  background-color: var(--pre-bg-color);
   border-radius: 3px;
   margin: 0;
   word-break: normal;
@@ -268,16 +324,16 @@ article > table th {
 article > table td,
 article > table th {
   padding: 6px 13px;
-  border: 1px solid #dfe2e5;
+  border: 1px solid var(--td-border-color);
 }
 
 article > table tr {
-  background-color: #fff;
-  border-top: 1px solid #c6cbd1;
+  background-color: var(--tr-bg-color);
+  border-top: 1px solid var(--tr-border-color);
 }
 
 article > table tr:nth-child(2n) {
-  background-color: #f6f8fa;
+  background-color: var(--alternating-row-color);
 }
 
 blockquote {
@@ -285,8 +341,8 @@ blockquote {
   margin-top: 0;
   margin-bottom: 16px;
   padding: 0 1em;
-  color: #6a737d;
-  border-left: .25em solid #dfe2e5;
+  color: var(--blockquote-color);
+  border-left: .25em solid var(--blockquote-border-color);
 }
 
 blockquote > :first-child {
@@ -310,7 +366,7 @@ blockquote > :last-child {
 }
 
 .contact-card-title, .contact-card-content {
-  background-color: #343434;
+  background-color: var(--alternating-row-color);
   padding: 0.7rem;
   line-height: 1.5rem;
 }
@@ -323,7 +379,7 @@ blockquote > :last-child {
 .contact-card-title {
   font-size: 1.2em;
   margin: 0em 0.4em;
-  color: var(--bold-color);
+  color: var(--header-color);
 }
 
 .contact-card-content {
@@ -334,10 +390,6 @@ blockquote > :last-child {
 
 /* Syntax highlighting (colours are inspired from gruvbox) */
 
-code span {
-  background-color: inherit;
-}
-
 .cst, .chr { /* Constant, Chars */
   color: #d787af;
 }
@@ -372,6 +424,10 @@ code span {
 
 /* Script specific styling */
 
+.btn:hover {
+  cursor: pointer;
+}
+
 .clicked-image {
   position: absolute;
   width: 100vw;
@@ -384,6 +440,7 @@ code span {
   top: 0;
   padding: 1em;
   z-index: 2;
+  background-color: var(--bg-color);
 }
 
 .body-on-clicked-image {
@@ -399,11 +456,16 @@ code span {
   border: 1px solid;
   transition-duration: 0.5s;
   padding: 0.3em;
-  display: none;
 }
 
-#scrollBtn:hover {
-  cursor: pointer;
+#changeThemeBtn {
+  vertical-align: middle;
+  margin-top: -0.2em;
+  border: none !important;
+}
+
+#scrollBtn, #changeThemeBtn {
+  display: none;
 }
 
 /* OpenSans font */