Added simple functionality

8 files changed, 151 insertions, 9 deletions

diff --git a/src/_footer.html b/src/_footer.html
index c242d2f..2131175 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,8 +21,9 @@
 		<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>
+	<script type="text/javascript" src="/scripts/theme-changer.js"></script>
 </body>
 
 </html>
diff --git a/src/_header.html b/src/_header.html
index 911b6d5..37a28c5 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"></script>
 	<meta name="description" content="[DESCRIPTION]">
 	<meta property="og:type" content="website">
 	<meta property="og:title" content="[TITLE]">
@@ -30,10 +31,13 @@
 			<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">
+		</span>
 	</nav>
 
 	<article>
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/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..5fd5f7c
--- /dev/null
+++ b/src/scripts/theme-changer.js
@@ -0,0 +1,28 @@
+const themeBtn = document.getElementById('changeThemeBtn');
+
+if (darkThemeStyle.disabled)
+	themeBtn.src = '/img/moon-tabler.svg';
+
+themeBtn.style.display = 'initial';
+
+function changeTheme(theme) {
+	if (theme === 'light') {
+		darkThemeStyle.disabled = true;
+		themeBtn.src = '/img/moon-tabler.svg';
+	}
+	else {
+		darkThemeStyle.disabled = false;
+		themeBtn.src = '/img/sun-tabler.svg';
+	}
+}
+
+themeBtn.onclick = function() {
+	if (localStorage.getItem('theme') !== 'light') {
+		changeTheme('light');
+		localStorage.setItem('theme', 'light');
+	}
+	else {
+		changeTheme('dark');
+		localStorage.setItem('theme', 'dark');
+	}
+}
diff --git a/src/styles.css b/src/styles.css
index 6f464fc..8aa539d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -62,6 +62,10 @@ img {
   image-rendering: pixelated;
 }
 
+.btn:hover {
+  cursor: pointer;
+}
+
 img, hr {
   border: 1px solid black;
 }
@@ -155,10 +159,11 @@ 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 {
+#changeThemeBtn {
   vertical-align: middle;
   margin-top: -0.2em;
   border: none !important;
+  display: none;
 }
 
 /* Index page styling */
@@ -402,10 +407,6 @@ code span {
   display: none;
 }
 
-#scrollBtn:hover {
-  cursor: pointer;
-}
-
 /* OpenSans font */
 
 @font-face {