From 85e5081261eb73602349a96043b72a2181530007 Mon Sep 17 00:00:00 2001 From: Naomi Carrigan Date: Tue, 8 Jul 2025 16:16:28 -0700 Subject: [PATCH] feat: add full social list to footer --- src/index.ts | 144 +++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 117 insertions(+), 27 deletions(-) diff --git a/src/index.ts b/src/index.ts index 6675ad0..0b3da41 100644 --- a/src/index.ts +++ b/src/index.ts @@ -177,11 +177,16 @@ footer { align-items: center; justify-content: space-around; } -#audio-theme-button, #theme-select-button { +#show-socials-button, #theme-select-button { background: none; border: none; cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; color: var(--foreground); + font-size: 1rem; + font-family: 'OpenDyslexic', monospace; +} +#show-socials-button > i, #theme-select-button > i { + font-size: 1.5rem; } a { color: unset; @@ -191,6 +196,37 @@ a { display: flex; align-items: center; } +#social-list { + position: absolute; + bottom: 75px; + left: 0; + right: 0; + width: 100vw; + max-width: 400px; + padding: 10px; + background-color: var(--background); + color: var(--foreground); + border-radius: 10px; + border: 1px solid var(--foreground); + display: none; + z-index: 1000; +} +.social-list-item { + padding: 10px; +} +.social-list-item > a { + display: flex; + align-items: center; + justify-content: space-between; + text-decoration: none; +} +.social-list-divider { + border: 0.5px solid var(--foreground); +} +.social-list-item:hover { + background-color: var(--foreground); + color: var(--background); +} .is-dark { --foreground: #ffb6c1; --background: #2a0a18bb; @@ -217,21 +253,73 @@ const footer = document.createElement("footer"); footer.innerHTML = ` +
+ + + + + + + + + + + + + + + + + +
`; - -// #endregion - // #region Scripts const treeNation = document.createElement("script"); @@ -314,25 +402,6 @@ body?.appendChild(footer); body?.appendChild(treeNationBottom); // #endregion -// #region Audio - -const playButton = document.querySelector("#audio-theme-button"); -const audio = new Audio("https://cdn.nhcarrigan.com/theme.mp3"); -let playing = false; -playButton?.addEventListener("click", () => { - if (playing) { - audio.pause(); - playing = false; - playButton.innerHTML = ""; - } else { - void audio.play(); - playing = true; - playButton.innerHTML = ""; - } -}); - -// #endregion - // #region Theme const themeButton = document.querySelector("#theme-select-button"); @@ -367,6 +436,27 @@ if (prefersDark.matches && localStorage.getItem("theme") !== null) { // #endregion +// #region Social Toggle +const showSocialsButton = document.querySelector( + "#show-socials-button", +); +const socialList = document.querySelector("#social-list"); +const toggleSocials = (): void => { + if (!socialList) { + throw new Error("Social list element not found."); + } + if (socialList.style.display === "block") { + socialList.style.display = "none"; + showSocialsButton?.setAttribute("aria-expanded", "false"); + showSocialsButton?.setAttribute("aria-label", "Show Socials"); + return; + } + socialList.style.display = "block"; + showSocialsButton?.setAttribute("aria-expanded", "true"); + showSocialsButton?.setAttribute("aria-label", "Hide Socials"); +}; +showSocialsButton?.addEventListener("click", toggleSocials); + // #region CTA const cta = document.createElement("dialog"); -- 2.49.0