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

Move home styles to home.css

Browse source
This commit is contained in:
Eryn Wells 2023-08-20 09:48:19 -07:00
parent 3bcdd7edb7
commit ea9fb02aaa
2 changed files with 208 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

207
assets/styles/home.css Normal file
View file

@ -0,0 +1,207 @@
@layer page {
:root {
--animation-offset: 6px;
--font-size-max: 12px;
--line-height: 1.85;
}
body {
display: flex;
font-size: 2rem;
justify-content: center;
margin: auto;
}
h1 {
font-size: 5rem;
line-height: 1.3;
margin: 0;
padding: 0;
}
@media (max-width: 599px) {
h1 {
font-size: 4.25rem;
}
}
header.site h1 { white-space: normal; }
@media (max-width: 599px) {
html {
--font-size-scale-factor: 1.33vmax;
}
}
main {
display: block;
line-height: var(--landing-line-height);
margin-block-start: 10vh;
width: inherit;
}
main header {
align-items: first baseline;
display: grid;
gap: 0 2rem;
grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
grid-template-rows: repeat(2, max-content);
grid-template-areas:
"title blurb"
"title nav";
padding-inline: 1em;
width: min-content;
}
@media (max-width: 599px) {
main header {
gap: 1rem 0;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, max-content);
grid-template-areas:
"title"
"blurb"
"nav";
justify-items: center;
text-align: center;
}
}
main h1 {
letter-spacing: 0.025em;
text-align: end;
}
@media (max-width: 599px) {
main h1 {
text-align: center;
}
}
nav {
align-items: baseline;
align-self: center;
display: flex;
font-size: inherit;
list-style: none;
text-transform: lowercase;
}
p {
margin: 0;
line-height: var(--line-height);
}
h1 {
grid-area: title;
}
#content {
grid-area: blurb
}
nav {
grid-area: nav
}
h1,
#content>p,
nav {
position: relative;
}
h1 {
animation: left-fade-in var(--transition-duration) ease-in-out;
}
@media (max-width: 599px) {
h1 {
animation: top-fade-in var(--transition-duration) ease-in-out;
}
}
#content>p,
nav {
animation: right-fade-in var(--transition-duration) ease-in-out;
}
@media (max-width: 599px) {
#content>p,
nav {
animation: bottom-fade-in var(--transition-duration) ease-in-out;
}
}
@keyframes left-fade-in {
from {
opacity: 0%;
left: var(--animation-offset);
}
33% {
opacity: 0%;
left: var(--animation-offset);
}
to {
opacity: 100%;
left: 0;
}
}
@keyframes right-fade-in {
from {
opacity: 0%;
left: calc(-1 * var(--animation-offset));
}
33% {
opacity: 0%;
left: calc(-1 * var(--animation-offset));
}
to {
opacity: 100%;
left: 0;
}
}
@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;
}
}

212
layouts/index.html
View file

@ -1,7 +1,7 @@
{{ define "body" }} {{ define "body" }}
<main> <main>
<header class="platter"> <header class="platter">
<h1 class="site">{{ partial "site_name.html" .Title }}</h1> <h1 class="site gradient">{{ partial "site_name.html" .Title }}</h1>
<div id="content"> <div id="content">
{{ .Content }} {{ .Content }}
</div> </div>
@ -9,213 +9,3 @@
</header> </header>
</main> </main>
{{ end }} {{ end }}
{{ define "styles" }}
<style>
:root {
--animation-offset: 6px;
--font-size-max: 12px;
--line-height: 1.85;
}
body {
display: flex;
flex-direction: column;
font-size: 2rem;
justify-content: center;
margin: auto;
}
h1 {
font-size: 5rem;
line-height: 1.3;
margin: 0;
padding: 0;
}
@media (max-width: 599px) {
h1 {
font-size: 4.25rem;
}
}
header.site h1 { white-space: normal; }
@media (max-width: 599px) {
html {
--font-size-scale-factor: 1.33vmax;
}
}
main {
line-height: var(--landing-line-height);
margin-block-start: 10vh;
width: inherit;
}
main header {
align-items: first baseline;
display: grid;
gap: 0 2rem;
grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
grid-template-rows: repeat(2, max-content);
grid-template-areas:
"title blurb"
"title nav";
padding-inline: 1em;
width: min-content;
}
@media (max-width: 599px) {
main header {
gap: 1rem 0;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, max-content);
grid-template-areas:
"title"
"blurb"
"nav";
justify-items: center;
text-align: center;
}
}
main h1 {
letter-spacing: 0.025em;
text-align: end;
}
@media (max-width: 599px) {
main h1 {
text-align: center;
}
}
nav {
align-items: baseline;
align-self: center;
display: flex;
font-size: inherit;
list-style: none;
text-transform: lowercase;
}
p {
margin: 0;
line-height: var(--line-height);
}
h1 {
grid-area: title;
}
#content {
grid-area: blurb
}
nav {
grid-area: nav
}
h1,
#content>p,
nav {
position: relative;
}
h1 {
animation: left-fade-in var(--transition-duration) ease-in-out;
}
@media (max-width: 599px) {
h1 {
animation: top-fade-in var(--transition-duration) ease-in-out;
}
}
#content>p,
nav {
animation: right-fade-in var(--transition-duration) ease-in-out;
}
@media (max-width: 599px) {
#content>p,
nav {
animation: bottom-fade-in var(--transition-duration) ease-in-out;
}
}
@keyframes left-fade-in {
from {
opacity: 0%;
left: var(--animation-offset);
}
33% {
opacity: 0%;
left: var(--animation-offset);
}
to {
opacity: 100%;
left: 0;
}
}
@keyframes right-fade-in {
from {
opacity: 0%;
left: calc(-1 * var(--animation-offset));
}
33% {
opacity: 0%;
left: calc(-1 * var(--animation-offset));
}
to {
opacity: 100%;
left: 0;
}
}
@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;
}
</style>
{{ end }}