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 {
font-size: 75%;
--size: 0.96rem;
--spacing: calc(var(--size) * 2);
}
body {
font-family: "Nunito", "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue",
Helvetica, Arial, sans-serif;
font-family: "Afacad", sans-serif;
font-weight: 400;
font-size: calc(var(--size) * 1.6);
line-height: 1.45;
padding: 0 2.8rem 2.8rem;
max-width: 80ch;
}
header,
main,
footer {
max-width: 66ch;
max-width: 80ch;
}
header,
@ -95,6 +105,11 @@ a:focus-visible {
text-decoration: underline;
}
ul.blog-posts {
padding-inline-start: 1em;
list-style-position: inside;
}
ul.blog-posts li {
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 {
font-size: 62.5%; /* 10px */
font-size: 75%;
--color-dark: #1a1a1a;
--color-light: #faf8f4;
--color-primary: #EF9F27;
@ -11,13 +19,12 @@ body {
background: var(--color-dark);
color: var(--color-light);
padding: 4rem;
font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic',
source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
font-family: "Afacad", sans-serif;
font-weight: 400;
font-size: calc(var(--size) * 1.8);
line-height: 1.5;
min-height: 80vh;
max-width: 1600px;
max-width: 80ch;
margin: 0 auto;
word-wrap: break-word;
}
@ -25,7 +32,7 @@ body {
header,
main,
footer {
max-width: 70ch;
max-width: 80ch;
margin-inline: auto;
}
@ -121,12 +128,8 @@ blockquote {
}
ul.blog-posts {
list-style-type: disc;
padding: unset;
}
ul.blog-posts li {
display: list-item;
flex-direction: column;
padding-inline-start: 1em;
list-style-position: inside;
}
ul.blog-posts li span {
min-width: 11ch;
@ -171,7 +174,6 @@ td {
@media screen and (min-width: 600px) {
ul.blog-posts li {
flex-direction: row;
gap: calc(var(--spacing) / 2);
}
}