From 13d2f683c797a93aacce82098d8319fd474e2539 Mon Sep 17 00:00:00 2001 From: Ross Trottier Date: Fri, 21 Jun 2024 14:56:00 -0600 Subject: [PATCH] header animation - footer --- assets/js/st-nav.js | 3 ++ footer.php | 41 +++++++++++++++- style.css | 116 ++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 155 insertions(+), 5 deletions(-) diff --git a/assets/js/st-nav.js b/assets/js/st-nav.js index 13851d7..67dcd01 100644 --- a/assets/js/st-nav.js +++ b/assets/js/st-nav.js @@ -16,6 +16,7 @@ closeButton.addEventListener('click', () => { const iconBar = document.querySelector('.st-header-icon-bar'); const siteTitle = document.querySelector('.st-site-title'); +const header = document.querySelector('.st-header'); let lastScrollPosition = 0; window.addEventListener('scroll', function(event) { @@ -24,10 +25,12 @@ window.addEventListener('scroll', function(event) { if(scrollPosition < 5) { iconBar.classList.remove('st-icon-bar-sticky'); siteTitle.classList.remove('st-title-scrolled'); + siteTitle.classList.remove('st-title-scrolled-complete'); } else { if(lastScrollPosition < 5) { iconBar.classList.add('st-icon-bar-sticky'); siteTitle.classList.add('st-title-scrolled'); + header.classList.add('st-header-scrolled'); } } diff --git a/footer.php b/footer.php index c07c0fa..8b692bb 100644 --- a/footer.php +++ b/footer.php @@ -1,5 +1,44 @@ diff --git a/style.css b/style.css index eb81585..6257d15 100644 --- a/style.css +++ b/style.css @@ -42,8 +42,8 @@ h1 { text-align: center; margin-top: 0; font-size: 3.3rem; - transform: scale(1, 1) translateX(0); - transition: all 300ms; + transform: scale(1, 1); + transition: transform 300ms; transform-origin: top left; } @@ -78,6 +78,10 @@ SECTIONS top: 0; } +.st-header-scrolled { + pointer-events: none; +} + .st-header-icon-bar { width: 100%; display: flex; @@ -106,10 +110,11 @@ SECTIONS background: #fff; box-shadow: 0 0 3px rgb(0 0 0 / 30%); margin-left: auto; + pointer-events: auto; } /* nav */ - +.st-search-overlay, .st-nav { position: fixed; background: #fff; @@ -121,6 +126,7 @@ SECTIONS transform: translateX(0); transition: transform ease-in-out 250ms; grid-template-rows: minmax(2.25rem, 3rem) 1fr; + pointer-events: auto; } .st-nav-is-open { @@ -165,6 +171,91 @@ SECTIONS height: 3rem; } +/* footer */ + +.st-footer { + color: white; + background: #0b4fa0; + display: grid; + grid-template-columns: minmax(1em, 1fr) minmax(130px, 250px) minmax(130px, 250px) minmax(1em, 1fr); + grid-template-areas: + "lpad socials partners rpad" + "lpad menu logo rpad" + "lpad copy copy rpad"; + grid-auto-rows: max-content; +} + +.st-footer-socials { + grid-area: socials; + display: flex; + flex-direction: column; +} + +.st-footer-icon { + font-size: 1.5rem; + color: #fff; + margin-top: 1.5em; + color: #270BA1; +} + +.st-footer-copyright { + grid-area: copy; + font-size: .6rem; + text-align: right; + background: #270BA1; + padding: .2em .5em .2em; + margin-bottom: 0; +} + +.st-footer-site-title { + grid-area: logo; + text-transform: uppercase; + writing-mode: vertical-lr; + align-self: end; + justify-self: end; + margin: 0; + line-height: 1; + color: #270BA1; +} + +.st-footer-partners { + grid-area: partners; + text-align: right; +} + +.st-footer-partners__title { + margin-bottom: 0; +} + +.st-footer-partners__list { + list-style: none; + margin-top: .2em; +} + +.st-footer-partners__list-item { + font-size: .80rem; +} + +.st-footer-partners__list-item a { + text-decoration: none; + color: #fff; +} + +.st-footer-menu { + grid-area: menu; +} + +.st-footer-nav-links { + list-style: none; + margin: 0; + padding: 0; +} + +.st-footer-nav-links a { + text-decoration: none; + color: #fff; +} + /* ============================ COMPONENTS @@ -200,6 +291,7 @@ COMPONENTS font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; + font-weight: 600; } .st-article-section-main-article__title { @@ -254,6 +346,7 @@ COMPONENTS font-size: .6rem; text-transform: uppercase; letter-spacing: 1px; + font-weight: 600; } .st-article-section-sub-article__text-container { @@ -283,6 +376,8 @@ COMPONENTS cursor: pointer; border-radius: 100px; color: white; + font-weight: 500; + letter-spacing: 1px; } .st-chip-primary { @@ -290,5 +385,18 @@ COMPONENTS } .st-chip-secondary { - background: #A05C0B; + background: #FFDB12; + color: #454545; +} + +.st-chip-secondary:hover, +.st-chip-secondary:active { + background: #270BA1; + color: #fff; +} + +.st-chip-primary:hover, +.st-chip-primary:active { + background: #FFF; + color: #454545; } \ No newline at end of file