Styling Prose

· Ben’s Blog


I started using prose.sh as a mirror for my blog. Prose is a cool project within the Pico ecosystem that lets you blog with an ssh-based workflow. Their vibe is to promote the smol web. Cool!

They recently implemented custom CSS, based partially on my request in their IRC. So with that, I've made a few visual tweaks to my blog which you're seeing now.

I'm happy about bumping up the font size on the headings, an unironic use of Times New Roman with some tightening on the letter spacing.

The live file is here, while the current state on publish is:

 1header {
 2  margin: 2rem auto;
 3}
 4header > .text-2xl {
 5  font-family: "Times New Roman", "Droid Serif", Times, "Source Serif Pro",
 6    serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 7  font-size: 2.5rem;
 8  letter-spacing: -0.05rem;
 9  line-height: 2.25rem;
10  text-align: center;
11  padding-top: 1rem;
12}
13
14#blog header > .text-2xl {
15  font-size: 4rem;
16}
17
18header > p.font-bold {
19  font-weight: normal;
20  font-style: italic;
21  letter-spacing: -0.05rem;
22  opacity: 0.8;
23  text-align: center;
24  padding-top: 0.5rem;
25}
26
27code,
28kbd,
29samp,
30pre {
31  font-size: 0.9rem;
32}
33
34.post-date {
35  font-family: monospace;
36  font-style: normal;
37  opacity: 0.8;
38  padding-top: 0.2rem;
39  letter-spacing: -0.02rem;
40  width: 108px;
41}