💾 Archived View for midnight.pub › posts › 595 captured on 2024-06-16 at 13:09:11. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

New theme: Midnight Classic Dark

~zampano

I really enjoy playing with my view of the Midnight. For a long while I was using the retro, cyber-y theme that I posted awhile back. But I wanted something a little easier to read. Thankfully, m15o gave the building blocks in the dark theme for the Midnight, which I quite like overall. I just made a few tweaks, mainly to fonts.

One of my primary purposes was getting rid of the Google Fonts embed. This way I don't have to ping Google's servers every time I visit the Midnight. Instead, I just downloaded the ones I wanted (from Google Fonts, to be clear), and installed them locally. This is much more privacy-friendly.

But beyond that, I wanted something easier to read on larger posts, and my previous theme just wasn't doing it for me. I find serif fonts easier to go through, especially in larger blocks, and I also increased the overall width of content (since I have a 4K monitor). So I personally am using three fonts: one for most content, one for code (the <pre> tag, to be precise), and one for writing. They are: Fandwood Text, Inconsolata, and Input Serif, respectively. Here's where you can download the first two (the third is commercial):

Fanwood Text

Inconsolata

And here's the CSS, which you can copy and paste into your "theme" page:

/*
MIDNIGHT CLASSIC DARK

	/



html, body {
   background: #262133;
   color: #eee;
   font-family: "Fanwood Text", serif;
   font-size: 1.1em;
   line-height: 1.3em;
}

body {
   max-width: 800px;
}

h1, h2, h3 { color: #fe2d82; }

h1 {
   font-size: 3.5em;
   border-bottom: 1px solid #b20148;
}

textarea, input[type=text], input[type=password] { 
   background: repeating-linear-gradient(to bottom,
       #39004d,
       rgb(45, 45, 45) 4px,
       #39004d 4px); 
   font-size: 0.75em;
   font-family: "Input Serif", monospace;
   font-weight: 200;
}

pre {
    font-family: "Inconsolata", monospace;
    font-weight: 300;
    color: gold;
}

a:visited { color: #a097b3; }
a:visited:hover { color: #c9c4d4; }
a:link { color: #3395ff; }
a:link:hover { color: #80bdff; }

Write a reply