Change some theme default styles

This commit is contained in:
Alex Selimov 2026-08-12 17:02:32 -04:00
parent 74d5ed7eb0
commit 9de7122b40
2 changed files with 33 additions and 16 deletions

View file

@ -1,20 +1,30 @@
@font-face {
font-family: "Afacad";
src: url("/fonts/Afacad[wght].ttf") format("truetype");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
:root { :root {
font-size: 75%;
--size: 0.96rem; --size: 0.96rem;
--spacing: calc(var(--size) * 2); --spacing: calc(var(--size) * 2);
} }
body { body {
font-family: "Nunito", "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", font-family: "Afacad", sans-serif;
Helvetica, Arial, sans-serif; font-weight: 400;
font-size: calc(var(--size) * 1.6); font-size: calc(var(--size) * 1.6);
line-height: 1.45; line-height: 1.45;
padding: 0 2.8rem 2.8rem; padding: 0 2.8rem 2.8rem;
max-width: 80ch;
} }
header, header,
main, main,
footer { footer {
max-width: 66ch; max-width: 80ch;
} }
header, header,
@ -95,6 +105,11 @@ a:focus-visible {
text-decoration: underline; text-decoration: underline;
} }
ul.blog-posts {
padding-inline-start: 1em;
list-style-position: inside;
}
ul.blog-posts li { ul.blog-posts li {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }

View file

@ -1,5 +1,13 @@
@font-face {
font-family: "Afacad";
src: url("/fonts/Afacad[wght].ttf") format("truetype");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
:root { :root {
font-size: 62.5%; /* 10px */ font-size: 75%;
--color-dark: #1a1a1a; --color-dark: #1a1a1a;
--color-light: #faf8f4; --color-light: #faf8f4;
--color-primary: #EF9F27; --color-primary: #EF9F27;
@ -11,13 +19,12 @@ body {
background: var(--color-dark); background: var(--color-dark);
color: var(--color-light); color: var(--color-light);
padding: 4rem; padding: 4rem;
font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', font-family: "Afacad", sans-serif;
source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", font-weight: 400;
"Segoe UI Symbol", "Noto Color Emoji";
font-size: calc(var(--size) * 1.8); font-size: calc(var(--size) * 1.8);
line-height: 1.5; line-height: 1.5;
min-height: 80vh; min-height: 80vh;
max-width: 1600px; max-width: 80ch;
margin: 0 auto; margin: 0 auto;
word-wrap: break-word; word-wrap: break-word;
} }
@ -25,7 +32,7 @@ body {
header, header,
main, main,
footer { footer {
max-width: 70ch; max-width: 80ch;
margin-inline: auto; margin-inline: auto;
} }
@ -121,12 +128,8 @@ blockquote {
} }
ul.blog-posts { ul.blog-posts {
list-style-type: disc; padding-inline-start: 1em;
padding: unset; list-style-position: inside;
}
ul.blog-posts li {
display: list-item;
flex-direction: column;
} }
ul.blog-posts li span { ul.blog-posts li span {
min-width: 11ch; min-width: 11ch;
@ -171,7 +174,6 @@ td {
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
ul.blog-posts li { ul.blog-posts li {
flex-direction: row;
gap: calc(var(--spacing) / 2); gap: calc(var(--spacing) / 2);
} }
} }