header animation - footer
This commit is contained in:
parent
6cb0c42521
commit
13d2f683c7
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
41
footer.php
41
footer.php
@ -1,5 +1,44 @@
|
||||
<footer class="st-footer st-main-grid">
|
||||
|
||||
<div class="st-footer-socials">
|
||||
<a href="https://twitter.com/slowtwitch" class="st-footer-icon"><i class="fa fa-twitter"></i></a>
|
||||
<a href="https://vimeo.com/slowtwitch" class="st-footer-icon"><i class="fa fa-vimeo"></i></a>
|
||||
<a href="https://www.facebook.com/slowtwitch/" class="st-footer-icon"><i class="fa fa-facebook"></i></a>
|
||||
<a href="https://www.youtube.com/slowtwitch" class="st-footer-icon"><i class="fa fa-youtube"></i></a>
|
||||
</div>
|
||||
<div class="st-footer-partners">
|
||||
<h4 class="st-footer-partners__title">Our Partners</h4>
|
||||
<ul class="st-footer-partners__list">
|
||||
<li class="st-footer-partners__list-item"><a href="https://www.piedmontese.com/">Certified Piedmontese</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="http://www.cervelo.com/en/bikes/p-series">Cervelo</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://goodlifeproteins.com/discount/slowtwitch20">Goodlife Brands</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://hedcycling.com/">HED</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://jakroo.com/">Jakroo</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://lazersport.us/">Lazer</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://profile-design.com/">Profile Design</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://www.sailfish.com/en">Sailfish</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://bike.shimano.com/en-US/home.html">Shimano</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="http://speedplay.com/">Speedplay</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://ventumracing.com/">Ventum</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://www.wahoofitness.com/">Wahoo Fitness</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://www.sram.com/en/zipp">Zipp</a></li>
|
||||
<li class="st-footer-partners__list-item"><a href="https://zootsports.com/">Zoot Sports</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="st-footer-menu">
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'menu' => 'primary',
|
||||
'container' => '',
|
||||
'theme_location' => 'primary',
|
||||
'items_wrap' => '<ul class="st-footer-nav-links">%3$s</ul>'
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
<h1 class="st-footer-site-title">Slowtwitch</h1>
|
||||
<p class="st-footer-copyright">© Slowtwitch - Design by Federated Computer</p>
|
||||
</footer>
|
||||
<?php wp_footer() ?>
|
||||
</body>
|
||||
|
||||
116
style.css
116
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user