mirror of
https://codeberg.org/bunbun/bunbun.dev
synced 2025-06-07 16:39:51 -07:00
more styling changes
This commit is contained in:
48
style.css
48
style.css
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user