araozu.dev/public/blog.css

:not(pre)>code {
    font-family: var(--font-mono);
    border: solid 1px var(--c-border-2);
    padding: 0 0.25rem;
    border-radius: 0.25rem;
}

pre.astro-code {
    padding-top: 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: var(--font-display);
    font-weight: 900;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

#blog h3 {
    font-size: 1.25rem;
    font-family: var(--font-display);
    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-2);
    padding-left: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

#blog ul {
    padding-left: 1rem;
}


@media (prefers-color-scheme: dark) {
    .astro-code {
        background-color: var(--shiki-dark-bg) !important;
    }

    .astro-code,
    .astro-code span {
        color: var(--shiki-dark) !important;
    }
}

/* isso */
#isso-thread textarea {
    color: black;
}

#isso-thread input {
    color: black;
}

/* Shiki transformers */
.astro-code {
    --shiki-highlight-color: #cccccc;
    --shiki-highlight-word-color: #aaaaaa;
    --shiki-error-bg-color: rgba(244, 63, 63, 0.25);
}

@media (prefers-color-scheme: dark) {
    .astro-code {
        --shiki-highlight-color: #343434;
        --shiki-highlight-word-color: #3a3a3a;
        --shiki-error-bg-color: rgba(244, 63, 94, 0.16);
    }
}

.line {
    display: inline-block;
    width: 100%;
}

.line.highlighted:not(.error) {
    background-color: var(--shiki-highlight-color) !important;
}

.line.highlighted.error {
    background-color: var(--shiki-error-bg-color) !important;
}

.line .highlighted-word {
    border: 1px solid var(--shiki-highlight-word-color);
    border-radius: 0.25rem;
    padding: 1px 3px;
    margin: -1px -1px;
}

.line_

.diff {
    display: inline-block;
    width: 100vw;
    margin: 0 -12px;
    padding: 0 12px;
}

.diff.add {
    background-color: #0505;
}

.diff.remove {
    background-color: #8005;
}

.diff:before {
    position: absolute;
    left: 40px;
}

.has-focused .line:not(.focused) {
    filter: blur(0.08rem);
    transition: filter linear 250ms;
}

.has-focused:hover .line:not(.focuser) {
    filter: none;
}