mirror of
https://codeberg.org/bunbun/bunbun.dev
synced 2025-06-07 11:59:59 -07:00
updated css
This commit is contained in:
356
style.css
356
style.css
@ -6,232 +6,246 @@
|
|||||||
@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");
|
||||||
|
|
||||||
: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;
|
||||||
--white-30: #d6d6d6;
|
--white-30: #d6d6d6;
|
||||||
--white-40: #c2c2c2;
|
--white-40: #c2c2c2;
|
||||||
--white-50: #adadad;
|
--white-50: #adadad;
|
||||||
|
|
||||||
--black-10: #525252;
|
--black-10: #525252;
|
||||||
--black-20: #3d3d3d;
|
--black-20: #3d3d3d;
|
||||||
--black-30: #292929;
|
--black-30: #292929;
|
||||||
--black-40: #141414;
|
--black-40: #141414;
|
||||||
--black-50: #000000;
|
--black-50: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--foreground: var(--white-10);
|
--foreground: var(--white-10);
|
||||||
--background: var(--black-50);
|
--background: var(--black-50);
|
||||||
|
|
||||||
--accent-10: var(--black-10);
|
--accent-10: var(--black-10);
|
||||||
--accent-20: var(--black-20);
|
--accent-20: var(--black-20);
|
||||||
--accent-30: var(--black-30);
|
--accent-30: var(--black-30);
|
||||||
--accent-40: var(--black-40);
|
--accent-40: var(--black-40);
|
||||||
--accent-50: var(--white-50);
|
--accent-50: var(--white-50);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--foreground: var(--black-50);
|
--foreground: var(--black-50);
|
||||||
--background: var(--white-10);
|
--background: var(--white-10);
|
||||||
|
|
||||||
--accent-10: var(--white-50);
|
--accent-10: var(--white-50);
|
||||||
--accent-20: var(--white-40);
|
--accent-20: var(--white-40);
|
||||||
--accent-30: var(--white-30);
|
--accent-30: var(--white-30);
|
||||||
--accent-40: var(--white-20);
|
--accent-40: var(--white-20);
|
||||||
--accent-50: var(--black-10);
|
--accent-50: var(--black-10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--sans-serif-font);
|
font-family: var(--sans-serif-font);
|
||||||
}
|
}
|
||||||
|
|
||||||
body>header {
|
body>header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
margin-top: -1em;
|
margin-top: -1em;
|
||||||
border-bottom: 0.1em solid var(--accent-50);
|
border-bottom: 0.1em solid var(--accent-50);
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
body>header>a {
|
body>header>a {
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "_";
|
content: "_";
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover::after {
|
&:hover::after {
|
||||||
animation: blink 0.5s alternate infinite;
|
animation: blink 0.5s alternate infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes blink {
|
@keyframes blink {
|
||||||
to {
|
to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body>header>nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body>header>nav>a {
|
||||||
|
color: var(--foreground);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body>.content {
|
body>.content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
body>.content>main {
|
body>.content>main {
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
body>.content>main {
|
body>.content>main {
|
||||||
min-width: 60ch;
|
min-width: 60ch;
|
||||||
max-width: 120ch;
|
max-width: 120ch;
|
||||||
|
|
||||||
/* paragraphs */
|
/* paragraphs */
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--accent-50);
|
color: var(--accent-50);
|
||||||
}
|
}
|
||||||
|
|
||||||
>p {
|
>p {
|
||||||
margin-block-start: 1em;
|
margin-block-start: 1em;
|
||||||
margin-block-end: 1em;
|
margin-block-end: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* headings */
|
/* headings */
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> :is(h1, h2, h3, h4, h5, h6) {
|
> :is(h1, h2, h3, h4, h5, h6) {
|
||||||
margin-block-start: 1em;
|
margin-block-start: 1em;
|
||||||
margin-block-end: 1em;
|
margin-block-end: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* links */
|
/* links */
|
||||||
a {
|
a {
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* images */
|
/* images */
|
||||||
img {
|
img {
|
||||||
border-radius: 0.26em;
|
border-radius: 0.26em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* block qutoes */
|
/* block qutoes */
|
||||||
blockquote {
|
blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
margin-block-start: 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* lists */
|
/* lists */
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
color: var(--accent-50);
|
color: var(--accent-50);
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
li::marker {
|
li::marker {
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> :is(ul, ol) {
|
> :is(ul, ol) {
|
||||||
margin-block-start: 1em;
|
margin-block-start: 1em;
|
||||||
margin-block-end: 1em;
|
margin-block-end: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* horizontal rule */
|
/* horizontal rule */
|
||||||
hr {
|
hr {
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 0.1em solid var(--accent-50);
|
border-bottom: 0.1em solid var(--accent-50);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* inline code */
|
/* inline code */
|
||||||
p>code {
|
p>code {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: 0.23em;
|
border-radius: 0.23em;
|
||||||
background: var(--accent-40);
|
background: var(--accent-40);
|
||||||
padding: 0.2em;
|
padding: 0.2em;
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-family: var(--monospace-font);
|
font-family: var(--monospace-font);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* code blocks */
|
/* code blocks */
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 1em 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;
|
width: fit-content;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre>code {
|
pre>code {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
font-family: var(--monospace-font);
|
font-family: var(--monospace-font);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body>footer {
|
body>footer {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
color: var(--accent-10);
|
color: var(--accent-10);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
body>footer>a {
|
body>footer>a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: -0.2em 0;
|
margin: -0.2em 0;
|
||||||
border-radius: 0.23em;
|
border-radius: 0.23em;
|
||||||
background: #42a5f54d;
|
background: #42a5f54d;
|
||||||
padding: 0.2em;
|
padding: 0.2em;
|
||||||
color: #42a5f5;
|
color: #42a5f5;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user