/* ==========================================================================
benlabs.dev — single stylesheet
Theme: One Dark Pro base + AWS Smile Orange signature accent
Type: JetBrains Mono (chrome/UI) + Symbols Nerd Font (icons)
system sans is used only for long-form reading surfaces
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts (self-hosted — no CDN, no external requests)
-------------------------------------------------------------------------- */
@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Icons only. unicode-range keeps this font from ever affecting normal text. */
@font-face {
font-family: 'Symbols Nerd Font';
src: url('../fonts/SymbolsNerdFont-Subset.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
unicode-range: U+E600-E8FF, U+EBD8, U+EF5D, U+F000-F2FF, U+F31B-F31C,
U+F10FE, U+F109A, U+F0594, U+F0599;
}
/* --------------------------------------------------------------------------
2. Design tokens
-------------------------------------------------------------------------- */
:root {
/* One Dark Pro — surfaces */
--bg: #282c34;
--bg-sunken: #21252b;
--bg-raised: #2f343e;
--bg-overlay: #21252b;
--border: #3e4451;
--border-soft: #343a45;
/* Text */
--text: #abb2bf;
--text-strong: #dcdfe4;
--text-muted: #9aa2af;
/* One Dark Pro — accents */
--red: #e06c75;
--orange: #d19a66;
--yellow: #e5c07b;
--green: #98c379;
--cyan: #56b6c2;
--blue: #61afef;
--purple: #c678dd;
/* Signature accent — AWS Smile Orange */
--accent: #ff9900;
--accent-hover: #ffad33;
--accent-soft: rgba(255, 153, 0, 0.12);
--link: var(--blue);
--link-hover: #8cc7f5;
/* Type */
--font-mono: 'JetBrains Mono', 'Symbols Nerd Font', ui-monospace,
SFMono-Regular, Menlo, Consolas, monospace;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Symbols Nerd Font', sans-serif;
/* Spacing / shape */
--radius: 8px;
--radius-sm: 5px;
--measure: 72ch;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.36);
}
/* Light theme — "One Light" derived, with a darkened orange for contrast */
:root[data-theme='light'] {
--bg: #fafafa;
--bg-sunken: #f0f0f1;
--bg-raised: #ffffff;
--border: #d9d9dc;
--border-soft: #e7e7e9;
--text: #383a42;
--text-strong: #1c1d21;
--text-muted: #62656d;
--red: #e45649;
--orange: #c18401;
--yellow: #b8860b;
--green: #50a14f;
--cyan: #0184bc;
--blue: #3565d6;
--purple: #a626a4;
/* Darker than the dark-theme orange so accent text clears AA on light bg */
--accent: #9a4508;
--accent-hover: #7c3706;
--accent-soft: rgba(154, 69, 8, 0.10);
--link: var(--blue);
--link-hover: #1e46a8;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* --------------------------------------------------------------------------
3. Reset & base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
min-height: 100vh;
}
img { max-width: 100%; height: auto; }
a {
color: var(--link);
text-decoration: none;
}
a:hover { color: var(--link-hover); text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
hr {
border: none;
border-top: 1px solid var(--border);
margin: 2.5rem 0;
}
::selection {
background: var(--accent-soft);
color: var(--text-strong);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* --------------------------------------------------------------------------
4. Typography
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
color: var(--text-strong);
font-family: var(--font-mono);
font-weight: 700;
line-height: 1.25;
margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.75rem, 4.2vw, 2.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.6rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1.15em; }
strong { color: var(--text-strong); font-weight: 700; }
small, .text-muted { color: var(--text-muted); }
code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
padding: 0.1em 0.38em;
color: var(--orange);
}
pre {
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 1rem 1.15rem;
overflow-x: auto;
font-size: 0.875rem;
line-height: 1.6;
margin: 0 0 1.5em;
}
pre code {
background: none;
border: none;
padding: 0;
color: var(--text);
font-size: inherit;
}
blockquote {
margin: 0 0 1.5em;
padding: 0.25rem 0 0.25rem 1.15rem;
border-left: 3px solid var(--accent);
color: var(--text-muted);
}
/* --------------------------------------------------------------------------
5. Icons (Nerd Font)
-------------------------------------------------------------------------- */
.nf {
font-family: 'Symbols Nerd Font';
font-style: normal;
font-weight: normal;
line-height: 1;
display: inline-block;
vertical-align: -0.06em;
}
/* Tech logos */
.nf-aws::before { content: '\e7ad'; }
.nf-docker::before { content: '\e7b0'; }
.nf-kubernetes::before { content: '\f10fe'; }
.nf-terraform::before { content: '\e69a'; }
.nf-ansible::before { content: '\f109a'; }
.nf-python::before { content: '\e73c'; }
.nf-git::before { content: '\e702'; }
.nf-github::before { content: '\e709'; }
.nf-azure::before { content: '\ebd8'; }
.nf-linux::before { content: '\f17c'; }
.nf-ubuntu::before { content: '\f31b'; }
.nf-redhat::before { content: '\ef5d'; }
.nf-database::before { content: '\f1c0'; }
.nf-server::before { content: '\f233'; }
.nf-cloud::before { content: '\f0c2'; }
.nf-grafana::before { content: '\e7f3'; }
.nf-prometheus::before { content: '\e870'; }
/* UI */
.nf-home::before { content: '\f015'; }
.nf-briefcase::before { content: '\f0b1'; }
.nf-code::before { content: '\f121'; }
.nf-book::before { content: '\f02d'; }
.nf-envelope::before { content: '\f0e0'; }
.nf-terminal::before { content: '\f120'; }
.nf-folder::before { content: '\f07b'; }
.nf-calendar::before { content: '\f073'; }
.nf-tag::before { content: '\f02b'; }
.nf-arrow-right::before { content: '\f061'; }
.nf-arrow-left::before { content: '\f060'; }
.nf-download::before { content: '\f019'; }
.nf-external::before { content: '\f08e'; }
.nf-clock::before { content: '\f017'; }
.nf-chevron::before { content: '\f054'; }
.nf-user::before { content: '\f007'; }
.nf-star::before { content: '\f005'; }
.nf-check::before { content: '\f00c'; }
.nf-linkedin::before { content: '\f08c'; }
.nf-rss::before { content: '\f09e'; }
.nf-lock::before { content: '\f023'; }
.nf-rocket::before { content: '\f135'; }
.nf-gear::before { content: '\f013'; }
.nf-graph::before { content: '\f201'; }
.nf-shield::before { content: '\f132'; }
.nf-bolt::before { content: '\f0e7'; }
.nf-file-code::before { content: '\f1c9'; }
.nf-sun::before { content: '\f0599'; }
.nf-moon::before { content: '\f0594'; }
/* Datadog is not in Nerd Fonts, so it ships as a masked SVG (simple-icons).
Masking keeps it colorable and sized like the font glyphs. */
.si {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.si-datadog {
color: #632ca6;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Brand tints for tech logos */
.nf-aws { color: #ff9900; }
.nf-docker { color: #2496ed; }
.nf-kubernetes { color: #326ce5; }
.nf-terraform { color: #7b42bc; }
.nf-ansible { color: #ee0000; }
.nf-python { color: #3776ab; }
.nf-github { color: var(--text-strong); }
.nf-azure { color: #0089d6; }
.nf-ubuntu { color: #e95420; }
.nf-redhat { color: #ee0000; }
.nf-grafana { color: #f46800; }
.nf-prometheus { color: #e6522c; }
/* --------------------------------------------------------------------------
6. Layout
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1.5rem;
}
main { flex: 1 0 auto; }
.content-section {
max-width: var(--measure);
margin: 0 auto;
padding: 2.5rem 0 3.5rem;
}
.section { margin: 3.5rem 0; }
.section-title {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.3rem;
margin-top: 3.25rem;
margin-bottom: 1.5rem;
}
/* The first heading in a flow shouldn't push itself away from the page title. */
.section-title:first-child,
.section > .section-title { margin-top: 0; }
.section-title .nf { color: var(--accent); font-size: 1.1em; }
/* ---- Header / nav ---- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--border-soft);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 58px;
}
/* Terminal-prompt style brand mark */
.brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
color: var(--text-strong);
white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--text-strong); }
.brand .nf { color: var(--accent); }
.brand .brand-path { color: var(--green); }
.brand .brand-caret {
color: var(--accent);
animation: blink 1.2s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.site-nav {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.site-nav a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.6rem;
border-radius: var(--radius-sm);
color: var(--text);
font-size: 0.875rem;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.site-nav a:hover {
background: var(--bg-raised);
color: var(--text-strong);
text-decoration: none;
}
.site-nav a.is-active { color: var(--accent); }
.site-nav a .nf { opacity: 0.75; font-size: 0.95em; }
.site-nav a:hover .nf, .site-nav a.is-active .nf { opacity: 1; }
/* Theme toggle — icon + label so it reads as a control, not decoration */
.theme-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.3rem 0.4rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-raised);
color: var(--text-strong);
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.72rem;
line-height: 1;
white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Invisible 44px hit area, so the control can look small but stay tappable. */
.theme-toggle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
.theme-toggle .nf {
font-size: 0.9rem;
color: var(--accent);
}
.theme-toggle:hover {
background: var(--bg-sunken);
border-color: var(--accent);
color: var(--accent);
}
/* ---- Footer ---- */
.site-footer {
flex-shrink: 0;
border-top: 1px solid var(--border-soft);
margin-top: 4rem;
padding: 2rem 0;
color: var(--text-muted);
font-size: 0.85rem;
}
.site-footer .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.footer-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.footer-links a:hover { color: var(--accent); text-decoration: none; }
/* --------------------------------------------------------------------------
7. Components
-------------------------------------------------------------------------- */
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-raised);
color: var(--text-strong);
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover {
text-decoration: none;
transform: translateY(-2px);
border-color: var(--accent);
color: var(--text-strong);
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #1b1200;
}
.btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
color: #1b1200;
}
:root[data-theme='light'] .btn-primary { color: #fff; }
.btn-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin: 1.75rem 0;
}
/* ---- Cards ---- */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 1.15rem;
margin: 2rem 0;
}
.card {
display: flex;
flex-direction: column;
padding: 1.35rem;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
a.card:hover {
text-decoration: none;
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: var(--shadow-lg);
color: var(--text);
}
.card-icon {
font-size: 1.75rem;
margin-bottom: 0.85rem;
line-height: 1;
}
.card h3 {
margin: 0 0 0.4rem;
font-size: 1rem;
color: var(--text-strong);
}
.card p {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.55;
}
.card.is-disabled {
opacity: 0.5;
pointer-events: none;
}
/* Centered variant, used for contact / platform links */
.card-grid--center .card { align-items: center; text-align: center; }
/* ---- Tags ---- */
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.75rem;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15em 0.55em;
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 0.75rem;
white-space: nowrap;
}
.tag--accent {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-soft);
}
/* Tags that navigate to the topic index */
a.tag--link {
text-decoration: none;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
a.tag--link:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-soft);
text-decoration: none;
}
.tag-count {
margin-left: 0.45em;
padding-left: 0.45em;
border-left: 1px solid currentColor;
opacity: 0.65;
font-size: 0.9em;
}
.tag-count--heading {
border: none;
padding: 0;
margin-left: 0.15em;
font-size: 0.6em;
color: var(--text-muted);
}
/* Topic index */
.tag-row--index {
gap: 0.5rem;
margin: 0 0 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-soft);
}
.tag-row--index .tag { font-size: 0.82rem; padding: 0.3em 0.7em; }
.tag-section { scroll-margin-top: 5rem; }
.tag-section .post-list li {
padding-bottom: 1.1rem;
margin-bottom: 1.1rem;
}
/* ---- Editor card (skills.yaml) ---- */
.editor {
max-width: 700px;
margin: 2rem auto;
background: var(--bg-sunken);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
text-align: left;
}
.editor-titlebar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.9rem;
background: var(--bg-overlay, #21252b);
border-bottom: 1px solid var(--border);
}
:root[data-theme='light'] .editor-titlebar { background: #e8e8ea; }
.editor-dots { display: flex; gap: 0.4rem; }
.editor-dots span {
width: 11px;
height: 11px;
border-radius: 50%;
display: block;
}
.editor-dots .dot-close { background: #e06c75; }
.editor-dots .dot-min { background: #e5c07b; }
.editor-dots .dot-max { background: #98c379; }
.editor-filename {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.editor-filename .nf { color: var(--red); }
.editor-body {
display: flex;
padding: 1rem 0;
overflow-x: auto;
}
.editor-gutter {
flex: 0 0 auto;
padding: 0 1rem 0 1.1rem;
text-align: right;
user-select: none;
color: #5c6370;
font-size: 0.8rem;
line-height: 1.6;
border-right: 1px solid var(--border-soft);
}
:root[data-theme='light'] .editor-gutter { color: #9d9d9f; }
.editor-gutter span { display: block; }
.editor-code {
margin: 0;
padding: 0 1.25rem;
background: none;
border: none;
font-size: 0.8rem;
line-height: 1.6;
color: var(--text);
white-space: pre;
flex: 1 1 auto;
}
/* YAML syntax highlighting — One Dark Pro */
.editor-code .y-key { color: #e06c75; }
.editor-code .y-str { color: #98c379; }
.editor-code .y-num { color: #d19a66; }
.editor-code .y-punc { color: #56b6c2; }
.editor-code .y-com { color: #5c6370; font-style: italic; }
:root[data-theme='light'] .editor-code .y-key { color: #e45649; }
:root[data-theme='light'] .editor-code .y-str { color: #50a14f; }
:root[data-theme='light'] .editor-code .y-num { color: #c18401; }
:root[data-theme='light'] .editor-code .y-punc { color: #0184bc; }
:root[data-theme='light'] .editor-code .y-com { color: #a0a1a7; }
/* ---- Home: hero ---- */
.hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 3rem 0 1rem;
}
.hero-photo {
width: min(190px, 46vw);
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--border);
box-shadow: var(--shadow-lg);
margin-bottom: 1.5rem;
}
.hero h1 { margin-bottom: 0.25rem; }
/* Short role line, set as a deliberate eyebrow rather than a second heading. */
.hero-role {
display: inline-flex;
align-items: center;
gap: 0.7rem;
color: var(--accent);
font-size: clamp(0.8rem, 2vw, 0.92rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 1.15rem;
}
/* Hairlines that taper away from the title on each side. */
.hero-role::before,
.hero-role::after {
content: '';
width: clamp(18px, 6vw, 40px);
height: 1px;
background: linear-gradient(to right, transparent, var(--accent));
opacity: 0.6;
}
.hero-role::after {
background: linear-gradient(to left, transparent, var(--accent));
}
.hero-tagline {
max-width: 60ch;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
/* ---- Highlight list (achievements) ---- */
.highlights {
list-style: none;
padding: 0;
margin: 2rem 0;
display: grid;
gap: 0.85rem;
}
.highlights li {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.85rem 1rem;
background: var(--bg-raised);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--green);
border-radius: var(--radius-sm);
font-size: 0.9rem;
line-height: 1.55;
}
.highlights li .nf {
color: var(--green);
margin-top: 0.2em;
flex-shrink: 0;
}
/* ---- Experience: skill groups ---- */
.skill-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 1.15rem;
margin: 2rem 0 3rem;
}
.skill-group {
padding: 1.25rem;
background: var(--bg-raised);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
}
.skill-group h3 {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.92rem;
margin-bottom: 0.85rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--border-soft);
}
.skill-group h3 .nf { color: var(--accent); }
.skill-group p {
margin: 0 0 0.55rem;
font-size: 0.82rem;
line-height: 1.6;
color: var(--text-muted);
}
.skill-group p:last-child { margin-bottom: 0; }
/* ---- Experience: timeline ---- */
.timeline {
position: relative;
margin: 2rem 0 3rem;
padding-left: 1.5rem;
border-left: 2px solid var(--border);
}
.role { position: relative; padding-bottom: 2.25rem; }
.role:last-child { padding-bottom: 0; }
.role::before {
content: '';
position: absolute;
left: calc(-1.5rem - 6px);
top: 0.5rem;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
border: 2px solid var(--bg);
}
.timeline--compact .role::before { background: var(--text-muted); }
.role-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.role-head h3 {
margin: 0;
font-size: 1rem;
color: var(--text-strong);
}
.role-dates {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
}
.role-company {
margin: 0.2rem 0 0.75rem;
font-size: 0.88rem;
color: var(--accent);
}
.role ul {
margin: 0 0 0.9rem;
padding-left: 1.15rem;
font-size: 0.87rem;
line-height: 1.6;
}
.role ul li { margin-bottom: 0.35rem; }
.role > p:not(.role-company) {
font-size: 0.87rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.earlier-heading {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin-top: 2.5rem;
}
.earlier-heading .nf { color: var(--text-muted); }
/* ---- Projects ---- */
.project-list { margin: 2rem 0; }
.project {
padding: 1.6rem;
margin-bottom: 1.5rem;
background: var(--bg-raised);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
}
.project-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.project-head h2 {
margin: 0;
font-size: 1.15rem;
}
.project-line {
font-size: 0.89rem;
line-height: 1.65;
margin-bottom: 0.7rem;
}
.project-line strong { color: var(--accent); }
.project .btn-row { margin: 1.25rem 0 0; }
/* --------------------------------------------------------------------------
8. Blog
-------------------------------------------------------------------------- */
/* Long-form reading surfaces switch to a sans stack for comfort. */
.post-content,
.prose {
font-family: var(--font-sans);
font-size: 1.02rem;
line-height: 1.75;
max-width: 68ch;
}
.post-content h2,
.post-content h3,
.prose h2,
.prose h3 { font-family: var(--font-mono); }
.post-content h2 { margin-top: 2.2em; }
.post-content h3 { margin-top: 1.6em; }
.post-content ul,
.post-content ol { padding-left: 1.4em; margin-bottom: 1.3em; }
.post-content li { margin-bottom: 0.45em; }
.post-content img {
border-radius: var(--radius);
border: 1px solid var(--border-soft);
}
/* ---- Tables ----
* display:block lets a wide table scroll inside itself instead of pushing the
* whole page sideways on small screens.
*/
.post-content table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
margin: 0 0 1.5em;
font-size: 0.9rem;
font-family: var(--font-mono);
}
.post-content thead {
background: var(--bg-sunken);
}
.post-content th,
.post-content td {
padding: 0.6em 0.85em;
border: 1px solid var(--border-soft);
text-align: left;
vertical-align: top;
}
.post-content th {
color: var(--text-strong);
font-weight: 700;
white-space: nowrap;
}
.post-content tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--bg-sunken) 45%, transparent);
}
.post-content td code {
white-space: nowrap;
}
/*
* On wide screens let tables spill slightly past the reading column so the
* last column isn't squeezed. Bounded and media-queried, so small screens
* still scroll the table internally instead of the page.
*/
@media (min-width: 1080px) {
.post-content table {
width: calc(100% + 8rem);
margin-left: -4rem;
margin-right: -4rem;
}
}
/* ---- Post list ---- */
.blog-intro { color: var(--text-muted); margin-bottom: 2.5rem; }
.post-list {
list-style: none;
padding: 0;
margin: 0;
}
.post-list li {
padding-bottom: 1.6rem;
margin-bottom: 1.6rem;
border-bottom: 1px solid var(--border-soft);
}
.post-list li:last-child { border-bottom: none; }
.post-list .post-link {
display: inline-block;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
color: var(--text-strong);
margin-bottom: 0.4rem;
}
.post-list .post-link:hover { color: var(--accent); text-decoration: none; }
.post-meta-row {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.8rem;
color: var(--text-muted);
}
.post-meta-row .meta-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.post-series { color: var(--purple); }
/* ---- Single post ---- */
.post { max-width: 68ch; margin: 0 auto; }
.post > h1 { margin-bottom: 0.6rem; }
.post-meta {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.82rem;
color: var(--text-muted);
padding-bottom: 1.25rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--border-soft);
}
.post-meta .meta-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.series-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15em 0.55em;
border-radius: var(--radius-sm);
background: var(--accent-soft);
border: 1px solid var(--accent);
color: var(--accent);
font-size: 0.75rem;
}
/* ---- Series navigation ---- */
.series-nav {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.4rem;
margin: 0 0 2.5rem;
text-align: left;
}
.series-nav-heading {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 0 0 0.9rem;
}
.series-nav-heading .nf { color: var(--accent); }
.series-parts-list {
list-style: none;
padding: 0.9rem 0 0;
margin: 0;
border-top: 1px solid var(--border-soft);
}
.series-part-item { margin-bottom: 0.3rem; font-size: 0.88rem; }
.series-part-item:last-child { margin-bottom: 0; }
.series-part-item a,
.series-part-item > span {
display: flex;
gap: 0.6rem;
padding: 0.4rem 0.5rem;
border-radius: var(--radius-sm);
}
.series-part-item a { color: var(--link); }
.series-part-item a:hover {
background: var(--bg-sunken);
text-decoration: none;
}
.series-part-label {
flex-shrink: 0;
font-weight: 700;
color: var(--text-muted);
}
.series-part-current {
background: var(--accent-soft);
border-radius: var(--radius-sm);
}
.series-part-current .series-part-label { color: var(--accent); }
.series-part-current .series-part-title { color: var(--text-strong); }
.series-prevnext-row {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--border-soft);
}
.series-prevnext-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
padding: 0.4rem 0.8rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-sunken);
color: var(--link);
}
.series-prevnext-link:hover {
border-color: var(--accent);
color: var(--accent);
text-decoration: none;
}
.series-next { margin-left: auto; }
.series-prevnext-disabled {
opacity: 0.4;
pointer-events: none;
color: var(--text-muted);
}
/* --------------------------------------------------------------------------
Code blocks (Rouge, server-side highlighted — no JS, no CDN)
Palette: One Dark Pro / One Light
-------------------------------------------------------------------------- */
/* The card is the outer wrapper so the header bar sits inside it. */
.post-content div.highlighter-rouge {
position: relative;
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
margin: 0 0 1.6em;
overflow: hidden;
}
.post-content div.highlighter-rouge .highlight {
background: none;
margin: 0;
}
.post-content div.highlighter-rouge pre {
background: none;
border: none;
border-radius: 0;
margin: 0;
padding: 1rem 1.15rem;
overflow-x: auto;
font-size: 0.85rem;
line-height: 1.65;
tab-size: 2;
}
/* Header bar: language label + copy button (added by the layout script) */
.post-content .code-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.45rem 0.75rem 0.45rem 1.15rem;
background: var(--bg-overlay);
border-bottom: 1px solid var(--border-soft);
}
:root[data-theme='light'] .post-content .code-header { background: #ececee; }
.post-content .code-lang {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.post-content .code-copy {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.5rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 0.68rem;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.post-content .code-copy:hover {
color: var(--accent);
border-color: var(--accent);
}
.post-content .code-copy[data-copied='true'] {
color: var(--green);
border-color: var(--green);
}
/* Long lines are common in Terraform — give code more room on wide screens. */
@media (min-width: 1080px) {
.post-content div.highlighter-rouge {
width: calc(100% + 8rem);
margin-left: -4rem;
margin-right: -4rem;
}
}
/* ---- Rouge tokens: dark (One Dark Pro) ---- */
.post-content .highlight .c,
.post-content .highlight .c1,
.post-content .highlight .cm,
.post-content .highlight .cs,
.post-content .highlight .cd { color: #5c6370; font-style: italic; }
.post-content .highlight .cp { color: #5c6370; }
.post-content .highlight .k,
.post-content .highlight .kn,
.post-content .highlight .kp,
.post-content .highlight .kr,
.post-content .highlight .kd { color: #c678dd; }
.post-content .highlight .kc { color: #d19a66; }
.post-content .highlight .kt { color: #e5c07b; }
.post-content .highlight .s,
.post-content .highlight .s1,
.post-content .highlight .s2,
.post-content .highlight .sb,
.post-content .highlight .sc,
.post-content .highlight .sd,
.post-content .highlight .sh,
.post-content .highlight .sx,
.post-content .highlight .sr,
.post-content .highlight .ss { color: #98c379; }
.post-content .highlight .se,
.post-content .highlight .si { color: #56b6c2; }
.post-content .highlight .m,
.post-content .highlight .mi,
.post-content .highlight .mf,
.post-content .highlight .mh,
.post-content .highlight .mo,
.post-content .highlight .mb { color: #d19a66; }
.post-content .highlight .nf,
.post-content .highlight .nd { color: #61afef; }
.post-content .highlight .nc,
.post-content .highlight .nn,
.post-content .highlight .ne { color: #e5c07b; }
.post-content .highlight .na,
.post-content .highlight .nt,
.post-content .highlight .nv,
.post-content .highlight .vi,
.post-content .highlight .vg,
.post-content .highlight .vc { color: #e06c75; }
.post-content .highlight .nb,
.post-content .highlight .no,
.post-content .highlight .nl { color: #56b6c2; }
.post-content .highlight .n,
.post-content .highlight .nx,
.post-content .highlight .py,
.post-content .highlight .ni { color: var(--text); }
.post-content .highlight .o,
.post-content .highlight .ow { color: #56b6c2; }
.post-content .highlight .p { color: var(--text-muted); }
/*
* Rouge's Terraform lexer marks some valid punctuation as an error. Default
* themes paint .err bright red on a red field, which makes correct code look
* broken — so it is styled as ordinary text here.
*/
.post-content .highlight .err { color: var(--text); background: none; }
/* Diffs */
.post-content .highlight .gd { color: #e06c75; }
.post-content .highlight .gi { color: #98c379; }
.post-content .highlight .gh,
.post-content .highlight .gu { color: #61afef; font-weight: 700; }
/* ---- Rouge tokens: light (One Light) ---- */
:root[data-theme='light'] .post-content .highlight .c,
:root[data-theme='light'] .post-content .highlight .c1,
:root[data-theme='light'] .post-content .highlight .cm,
:root[data-theme='light'] .post-content .highlight .cs,
:root[data-theme='light'] .post-content .highlight .cd,
:root[data-theme='light'] .post-content .highlight .cp { color: #5f6169; }
:root[data-theme='light'] .post-content .highlight .k,
:root[data-theme='light'] .post-content .highlight .kn,
:root[data-theme='light'] .post-content .highlight .kp,
:root[data-theme='light'] .post-content .highlight .kr,
:root[data-theme='light'] .post-content .highlight .kd { color: #a626a4; }
:root[data-theme='light'] .post-content .highlight .kc { color: #7a5300; }
:root[data-theme='light'] .post-content .highlight .kt { color: #8a5e00; }
:root[data-theme='light'] .post-content .highlight .s,
:root[data-theme='light'] .post-content .highlight .s1,
:root[data-theme='light'] .post-content .highlight .s2,
:root[data-theme='light'] .post-content .highlight .sb,
:root[data-theme='light'] .post-content .highlight .sc,
:root[data-theme='light'] .post-content .highlight .sd,
:root[data-theme='light'] .post-content .highlight .sh,
:root[data-theme='light'] .post-content .highlight .sx,
:root[data-theme='light'] .post-content .highlight .sr,
:root[data-theme='light'] .post-content .highlight .ss { color: #2f6f2f; }
:root[data-theme='light'] .post-content .highlight .m,
:root[data-theme='light'] .post-content .highlight .mi,
:root[data-theme='light'] .post-content .highlight .mf,
:root[data-theme='light'] .post-content .highlight .mh,
:root[data-theme='light'] .post-content .highlight .mo,
:root[data-theme='light'] .post-content .highlight .mb { color: #7a5300; }
:root[data-theme='light'] .post-content .highlight .nf,
:root[data-theme='light'] .post-content .highlight .nd { color: #2c5bc4; }
:root[data-theme='light'] .post-content .highlight .nc,
:root[data-theme='light'] .post-content .highlight .nn,
:root[data-theme='light'] .post-content .highlight .ne { color: #8a5e00; }
:root[data-theme='light'] .post-content .highlight .na,
:root[data-theme='light'] .post-content .highlight .nt,
:root[data-theme='light'] .post-content .highlight .nv,
:root[data-theme='light'] .post-content .highlight .vi,
:root[data-theme='light'] .post-content .highlight .vg,
:root[data-theme='light'] .post-content .highlight .vc { color: #b3271a; }
:root[data-theme='light'] .post-content .highlight .nb,
:root[data-theme='light'] .post-content .highlight .no,
:root[data-theme='light'] .post-content .highlight .nl { color: #01607d; }
:root[data-theme='light'] .post-content .highlight .o,
:root[data-theme='light'] .post-content .highlight .ow { color: #01607d; }
/* Mermaid diagrams */
.mermaid { margin: 2rem 0; text-align: center; }
.mermaid svg { max-width: 100%; height: auto; }
/* --------------------------------------------------------------------------
Architecture diagrams
-------------------------------------------------------------------------- */
/*
* Diagrams need more room than the reading column. The negative margin is
* bounded (not viewport-based) so the page itself can never scroll sideways;
* on narrow screens the figure scrolls inside itself instead.
*/
.post-content .diagram {
margin: 2.5rem -7rem;
overflow-x: auto;
}
.post-content .diagram svg {
display: block;
width: 100%;
height: auto;
min-width: 620px;
}
.post-content .diagram figcaption {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-muted);
text-align: center;
margin-top: 0.9rem;
padding: 0 1rem;
}
@media (max-width: 1080px) {
.post-content .diagram { margin-left: 0; margin-right: 0; }
}
/* ---- Diagram theming (inherits the site's CSS variables) ---- */
.arch-diagram { font-family: var(--font-mono); }
.arch-diagram .edges path { stroke: var(--text-muted); opacity: 0.55; }
.arch-diagram .arrowhead { fill: var(--text-muted); opacity: 0.55; }
/* Outer groups */
.arch-diagram .group > rect {
fill: var(--bg-raised);
stroke: var(--border);
stroke-width: 1;
}
.arch-diagram .group--io > rect { fill: var(--bg-sunken); }
.arch-diagram .group--vpc > rect { stroke: var(--accent); stroke-opacity: 0.45; }
.arch-diagram .group-label {
fill: var(--text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Nested groups (subnets, security group) */
.arch-diagram .subgroup > rect {
fill: none;
stroke: var(--border);
stroke-width: 1;
stroke-dasharray: 4 4;
}
.arch-diagram .subgroup--sg > rect {
stroke: var(--green);
stroke-opacity: 0.55;
}
.arch-diagram .subgroup-label {
fill: var(--text-muted);
font-size: 10.5px;
letter-spacing: 0.06em;
}
.arch-diagram .subgroup--sg .subgroup-label { fill: var(--green); }
/* Nodes */
.arch-diagram .node > rect {
fill: var(--bg-sunken);
stroke: var(--border);
stroke-width: 1;
}
.arch-diagram .node > text {
fill: var(--text-strong);
font-size: 12.5px;
text-anchor: middle;
}
.arch-diagram .node--input > rect,
.arch-diagram .node--output > rect { fill: var(--bg-raised); }
.arch-diagram .node--input > text,
.arch-diagram .node--output > text { font-size: 11px; fill: var(--text); }
.arch-diagram .node--input > rect { stroke: var(--blue); stroke-opacity: 0.5; }
.arch-diagram .node--output > rect { stroke: var(--green); stroke-opacity: 0.5; }
.arch-diagram .node--iam > rect { stroke: var(--purple); stroke-opacity: 0.6; }
.arch-diagram .node--data > rect { stroke: var(--cyan); stroke-opacity: 0.6; }
.arch-diagram .node--net > rect { stroke: var(--border); }
/* The subject of the diagram gets the signature accent. */
.arch-diagram .node--compute > rect {
fill: var(--accent-soft);
stroke: var(--accent);
stroke-width: 1.5;
}
.arch-diagram .node--compute > text { fill: var(--text-strong); font-weight: 700; }
/* --------------------------------------------------------------------------
9. Responsive
-------------------------------------------------------------------------- */
@media (max-width: 720px) {
.container { padding: 0 1rem; }
.site-header .container {
flex-wrap: wrap;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
gap: 0.5rem;
}
.site-nav {
order: 3;
width: 100%;
justify-content: space-between;
gap: 0.15rem;
border-top: 1px solid var(--border-soft);
padding-top: 0.4rem;
}
.site-nav a {
flex-direction: column;
gap: 0.2rem;
font-size: 0.68rem;
padding: 0.3rem 0.35rem;
}
.site-nav a .nf { font-size: 1.05rem; }
.content-section { padding: 1.75rem 0 2.5rem; }
.hero { padding: 2rem 0 0.5rem; }
.site-footer .container { justify-content: center; text-align: center; }
.editor-code, .editor-gutter { font-size: 0.72rem; }
}