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

30
layouts/_default/index.html
View file

@ -1,22 +1,16 @@
{{ define "main" }} {{ define "main" }}
<div class="platter"> <div class="platter grid">
<div class="grid"> <h1 class="site">{{ .Title }}</h1>
<div id="title"> <div id="content">
<h1 class="site">{{ .Title }}</h1> {{ .Content }}
</div>
<div id="content">
{{ .Content }}
</div>
{{ with site.Menus.main }}
{{ $url := $.RelPermalink }}
<div id="nav">
<nav class="site bulleted">
{{ range . }}
<li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
{{ end }}
</nav>
</div>
{{ end }}
</div> </div>
{{- with site.Menus.main -}}
{{- $url := $.RelPermalink -}}
<nav class="site bulleted">
{{- range . -}}
<li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
{{- end -}}
</nav>
{{ end }}
</div> </div>
{{ end }} {{ end }}