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

Add header styles including a nice animation in the .animated class

Browse source
This commit is contained in:
Eryn Wells 2022-09-25 08:45:29 -07:00
parent 312dd30be6
commit 105c464e70
1 changed files with 36 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

39
static/styles/root.css
View file

@ -12,7 +12,7 @@
--header-border-color: var(--separator-color); --header-border-color: var(--separator-color);
--footer-border-color: var(--separator-color); --footer-border-color: var(--separator-color);
--box-shadow-color: rgba(230, 230, 230, 0.5); --box-shadow-color: rgba(230, 230, 230, 0.8);
--header-box-shadow-color: var(--box-shadow-color); --header-box-shadow-color: var(--box-shadow-color);
--font-family-body: Verdana, Helvetica, sans-serif; --font-family-body: Verdana, Helvetica, sans-serif;
@ -34,6 +34,7 @@
:root { :root {
--background-color: #000; --background-color: #000;
--foreground-color: #fff; --foreground-color: #fff;
--box-shadow-color: rgba(25, 25, 25, 0.8);
--twitter-icon: url(/icons/twitter-dark.svg); --twitter-icon: url(/icons/twitter-dark.svg);
--github-icon: url(/icons/github-dark.svg); --github-icon: url(/icons/github-dark.svg);
@ -182,11 +183,26 @@ h1.site * { color: inherit; }
header.site { header.site {
display: flex; display: flex;
position: fixed;
top: 0;
left: 0; left: 0;
position: fixed;
top: 0.5rem;
visibility: hidden;
width: 100%; width: 100%;
} }
header.site.visible {
visibility: visible;
}
header.site.animated {
animation: site-header-slide-in var(--transition-duration) ease-out;
}
@keyframes site-header-slide-in {
from {
top: -200px;
}
to {
top: 0.5rem;
}
}
header.site h1 { header.site h1 {
font-family: var(--font-family-site-heading); font-family: var(--font-family-site-heading);
@ -198,7 +214,22 @@ header.site .grid {
display: grid; display: grid;
gap: 0.5em; gap: 0.5em;
grid-template-columns: max-content auto max-content; grid-template-columns: max-content auto max-content;
grid-template-rows: max-content;
grid-template-areas:
"title menu social";
max-width: var(--content-width); max-width: var(--content-width);
width: var(--content-width);
}
@media (max-width: 450px) {
header.site .grid {
grid-template-columns: repeat(2, max-content);
grid-template-rows: repeat(2, max-content);
grid-template-areas:
"title social"
"menu menu";
max-width: var(--content-width);
width: inherit;
}
} }
header.site .platter { header.site .platter {
@ -207,10 +238,12 @@ header.site .platter {
} }
header.site .grid nav:first-of-type { header.site .grid nav:first-of-type {
grid-area: menu;
justify-content: start; justify-content: start;
} }
header.site .grid nav:last-of-type { header.site .grid nav:last-of-type {
grid-area: social;
justify-content: end; justify-content: end;
} }