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