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

1
src/components/BaseHead.astro
View File

@@ -1,4 +1,5 @@
--- ---
import "../style/fonts.css";
import "../style/global.css"; import "../style/global.css";
import { SITE_TITLE } from "../config"; import { SITE_TITLE } from "../config";

2
src/layouts/BlogPost.astro
View File

@@ -32,7 +32,9 @@ const {
) )
} }
<hr /> <hr />
<div class="blog-post">
<slot /> <slot />
</div>
</article> </article>
</main> </main>
<Tags tags={tags} /> <Tags tags={tags} />

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