:root { /* I preload the main font in , so update that if main font here changes. */ --font-main: "Iosevka Aile", sans-serif; --font-main-size: 125%; --font-mono: "Iosevka Extended", monospace; --font-mono-size: 0.90em; --font-color: #515151; --heading-font-color: #333; --background-color: #ffffff; --accent-color: #ab5656; --link-color: #0066cc; --code-bg-color: #f3f3f3; /* Copied the value from highlightjs CSS. */ --code-fg-color: var(--accent-color); } body { max-width: 860px; margin: 0 auto; padding: 20px; font-family: var(--font-main); font-weight: normal; font-size: var(--font-main-size); color: var(--font-color); line-height: 1.5; } h1, h2, h3, h4, h5, h6 { color: var(--heading-font-color); } a { color: var(--link-color); text-decoration: none; &:hover { color: color-mix(in oklab, var(--link-color) 60%, white); } } figure { text-align: center; & img { max-width: 100%; height: auto; } } code, pre, kbd, samp { font-family: var(--font-mono); font-weight: normal; font-size: var(--font-mono-size); line-height: 1.4; /* If not a code block (which we style fully), apply simple styling. */ &:not(.code-block *) { background: var(--code-bg-color); color: var(--code-fg-color); padding: 0em 0.25em; } } .code-block { margin: 1em 0; overflow-x: hidden; font-size: 0.9em; & .code-block-lang { padding-left: 0.5em; font-size: 0.8em; background: color-mix(in oklab, var(--code-bg-color) 95%, black); color: color-mix(in oklab, var(--code-bg-color) 50%, black); } & pre { margin: 0; } } blockquote { margin-left: 1rem; padding-left: 2rem; position: relative; overflow: hidden; font-style: italic; p { margin: 0.5rem } /* p + p { margin-top: 1rem; } */ &::before, &::after{ position: absolute; color: var(--accent-color); } &::before { left: 0; content: ''; width: 18px; height: 18px; display: inline-block; background-color: var(--accent-color); mask-size: contain; mask-repeat: no-repeat; mask: url("data:image/svg+xml,"); } &::after { content: ""; left: 8px; top: 25px; width: 2px; height: 100%; background-color: currentColor; } }