html {
overflow-y: scroll;
}
/* ============================================
THEME - Catppuccin (Latte / Mocha)
============================================
Default: Latte (light)
System dark preference: Mocha
Explicit override via [data-theme="light"|"dark"] on
============================================ */
/* ---------- Catppuccin Latte (light, default) ---------- */
:root {
/* Base Colors */
--bgcolor: #eff1f5; /* base */
--bg-secondary: #e6e9ef; /* mantle */
--bg-tertiary: #dce0e8; /* crust */
/* Surface Colors */
--surface0: #ccd0da;
--surface1: #bcc0cc;
--surface2: #acb0be;
/* Text Colors */
--fontcolor: #4c4f69; /* text */
--fontcolor-muted: #5c5f77; /* subtext1 */
--fontcolor-subtle: #6c6f85; /* subtext0 */
--heading-color: #2b2b2f; /* near-black, warm neutral */
--heading-link-color: #2b2b2f; /* keep heading links neutral too */
/* Overlay Colors */
--overlay0: #9ca0b0;
--overlay1: #8c8fa1;
--overlay2: #7c7f93;
/* Links */
--linkcolor: #1e66f5; /* blue */
--linkcolor-hover: #04a5e5; /* sky */
--visitedcolor: #8839ef; /* mauve */
/* Code Colors */
--code-bg: #ccd0da; /* surface0 */
--code-border: #bcc0cc; /* surface1 */
--code-color: #4c4f69; /* text */
--code-inline-bg: #ccd0da; /* surface0 */
/* Borders & Accents */
--border-color: #bcc0cc; /* surface1 */
--accent-color: #1e66f5; /* blue */
--accent-secondary: #7287fd; /* lavender */
/* Tags */
--tag-bg: #ccd0da; /* surface0 */
--tag-color: #1e66f5; /* blue */
/* Additional Accent Colors */
--green: #40a02b;
--yellow: #df8e1d;
--red: #d20f39;
--peach: #fe640b;
--teal: #179299;
/* Transitions */
--transition-speed: 0.2s;
color-scheme: light;
}
/* ---------- Catppuccin Mocha (dark) ---------- */
:root[data-theme="dark"] {
/* Base Colors */
--bgcolor: #1e1e2e; /* base */
--bg-secondary: #181825; /* mantle */
--bg-tertiary: #11111b; /* crust */
/* Surface Colors */
--surface0: #313244;
--surface1: #45475a;
--surface2: #585b70;
/* Text Colors */
--fontcolor: #cdd6f4; /* text */
--fontcolor-muted: #bac2de; /* subtext1 */
--fontcolor-subtle: #a6adc8; /* subtext0 */
--heading-color: #cdd6f4; /* text - matches body, classic look */
--heading-link-color: #89b4fa; /* blue - heading links pop */
/* Overlay Colors */
--overlay0: #6c7086;
--overlay1: #7f849c;
--overlay2: #9399b2;
/* Links */
--linkcolor: #89b4fa; /* blue */
--linkcolor-hover: #a5c9ff;
--visitedcolor: #cba6f7; /* mauve */
/* Code Colors */
--code-bg: #313244;
--code-border: #45475a;
--code-color: #cdd6f4;
--code-inline-bg: #313244;
/* Borders & Accents */
--border-color: #45475a;
--accent-color: #89b4fa;
--accent-secondary: #b4befe;
/* Tags */
--tag-bg: #313244;
--tag-color: #89b4fa;
/* Additional Accent Colors */
--green: #a6e3a1;
--yellow: #f9e2af;
--red: #f38ba8;
--peach: #fab387;
--teal: #94e2d5;
color-scheme: dark;
}
/* Follow system preference when no explicit choice has been made */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bgcolor: #1e1e2e;
--bg-secondary: #181825;
--bg-tertiary: #11111b;
--surface0: #313244;
--surface1: #45475a;
--surface2: #585b70;
--fontcolor: #cdd6f4;
--fontcolor-muted: #bac2de;
--fontcolor-subtle: #a6adc8;
--heading-color: #cdd6f4;
--heading-link-color: #89b4fa;
--overlay0: #6c7086;
--overlay1: #7f849c;
--overlay2: #9399b2;
--linkcolor: #89b4fa;
--linkcolor-hover: #a5c9ff;
--visitedcolor: #cba6f7;
--code-bg: #313244;
--code-border: #45475a;
--code-color: #cdd6f4;
--code-inline-bg: #313244;
--border-color: #45475a;
--accent-color: #89b4fa;
--accent-secondary: #b4befe;
--tag-bg: #313244;
--tag-color: #89b4fa;
--green: #a6e3a1;
--yellow: #f9e2af;
--red: #f38ba8;
--peach: #fab387;
--teal: #94e2d5;
color-scheme: dark;
}
}
/* ============================================
TYPOGRAPHY
============================================ */
body {
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
color: var(--fontcolor);
background: var(--bgcolor);
}
/* Monospace for headers, navigation, and terminal elements */
header,
nav,
h1,
h2,
h3,
h4,
h5,
h6,
.tag,
time {
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}
/* Blockier monospace font for code blocks - using common system fonts */
code,
pre,
.highlight pre,
.highlight pre code {
font-family: Consolas, Monaco, "Menlo", "Courier New", Courier, "Liberation Mono", monospace;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--heading-color);
margin-top: 1.5em;
margin-bottom: 0.5em;
}
/* Heading links (e.g. post titles on the landing page).
Latte: neutral so they don't read as harsh blue.
Mocha: blue, which pops nicely on the dark background. */
h1 a:link, h1 a:visited,
h2 a:link, h2 a:visited,
h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited,
h5 a:link, h5 a:visited,
h6 a:link, h6 a:visited {
color: var(--heading-link-color);
}
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
color: var(--linkcolor);
border-bottom-color: var(--linkcolor);
}
h1 {
font-size: 2em;
margin-top: 0;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.3em;
}
/* ============================================
HEADER
============================================ */
header {
border-bottom: 1px solid var(--border-color);
padding-bottom: 1em;
margin-bottom: 2em;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
.header-title {
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}
/* The whole "$ cat Martin_Trojer" string is a link to the index, but it
should look like the original heading - not a colored/underlined link. */
.header-title-link,
.header-title-link:link,
.header-title-link:visited {
color: inherit;
border-bottom: 0;
}
.header-title-link:hover .prompt-command,
.header-title-link:hover strong {
color: var(--accent-color);
}
.prompt-symbol {
color: var(--accent-color);
}
.prompt-command {
color: var(--fontcolor-muted);
}
.header-subtitle {
color: var(--fontcolor-muted);
font-size: 0.9em;
}
header nav {
margin-top: 1em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em 1em;
flex-wrap: wrap;
}
header nav a {
transition: color var(--transition-speed) ease;
}
.nav-links {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 0.25em;
min-width: 0;
}
.nav-separator {
color: var(--fontcolor-muted);
margin: 0 0.3em;
}
header nav .theme-toggle {
flex-shrink: 0;
}
/* Hamburger button - hidden on desktop, shown on phones. */
.nav-menu-toggle {
display: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-color: transparent;
background-image: none;
border: 0;
box-shadow: none;
padding: 0.4em 0.55em;
cursor: pointer;
line-height: 0;
color: inherit;
transition: opacity var(--transition-speed) ease;
}
.nav-menu-toggle:hover,
.nav-menu-toggle:focus,
.nav-menu-toggle:active {
background: transparent;
background-color: transparent;
box-shadow: none;
}
.nav-menu-toggle:hover .nav-menu-toggle-icon span {
background: var(--accent-color);
}
.nav-menu-toggle:focus { outline: none; }
.nav-menu-toggle:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.nav-menu-toggle-icon {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
width: 1.1em;
height: 0.85em;
vertical-align: middle;
}
.nav-menu-toggle-icon span {
display: block;
height: 2px;
width: 100%;
background: var(--fontcolor);
border-radius: 1px;
transition: background var(--transition-speed) ease,
transform var(--transition-speed) ease,
opacity var(--transition-speed) ease;
}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-icon span:nth-child(1) {
transform: translateY(0.36em) rotate(45deg);
}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-icon span:nth-child(2) {
opacity: 0;
}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-icon span:nth-child(3) {
transform: translateY(-0.36em) rotate(-45deg);
}
/* ============================================
LINKS
============================================ */
a:link {
color: var(--linkcolor);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
a:visited {
color: var(--visitedcolor);
}
a:active {
color: var(--linkcolor-hover);
}
a:hover {
color: var(--linkcolor-hover);
border-bottom-color: var(--linkcolor-hover);
}
a:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================
CODE BLOCKS (Terminal Window Style)
============================================ */
/* Hugo syntax highlighting wrapper */
.highlight {
margin: 1.5em 0;
border-radius: 4px;
overflow: hidden;
}
.highlight pre,
.highlight pre[style] {
background: var(--bg-secondary) !important;
background-color: var(--bg-secondary) !important;
border: 1px solid var(--code-border) !important;
border-left: 3px solid var(--accent-color) !important;
color: var(--code-color) !important;
padding: 1.2em !important;
overflow-x: auto !important;
border-radius: 4px;
margin: 0 !important;
font-size: 0.9em !important;
line-height: 1.6 !important;
-moz-tab-size: 4 !important;
-o-tab-size: 4 !important;
tab-size: 4 !important;
}
.highlight pre code {
background: transparent !important;
color: inherit !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
}
/* Override Hugo's syntax highlighting with Catppuccin Mocha colors */
/* Hugo uses inline styles, so we need to map the RGB/rgb values Hugo generates */
/* Base text color */
.highlight pre code {
color: var(--code-color) !important;
}
/* Remove all background colors from spans */
.highlight pre code span,
.highlight pre code span span {
background: transparent !important;
background-color: transparent !important;
}
/* Map Hugo/Chroma syntax highlighting RGB values to Catppuccin Mocha */
/* These match the actual RGB values Hugo generates in inline styles */
/* Comments - gray (#75715e = rgb(117, 113, 94)) */
.highlight pre code span[style*="rgb(117, 113, 94)"],
.highlight pre code span[style*="color: rgb(117, 113, 94)"],
.highlight pre code span[style*="color:#75715e"] {
color: var(--overlay0) !important; /* #6c7086 */
font-style: italic;
}
/* Strings/Keywords - yellow (#e6db74 = rgb(230, 219, 116)) */
.highlight pre code span[style*="rgb(230, 219, 116)"],
.highlight pre code span[style*="color: rgb(230, 219, 116)"],
.highlight pre code span[style*="color:#e6db74"] {
color: var(--yellow) !important; /* #f9e2af */
}
/* Functions/Variables - green (#a6e22e = rgb(166, 226, 46)) */
.highlight pre code span[style*="rgb(166, 226, 46)"],
.highlight pre code span[style*="color: rgb(166, 226, 46)"],
.highlight pre code span[style*="color:#a6e22e"] {
color: var(--green) !important; /* #a6e3a1 */
}
/* Keywords/Operators - red/pink (#f92672 = rgb(249, 38, 114)) */
.highlight pre code span[style*="rgb(249, 38, 114)"],
.highlight pre code span[style*="color: rgb(249, 38, 114)"],
.highlight pre code span[style*="color:#f92672"] {
color: var(--accent-secondary) !important; /* #b4befe - lavender for keywords */
}
/* Functions/Names - cyan (#66d9ef = rgb(102, 217, 239)) */
.highlight pre code span[style*="rgb(102, 217, 239)"],
.highlight pre code span[style*="color: rgb(102, 217, 239)"],
.highlight pre code span[style*="color:#66d9ef"] {
color: var(--accent-color) !important; /* #89b4fa - blue */
}
/* Additional common Chroma color mappings */
/* Purple keywords */
.highlight pre code span[style*="rgb(174, 129, 255)"],
.highlight pre code span[style*="color:#ae81ff"] {
color: var(--accent-secondary) !important; /* #b4befe - lavender */
}
/* Orange/Peach for numbers/constants */
.highlight pre code span[style*="rgb(253, 151, 31)"],
.highlight pre code span[style*="color:#fd971f"] {
color: var(--peach) !important; /* #fab387 */
}
/* Red for errors/deletions */
.highlight pre code span[style*="rgb(233, 86, 120)"],
.highlight pre code span[style*="color:#e95678"] {
color: var(--red) !important; /* #f38ba8 */
}
/* Base text color (white/light gray) - keep as is but ensure it uses our text color */
.highlight pre code span[style*="rgb(248, 248, 242)"],
.highlight pre code span[style*="color:#f8f8f2"] {
color: var(--code-color) !important;
}
/* Regular pre blocks (non-highlighted) */
pre:not(.highlight pre) {
background: var(--bg-secondary);
border: 1px solid var(--code-border);
border-left: 3px solid var(--accent-color);
color: var(--code-color);
padding: 1.2em;
overflow-x: auto;
border-radius: 4px;
margin: 1.5em 0;
font-size: 0.9em;
line-height: 1.6;
}
pre:not(.highlight pre) code {
background: transparent;
color: inherit;
padding: 0;
border: none;
border-radius: 0;
}
/* Inline Code */
code {
color: var(--code-color);
background: var(--code-inline-bg);
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
border: 1px solid var(--code-border);
}
p > code {
color: var(--code-color);
background: var(--code-inline-bg);
padding: 0.2em 0.4em;
border: 1px solid var(--code-border);
border-radius: 3px;
}
/* Fixes iOS font sizing anomaly */
code {
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* ============================================
ARTICLES & CONTENT
============================================ */
article {
padding: 2em 0;
border-bottom: 1px solid var(--border-color);
}
/* The first article sits right under the header, which already provides
its own bottom margin. Avoid stacking that with the article's top padding. */
main > article:first-child,
main > .pagination + article:first-of-type {
padding-top: 0;
}
article:last-child {
border-bottom: none;
}
article h1 {
margin-top: 0;
}
/* Article Metadata */
article time {
color: var(--fontcolor-muted);
font-size: 0.9em;
display: inline-block;
margin-right: 0.5em;
}
/* Tags */
article a[href^="/tags/"] {
display: inline-block;
background: var(--tag-bg);
color: var(--tag-color);
padding: 0.2em 0.6em;
margin: 0.2em 0.2em 0.2em 0;
border-radius: 12px;
border: 1px solid var(--code-border);
font-size: 0.85em;
text-decoration: none;
transition: background var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
article a[href^="/tags/"]:hover {
background: var(--code-border);
border-color: var(--tag-color);
color: var(--linkcolor-hover);
border-bottom: 1px solid transparent;
}
/* ============================================
LISTS
============================================ */
ul, ol {
margin: 1em 0;
padding-left: 2em;
}
li {
margin: 0.5em 0;
line-height: 1.7;
}
/* ============================================
TABLES
============================================ */
table {
width: 100%;
margin: 1.5em 0;
border-collapse: collapse;
}
th, td {
border: 1px solid var(--border-color);
padding: 0.6em;
text-align: left;
}
th {
background: var(--code-bg);
color: var(--fontcolor);
font-weight: 600;
}
/* ============================================
IMAGES & FIGURES
============================================ */
img {
display: block;
max-width: 600px !important;
width: auto !important;
height: auto !important;
margin: 1.5em auto;
border-radius: 4px;
}
/* Override for float images to keep them small */
figure.floatright img,
figure.floatleft img {
max-width: 200px !important;
}
figure {
margin: 1.5em auto;
max-width: 100%;
overflow: hidden;
}
figure img {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
/* Ensure images inside articles scale properly - constrain to reasonable size */
/* This must be more specific than the figure img rule above */
main article figure img,
main article img,
article figure img,
article img {
max-width: 600px !important;
width: auto !important;
height: auto !important;
}
/* Force all images in main content area to be smaller */
main img {
max-width: 600px !important;
width: auto !important;
height: auto !important;
}
figcaption {
color: var(--fontcolor-muted);
font: 0.85em/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 0.5em;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
figure.floatright {
max-width: 200px;
width: auto\9*0.2; /* ie8 */
height: auto;
float: right;
margin: 0 0 1em 2em !important;
margin-top: 0 !important;
}
figure.floatleft {
max-width: 30%;
width: auto\9*0.3; /* ie8 */
height: auto;
float: left;
margin-right: 1.5em;
margin-bottom: 1em;
}
/* ============================================
FOOTER
============================================ */
footer {
margin-top: 3em;
padding-top: 1.5em;
border-top: 1px solid var(--border-color);
color: var(--fontcolor-muted);
font-size: 0.9em;
}
footer p {
margin: 0.5em 0;
}
/* ============================================
SIDEBAR
============================================ */
aside {
margin-top: 3em;
padding-top: 1.5em;
border-top: 1px solid var(--border-color);
}
aside h3 {
color: var(--fontcolor-muted);
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1em;
}
aside ul {
list-style: none;
padding-left: 0;
}
aside li {
margin: 0.5em 0;
}
aside a {
color: var(--fontcolor);
border-bottom: 1px solid transparent;
}
aside a:hover {
color: var(--linkcolor);
border-bottom-color: var(--linkcolor);
}
/* ============================================
PAGINATION
============================================ */
.pagination {
margin: 2em 0;
text-align: center;
}
.pagination a {
margin: 0 0.5em;
padding: 0.3em 0.8em;
background: var(--tag-bg);
border: 1px solid var(--code-border);
border-radius: 4px;
display: inline-block;
text-decoration: none;
transition: background var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
.pagination a:hover {
background: var(--code-border);
border-color: var(--accent-color);
color: var(--linkcolor-hover);
}
.pagination span {
margin: 0 0.5em;
color: var(--fontcolor-muted);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
body {
max-width: 100%;
padding: 0 15px;
font-size: 15px;
}
/* Header collapses to two stacked rows: title above, nav below. */
.header-content {
flex-direction: column;
align-items: flex-start;
gap: 0.25em;
}
/* Hide the "#Programming Blog" subtitle on phones to save vertical space. */
.header-subtitle {
display: none;
}
header nav {
width: 100%;
margin-top: 0.75em;
font-size: 0.95em;
/* Top row: hamburger on the left, theme toggle on the right.
Expanded link list (when open) wraps to its own row below. */
flex-wrap: wrap;
justify-content: space-between;
}
.nav-menu-toggle {
display: inline-block;
order: 0;
}
header nav .theme-toggle {
order: 1;
}
.nav-links {
/* Hidden by default; revealed when hamburger sets .is-open. */
order: 2;
flex: 1 1 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
row-gap: 0;
margin-top: 0.5em;
padding: 0;
border-top: 1px solid var(--border-color);
/* No bottom border: the already has one, which would otherwise
render as a double line directly under the expanded menu. */
display: none;
line-height: 1.4;
}
.nav-links.is-open {
display: flex;
}
/* Separators between links don't make sense in the vertical list. */
.nav-links .nav-separator {
display: none;
}
.nav-links a {
display: block;
width: 100%;
padding: 0.15em 0;
margin: 0;
line-height: 1.4;
border-bottom: 0;
}
.nav-links a > b {
font-weight: bold;
line-height: inherit;
}
figure.floatright,
figure.floatleft {
float: right;
max-width: 150px;
margin: 0 0 1em 1em !important;
}
}
/* ============================================
THEME TOGGLE (sliding switch)
============================================ */
.theme-toggle {
/* The button itself is just a hit target; the visual is the track. */
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
vertical-align: middle;
line-height: 0;
}
.theme-toggle:focus { outline: none; }
.theme-toggle:focus-visible .theme-toggle-track {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.theme-toggle-track {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.3em;
width: 4.2em;
height: 1.6em;
padding: 0 0.45em;
background: transparent;
border: 0;
border-radius: 0;
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
transition: background var(--transition-speed) ease,
border-color var(--transition-speed) ease;
}
/* '/' separator between the two glyphs - matches the nav-separator style. */
.theme-toggle-slash {
position: relative;
z-index: 1;
color: var(--fontcolor-muted);
pointer-events: none;
user-select: none;
}
.theme-toggle:hover .theme-toggle-slash,
.theme-toggle:hover .theme-toggle-icon {
color: var(--accent-color);
}
.theme-toggle-icon {
position: relative;
z-index: 1;
line-height: 1;
pointer-events: none;
transition: color var(--transition-speed) ease,
opacity var(--transition-speed) ease;
}
.theme-toggle-icon {
/* Inactive (dim) state by default; the active rule below overrides. */
color: var(--overlay0);
opacity: 0.6;
font-weight: 400;
}
/* Active digit: full text color, bold, slightly larger to really stand out. */
:root[data-theme="light"] .theme-toggle-icon--light,
:root[data-theme="dark"] .theme-toggle-icon--dark {
color: var(--accent-color);
opacity: 1;
font-weight: 700;
}
/* The '//' brightens slightly toward the accent color on hover, like a
syntax-highlighted comment getting attention. */
.theme-toggle:hover .theme-toggle-slash { color: var(--accent-color); }
/* Honor system preference when no explicit theme has been set. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .theme-toggle-icon--dark {
color: var(--accent-color);
opacity: 1;
font-weight: 700;
}
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) .theme-toggle-icon--light {
color: var(--accent-color);
opacity: 1;
font-weight: 700;
}
}