3.6 KB
raw
// Status — warm-earth dark theme, aligned to blog.bythewood.me
// Mossy forest green + warm amber on a deep earth background. Quieter
// than true cyberpunk — feels like a UNIX operator's console.
// ── Typography ──
$font-family-sans-serif: 'Monaspace Argon', ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;
$font-family-monospace: 'Monaspace Argon', ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;
$headings-font-family: null;
$headings-font-weight: 700;
$font-size-base: 0.92rem;
$line-height-base: 1.7;
$headings-line-height: 1.3;
// ── Core palette — warm earth darks ──
$white: #ede8e0;
$gray-100: #ddd7cd;
$gray-200: #c4bdb2;
$gray-300: #a09890;
$gray-400: #847c72;
$gray-500: #665f56;
$gray-600: #4a443c;
$gray-700: #332e28;
$gray-800: #211e1a;
$gray-900: #161310;
$black: #0b0a08;
$body-bg: #0e0d0a;
$body-color: #ddd7cd;
// ── Accents — muted forest green + warm amber ──
$green: #6b9e78;
$green-bright: #7db88c;
$green-dim: rgba(107, 158, 120, 0.12);
$green-border: rgba(107, 158, 120, 0.22);
$amber: #c9a84c;
$amber-dim: rgba(201, 168, 76, 0.1);
$amber-border: rgba(201, 168, 76, 0.22);
$terracotta: #c47055;
$terracotta-dim: rgba(196, 112, 85, 0.1);
$terracotta-border: rgba(196, 112, 85, 0.22);
// ── Theme mapping ──
$primary: $green;
$secondary: #4a443c;
$success: $green;
$info: #7eaab8;
$warning: $amber;
$danger: $terracotta;
$light: #211e1a;
$dark: #0e0d0a;
// ── Links ──
$link-color: $green-bright;
$link-hover-color: #95cca2;
$link-decoration: none;
$link-hover-decoration: underline;
// ── Borders ──
$border-color: rgba(221, 215, 205, 0.06);
$border-radius: 0.25rem;
$border-radius-sm: 0.2rem;
$border-radius-lg: 0.375rem;
// ── Cards ──
$card-bg: #13120e;
$card-border-color: rgba(107, 158, 120, 0.1);
$card-color: $body-color;
$card-cap-bg: rgba(221, 215, 205, 0.02);
// ── Inputs ──
$input-bg: #13120e;
$input-color: $body-color;
$input-border-color: rgba(107, 158, 120, 0.18);
$input-focus-bg: #18160f;
$input-focus-color: $body-color;
$input-focus-border-color: $green;
$input-focus-box-shadow: 0 0 0 2px rgba(107, 158, 120, 0.15);
$input-placeholder-color: #665f56;
// ── Navbar ──
$navbar-dark-color: rgba(221, 215, 205, 0.6);
$navbar-dark-hover-color: $white;
$navbar-dark-active-color: $white;
// ── List group ──
$list-group-bg: #13120e;
$list-group-border-color: rgba(107, 158, 120, 0.08);
$list-group-hover-bg: #1a1812;
$list-group-action-color: #a09890;
$list-group-action-hover-color: $white;
$list-group-action-active-bg: #211e1a;
$list-group-action-active-color: $white;
$list-group-active-bg: $green-dim;
$list-group-active-border-color: $green-border;
$list-group-active-color: $green-bright;
// ── Breadcrumbs ──
$breadcrumb-active-color: $white;
$breadcrumb-divider-color: #665f56;
// ── Dropdowns ──
$dropdown-bg: #13120e;
$dropdown-border-color: rgba(107, 158, 120, 0.12);
$dropdown-color: $body-color;
$dropdown-link-color: #a09890;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: #1a1812;
// ── Close button ──
$btn-close-color: $body-color;
// ── Modal ──
$modal-content-bg: #13120e;
$modal-content-border-color: rgba(107, 158, 120, 0.15);
$modal-header-border-color: rgba(107, 158, 120, 0.08);
$modal-footer-border-color: rgba(107, 158, 120, 0.08);
$modal-backdrop-bg: #000;
$modal-backdrop-opacity: 0.75;
// ── Progress ──
$progress-bg: rgba(221, 215, 205, 0.05);
$progress-bar-bg: $green;
// ── Tables ──
$table-bg: transparent;
$table-color: $body-color;
$table-border-color: rgba(107, 158, 120, 0.08);