Customizing Congo

by Adelaide Song on 2024-03-19.
Tags: morning pages

Congo is a pretty great theme, but it makes some Decisions(tm) with its stylesheet that I just can’t abide. Feel free to steal these and wodge them into your css/custom.css.

Blockquotes

Not everything in a blockquote is going to be a quote in the strictest sense, and certainly not one where it makes sense to surround the whole thing in double-quotes. The italics are also pretty pointless to me, personally: you can differentiate a blockquote from the text around it just fine with its indent and the left borderline. Italicizing everything inside also strips one of the most important forms of emphasis in an actual quote, since HTML doesn’t work like Word and italicising italic text doesn’t cancel out.

.prose :where(blockquote p):not(:where([class~="not-prose"] *)) {
  font-style: normal;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
	content: unset !important;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
	content: unset !important;
}

Inline code

Again with the ::before and afters. Backticks shouldn’t be user-facing; they’re not semantically useful to anything other than the parser, and if you want to copy-paste a particular name they just get in the way. If the concern is that you need something to make inline code pop when it’s half the height of the surrounding text, we can solve that issue by simply picking a better font for code.

.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *))::before {
  content: unset !important;
}

.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *))::after {
  content: unset !important;
}