Better home

index.html

@@ -72,11 +72,13 @@
                   are not as polished as they should be.
                 </li>
               </ul>
-              <div class="action_buttons">
+              <p>
-                <button id="welcome_expand">Extra features</button>
+                You can click any of the top icons to jump to that guide, or
+                check out any of these about this handbook:
+              </p>
+              <div class="action_buttons"></div>
             </div>
-            </div>
+            <div class="features hidden" data-name="Extra features">
-            <div class="features hidden">
               <h2>
                 Extra Features
               </h2>
@@ -94,12 +96,10 @@
                   <img
                     src="assets/images/welcome/bs-local.png"
                     style="width: 40%;"
-                    loading="lazy"
                   />
                   <img
                     src="assets/images/welcome/bs-global.png"
                     style="width: 40%;"
-                    loading="lazy"
                   />
                 </div>
                 <p>
@@ -121,9 +121,9 @@
                 </p>
               </div>
             </div>
-            <div class="credits hidden">
+            <div class="credits hidden" data-name="Other infos">
               <h2>
-                Other infos
+                Other Informations
               </h2>
               <p>
                 Thanks to /tg/station and every wiki contributor who did most of

src/scripts/pages/welcome.ts

@@ -15,17 +15,23 @@ function expandPage(root: HTMLElement) {
 }
 
 export function welcomeScript(root: HTMLElement): void {
-  const expandLink = document.getElementById("welcome_expand");
+  const buttonContainer = root.querySelector<HTMLElement>(".action_buttons");
-  expandLink.addEventListener("click", async () => {
+  root.querySelectorAll<HTMLDivElement>("div[data-name]").forEach((sec) => {
+    const { name } = sec.dataset;
+    const button = document.createElement("button");
+    button.className = "pretty-button";
+    button.appendChild(document.createTextNode(name));
+    button.addEventListener("click", async () => {
       expandPage(root);
-    const featureDiv = root.querySelector<HTMLDivElement>(".features");
       await nextAnimationFrame();
-    featureDiv.scrollIntoView({
+      sec.scrollIntoView({
         block: "start",
         inline: "nearest",
         behavior: "smooth",
       });
     });
+    buttonContainer.appendChild(button);
+  });
 }
 
 export default { welcomeScript };

style/pages/welcome.scss

@@ -70,4 +70,14 @@
       margin: 10px;
     }
   }
+
+  .action_buttons {
+    padding: 10pt;
+    text-align: center;
+
+    button {
+      font-size: 12pt;
+      padding: 10pt 12pt;
+    }
+  }
 }

style/ui.scss

@@ -223,3 +223,18 @@ noscript {
     max-width: 32px;
   }
 }
+
+.pretty-button {
+  font-family: "Iosevka Aile Web", sans-serif;
+  background-color: darken($nanotrasen, 10%);
+  border: 1px solid lighten($nanotrasen, 30%);
+  color: white;
+  padding: 6pt 10pt;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all 100ms;
+  &:hover {
+    background-color: $nanotrasen;
+    border: 1px solid lighten($nanotrasen, 50%);
+  }
+}