major UI/UX improvements
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
parent
93539c8376
commit
6efd47c6c6
17 changed files with 739 additions and 458 deletions
14
public/script/header.js
Normal file
14
public/script/header.js
Normal 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(); });
|
|
@ -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");
|
||||
}
|
||||
});
|
|
@ -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("");
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue