1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 07:05:21 -04:00
jarv.is/components/page-footer/Footer.module.scss

82 lines
1.4 KiB
SCSS

.footer {
width: 100%;
padding: 1.25em 1.5em;
border-top: 1px solid var(--kinda-light);
color: var(--medium-dark);
a {
color: var(--medium-dark);
background: none;
padding-bottom: 0;
}
}
.row {
display: flex;
width: 100%;
max-width: 865px;
margin: 0 auto;
justify-content: space-between;
font-size: 0.85em;
line-height: 2.3;
}
.view_source {
padding-bottom: 2px;
border-bottom: 1px solid;
border-color: var(--light);
&:hover {
border-color: var(--kinda-light);
}
}
.beat {
display: inline-block;
animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
animation-delay: 7.5s; // offset from wave animation
will-change: transform;
}
@media screen and (max-width: 768px) {
.footer {
padding: 1em 1.25em 0;
// Safari iOS menu bar reappears below 44px:
// https://www.eventbrite.com/engineering/mobile-safari-why/
padding-bottom: 45px !important;
// Allows you to scroll below the viewport; default value is visible
overflow-y: scroll;
}
// stack columns on left instead of flexboxing across
.row {
font-size: 0.8em;
display: block;
}
}
@keyframes beat {
0% {
transform: scale(1);
}
2% {
transform: scale(1.25);
}
4% {
transform: scale(1);
}
6% {
transform: scale(1.2);
}
8% {
transform: scale(1);
}
// pause for ~9 out of 10 seconds
100% {
transform: scale(1);
}
}