(expand-navbar) Added special icons for it and updated styling

4 files changed, 14 insertions, 12 deletions

diff --git a/src/_header.html b/src/_header.html
index 1bba6ad..9f5d0d3 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -27,7 +27,7 @@
 	<nav id="sidebar">
 		<nav id="header">
 			<a href="/">Home</a>
-			<div id="expandNavbarBtn" class="unzoomable btn setting-btn">&#x25B2;</div>
+			<div id="expandNavbarBtn" class="unzoomable btn">&#xf7d9;</div>
 			<script type="text/javascript" src="/scripts/expand-navbar.js" crossorigin="anonymous" defer></script>
 		</nav>
 
diff --git a/src/font/tabler-icons-subset.ttf b/src/font/tabler-icons-subset.ttf
index 1f9865c..1914116 100644
--- a/src/font/tabler-icons-subset.ttf
+++ b/src/font/tabler-icons-subset.ttf
diff --git a/src/scripts/expand-navbar.js b/src/scripts/expand-navbar.js
index c254ae5..5f7da5a 100644
--- a/src/scripts/expand-navbar.js
+++ b/src/scripts/expand-navbar.js
@@ -2,7 +2,7 @@ const expandBtn = document.getElementById('expandNavbarBtn');
 const sidebarElem = document.getElementById('sidebar');
 
 if (localStorage.getItem('navbar') === 'hidden' || window.innerWidth <= 610) {
-	expandBtn.innerHTML = '&#x25BC;';
+	expandBtn.innerHTML = '&#xf7d6;';
 	sidebarElem.classList.add('sidebar-hidden');
 }
 
@@ -10,11 +10,11 @@ expandBtn.onclick = function() {
 	sidebarElem.classList.toggle('sidebar-hidden');
 
 	if (!sidebarElem.classList.contains('sidebar-hidden')) {
-		expandBtn.innerHTML = '&#x25B2;';
+		expandBtn.innerHTML = '&#xf7d9;';
 		if (window.innerWidth > 610) localStorage.setItem('navbar', 'norm');
 	}
 	else {
-		expandBtn.innerHTML = '&#x25BC;';
+		expandBtn.innerHTML = '&#xf7d6;';
 		if (window.innerWidth > 610) localStorage.setItem('navbar', 'hidden');
 	}
 }
diff --git a/src/styles.css b/src/styles.css
index 531cad5..9aa1a39 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -136,6 +136,15 @@ img {
   .file-icon        { min-width: 1.3em; vertical-align: text-bottom; }
   .borderless, .oldschool-badge, .file-icon { border: none; }
 
+  .btn {
+      /* 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;
+    }
   .btn:hover   { cursor: pointer; }
   .btn:active  { transform: scale(0.9); }
 
@@ -338,13 +347,6 @@ dt, dd {
           line-height: 1em;
           border: 1px solid var(--border-color);
           padding: 0.2em 0.3em 0.4em;
-          /* 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;
         }
     #footer {
         font-size: 0.7em;
@@ -355,7 +357,7 @@ dt, dd {
     #footer > * { white-space: nowrap; }
 
     /* expand-navbar.js */
-    #expandNavbarBtn                { float: right; margin: 0.6em 0 0 1em; }
+    #expandNavbarBtn                { float: right; margin-left: 1em; }
     .sidebar-hidden                 { min-height: auto; position: absolute; }
     .sidebar-hidden > :not(#header) { display: none; }
     .sidebar-hidden + .noMaxWidth   { margin-top: 6em; }