Browse Source

Better home

master
Hamcha 1 year ago
parent
commit
a962ed7d54
Signed by: Hamcha GPG Key ID: 41467804B19A3315
  1. 16
      index.html
  2. 24
      src/scripts/pages/welcome.ts
  3. 10
      style/pages/welcome.scss
  4. 15
      style/ui.scss

16
index.html

@ -72,11 +72,13 @@
are not as polished as they should be.
</li>
</ul>
<div class="action_buttons">
<button id="welcome_expand">Extra features</button>
</div>
<p>
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 class="features hidden">
<div class="features hidden" data-name="Extra features">
<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

24
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<HTMLDivElement>(".features");
await nextAnimationFrame();
featureDiv.scrollIntoView({
block: "start",
inline: "nearest",
behavior: "smooth",
const buttonContainer = root.querySelector<HTMLElement>(".action_buttons");
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);
await nextAnimationFrame();
sec.scrollIntoView({
block: "start",
inline: "nearest",
behavior: "smooth",
});
});
buttonContainer.appendChild(button);
});
}

10
style/pages/welcome.scss

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

15
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%);
}
}

Loading…
Cancel
Save