txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update typography and spacing

Browse Source
This commit is contained in:
Cassidy Williams
2023-11-08 00:22:46 -06:00
parent 157812e219
commit 466c198e82
4 changed files with 72 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/style/fonts.css Normal file
View File

@@ -0,0 +1,47 @@
/* ia-writer-mono-latin-400-normal */
@font-face {
font-family: "iA Writer Mono";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2)
format("woff2"),
url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff)
format("woff");
}
/* ia-writer-mono-latin-700-normal */
@font-face {
font-family: "iA Writer Mono";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff2)
format("woff2"),
url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff)
format("woff");
}
/* ia-writer-mono-latin-400-italic */
@font-face {
font-family: "iA Writer Mono";
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff2)
format("woff2"),
url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff)
format("woff");
}
/* ia-writer-mono-latin-700-italic */
@font-face {
font-family: "iA Writer Mono";
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff2)
format("woff2"),
url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff)
format("woff");
}

29
src/style/global.css
View File

@@ -23,18 +23,17 @@ html,
body {
margin: auto;
padding: 20px;
max-width: 650px;
max-width: 65ch;
background-color: #fff;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.6;
color: var(--black);
}
html,
body,
button,
code {
font-family: "Roboto Mono", monospace;
font-family: "iA Writer Mono", monospace;
}
h1,
strong,
@@ -48,6 +47,7 @@ h4,
h5,
h6 {
color: var(--gray);
line-height: 1.1;
}
body.dark-mode,
@@ -180,12 +180,10 @@ blockquote {
h1 {
font-weight: 400;
margin: 0;
}
h2 {
font-weight: 300;
margin: 0 0 0.5em 0;
font-weight: 400;
}
h3 {
@@ -203,17 +201,32 @@ h3 {
max-width: 350px;
}
article :not(.article-title) {
line-height: 1.8;
}
.article-title {
font-size: 2em;
margin: 0.25em 0 0;
}
ul li time {
flex: 0 0 130px;
.blog-post {
font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
}
.blog-post > * + * {
margin-block-start: 1em;
}
time {
font-style: italic;
color: var(--gray);
}
ul li time {
flex: 0 0 130px;
}
@media (max-width: 600px) {
nav a:not(:last-child) {
padding: 0;