Miniflux Tweaks

Having used Miniflux as my feed reader for a few years, I recently made a few tweaks to make it more pleasant.

One of the nice features is that you can add CSS to the delivered pages in the application. Scan for Custom CSS in the Settings page.

Here is what I have so far:

.entry-content {
    font-family: Palatino;
}
#page-header-title {
    font-family: Palatino;
}
a {
    text-decoration-line: none;
}

:root {
    --body-color: #747473;
    --body-background: #f7f6f4;
    --body-background-opaque: #f7f6f4ff;
    --link-color: #e06151;
    --link-visited-color: #c04131;
}
@media (prefers-color-scheme: dark) {
    :root {
        --body-color: #bebfc2;
        --body-background: #252935;
        --body-background-opaque: #252935ff;
    }
}

@media screen and (max-width: 480px) {
    body {
        margin-left: 8px;
        margin-right: 8px;
    }
    .pagination-entry-bottom {
        background-color: var(--body-background-opaque);
        position: fixed;
        bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
        width: 95%;
        margin-bottom: 0;
        padding-bottom: 40px;
    }
    .entry-content {
        padding-bottom: 40px;
    }

}

There are two sets of changes:

• The first simply modifies the font used for the content and the colours (both light and dark schemes). I find Palatino easier on the eyes when reading longer content, and the off-white background less jarring.
• The second change is aimed at improving usability on mobile devices, as quite a bit of my use of Miniflux is as a PWA on my phone. For this the margins are tweaked to be slightly wider, but more importantly the Previous and Next links at the bottom of the page are fixed in place at the bottom of the screen, over the content. This means that there is no need to scroll to the top or bottom of the page to select them - it’s almost like having a toolbar in a traditional app.

Here is the end result: