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.
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:
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.
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_refreshto 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 usinggt.
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 Website
