styles.css

/* TYPOGRAPHY SECTION */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

/* Typography hierarchy */
:root {
    --font-title: 'Be Vietnam Pro', sans-serif;
    --font-body: 'JetBrains Mono', monospace;
}

/* Title (h1) */
h1 {
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 6rem;
    line-height: 1.1;
    letter-spacing: -0.05em;
    font-feature-settings: "ss01" on;
}

/* Heading (h2) */
h2 {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-feature-settings: "ss01" on;
}

/* Subtitle/Preamble */
h3,
h4 {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

/* Body text */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

/* Links */
a {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* NAV BAR SECTION */

/* Navbar logo styling */
.navbar-brand img {
    height: 32px;
    margin-right: 10px;
}

/* COLORS SECTION */

/* Brand colors */
:root {
    --white: #ffffff;
    --greige-300: #EEEEE7;
    --greige-600: #CCCAC0;
    --black: #141310;
    --lime: #E3F8A8;
    --cyan: #A0F4EA;
    --purple: #C8D0F8;
}

/* Base styles */
body {
    background-color: var(--black);
    color: var(--greige-300);
}

/* Navigation */
.navbar {
    background-color: var(--black) !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--greige-300);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--lime);
}

/* Sidebar */
.sidebar-navigation {
    background-color: var(--black);
    border-right: 1px solid var(--greige-600);
}

.sidebar nav[role="doc-toc"] ul>li>a {
    color: var(--greige-300);
}

.sidebar nav[role="doc-toc"] ul>li>a:hover {
    color: var(--lime);
}

/* Links */
a {
    color: var(--lime);
}

a:hover {
    color: var(--cyan);
}

/* Headers */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--white);
}

/* Code blocks */
pre {
    background-color: #1a1a1a !important;
    border: 1px solid var(--greige-600);
}

/* Tables */
.table {
    color: var(--greige-300);
}

/* TOC */
#toc-title {
    color: var(--white);
}

.toc-active {
    color: var(--lime) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--lime);
    color: var(--black);
    border: none;
}

.btn-primary:hover {
    background-color: var(--cyan);
    color: var(--black);
}

/* For inline code (single backtick) */
code {
    background-color: #1a1a1a !important;
    color: var(--lime) !important;
    padding: 2px 4px;
    border-radius: 4px;
}

/* For inline code that is also a link */
a code {
    color: var(--cyan) !important;
}

/* For code blocks (triple backtick) */
pre.sourceCode {
    background-color: #1a1a1a !important;
}

/* Make comments in bash/shell scripts green */
code span.co {
    color: #5cb85c !important;
}

/* Remove underlines from JSON comments and make them green */
code span.er {
    color: #5cb85c !important;
    text-decoration: none !important;
}