Hacking Material theme for MkDocs

Trying out an aesthetic change to the Practicalli websites by changing buttons to have rounded corners. This alleviates one of the very few niggles I had with Material for MkDocs.

Practicalli Journal post footer buttons with round corners

Testing a Neogit config change to automatically update the Git Status buffer on file change when that buffer is already open.

Its still cold despite a few nice days last week, although as I was ill for several days then I was snuggled up on the sofa under the lovely warm blankets I got from Wilco (before they closed down).

Music organised this week includes a mixture of gothic, rock and pop genres:

Fields Of The Nephilim

Material for MkDocsλ︎

Material for MkDocs is a very enjoyable and effective theme for conveying technical books and blogs. However I never liked the square nature of the buttons in that theme.

Discussion 6974 on Material for MkDocs provided a custom.css example that added round corners to

buttons
code blocks
blog index entries
tables
grid cards

Practicalli sites already had a docs/assets/stylesheets/extra.css with a Clojure Idiom admonition style.

The rounded corners styles were added to this Practicalli custom stylesheet.

Practicalli Custom Stylesheet for MkDocs

[data-md-color-scheme="default"] {
  --md-default-bg-color: hsla(208, 100%, 96%, 0.94);
  --md-code-bg-color: hsla(208, 80%, 88%, 0.64);
  --md-code-hl-color: hsla(208, 88%, 80%, 0.92);
  --md-admonition-bg-color: hsla(208, 80%, 92%, 0.92);
  --md-typeset-kbd-color: hsla(208, 100%, 98%, 0.98);
}

/* Custom Admonitions */


:root {
/* Clojure Idiom*/
  --md-admonition-icon--clojure-idiom: url(https://raw.githubusercontent.com/practicalli/graphic-design/c40cc063cc5bb07525b524d8a3d638e2f42bc38a/logos/clojure-logo-bullet.svg);

/* Round corners */
  --base-border-radius: 0.5rem;
}

/*Admonitions colors*/
.md-typeset .admonition.clojure-idiom,
.md-typeset details.clojure-idiom {
  border-color: rgb(43, 155, 70);
}
.md-typeset .clojure-idiom > .admonition-title,
.md-typeset .clojure-idiom > summary {
  background-color: rgba(43, 155, 70, 0.1);
}
.md-typeset .clojure-idiom > .admonition-title::before,
.md-typeset .clojure-idiom > summary::before {
  background-color: rgb(250, 250, 250);
  background-image: var(--md-admonition-icon--clojure-idiom);
  -webkit-mask-image: var(--md-admonition-icon--clojure-idiom);
  mask-image: var(--md-admonition-icon--clojure-idiom);
}


/* Change font family of filename present on top of code block. */
.highlight span.filename {
  border-bottom: none;
  border-radius: var(--base-border-radius);
  display: inline;
  font-family: var(--md-code-font-family);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 5px;
  text-align: center;
}
.highlight span.filename + pre > code {
  border-radius: var(--base-border-radius);
  border-top-left-radius: 0;
}
.md-typeset pre > code {
  border-radius: var(--base-border-radius);
}

/* Grid Cards */
.md-typeset .grid.cards > ul > li {
  border-radius: var(--base-border-radius);
}
.md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 0 0.2rem #ffffff40;
}

/* Markdown Button */
.md-typeset .md-button {
  border-radius: var(--base-border-radius);
}

/* Critic, Mark */
ins.critic,
del.critic {
  text-decoration: none;
}

.md-typeset .critic,
.md-typeset mark {
  border-radius: 0.2rem;
  padding: 0 0.2rem;
}

.md-typeset mark {
  box-shadow: 0 0 0 0.1rem var(--md-typeset-mark-color);
}

.md-typeset ins.critic {
  box-shadow: 0 0 0 0.1rem var(--md-typeset-ins-color);
}

.md-typeset del.critic {
  box-shadow: 0 0 0 0.1rem var(--md-typeset-del-color);
}

/* Forms */
.md-search__form {
  border-radius: var(--base-border-radius);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-top-right-radius: var(--base-border-radius);
  border-top-left-radius: var(--base-border-radius);
}

[dir="ltr"] .md-search__output {
  border-bottom-right-radius: var(--base-border-radius);
  border-bottom-left-radius: var(--base-border-radius);
}

/* Blog - index.md */
.md-post--excerpt {
  background-color: var(--md-accent-fg-color--transparent);
  box-shadow: 0 0 0 1rem var(--md-accent-fg-color--transparent);
  border-radius: var(--base-border-radius);
}

/* Table */
.md-typeset table:not([class]) {
  border-radius: var(--base-border-radius);
}

Neovimλ︎

0.10.4 version of Neovim released on 29 January 2025. This is a maintenance release focusing on bug fixes.

LSP servers rely on Node Package Manager, npm. The nodejs and npm packages are not installed in Arch Linux by default, so both packages should be installed to support Neovim mason installed lsp servers, format and lint tools.

Install nodejs and npm in Arch Linux

sudo pacman -Sy nodjs npm

Neogit status updateλ︎

Neogit provides a Git status buffer (SPC g n t In Practicalli Astro).

Neogit plugin is installed via Astrocommunity neogit in Practicalli Astro, via the lua/community.lua configuration file.

Added my personal preferences to the customisation of the neogit plugin via the lua/plugins/user-practicalli.lua.

Practicalli Astro: neogit config overrides

  {
    "neogit",
    dependencies = {
      { "nvim-lua/plenary.nvim", "sindrets/diffview.nvim" },
    },
    opts = {
      disable_signs = true, -- duplicate signs if enabled
      -- graph_style = "unicode", -- elegant commit graph
      graph_style = "kitty", -- elegant commit graph
      integrations = { diffview = true },
      auto_refresh = true, -- (1)!
    },
    -- key mapping config not applied or overridden elsewhere
    keys = {
      -- Neogit status - overrides stage hunk astronvim mapping
      { "<leader>gs", "<cmd>Neogit<cr>", desc = "Status (Neogit)" },
    },
  },

adding auto_refresh to config overrides to update an already open status buffer. This doesnt seem to make a difference when there is a change to the working copy and switching back and forth between text and status buffer using gt.

Ctrl-r refreshes the Neogit status buffer already open

Healthλ︎

Felt very ill early in the week, with swollen neck glands, high temperature and lots of coughing. Tuesday and Wednesday were spent either in bed or snuggled up on the sofa with some warm blankets.

I took lots of water (with some electrolyte tables) and the full spread of vitamin & mineral supplement tablets throughout the week.

Eating hot food regularly helped keep my nose and throat reasonably clear, although still significant coughing in between.

Thank you.

Practical.li GitHub Org

practicalli-johnny profile

Practical.li Website