From 0b1e949609f0483286f315b2ad72d6d39087951f Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sun, 20 Feb 2022 15:24:08 +0200
Subject: Implemented scrolling to top button

---
 src/styles.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'src/styles.css')

diff --git a/src/styles.css b/src/styles.css
index 7024177..b391ba2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -373,12 +373,27 @@ code span {
   left: 0;
   top: 0;
   padding: 1em;
+  z-index: 2;
 }
 
 .body-on-clicked-image {
   overflow: hidden;
 }
 
+.btnBackToTop {
+  font-size: 1rem;
+  position: fixed;
+  right: 1em;
+  bottom: 1em;
+  z-index: 1;
+  border: 1px solid;
+  transition-duration: 0.5s;
+}
+
+.btnBackToTop:hover {
+  cursor: pointer;
+}
+
 /* OpenSans font */
 
 @font-face {
-- 
cgit v1.3.1-26-gb76a


From 009cb25eb083bbc5ccc0d26977dfc47e0b7166bb Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sun, 20 Feb 2022 18:12:31 +0200
Subject: Reworked go to top button as an image

---
 src/_footer.html               |  4 +---
 src/about.md                   |  2 +-
 src/img/chevrons-up-tabler.svg | 53 ++++++++++++++++++++++++++++++++++++++++++
 src/scripts/image-show.js      |  2 +-
 src/styles.css                 |  1 +
 5 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 src/img/chevrons-up-tabler.svg

(limited to 'src/styles.css')

diff --git a/src/_footer.html b/src/_footer.html
index d27b5b5..2c4228c 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -1,8 +1,6 @@
 	</article>
 
-	<div id="scrollBtn" class="btnBackToTop link-tab" style="display: none" onclick="window.scrollTo(0, 0)">
-		^
-	</div>
+	<img id="scrollBtn" class="btnBackToTop link-tab" style="display: none" onclick="window.scrollTo(0, 0)" 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>
diff --git a/src/about.md b/src/about.md
index b6c5222..6757bbf 100644
--- a/src/about.md
+++ b/src/about.md
@@ -45,7 +45,7 @@ I have 3 years of learning experience with *C#*, but I have also worked with *HT
 ---
 ---
 
-> [tabler-icons](https://github.com/tabler/tabler-icons) for link icon (that I modified)
+> [tabler-icons](https://github.com/tabler/tabler-icons) for link and chevron up icons (that I modified)
 
 <div></div>
 
diff --git a/src/img/chevrons-up-tabler.svg b/src/img/chevrons-up-tabler.svg
new file mode 100644
index 0000000..7126fbb
--- /dev/null
+++ b/src/img/chevrons-up-tabler.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-chevrons-up"
+   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="chevrons-up-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" />
+  <polyline
+     points="7 11 12 6 17 11"
+     id="polyline4"
+     style="stroke:#ffeede" />
+  <polyline
+     points="7 17 12 12 17 17"
+     id="polyline6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/scripts/image-show.js b/src/scripts/image-show.js
index b1ca7cf..961242e 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 !== '🔗') {
+	if (image.alt !== '🔗' && image.id !== 'scrollBtn') {
 		image.onclick = clickToView;
 	}
 }
diff --git a/src/styles.css b/src/styles.css
index b391ba2..ff120e8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -388,6 +388,7 @@ code span {
   z-index: 1;
   border: 1px solid;
   transition-duration: 0.5s;
+  padding: 0.3em;
 }
 
 .btnBackToTop:hover {
-- 
cgit v1.3.1-26-gb76a