I like my modus themes for Emacs, and I thought it would be fun to bring them to my writefreely blog as well.

Below is the CSS you can drop in your Customize, it will automatically switch between light and dark variants.

/* =====================
   WriteFreely Modus Theme
   Auto light/dark via prefers-color-scheme
   ===================== */

/* Modus Operandi (Light) — default */
:root {
  --bg:          #ffffff;
  --bg-alt:      #f2f2f2;
  --surface:     #e8e8e8;
  --border:      #c6c6c6;
  --text:        #000000;
  --text-muted:  #595959;
  --text-faint:  #8a8a8a;
  --accent:      #8f0075;   /* Modus magenta */
  --accent-dim:  #c04fa8;
  --link:        #0031a9;   /* Modus blue */
  --link-hover:  #003497;
  --code-fg:     #005e00;   /* Modus green for code */
}

/* Modus Vivendi (Dark) — activated by OS dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #000000;
    --bg-alt:      #1e1e1e;
    --surface:     #2a2a2a;
    --border:      #444444;
    --text:        #ffffff;
    --text-muted:  #ababab;
    --text-faint:  #6a6a6a;
    --accent:      #feacd0;   /* Modus Vivendi magenta */
    --accent-dim:  #a04080;
    --link:        #79a8ff;   /* Modus Vivendi blue */
    --link-hover:  #a8c7ff;
    --code-fg:     #44bc44;   /* Modus Vivendi green */
  }
}

/* Base */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: Georgia, serif;
  font-size: 18px;
}

/* Navigation / Header */
header, nav#blog-title {
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
}

header nav a,
nav#blog-title a {
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  text-transform: uppercase;
}

header nav a:hover,
nav#blog-title a:hover {
  color: var(--accent);
}

/* Main content area */
section, #wrapper, #collection {
  max-width: 900px !important;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Post / Article */
article, .post {
  background: transparent;
  max-width: 900px !important;
}

article {
  background: transparent;
  max-width: 900px !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding-top: 1em;
}

h1.post-title a,
h2.post-title a,
h1 a, h2 a, h3 a {
  color: var(--text) !important;
}

h1.post-title a:hover,
h2.post-title a:hover,
h1 a:hover, h2 a:hover, h3 a:hover {
  color: var(--accent) !important;
}

/* Links */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

/* Paragraphs */
p {
  color: var(--text) !important;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.description {
  color: var(--text) !important;
  text-align: center;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--accent-dim);
  margin: 1.5em 0;
  padding: 0.5em 1.5em;
  color: var(--text-muted);
  font-style: italic;
  background: var(--bg-alt);
}

/* Code */
code {
  font-family: 'Courier New', monospace !important;
  font-size: 0.85em !important;
  background: var(--surface) !important;
  color: var(--code-fg) !important;
  border: 0px !important;
  padding: 0.15em 0.4em !important;
}

pre {
  background: var(--surface) !important;
  padding: 1.2em 1.5em !important;
  overflow-x: auto !important;
}

pre code {
  background: transparent !important;
  padding: 0 !important;
  font-size: 0.9em !important;
  color: var(--code-fg) !important;
}

.post pre, .post code,
article pre, article code,
#post pre, #post code {
  background: var(--surface) !important;
  color: var(--code-fg) !important;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--border);
}

/* Post metadata / date */
.post-meta, time, .date {
  color: var(--text-faint);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Post list (index page) */
.post-listing, #collection .posts {
  list-style: none;
  padding: 0;
}

.post-listing li, .post-list-item {
  border-bottom: 1px solid var(--border);
  padding: 1.2em 0;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.82rem;
  padding: 2rem 0;
  text-align: center;
}

footer a {
  color: var(--text-muted);
}

/* Read more link */
.read-more {
  color: var(--accent);
  font-size: 0.875rem;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.read-more:hover {
  color: var(--link-hover);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

/* Selection */
::selection {
  background: var(--accent-dim);
  color: #ffffff;
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

So, a new year, a new theme! I switched my blog to use the Today I Learned Theme. This theme has a great feature where it also maintains a collection of notes and shows a graph with related notes. This is very similar to how I use org-roam.

I will not be transferring all my notes over, but I thought it would be a very nice feature to share some of my notes with you. This year I am focussing on {{< backlink “choose-your-tools” “Clojure”>}} and {{< backlink “rust” “Rust”>}}, and as a result I will be posting my notes on the new things I learn.

I set myself a goal of creating a “self hosted comic book collection tool”. It should be very nice to create this using the insights from {{< backlink “zero2prod” “Zero 2 Production”>}}. My blog will be a sort of development log along the way.

#blog