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

Fix up the home page; make the font size bigger; clean up the layout

Browse source
This commit is contained in:
Eryn Wells 2022-10-25 17:33:03 -04:00
parent 77d677afed
commit 782f613d5a
2 changed files with 43 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

46
content/home.css
View file

@ -1,5 +1,6 @@
:root {
--animation-offset: 6px;
--font-size-max: 12px;
}
body {
@ -16,10 +17,14 @@ h1 {
margin: 0;
padding: 0;
}
@media (max-width: 450px) {
@media (max-width: 599px) {
h1 { font-size: 4.25rem; }
}
html {
font-size: clamp(var(--font-size-min), 2.5vw, var(--font-size-max));
}
main {
margin-block-start: 10vh;
width: inherit;
@ -29,7 +34,7 @@ main .grid {
align-items: baseline;
display: grid;
gap: 0 2rem;
grid-template-columns: min-content 200px;
grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
grid-template-rows: repeat(2, max-content);
grid-template-areas:
"title blurb"
@ -37,7 +42,7 @@ main .grid {
padding-inline: 1em;
width: min-content;
}
@media (max-width: 450px) {
@media (max-width: 599px) {
main .grid {
gap: 1rem 0;
grid-template-columns: 1fr;
@ -54,37 +59,48 @@ main h1 {
letter-spacing: 0.025em;
text-align: end;
}
@media (max-width: 450px) {
@media (max-width: 599px) {
main h1 { text-align: center; }
}
main nav {
nav {
align-items: baseline;
display: flex;
list-style: none;
text-transform: lowercase;
}
main p {
nav > li {
margin-inline-start: 0.5em;
}
nav > li:first-of-type {
margin-inline-start: 0;
}
p {
margin: 0;
}
#title { grid-area: title; }
h1 { grid-area: title; }
#content { grid-area: blurb }
#nav { grid-area: nav }
nav { grid-area: nav }
#title > *, #content > *, #nav > * { position: relative; }
h1, #content > p, nav { position: relative; }
#title > * {
h1 {
animation: left-fade-in var(--transition-duration) ease-in-out;
}
@media (max-width: 450px) {
#title > * {
@media (max-width: 599px) {
h1 {
animation: top-fade-in var(--transition-duration) ease-in-out;
}
}
#content > *, #nav > * {
#content > p, nav {
animation: right-fade-in var(--transition-duration) ease-in-out;
}
@media (max-width: 450px) {
#content > *, #nav > * {
@media (max-width: 599px) {
#content > p, nav {
animation: bottom-fade-in var(--transition-duration) ease-in-out;
}
}