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