(page-width.js,theme-changer.js) Replaced icons with text buttons

5 files changed, 27 insertions, 14 deletions

diff --git a/src/_footer.html b/src/_footer.html
index 6d6190c..986a60a 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -3,7 +3,7 @@
 	<img id="scrollBtn" class="icon unzoomable btn" src="/img/chevrons-up.svg" alt="^">
 </body>
 
-<script type="text/javascript" src="/scripts/theme-changer.js" integrity="sha512-4p/NmUO9VMUBe7xPDGYEcZrZh9A96OebGs/3CZNcV98ZaouWSQ3WXlKfkcZLpWov/D/Vcf+6ZOtBtSQ0Caz2Jg==" crossorigin="anonymous" defer></script>
+<script type="text/javascript" src="/scripts/theme-changer.js" crossorigin="anonymous" defer></script>
 <script type="text/javascript" src="/scripts/image-show.js" integrity="sha512-nvHl7jQO5YAE/K8KUPwF0m1Oq2mT6I8hNZYby4abaxIuJe6F60L1BDtYsJYB/1+A7iExW+i7YREL886qzCJt7A==" crossorigin="anonymous" defer></script>
 <script type="text/javascript" src="/scripts/back-to-top.js" integrity="sha512-yih1opqueA2DkNTsRo8JG7r/haDe3VaHpV08Vs79tDYI9Goe+QpDNSPjpZDszDBQOrIIX7ZKZA4QJ0J+fxkn5w==" crossorigin="anonymous" defer></script>
 <script type="text/javascript" src="/scripts/keyboard.js" integrity="sha512-SNOGJfHYYR4z4q+1pq687RYfhN0IOQgBRs9roXVLHajlUNKP3e9O9uDcFwYiXuKSJb1v7nqfje2kybfI1VNRkw==" crossorigin="anonymous" defer></script>
diff --git a/src/_header.html b/src/_header.html
index e05de81..b6929a2 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -27,7 +27,7 @@
 	<nav id="sidebar">
 		<nav id="header">
 			<a href="/">Home</a>
-			<img id="expandNavbarBtn" class="unzoomable btn setting-btn icon" src="/img/layout-navbar-collapse.svg" alt="Expand navbar">
+			<img id="expandNavbarBtn" class="unzoomable btn icon" src="/img/layout-navbar-collapse.svg" alt="Expand navbar">
 			<script type="text/javascript" src="/scripts/expand-navbar.js" integrity="sha512-R9CnFPK6yeDa1BiiYqZ87CB7Hp40D/tWsOdGK5LGWq1g3SxXaajPbrV165o3swckHRJt6Txec/adR7qc/zxVuw==" crossorigin="anonymous" defer></script>
 		</nav>
 
@@ -53,8 +53,8 @@
 		</nav>
 
 		<nav id="settingsWrapper">
-			<img id="changeThemeBtn" class="unzoomable btn setting-btn icon" src="/img/sun.svg" alt="Toggle theme">
-			<img id="changeWidthBtn" class="unzoomable btn setting-btn icon" src="/img/viewport-wide.svg" alt="Toggle full width">
+			<div id="changeThemeBtn" class="btn setting-btn">Light<br>theme</div>
+			<div id="changeWidthBtn" class="btn setting-btn">Wide<br>article</div>
 		</nav>
 
 		<nav id="footer">
@@ -77,4 +77,4 @@
 	</nav>
 
 	<article>
-		<script type="text/javascript" src="/scripts/page-width.js" integrity="sha512-ncBZZFJ7h//aUts/X1Wvmp6v1DGlfK6cpDW7td4u1YKVIl16uedg70KLP+WQi5KUcJHSV4V+N1fg6jgrGEdX9w==" crossorigin="anonymous" defer></script>
+		<script type="text/javascript" src="/scripts/page-width.js" crossorigin="anonymous" defer></script>
diff --git a/src/scripts/page-width.js b/src/scripts/page-width.js
index 38add7c..6d700d0 100644
--- a/src/scripts/page-width.js
+++ b/src/scripts/page-width.js
@@ -2,7 +2,7 @@ const widthBtn = document.getElementById('changeWidthBtn');
 const articleElem = document.getElementsByTagName('article')[0];
 
 if (localStorage.getItem('width') === 'wide') {
-	widthBtn.src = '/img/viewport-narrow.svg';
+	widthBtn.innerHTML = 'Narrow<br>article';
 	articleElem.classList.add('noMaxWidth');
 }
 
@@ -10,11 +10,11 @@ widthBtn.onclick = function() {
 	articleElem.classList.toggle('noMaxWidth');
 
 	if (localStorage.getItem('width') !== 'norm') {
-		widthBtn.src = '/img/viewport-wide.svg';
+		widthBtn.innerHTML = 'Wide<br>article';
 		localStorage.setItem('width', 'norm');
 	}
 	else {
-		widthBtn.src = '/img/viewport-narrow.svg';
+		widthBtn.innerHTML = 'Narrow<br>article';
 		localStorage.setItem('width', 'wide');
 	}
 }
diff --git a/src/scripts/theme-changer.js b/src/scripts/theme-changer.js
index 39eedc9..94eb61f 100644
--- a/src/scripts/theme-changer.js
+++ b/src/scripts/theme-changer.js
@@ -1,19 +1,17 @@
 const themeBtn = document.getElementById('changeThemeBtn');
 
 if (darkThemeStyle.disabled)
-	themeBtn.src = '/img/moon.svg';
-
-themeBtn.style.display = 'initial';
+	themeBtn.innerHTML = 'Dark<br>theme';
 
 themeBtn.onclick = function() {
 	darkThemeStyle.disabled = !darkThemeStyle.disabled;
 
 	if (localStorage.getItem('theme') !== 'light') {
-		themeBtn.src = '/img/moon.svg';
+		themeBtn.innerHTML = 'Dark<br>theme';
 		localStorage.setItem('theme', 'light');
 	}
 	else {
-		themeBtn.src = '/img/sun.svg';
+		themeBtn.innerHTML = 'Light<br>theme';
 		localStorage.setItem('theme', 'dark');
 	}
 }
diff --git a/src/styles.css b/src/styles.css
index 04425e0..a917f5e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -131,7 +131,6 @@ img {
   .file-icon        { min-width: 1.3em; vertical-align: text-bottom; }
   .borderless, .oldschool-badge, .file-icon { border: none; }
 
-  .setting-btn { border: none; vertical-align: middle; }
   .btn:hover   { cursor: pointer; }
 
   /* image-show.js */
@@ -325,7 +324,23 @@ dt, dd {
         border-bottom: none;
         margin: 0.58em 0 1em 0;
         font-size: 1.2em;
+        line-height: 1em;
+        /* Thanks https://stackoverflow.com/a/4407335/12036073 */
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Safari */
+        -khtml-user-select: none; /* Konqueror HTML */
+        -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+        user-select: none;
       }
+      .setting-btn {
+          font-size: 0.5em;
+          text-align: center;
+          display: inline-block;
+          line-height: 1em;
+          border: 1px solid var(--border-color);
+          padding: 0.2em 0.3em;
+        }
     #footer {
         font-size: 0.7em;
         overflow-x: hidden;