major UI/UX improvements

Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-18 15:04:04 +00:00
parent 93539c8376
commit 6efd47c6c6
17 changed files with 739 additions and 458 deletions

14
public/script/header.js Normal file
View file

@ -0,0 +1,14 @@
const header_links = document.getElementById("header-links");
const hamburger = document.getElementById("header-links-toggle");
function toggle_header_links() {
header_links.classList.toggle("open");
}
document.addEventListener("click", event => {
if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
header_links.classList.remove("open");
}
});
hamburger.addEventListener("click", event => { toggle_header_links(); });

View file

@ -1,5 +1,4 @@
const header_links = document.getElementById("header-links");
const hamburger = document.getElementById("header-links-toggle");
import "./header.js";
function type_out(e) {
const text = e.innerText;
@ -55,12 +54,3 @@ function fill_list(list) {
fill_list(e);
});
function toggle_header_links() {
header_links.classList.toggle("open");
}
document.addEventListener("click", event => {
if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
header_links.classList.remove("open");
}
});

View file

@ -1,3 +1,5 @@
import "./main.js";
const bg = document.getElementById("background");
bg.style.backgroundImage = `url(${bg.dataset.url})`;
bg.removeAttribute("data-url");
@ -17,11 +19,11 @@ document.getElementById("go-back").addEventListener("click", () => {
apply_funny_bob_to_upcoming_tags();
function apply_funny_bob_to_upcoming_tags() {
upcomingTags = document.querySelectorAll("#type.upcoming");
const upcomingTags = document.querySelectorAll("#type.upcoming");
for (var i = 0; i < upcomingTags.length; i++) {
const tag = upcomingTags[i];
chars = tag.innerText.split("");
result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
const chars = tag.innerText.split("");
const result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
tag.innerHTML = result.join("");
}
}