Merge branch 'image-click-zoom' into 'master'

Image click zoom

See merge request Syndamia/syndamiadotcom!2

9 files changed, 113 insertions, 30 deletions

diff --git a/src/_footer.html b/src/_footer.html
index 0bce5fd..9ca082f 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -2,6 +2,7 @@
 
 	<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>
+		<a href="/regarding-js.html" class="link-tab" title="Regarding usage of JavaScript">Regarding usage of JavaScript</a>
 
 		<br>
 
@@ -17,6 +18,8 @@
 		<a href="https://www.romanzolotarev.com/ssg.html" target="_blank" class="link-tab">ssg by Roman Zolotarev</a>
 		<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"></script>
 </body>
 
 </html>
diff --git a/src/_header.html b/src/_header.html
index be19950..911b6d5 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -22,7 +22,8 @@
 <body bgcolor="white">
 	<nav class="header">
 		<span>
-			<a href="/" class="link-tab">Home</a> || 
+			<a href="/" class="link-tab">Home</a>
+			<a href="/web-apps" class="link-tab">Web Apps</a> || 
 		</span>
 		<span>
 			<a href="/tutorials" class="link-tab">Tutorials</a>
diff --git a/src/blog/mundus-first-shot-at-gamedev/timeline.md b/src/blog/mundus-first-shot-at-gamedev/timeline.md
index 3ade67c..41c4b5b 100644
--- a/src/blog/mundus-first-shot-at-gamedev/timeline.md
+++ b/src/blog/mundus-first-shot-at-gamedev/timeline.md
@@ -30,7 +30,7 @@ Finally, it was time to plan the actual game.
 
 So far I have only done preparation but on this day, I started actual programming. The UI and most of the mechanics were completely sketched.
 
