araozu.dev/public/blog.css
2024-07-25 20:18:44 -05:00

87 lines
1.7 KiB
CSS

:not(pre)>code {
font-family: "Iosevka Fixed Web", Iosevka, monospace;
border: solid 1px var(--c-border-2);
padding: 0 0.25rem;
border-radius: 0.25rem;
}
pre.astro-code {
padding: 1rem;
border-radius: 0.5rem;
border: solid 1px var(--c-border-1);
font-size: 0.8rem;
}
pre.astro-code>code {
counter-reset: step;
counter-increment: step 0;
}
pre.astro-code>code .line::before {
content: counter(step);
counter-increment: step;
width: 1rem;
margin-right: 1.5rem;
display: inline-block;
text-align: right;
color: rgba(115, 138, 148, .4)
}
#blog p {
margin: 1rem 0;
}
#blog h2 {
font-size: 1.5rem;
font-family: "Iosevka Etoile Web", serif;
font-weight: 900;
margin-top: 3rem;
margin-bottom: 1.5rem;
}
#blog h3 {
font-size: 1.25rem;
font-family: "Iosevka Etoile Web", serif;
font-weight: 900;
margin-top: 2.25rem;
margin-bottom: 1.5rem;
}
#blog li {
list-style-type: circle;
margin: 0.5rem 0;
}
#blog a {
text-decoration: underline;
color: #3b82f6;
}
#blog img {
max-height: 400px;
display: inline-block;
}
#blog p:has(> img) {
text-align: center;
}
#blog blockquote {
border-left: 5px solid var(--c-border-1);
padding-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
@media (prefers-color-scheme: dark) {
.astro-code,
.astro-code span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
/* Optional, if you also want font styles */
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
}