Fix floating buttons

app.js

@@ -26,7 +26,8 @@ function activeSection(section) {
     hideAll();
 
     const targetSection = document.getElementById(section);
-    targetSection.style.display = "block";
+    targetSection.focus();
+    targetSection.classList.add("selected");
     setTimeout(() => {
         targetSection.scrollIntoView({ block: "start", behavior: "smooth" });
     }, 100);
@@ -34,7 +35,8 @@ function activeSection(section) {
 
 function hideAll() {
     document.querySelectorAll(".section").forEach((s) => {
-        s.style.display = "none";
+        s.classList.remove("selected");
+        // s.style.display = "none";
     });
 }
 const HIDDEN_CLASS = "hidden";

build.sh

@@ -125,7 +125,7 @@ echo "
 </script>" >> ./index.html
 
 echo "
-<sidebar class='float-container'>
+<footer>
   <div class='float-btns'>
     <a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' >
       <span>
@@ -139,7 +139,7 @@ echo "
       </span>
     </button>
   </div>
-  </sidebar>" >> ./index.html
+  </footer>" >> ./index.html
 
 echo "
 </body>

layout.css

@@ -0,0 +1,54 @@
+main {
+    display: flex;
+    flex-direction: column;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    flex-grow: 1;
+}
+
+footer {
+    position: sticky;
+    bottom: 0;
+    margin-top: 2rem;
+    flex-shrink: 0;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    align-content: centers;
+}
+
+@container (min-width: 640px) {
+    main {
+        padding-left: 4rem;
+        padding-right: 4rem;
+    }
+}
+
+@container (min-width: 768px) {
+    main {
+        padding-left: 8rem;
+        padding-right: 8rem;
+    }
+}
+
+@container (min-width: 1024px) {
+    main {
+        padding-left: 12rem;
+        padding-right: 12rem;
+    }
+}
+
+@container (min-width: 1280px) {
+    main {
+        padding-left: 14rem;
+        padding-right: 14rem;
+    }
+}
+
+@container (min-width: 1536px) {
+    main {
+        padding-left: 18rem;
+        padding-right: 18rem;
+    }
+}

style.css

@@ -1,9 +1,10 @@
+@import url("/layout.css");
+
 :root {
   color-scheme: light dark;
   --bg-color: light-dark(#fbf1c7, #282828);
   --fg-color: light-dark(#3c3836, #ebdbb2);
 
-
   --bg-color-reverse: light-dark(#3c3836, #ebdbb2);
   --fg-color-reverse: light-dark(#fbf1c7, #282828);
 
@@ -35,60 +36,16 @@ body {
   font-family: "Curier New", monospace;
   margin: 0;
   min-height: 100svh;
-}
 
-main {
-  display: flex;
+  /* display: flex; */
   flex-direction: column;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  /* height: 100svh; */
-
+  justify-content: space-evenly;
 }
 
-@container (min-width: 640px) {
-  main {
-    padding-left: 4rem;
-    padding-right: 4rem;
-
-  }
-}
-
-@container (min-width: 768px) {
-  main {
-    padding-left: 8rem;
-    padding-right: 8rem;
-
-  }
-}
-
-@container (min-width: 1024px) {
-  main {
-    padding-left: 12rem;
-    padding-right: 12rem;
-
-  }
-}
-
-@container (min-width: 1280px) {
-  main {
-    padding-left: 14rem;
-    padding-right: 14rem;
-
-  }
-}
-
-@container (min-width: 1536px) {
-  main {
-    padding-left: 18rem;
-    padding-right: 18rem;
-  }
-}
-
-
 * {
   color: var(--fg-color);
   border: none;
+  box-sizing: border-box;
 }
 
 h1,
@@ -176,14 +133,13 @@ h2 {
 }
 
 img {
-  transition: all .2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 img:hover {
   transform: scale(1.5);
   border: none;
   box-shadow: 5px 4px 10px black;
-
 }
 
 .pager {
@@ -234,25 +190,15 @@ img:hover {
 
 .section {
   display: none;
-}
 
-.float-container {
-
-  position: sticky;
-  top: 0;
-  /* width: 100vw; */
-  /* height: 100vh; */
-
-  display: flex;
-  flex-direction: row;
-  justify-content: end;
-  align-content: centers;
+  &.selected {
+    display: block;
+  }
 }
 
 .float-btns {
-  /* position: static; */
   margin-bottom: 1rem;
-  margin-right: 2rem;
+  margin-right: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;