eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Fix animations for narrow screen widths

Browse source
This commit is contained in:
Eryn Wells 2022-09-11 10:53:07 -07:00
parent 3b74c3a256
commit ea43893d4a
1 changed files with 48 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

57
content/home.css
View file

@ -1,5 +1,5 @@
:root { :root {
--animation-left-offset: 6px; --animation-offset: 6px;
--animation-duration: 0.7s; --animation-duration: 0.7s;
} }
@ -39,13 +39,13 @@ main .grid {
} }
@media (max-width: 450px) { @media (max-width: 450px) {
main .grid { main .grid {
gap: 1rem 0;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: repeat(3, max-content); grid-template-rows: repeat(3, max-content);
grid-template-areas: grid-template-areas:
"title" "title"
"nav" "blurb"
"blurb"; "nav";
margin-block-start: 5vh;
text-align: center; text-align: center;
} }
} }
@ -70,24 +70,33 @@ main p {
#content { grid-area: blurb } #content { grid-area: blurb }
#nav { grid-area: nav } #nav { grid-area: nav }
#title, #content, #nav { overflow: none; }
#title > *, #content > *, #nav > * { position: relative; } #title > *, #content > *, #nav > * { position: relative; }
#title > * { #title > * {
animation: left-fade-in var(--animation-duration) ease-in-out; animation: left-fade-in var(--animation-duration) ease-in-out;
} }
@media (max-width: 450px) {
#title > * {
animation: top-fade-in var(--animation-duration) ease-in-out;
}
}
#content > *, #nav > * { #content > *, #nav > * {
animation: right-fade-in var(--animation-duration) ease-in-out; animation: right-fade-in var(--animation-duration) ease-in-out;
} }
@media (max-width: 450px) {
#content > *, #nav > * {
animation: bottom-fade-in var(--animation-duration) ease-in-out;
}
}
@keyframes left-fade-in { @keyframes left-fade-in {
from { from {
opacity: 0%; opacity: 0%;
left: var(--animation-left-offset); left: var(--animation-offset);
} }
33% { 33% {
opacity: 0%; opacity: 0%;
left: var(--animation-left-offset); left: var(--animation-offset);
} }
to { to {
opacity: 100%; opacity: 100%;
@ -98,11 +107,11 @@ main p {
@keyframes right-fade-in { @keyframes right-fade-in {
from { from {
opacity: 0%; opacity: 0%;
left: calc(-1 * var(--animation-left-offset)); left: calc(-1 * var(--animation-offset));
} }
33% { 33% {
opacity: 0%; opacity: 0%;
left: calc(-1 * var(--animation-left-offset)); left: calc(-1 * var(--animation-offset));
} }
to { to {
opacity: 100%; opacity: 100%;
@ -110,6 +119,36 @@ main p {
} }
} }
@keyframes top-fade-in {
from {
opacity: 0%;
bottom: calc(-1 * var(--animation-offset));
}
33% {
opacity: 0%;
bottom: calc(-1 * var(--animation-offset));
}
to {
opacity: 100%;
bottom: 0;
}
}
@keyframes bottom-fade-in {
from {
opacity: 0%;
bottom: var(--animation-offset);
}
33% {
opacity: 0%;
bottom: var(--animation-offset);
}
to {
opacity: 100%;
bottom: 0;
}
}
.platter { .platter {
padding: 1.5rem 3rem; padding: 1.5rem 3rem;
} }