diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css index a47e3f5..0c8bd8a 100644 --- a/assets/css/src/footer.css +++ b/assets/css/src/footer.css @@ -1,11 +1,15 @@ #main-footer { position: fixed; bottom: 0; - width: 100%; box-sizing: border-box; - padding-bottom: 3px; + padding: 3px var(--unit--horizontal) 6px var(--unit--horizontal); + + border-bottom: 0; +} +.main-footer--background { + border-top: 1px solid #eee; + border-right: 1px solid #eee; background-color: #000; - padding-bottom: 6px; } [data-template="home"] #main-footer { position: fixed; @@ -13,10 +17,8 @@ bottom: 0; } -#main-footer ul { - display: flex; - justify-content: center; - gap: calc(2 * var(--unit--horizontal)); +#main-footer li:not(.open-nav-wrapper) { + display: none; } #main-footer button.open-nav { @@ -24,6 +26,9 @@ } @media screen and (min-width: 640px) { + #main-footer li { + display: block !important; + } #main-footer { position: fixed; left: 0; diff --git a/assets/css/src/header.css b/assets/css/src/header.css index 770d859..02f6909 100644 --- a/assets/css/src/header.css +++ b/assets/css/src/header.css @@ -14,7 +14,7 @@ main { } #logo * { - font-size: 26.65vw; + font-size: 25.3vw; font-weight: var(--font-weight-extra-bold); } @@ -22,7 +22,7 @@ main { height: 20vw; width: 100%; box-sizing: border-box; - padding-right: 1vw; + padding-right: 3vw; display: flex; justify-content: flex-end; align-items: center; @@ -54,7 +54,7 @@ main { position: relative; height: 100svh; box-sizing: border-box; - padding-top: calc(var(--unit--vertical-relative) * 9); + padding-top: calc(var(--unit--vertical-relative) * 7); display: flex; flex-direction: column; @@ -65,55 +65,35 @@ main { overflow: auto; } -/* ================= ENTRY BTNS ================= */ -#entry-btns { - position: sticky; - position: -webkit-sticky; - top: calc(var(--unit--vertical) * 4); - height: var(--entry-btns-height); - display: flex; - justify-content: space-between; -} -[data-template="info"] #entry-btns { - top: calc(var(--unit--vertical) * 4); -} - -[data-template="home"] .entry-btn { - align-items: start; -} - button.toggle.left::after, button.toggle.right::before { transition: all 0.5s var(--curve-sine); content: "+"; } -#entry-btns.minimized { - color: #000; -} -#entry-btns.minimized .entry-btn--left::before, -#entry-btns.minimized .entry-btn--right::after { - background-color: var(--color-secondary); +.page-cover .links { + position: absolute; + bottom: 8px; + padding-left: calc(5rem + var(--unit--horizontal)); + width: 100%; + box-sizing: border-box; } -#entry-btns.minimized .entry-btn::before, -#entry-btns.minimized .entry-btn::after { - font-weight: bold; -} - -#entry-btns.minimized .entry-btn--left { - padding-right: 4px; - margin-left: calc(-4px - var(--width)); -} -#entry-btns.minimized .entry-btn--right { - padding-left: 4px; - margin-right: calc(-4px - var(--width)); +.page-cover .links li { + display: inline-block; + margin-right: var(--unit--horizontal); } @media screen and (min-width: 640px) { body:not([data-template="home"]) #main-header { width: var(--body-padding); } + #logo * { + font-size: 26.65vw; + } + #logo span { + padding-right: 1vw; + } body:not([data-template="home"]) #logo * { font-size: 6vw; } @@ -144,7 +124,7 @@ button.toggle.right::before { height: initial; } - #entry-btns { + .page-cover .links { display: none; } } diff --git a/assets/js/script.js b/assets/js/script.js index 2c8f1fa..8cff1ae 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -9,16 +9,36 @@ function getUnit(id) { return pxUnit; } -function throttle(callback, limit) { - let waiting = false; +// Throttle found here : https://gist.github.com/ionurboz/51b505ee3281cd713747b4a84d69f434 +function throttle(func, wait, options) { + var context, args, result; + var timeout = null; + var previous = 0; + if (!options) options = {}; + var later = function () { + previous = options.leading === false ? 0 : Date.now(); + timeout = null; + result = func.apply(context, args); + if (!timeout) context = args = null; + }; return function () { - if (!waiting) { - callback.apply(this, arguments); - waiting = true; - setTimeout(function () { - waiting = false; - }, limit); + var now = Date.now(); + if (!previous && options.leading === false) previous = now; + var remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0 || remaining > wait) { + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + previous = now; + result = func.apply(context, args); + if (!timeout) context = args = null; + } else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining); } + return result; }; } @@ -47,6 +67,17 @@ function toggleLogoState() { document.querySelector("#main-header").classList.remove("minimized"); } } +function toggleFooterState() { + if (scrollY > 90) { + document + .querySelector("#main-footer") + .classList.add("main-footer--background"); + } else { + document + .querySelector("#main-footer") + .classList.remove("main-footer--background"); + } +} function fixFootNotes() { const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]'); @@ -108,9 +139,13 @@ document.addEventListener("DOMContentLoaded", () => { top: 0, }); - window.addEventListener("scroll", () => { + const handleScroll = throttle(() => { toggleLogoState(); - }); + if (window.innerWidth <= 680) { + toggleFooterState(); + } + }, 100); + window.addEventListener("scroll", handleScroll); setWindowHeightFactor(); window.addEventListener("resize", () => { @@ -168,6 +203,4 @@ document.addEventListener("DOMContentLoaded", () => { navOverlay.addEventListener("click", () => { closeNav(); }); - - subscribeBtn.addEventListener("click", showSubscribeField); }); diff --git a/site/snippets/cover.php b/site/snippets/cover.php index 0b06c07..6567566 100644 --- a/site/snippets/cover.php +++ b/site/snippets/cover.php @@ -15,4 +15,24 @@ $isOpen = isset($isOpen) ? $isOpen : false; text() ?> + \ No newline at end of file diff --git a/site/snippets/footer.php b/site/snippets/footer.php index a51b9c3..92b26ca 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -1,7 +1,7 @@