zymotux

I've always preferred light themes but playing around with the Lagrange browser I really enjoy the way it presents the text-based Gemini space with its Colourful Dark theme, each capsule looking slightly different.

My journey once more down the colour-hex and CSS wormhole started when I realised I couldn't post to the Midnight Pub message board through Lagrange itself without using a web proxy server, which isn't something I'm familiar with. I could post through the web interface or terminal – however, if I do this I'd like my web interface experience to be as close to the Lagrange experience as possible. Midnight Pub supports custom CSS themes so I set myself the challenge of replicating it.

• Step one – work out the colour palette with the help of the KDE Colour Picker widget!
• Step two – modify my Write.as CSS to test it – one of the ironies is that I haven't actually registered to use Midnight Pub itself yet so this was the best I could do!
• Step three – publish a side-by side comparison – see below:

I'm pretty happy overall with this. I've chosen to use an off-white for the accent colour with the bright blue on hover but also considered using bright blue or bright orange accents from Lagrange instead. I simplified the colour pallete a little, using a single purple for headings and yellow for text rather than the couple of variations of each on Lagrange. I've imported the Nunito Sans font used by Lagrange too. Part of the fun of this challenge was working out what extra bits of CSS I needed. In this case, adding code for the post titles and navigation. I still need to figure out a few other aspects, especially:

• editing the header navigation menu and dates on individual post pages
• removing underlines when hovering on tags
• changing the footer colour for “published with write.as”
• and most significantly – changing how code blocks render!

However, it's certainly close enough for now and I'll definitely use some of the CSS if I do sign-up to Midnight Pub! It's been good fun playing with it (even if it was a bit of a time-sink) and the bullet points above give me mini-projects to chase down later too. Speaking of CSS:

• Step four – publish the CSS below – definitely need to sort out the code block theming!

/* CSS for Lagrange Midnight Pub theme on zymotux blog on Write.as
First created 2021-03-22, last edited 2021-03-22.
Inspired by the colours used for Midnight Pub '(gemini:)(https:)//midnight.pub' accessed 
using the Lagrange Gemini browser 'https://gmi.skyjake.fi/lagrange/'*/

/* Fonts used */
@import url('https://fontlibrary.org/face/kaushan-script');
@import url('https://fontlibrary.org/face/nunito-sans');
* {
    font-family: 'NunitoSansRegular';
}
h1, h2, h3, h4 {
    font-family: 'NunitoSansBold';
    color: #c3ccf7;
}
p, ul, ol, blockquote {
    font-size: 1.2rem;
}

/* Blog background */
body {
    background-color: #141311;
    color: #f4d69b;
}

/* Blog header */
#blog-title a {
    color: #c3ccf7;
    font-family: 'KaushanScriptRegular';
    font-weight: normal;
    font-style: normal;
    font-size: 3rem;
}
#blog-title a:hover {
    color: #00c0ff;
    text-decoration: none;
}
body#post #blog-title a {
    font-size: 1.5rem;
    color: #fdfdfa;
}
body#post #blog-title a:hover {
    color: #00c0ff;
    text-decoration: none;
}

/* Disable post header fade effect */
body#post header {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Blog description (underneath title) on index page */
header p.description {
    color: #f4d69b;
    font-family: 'NunitoSansBold';
}

/* Pinned posts */
header nav a {
    color: #fdfdfa;
    font-family: 'NunitoSansRegular';
    display: inline-table;
}
header nav a:hover {
    color: #00c0ff;
    text-decoration: none;
}

/* Post title (index page) */
.post-title a:link, .post-title a:visited {
    color: #c3ccf7;
    font-family: 'NunitoSansBold';
}
.post-title a:hover {
    color: #00c0ff;
    text-decoration: none;
}

/* "Read more..." links */
body#collection a.read-more {
    color: #fdfdfa;
    text-decoration: none;
}
body#collection a:hover.read-more {
    color: #00c0ff;
    text-decoration: none;
}

/* Navigation */
nav#paging a {
    color: #fdfdfa;
}
nav#paging a:hover {
    color: #00c0ff;
    text-decoration: none;
}

/* Links inside blog posts */
article p a {
    color: #fdfdfa;
    text-decoration: none;
}
article p a:hover {
    color: #00c0ff;
    text-decoration: none;
}

/* Blockquote */
body#collection blockquote, body#post blockquote, body#subpage blockquote {
    color: #aaffff;
    border-left: 1px solid #aaffff;
    font-style: italic;
}

---

Entry 68 of my participation in the “100 Days to Offload” challenge – find out more and join in!

2021-03-22 #100DaysToOffload #blogging #coding #css #Gemini

Next post | Previous post | Home | Archive | Search