Reworked how elements used by scripts are hidden when javascript is not enabled

5 files changed, 13 insertions, 4 deletions

diff --git a/src/_header.html b/src/_header.html
index ee295c2..4b45a0c 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -11,6 +11,8 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="/styles.css">
 	<link rel="stylesheet" href="/darkmode.css">
+	<link rel="stylesheet" href="/hide-js-styling.css">
+	<script type="text/javascript" src="/scripts/js-styling-preload.js" integrity="sha512-W9vmlFJBKooI1qrJQ9gop+t2As9YkQ+CRaxML2XFWNVJx7bSR3sUxi8i+W+Pnh45BY6NSqS77M1DE3+ST93Ltw==" crossorigin="anonymous"></script>
 	<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">
@@ -32,10 +34,10 @@
 		</span>
 		<span>
 			<a href="/blog" class="link-tab">Blog</a>
-			<a href="/tutorials" class="link-tab">Tutorials</a> ||
+			<a href="/tutorials" class="link-tab">Tutorials</a>
 		</span>
-		<span>
-			<img id="changeThemeBtn" class="link-tab unzoomable btn" src="/img/sun-tabler.svg" alt="Light">
+		<span id="settingsWrapper">
+			|| <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>
diff --git a/src/hide-js-styling.css b/src/hide-js-styling.css
new file mode 100644
index 0000000..e0928b7
--- /dev/null
+++ b/src/hide-js-styling.css
@@ -0,0 +1,3 @@
+#settingsWrapper, #scrollBtn {
+  display: none;
+}
diff --git a/src/regarding-js.md b/src/regarding-js.md
index ceb45b2..13dee23 100644
--- a/src/regarding-js.md
+++ b/src/regarding-js.md
@@ -15,6 +15,7 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |[image-show.js](/scripts/image-show.js)|Click to zoom on images|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/image-show.js)|
 |[back-to-top.js](/scripts/back-to-top.js)|Automatically appearing button to scroll to top|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/back-to-top.js)|
 |[theme-changer-preload.js](/scripts/theme-changer-preload.js) &nbsp; [theme-changer.js](/scripts/theme-changer.js)|Change theme between light and dark (split in two files)|[Link 1](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer-preload.js) &nbsp; [Link 2](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer.js)|
+|[js-styling-preload.js](/scripts/js-styling-preload.js)|Un-disables hiding of elements, used by the scripts listed here|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/js-styling-preload.js)|
 
 ## Data in browser storage
 [![🔗](/img/link-tabler.svg)](#data-in-browser-storage)
diff --git a/src/scripts/js-styling-preload.js b/src/scripts/js-styling-preload.js
new file mode 100644
index 0000000..b6916e5
--- /dev/null
+++ b/src/scripts/js-styling-preload.js
@@ -0,0 +1,3 @@
+const hideJSStylings = document.styleSheets[2];
+
+hideJSStylings.disabled = true;
diff --git a/src/styles.css b/src/styles.css
index 48b6ead..c3048da 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -494,7 +494,7 @@ blockquote > :last-child {
   border: none !important;
 }
 
-#scrollBtn, #changeThemeBtn {
+#scrollBtn {
   display: none;
 }