more styling changes

This commit is contained in:
2024-05-21 18:16:44 -07:00
parent a40bd2ae72
commit 6556c7cb98

View File

@ -1,14 +1,14 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=roboto+condensed:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=roboto+mono:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=roboto+slab:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap"); @import url("https://fonts.googleapis.com/css2?family=roboto+flex:opsz,wght@8..144,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=roboto+serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap");
:root { :root {
--serif-font: "Roboto Serif", serif; --serif-font: "roboto serif", serif;
--sans-serif-font: "Roboto", sans-serif; --sans-serif-font: "roboto", sans-serif;
--monospace-font: "Roboto Mono", monospace; --monospace-font: "roboto mono", monospace;
--white-10: #ffffff; --white-10: #ffffff;
--white-20: #ebebeb; --white-20: #ebebeb;
@ -70,7 +70,7 @@ body>header {
body>header>a { body>header>a {
color: var(--foreground); color: var(--foreground);
font-weight: 550; font-weight: 500;
font-size: 2em; font-size: 2em;
text-decoration: none; text-decoration: none;
@ -109,10 +109,15 @@ body>.content>main {
/* paragraphs */ /* paragraphs */
p { p {
margin: 1em 0; margin: 0;
color: var(--accent-50); color: var(--accent-50);
} }
>p {
margin-block-start: 1em;
margin-block-end: 1em;
}
/* headings */ /* headings */
h1, h1,
h2, h2,
@ -120,7 +125,12 @@ body>.content>main {
h4, h4,
h5, h5,
h6 { h6 {
margin: 0.5em 0; margin: 0;
}
> :is(h1, h2, h3, h4, h5, h6) {
margin-block-start: 1em;
margin-block-end: 1em;
} }
/* links */ /* links */
@ -141,7 +151,9 @@ body>.content>main {
/* block qutoes */ /* block qutoes */
blockquote { blockquote {
display: block; display: block;
margin: 0 1em; margin: 0;
margin-left: 1em;
margin-block-start: 1em;
border-left: 0.2em solid var(--accent-40); border-left: 0.2em solid var(--accent-40);
padding-left: 0.5em; padding-left: 0.5em;
} }
@ -162,6 +174,11 @@ body>.content>main {
} }
} }
> :is(ul, ol) {
margin-block-start: 1em;
margin-block-end: 1em;
}
/* horizontal rule */ /* horizontal rule */
hr { hr {
margin: 1em 0; margin: 1em 0;
@ -183,11 +200,12 @@ body>.content>main {
/* code blocks */ /* code blocks */
pre { pre {
display: inline-block; display: block;
margin: 0; margin: 1em 0;
border-radius: 0.26em; border-radius: 0.26em;
background: var(--accent-40); background: var(--accent-40);
padding: 0.8em; padding: 0.8em;
width: fit-content;
overflow: hidden; overflow: hidden;
} }