- Other infos
+ Other Informations
Thanks to /tg/station and every wiki contributor who did most of
diff --git a/src/scripts/pages/welcome.ts b/src/scripts/pages/welcome.ts
index 112a895..0229957 100644
--- a/src/scripts/pages/welcome.ts
+++ b/src/scripts/pages/welcome.ts
@@ -15,16 +15,22 @@ function expandPage(root: HTMLElement) {
}
export function welcomeScript(root: HTMLElement): void {
- const expandLink = document.getElementById("welcome_expand");
- expandLink.addEventListener("click", async () => {
- expandPage(root);
- const featureDiv = root.querySelector(".features");
- await nextAnimationFrame();
- featureDiv.scrollIntoView({
- block: "start",
- inline: "nearest",
- behavior: "smooth",
+ const buttonContainer = root.querySelector(".action_buttons");
+ root.querySelectorAll("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);
+ await nextAnimationFrame();
+ sec.scrollIntoView({
+ block: "start",
+ inline: "nearest",
+ behavior: "smooth",
+ });
});
+ buttonContainer.appendChild(button);
});
}
diff --git a/style/pages/welcome.scss b/style/pages/welcome.scss
index cbbb818..042049c 100644
--- a/style/pages/welcome.scss
+++ b/style/pages/welcome.scss
@@ -70,4 +70,14 @@
margin: 10px;
}
}
+
+ .action_buttons {
+ padding: 10pt;
+ text-align: center;
+
+ button {
+ font-size: 12pt;
+ padding: 10pt 12pt;
+ }
+ }
}
diff --git a/style/ui.scss b/style/ui.scss
index 7187226..930421c 100644
--- a/style/ui.scss
+++ b/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%);
+ }
+}