-Around a week later I also drew the first proper textures for the game world: a [tile of grass](https://gitlab.com/Syndamia/IT-kariera/-/blob/a100f71372496ba89e26fedc520edcefd2442848/Year%202/Software%20development/Mundus/Mundus/Icons/Land/Ground/grass.png) ![](./img/grass-tile.png) and a [tile of grass with a boulder on top](https://gitlab.com/Syndamia/IT-kariera/-/blob/a100f71372496ba89e26fedc520edcefd2442848/Year%202/Software%20development/Mundus/Mundus/Icons/Land/Ground/boulder.png) ![](./img/boulder-tile.png). These replaced the [grass](https://gitlab.com/Syndamia/IT-kariera/-/blob/7b2c8cbc1d6adb874ca6a41f2871ea1950866d70/Year%202/Software%20development/Project/Mundus/Mundus/Views/Icons/Land/Ground/grass.jpg) ![](./img/placeholder-grass-tile.jpg) and [rock](https://gitlab.com/Syndamia/IT-kariera/-/blob/7b2c8cbc1d6adb874ca6a41f2871ea1950866d70/Year%202/Software%20development/Project/Mundus/Mundus/Views/Icons/Land/Ground/rock.jpg) ![](./img/placeholder-rock-tile.jpg) placeholder textures I made on the 29th.
+Around a week later I also drew the first proper textures for the game world: a [tile of grass](https://gitlab.com/Syndamia/IT-kariera/-/blob/a100f71372496ba89e26fedc520edcefd2442848/Year%202/Software%20development/Mundus/Mundus/Icons/Land/Ground/grass.png) <img src="./img/grass-tile.png" class="pixelated-render"> and a [tile of grass with a boulder on top](https://gitlab.com/Syndamia/IT-kariera/-/blob/a100f71372496ba89e26fedc520edcefd2442848/Year%202/Software%20development/Mundus/Mundus/Icons/Land/Ground/boulder.png) <img src="./img/boulder-tile.png" class="pixelated-render">. These replaced the [grass](https://gitlab.com/Syndamia/IT-kariera/-/blob/7b2c8cbc1d6adb874ca6a41f2871ea1950866d70/Year%202/Software%20development/Project/Mundus/Mundus/Views/Icons/Land/Ground/grass.jpg) <img src="./img/placeholder-grass-tile.jpg" class="pixelated-render"> and [rock](https://gitlab.com/Syndamia/IT-kariera/-/blob/7b2c8cbc1d6adb874ca6a41f2871ea1950866d70/Year%202/Software%20development/Project/Mundus/Mundus/Views/Icons/Land/Ground/rock.jpg) <img src="./img/placeholder-rock-tile.jpg" class="pixelated-render"> placeholder textures I made on the 29th.
 
 Concerning the temporary textures, I just drew them in half an hour in GIMP, so I could test out some of the code.
 
@@ -40,7 +40,7 @@ The proper textures, I believe, turned out fairly well, given that I've never be
 
 Slowly and steadily I had been making fine progress, but a lot of issues started to surface. As it turns out, I hadn't thought everything completely through, so I mostly went back to the drawing board.
 
-But at the very least, I had some important systems in place, like breaking and placing stuff, proper movement through the map and using items. Also, I had drawn my favorite texture from the whole projects: [the tree](https://gitlab.com/Syndamia/Mundus/-/blob/c47a34847e52ef76361394dba2c4f524a56d1b92/Mundus/Icons/Land/Items/tree.png) ![](./img/tree-tile.png).
+But at the very least, I had some important systems in place, like breaking and placing stuff, proper movement through the map and using items. Also, I had drawn my favorite texture from the whole projects: [the tree](https://gitlab.com/Syndamia/Mundus/-/blob/c47a34847e52ef76361394dba2c4f524a56d1b92/Mundus/Icons/Land/Items/tree.png) <img src="./img/tree-tile.png" class="pixelated-render">.
 
 > ***06.04.2020***&emsp;Day 58
 
diff --git a/src/index.md b/src/index.md
index 1707320..5391d9d 100644
--- a/src/index.md
+++ b/src/index.md
@@ -1,22 +1,35 @@
-<article id="index-page">
-	<h1 id="Welcome">Welcome</h1>
-	<hr/>
-	<hr/>
-	<div id="index-contents">
-		<img id="index-contents-img" src="./img/16-better-colors.jpeg">
-		<div id="index-contents-text">
-			<p>Hello! My name is Kamen Mladenov and I am a programming student.</p>
-			<p>I enjoy all types of technologies, although I mostly gravitate towards the back-end.</p>
-			<p>The purpose of this here website is to share IT knowledge and talk about tech.</p>
-			<p><a href="https://gitlab.com/Syndamia" target="_blank" title="GitLab">GitLab</a> || <a href="https://github.com/Syndamia" target="_blank" title="GitHub">GitHub</a> || <a href="mailto:syndamia@protonmail.com" target="_blank">Email</a></p>
-		</div>
+# Welcome
+
+---
+---
+
+<div id="index-contents">
+	<img id="index-contents-img" src="./img/16-better-colors.jpeg">
+	<div id="index-contents-text">
+		<p>Hello! My name is Kamen Mladenov and I am a programming student.</p>
+		<p>I enjoy all types of technologies, although I mostly gravitate towards the back-end.</p>
+		<p>The purpose of this here website is to share IT knowledge and talk about tech.</p>
+		<p><a href="https://gitlab.com/Syndamia" target="_blank" title="GitLab">GitLab</a> || <a href="https://github.com/Syndamia" target="_blank" title="GitHub">GitHub</a> || <a href="mailto:syndamia@protonmail.com" target="_blank">Email</a></p>
 	</div>
-	<h2>Freedom</h2><p></p>
-	<p>I'm an avid supporter of <a href="https://www.gnu.org/philosophy/free-sw.html">free software</a> and because of that, this website contains 0% JavaScript and by extension: 0 tracking. Also, the source code is publicly available <a href="https://gitlab.com/Syndamia/syndamiadotcom">on GitLab</a>.</p>
-	<h2>Licensing</h2><p></p>
-	<p>This website uses <a href="https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/LICENSE">two licenses</a>:
-	<ul>
-		<li><a href="https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/LICENSE-CONTENT">CC BY-SA 4.0</a> - all content (articles, images, etc.), summary <a href="https://creativecommons.org/licenses/by-sa/4.0/">here</a></li>
-		<li><a href="https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/LICENSE-CODE">MIT</a> - everything else (code), summary <a href="https://choosealicense.com/licenses/mit/">here</a></li>
-	</ul>
-</article>
+</div>
+
+## Freedom
+[![🔗](/img/link-tabler.svg)](#Freedom)
+
+I'm an avid supporter of [free software](https://www.gnu.org/philosophy/free-sw.html) and consequently, this website uses only a **limited amount of JavaScript**. For more information, read about it [here](/regarding-js.html) but in a nutshell, the whole website (except pages in [Web Apps](/web-apps)) will be **fully consumable without JavaScript**.
+
+Source code is publicly available [on GitLab](https://gitlab.com/Syndamia/syndamiadotcom). A list of implemented JavaScript features can be found [here](/regarding-js.html#Implemented%20features).
+
+## Accessibility
+[![🔗](/img/link-tabler.svg)](#Accessibility)
+
+Given the heavy stylization and usage of JavaScript, most content is also available without any CSS or JS over at [tiny.syndamia.com](https://tiny.syndamia.com).
+
+## Licensing
+[![🔗](/img/link-tabler.svg)](#Licensing)
+
+This website uses [two licenses](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/LICENSE):
+<ul style="margin-block-end: calc(1em + 10px)">
+	<li><a href="https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/LICENSE-CONTENT">CC BY-SA 4.0</a> - all content (articles, images, etc.), summary <a href="https://creativecommons.org/licenses/by-sa/4.0/">here</a></li>
+	<li><a href="https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/LICENSE-CODE">MIT</a> - everything else (code), summary <a href="https://choosealicense.com/licenses/mit/">here</a></li>
+</ul>
diff --git a/src/regarding-js.md b/src/regarding-js.md
new file mode 100644
index 0000000..e21de62
--- /dev/null
+++ b/src/regarding-js.md
@@ -0,0 +1,15 @@
+# Regarding usage of JavaScript
+
+---
+---
+
+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!**
+
+To keep everything transparent, all pages on [Web Apps]() will require JavaScript to run and for everything else I will list information here.
+
+## Implemented features
+[![🔗](/img/link-tabler.svg)](#Implemented%20features)
+
+|Description|GitLab source|Website source|
+|---|---|---|
+|Click to zoom on images|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/image-show.js)|[Link](/scripts/image-show.js) 
diff --git a/src/scripts/image-show.js b/src/scripts/image-show.js
new file mode 100644
index 0000000..b1ca7cf
--- /dev/null
+++ b/src/scripts/image-show.js
@@ -0,0 +1,24 @@
+let scrollPosition = 0;
+
+function clickToView() {
+	if (scrollPosition === 0) {
+		scrollPosition = window.scrollY;
+		window.scrollTo(0, 0);
+	}
+
+	this.classList.toggle('clicked-image');
+	document.body.classList.toggle('body-on-clicked-image');
+
+	if (!this.classList.contains('clicked-image')) {
+		window.scrollTo(0, scrollPosition);
+		scrollPosition = 0;
+	}
+}
+
+const images = document.getElementsByTagName('img');
+
+for (const image of images) {
+	if (image.alt !== '🔗') {
+		image.onclick = clickToView;
+	}
+}
diff --git a/src/styles.css b/src/styles.css
index c322f77..7024177 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -58,7 +58,7 @@ img {
   image-rendering: crisp-edges;
 }
 
-img:hover {
+.pixelated-render {
   image-rendering: pixelated;
 }
 
@@ -162,10 +162,6 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img {
 }
 
 @media screen and (min-width: 610px) {
-  #index-page {
-    margin-bottom: 10px;
-  }
-
   #index-contents {
     display: flex;
     align-items: center;
@@ -245,7 +241,7 @@ article > table td:first-child {
   width: 60%;
 }
 
-article > table td:nth-child(2) {
+article > table td:nth-child(n+2) {
   line-height: 1.1em;
   padding: 0.3em;
   padding-top: 0.2em;
@@ -364,6 +360,25 @@ code span {
   color: #afaf00;
 }
 
+/* Script specific styling */
+
+.clicked-image {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  max-width: none !important;
+  max-height: none !important;
+  border: none;
+  object-fit: contain;
+  left: 0;
+  top: 0;
+  padding: 1em;
+}
+
+.body-on-clicked-image {
+  overflow: hidden;
+}
+
 /* OpenSans font */
 
 @font-face {
diff --git a/src/web-apps.md b/src/web-apps.md
new file mode 100644
index 0000000..94fd905
--- /dev/null
+++ b/src/web-apps.md
@@ -0,0 +1,6 @@
+# Web Apps
+
+---
+---
+
+*[COMING SOON]*
diff --git a/src/web-apps/index.md b/src/web-apps/index.md
new file mode 100644
index 0000000..94fd905
--- /dev/null
+++ b/src/web-apps/index.md
@@ -0,0 +1,6 @@
+# Web Apps
+
+---
+---
+
+*[COMING SOON]*