My "new" Miniflux theme

February 20, 2026

The other day I wrote how much I am satisfied with the new theme for this blog and how I implemented one on the same style on my newly launched omg.lol landing page.

I enjoy this style and since I like things to be consistent I couldn't naturally stop there - I had to do something about my Miniflux theme. After all, as with the blog, this is something that I stare-at regularly as well.

It took some hacking, and my code behind is certainly not pretty and likely could have been done more elegantly, but it does work and looks the way I want to.

There are still some things that I would like to change, but it is a good start. I have been using this for week (?) or so, and am generally happy with it.

As with the blog as well, I start to wonder whether or not to implement only a light theme for the time being. But I am not sure about that yet. Me being not sure... no surprise here.

That being said here's the necessary CSS this version 0.1.

/* svbck Miniflux theme 0.1 */

:root {
  --bg-color: #FAFAFA;
  --text-color: #212121;
  --accent: #0D47A1;
  --border: #898EA4;
  --accent-bg: #F0F0F0;
  --dark-accent-bg: #e6e6e6 ;
  --site-title-bg: lightpink;
  --link-bg: lightblue;
  --item-bg: lightblue; 
  --padding: clamp(1.2rem, 4vw, 3rem) clamp(1.5rem, 7vw, 8rem);
  --item-padding: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 7vw, 8rem);
}


@media (prefers-color-scheme: dark) {

  :root {
  --bg-color: #252525;
  --text-color: #b9b9b9;
  --accent-dark: #eb6eb7;
  --border: #3f3f3f;
  --accent-bg: #1e1e1e;  
  --dark-accent-bg: #202020;
  --site-title-bg: var(--bg-color);
  --item-bg:  color-mix(in srgb, var(--accent-dark) 25%, var(--bg-color)); 
   --link-bg: color-mix(in srgb, var(--accent-dark) 5%, var(--bg-dark)); 
  }  
}


*,
article.entry-content{
  font-family: "GeistMono", monospace;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size: clamp(14px, 3vw, 18px);
  padding: 0.8em; 
  background: var(--accent-bg);
}


/* FONT-SIZES */

.item-title { font-size: 1.27em; }


/* HOMEPAGE */

body {
  background: none;
  max-width: 52rem;
  margin: auto;
  color: var(--text-color);
}


.page-header h1{
  padding-top: 1rem;
  color: var(--text-color)
}

#page-header-title {
  border: none;
  font-weight: bold;
}
ul#header-menu{
  margin:auto;
  padding: 2em;
}

#header-menu{
  background: var(--dark-accent-bg);
  border: 1px solid;
  width: 100%;
  margin: auto;
  text-align: center;
}

#header-menu li a {
  line-height: 2.5;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--text-color);
}


#header-menu svg {
  display: none
}

li.active a {
  background: var(--link-bg);
}


.page-header {
  margin-bottom: 2em;
}

article.item {
  background: var(--bg-color);
  padding: var(--item-padding);
  border: 1px solid var(--text-color)
}

article.item.current-item {
  border: 1px solid var(--text-color);
  padding: var(--item-padding);
  background: var(--item-bg);
}

article.item.current-item .category {
  background: var(--item-bg)
}

article.item header a {
  color: var(--text-color)
}

article.item header img {
  width: 1em;
  height: 1em;
  margin-bottom: -0.1em
}


.item-status-read.entry-item header a  {
  color: var(--text-color)
}

.item-status-read.entry-item header a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.1rem
}

/* Article */

header.entry-header{
  border: 1px solid var(--text-color);
  border-bottom: none;
  background: var(--bg-color);
  padding: var(--padding);
  margin: 0;
}


main {
  padding: 0 !important;
}

 article{
  hyphens: auto;
  border: 1px solid var(--text-color);
  border-top: none;
  background: var(--bg-color);
  padding: var(--padding);
  margin: 0;
}

main .entry-content,
main .entry-content blockquote{
  font-size: inherit;
  line-height: 1.6;
}


.entry-header #page-header-title {
  font-size: 1.8rem
}

/* TAGS */

.category {
  background: var(--accent-bg);
  border-color: var(--border);
  border-radius: 0
}

/* IMAGES AND STUFF */

.entry-content img,
.entry-content iframe{
  width: 100%;
  max-height: 100vh;

}


/* Mobile Menu */

header .logo {
  border: 1px solid var(--text-color);
  max-width: 200px;;
  margin: auto;
  padding: 0.5em 1em;
  background: var(--site-title-bg);
  margin-bottom: -1em;
  z-index: 100;

}

#header-menu {
  padding-left: 0.5em;
}

#header-menu li {
  list-style-type: none;
  border-bottom: none;
}

.pagination-entry-top,
.pagination-top {
  display: none;
}

@media (min-width: 620px) {
  .header nav {
    display: grid
  }
}


.skip-to-content-link {
  translate: -50% calc(-100% - calc(var(--padding-size) * 3) - calc(var(--border-size) * 2));
}

I doubt this is very elegant, but it does the trick. I will update the code here when I add some changes.

blog, theme, 100DaysToOffload, rss