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

Overhaul heading styles

Browse source 
Regroup CSS styles all together
Make <h5> and <h6> the regular body style and small
Combine some styles that were separate before
This commit is contained in:
Eryn Wells 2022-10-14 14:33:01 -07:00
parent e211f7b7f3
commit 0a1af8dc23
1 changed files with 25 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

54
static/styles/root.css
View file

@ -234,34 +234,12 @@ footer.site p + p {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: var(--foreground-header-color); color: var(--foreground-header-color);
font-family: var(--font-family-heading); font-family: var(--font-family-heading);
font-weight: 600;
margin-block: 3.5rem 1rem; margin-block: 3.5rem 1rem;
letter-spacing: 0.08em;
line-height: var(--body-header-line-height); line-height: var(--body-header-line-height);
} }
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
margin-block-start: 0;
}
html {
background-color: var(--background-color);
color: var(--foreground-color);
font-family: var(--font-family-body);
font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
}
img.circular {
shape-outside: circle(50%);
-webkit-clip-path: circle(50%);
}
main {
max-width: var(--content-width);
margin: 0 auto;
margin-block-start: var(--body-item-spacing);
width: 100%;
}
h1.site { h1.site {
color: rgb(var(--mid-blue)); color: rgb(var(--mid-blue));
font-size: 2.5em; font-size: 2.5em;
@ -284,11 +262,6 @@ h1.site {
h1.site * { color: inherit; } h1.site * { color: inherit; }
h1.site a:hover { text-decoration: none; } h1.site a:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
letter-spacing: 0.08em;
}
header.site { header.site {
display: flex; display: flex;
left: 0; left: 0;
@ -356,15 +329,38 @@ header.site .grid nav:last-of-type {
justify-content: end; justify-content: end;
} }
html {
background-color: var(--background-color);
color: var(--foreground-color);
font-family: var(--font-family-body);
font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
}
img { img {
height: auto; height: auto;
max-width: 100%; max-width: 100%;
} }
img.circular {
shape-outside: circle(50%);
-webkit-clip-path: circle(50%);
}
main {
max-width: var(--content-width);
margin: 0 auto;
margin-block-start: var(--body-item-spacing);
width: 100%;
}
main h1 { font-size: 1.6em; } main h1 { font-size: 1.6em; }
main h2 { font-size: 1.5em; } main h2 { font-size: 1.5em; }
main h3 { font-size: 1.4em; } main h3 { font-size: 1.4em; }
main h4 { font-size: 1.3em; } main h4 { font-size: 1.3em; }
main h5 { font-size: 1.3em; }
main h6 { font-size: var(--body-font-size); }
main h5, main h6 { font-family: var(--font-family-body); }
nav.site { nav.site {
align-items: center; align-items: center;