My Custom CSS for Miniflux

Various bits and bobs, I gradually accumulated over the past couple of years, to make my self hosted Miniflux look just the way I want it.

Width and Size

Changed the width to 850 pixels wide, because even on my vertical monitor, there was quite a bit of wasted horizontal space. Changed the body to use a slightly smaller size.

body {
    max-width: 850px; !important;
    font-size: 90%;
}

Italic Blockquotes

Changed blockquotes to be italic, so that they’re better set off against normal body text.
Also made them a wee bit tinier than the body.

article > blockquote {
    font-size: 87.5%;
    font-style: italic
}

Smaller title size

If you follow Tumblr blogs as I do¹, you know they have Tumblr Asks.
The asks themselves become the title of an RSS entry, when the author responds to one.
And long asks lead to long titles.
So here’s a bit of CSS to make the font smaller than the default H1 size.

.entry-header>h1 {
    font-size: 1em !important;
}

Even at this size, the titles get a bit unwieldy at times (below), but this much I can live with.

Disable Tag Visibility

Miniflux displays tags, if it detects them on certain posts.
I don’t read them. I don’t need them. It breaks my next-next-clicky-next chain of continuity by pushing the next post link below, making me move my mouse². So I killed them!

.entry-tags {
    display: none;
}

In Summary

So, all the flotsam and jetsam above, go into a box that says “Custom CSS” at the very bottom of the Settings page. Putting it all together we have …

body {
    /*set width*/
    max-width: 850px; !important;
    font-size: 90%;
}


article > blockquote {
    font-size: 87.5%;
    font-style: italic
}


.entry-header>h1 {
    font-size: 1em !important;
}


.entry-tags {
    display: none;
}