From ab663e9f4b83df8587afa41b046eaafe7a699b8c Mon Sep 17 00:00:00 2001 From: Naomi Carrigan Date: Tue, 8 Jul 2025 16:32:40 -0700 Subject: [PATCH] feat: add full social list to footer (#4) ### Explanation _No response_ ### Issue _No response_ ### Attestations - [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [x] I have pinned the dependencies to a specific patch version. ### Style - [x] I have run the linter and resolved any errors. - [x] My pull request uses an appropriate title, matching the conventional commit standards. - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: https://git.nhcarrigan.com/nhcarrigan/website-headers/pulls/4 Co-authored-by: Naomi Carrigan Co-committed-by: Naomi Carrigan --- 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");