fix: padding + add: top/bottom buttons

assets/script.js

@@ -3,11 +3,14 @@ if (typeof age !== 'undefined') {
     age.textContent = difference.toFixed(4);
 }
 
-if (typeof arrow !== 'undefined') {
-    arrow.addEventListener('click', () => {
-        window.scrollTo({
-            top: document.body.scrollHeight,
-            behavior: 'smooth'
+if (typeof arrow_top !== 'undefined' && typeof arrow_bottom !== 'undefined') {
+    [arrow_top, arrow_bottom].forEach(arrow => {
+        arrow.addEventListener('click', () => {
+            console.warn('scroll!')
+            window.scrollTo({
+                top: arrow === arrow_top ? 0 : document.body.scrollHeight,
+                behavior: 'smooth'
+            });
         });
     });
 }
@@ -24,10 +27,9 @@ smoothScrollLinks.forEach(link => {
     });
 });
 
-const switchTheme = document.getElementById('switch-theme');
 const theme = localStorage.getItem('theme');
 
-switchTheme?.addEventListener('click', () => {
+switch_theme?.addEventListener('click', () => {
     if (theme === 'dark') {
         localStorage.setItem('theme', 'light');
     } else {

assets/style.css

@@ -29,7 +29,7 @@ body#centered {
     align-content: center;
 }
 
-body>div {
+body>div:not([id]) {
     display: grid;
     overflow-y: auto;
     place-items: center;
@@ -37,13 +37,13 @@ body>div {
 
     float: left;
     height: 100%;
+    border: 1px solid;
     width: calc(100% / var(--columns));
 }
 
 body>div:first-child #arrow {
     bottom: 0;
     width: 100%;
-    height: 2em;
     display: none;
     cursor: pointer;
 
@@ -88,8 +88,16 @@ ol li::before {
     content: "✉ ";
 }
 
-#switch-theme {
+#switch_theme {
     color: blue;
     cursor: pointer;
     text-decoration: underline;
+}
+
+body>#arrows {
+    display: none;
+}
+
+body>#arrows>div {
+    padding: 0.5em;
 }

assets/style.dark.css

@@ -18,7 +18,7 @@ body.dark>div:first-child #arrow {
     background-color: #fff;
 }
 
-body > div:first-child #arrow {
+body>div:first-child #arrow {
     background-color: var(--color);
     color: var(--background-color);
 }
@@ -27,6 +27,11 @@ body.dark a {
     color: var(--color);
 }
 
-body.dark #switch-theme {
+body.dark #switch_theme {
     color: var(--color);
+}
+
+body.dark>#arrows>div {
+    background-color: var(--color);
+    color: var(--background-color);
 }

assets/style.mobile.css

@@ -1,9 +1,25 @@
 @media screen and (max-width: 767px) {
-    body > div {
+    body>div {
         width: 100% !important;
     }
 
-    body > div:first-child #arrow {
-        display: block !important;
+    body>div>div#inner {
+        padding: 0.5em !important;
+    }
+
+    body>#arrows {
+        display: flex !important;
+        width: 100% !important;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+    }
+
+    body>#arrows>div {
+        width: 50%;
+        text-align: center;
+        background-color: black;
+        color: white;
+        cursor: pointer;
     }
 }

index.html

@@ -46,9 +46,7 @@
             </ul>
 
             <h2><a href="#projects">go to top</a></h2>
-            <h2 id="switch-theme">switch theme</h2>
-            
-            <div id="arrow">▼</div>
+            <h2 id="switch_theme">switch theme</h2>
         </div>
     </div>
     <div>
@@ -96,7 +94,7 @@
                 </li>
             </ul>
 
-            <h2 id="music-taste">my music taste</h2>
+            <h2 id="music_taste">my music taste</h2>
             <p>i'm a fan of:</p>
             <ul>
                 <li>
@@ -220,6 +218,11 @@
                 they are the only ones that respect my privacy. i also use a vpn and a password manager.</p>
         </div>
     </div>
+    
+    <div id="arrows">
+        <div id="arrow_top">▲</div>
+        <div id="arrow_bottom">▼</div>
+    </div>
 </body>
 
 </html>