diff --git a/_includes/head-custom.html b/_includes/head_custom.html
similarity index 90%
rename from _includes/head-custom.html
rename to _includes/head_custom.html
index a7fc057..065ebaf 100644
--- a/_includes/head-custom.html
+++ b/_includes/head_custom.html
@@ -28,3 +28,6 @@
+
+
+
diff --git a/_sass/color_schemes/disttopic-dark.scss b/_sass/color_schemes/disttopic-dark.scss
index 83f5bd9..3dcb01e 100644
--- a/_sass/color_schemes/disttopic-dark.scss
+++ b/_sass/color_schemes/disttopic-dark.scss
@@ -31,6 +31,12 @@ $ctp-base: #1e1e2e;
$ctp-mantle: #181825;
$ctp-crust: #11111b;
+// Typography
+$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
+$mono-font-family: "SF Mono", ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace;
+$root-font-size: 16px;
+$body-line-height: 1.75;
+
// just-the-docs color scheme override
$body-background-color: $ctp-base;
$sidebar-color: $ctp-mantle;
diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..00e3dc1
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,304 @@
+/* ================================================================
+ DistTopic — Modern UI Overrides
+ Applied on top of Just the Docs (theme: just-the-docs)
+ Color palette: Catppuccin Mocha
+ ================================================================ */
+
+/* ── CSS Custom Properties ──────────────────────────────────────── */
+:root {
+ --dt-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
+ "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
+ --dt-font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Fira Code",
+ SFMono-Regular, Menlo, Consolas, monospace;
+
+ /* Catppuccin Mocha */
+ --ctp-base: #1e1e2e;
+ --ctp-mantle: #181825;
+ --ctp-crust: #11111b;
+ --ctp-surface0: #313244;
+ --ctp-surface1: #45475a;
+ --ctp-surface2: #585b70;
+ --ctp-overlay0: #6c7086;
+ --ctp-overlay1: #7f849c;
+ --ctp-text: #cdd6f4;
+ --ctp-subtext0: #a6adc8;
+ --ctp-subtext1: #bac2de;
+ --ctp-blue: #89b4fa;
+ --ctp-lavender: #b4befe;
+ --ctp-mauve: #cba6f7;
+ --ctp-green: #a6e3a1;
+ --ctp-teal: #94e2d5;
+ --ctp-sky: #89dceb;
+ --ctp-peach: #fab387;
+ --ctp-red: #f38ba8;
+ --ctp-yellow: #f9e2af;
+}
+
+/* ── Base ─────────────────────────────────────────────────────── */
+html { scroll-behavior: smooth; }
+
+body {
+ font-family: var(--dt-font-sans);
+ font-size: 16px;
+ line-height: 1.75;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+}
+
+/* ── Typography ──────────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+ font-family: var(--dt-font-sans);
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ line-height: 1.3;
+}
+
+/* Hero gradient heading (fs-9 on homepage) */
+.fs-9 {
+ font-size: clamp(2rem, 5vw, 3.25rem) !important;
+ font-weight: 800 !important;
+ letter-spacing: -0.04em !important;
+ line-height: 1.1 !important;
+ background: linear-gradient(
+ 135deg,
+ var(--ctp-lavender) 0%,
+ var(--ctp-blue) 50%,
+ var(--ctp-teal) 100%
+ );
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 0.25rem !important;
+}
+
+.fs-6.fw-300 {
+ font-size: 1.15rem !important;
+ font-weight: 400 !important;
+ color: var(--ctp-subtext1) !important;
+ line-height: 1.6 !important;
+ margin-top: 0.75rem !important;
+ margin-bottom: 1.5rem !important;
+}
+
+/* ── Links ────────────────────────────────────────────────────── */
+a {
+ transition: color 0.15s ease, opacity 0.15s ease;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 3px;
+}
+.main-content a:hover { opacity: 0.8; }
+
+/* ── Code & Monospace ─────────────────────────────────────────── */
+code, pre, kbd, samp {
+ font-family: var(--dt-font-mono) !important;
+ font-size: 0.875em;
+}
+
+/* Code blocks — rounded card look */
+div.highlighter-rouge,
+figure.highlight {
+ border-radius: 10px !important;
+ border: 1px solid var(--ctp-surface1) !important;
+ overflow: hidden;
+ margin: 1.25rem 0 !important;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
+}
+
+pre.highlight {
+ padding: 1.25rem 1.5rem !important;
+ border-radius: 0 !important;
+ border: none !important;
+ margin: 0 !important;
+ line-height: 1.6;
+}
+
+/* Inline code */
+p code.highlighter-rouge,
+li code.highlighter-rouge,
+td code.highlighter-rouge,
+h1 code, h2 code, h3 code {
+ border-radius: 5px !important;
+ padding: 0.15em 0.45em !important;
+ font-size: 0.82em !important;
+ border: 1px solid var(--ctp-surface1) !important;
+}
+
+/* ── Tables ───────────────────────────────────────────────────── */
+.main-content table {
+ border-radius: 10px;
+ overflow: hidden;
+ border: 1px solid var(--ctp-surface1) !important;
+ border-collapse: separate !important;
+ border-spacing: 0 !important;
+ width: 100%;
+ margin: 1.5rem 0;
+ font-size: 0.9rem;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+}
+
+.main-content th {
+ background: var(--ctp-mantle) !important;
+ font-weight: 700;
+ font-size: 0.73rem !important;
+ text-transform: uppercase !important;
+ letter-spacing: 0.07em !important;
+ padding: 0.75rem 1.1rem !important;
+ color: var(--ctp-subtext1) !important;
+ border-bottom: 1px solid var(--ctp-surface1) !important;
+}
+
+.main-content td {
+ padding: 0.7rem 1.1rem !important;
+ border-bottom: 1px solid var(--ctp-surface0) !important;
+ vertical-align: middle;
+}
+
+.main-content tr:last-child td { border-bottom: none !important; }
+
+.main-content tbody tr {
+ transition: background-color 0.1s ease;
+}
+.main-content tbody tr:hover td {
+ background: rgba(137, 180, 250, 0.05) !important;
+}
+
+/* ── Buttons ──────────────────────────────────────────────────── */
+.btn {
+ border-radius: 8px !important;
+ font-family: var(--dt-font-sans) !important;
+ font-weight: 600 !important;
+ font-size: 0.875rem !important;
+ letter-spacing: 0.01em;
+ padding: 0.5rem 1.1rem !important;
+ transition: all 0.15s ease !important;
+}
+
+.btn-primary {
+ background: linear-gradient(
+ 135deg,
+ var(--ctp-mauve) 0%,
+ var(--ctp-blue) 100%
+ ) !important;
+ border-color: transparent !important;
+ color: var(--ctp-crust) !important;
+}
+
+.btn-primary:hover {
+ transform: translateY(-2px) !important;
+ box-shadow: 0 6px 20px rgba(137, 180, 250, 0.35) !important;
+ opacity: 1 !important;
+}
+
+.btn:not(.btn-primary):hover {
+ border-color: var(--ctp-blue) !important;
+ color: var(--ctp-blue) !important;
+ transform: translateY(-1px) !important;
+}
+
+/* ── Navigation ───────────────────────────────────────────────── */
+.nav-list .nav-list-item .nav-list-link {
+ border-radius: 6px !important;
+ font-size: 0.875rem;
+ transition: background-color 0.1s ease, color 0.1s ease;
+ padding: 0.3rem 0.6rem !important;
+}
+
+/* ── Sidebar ──────────────────────────────────────────────────── */
+.side-bar {
+ border-right: 1px solid var(--ctp-surface0) !important;
+}
+
+.site-title {
+ font-weight: 800 !important;
+ font-size: 1.05rem !important;
+ letter-spacing: -0.025em !important;
+}
+
+/* ── Main content ─────────────────────────────────────────────── */
+.main-content h1 { margin-top: 0; }
+
+.main-content h2 {
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--ctp-surface0);
+ margin-top: 2.5rem;
+}
+
+/* ── HR ───────────────────────────────────────────────────────── */
+.main-content hr {
+ border: none !important;
+ border-top: 1px solid var(--ctp-surface1) !important;
+ margin: 2.5rem 0 !important;
+}
+
+/* ── Blockquotes / Callouts ───────────────────────────────────── */
+.main-content blockquote {
+ border-radius: 8px;
+ border-left: 3px solid var(--ctp-blue);
+ background: rgba(137, 180, 250, 0.07);
+ padding: 0.9rem 1.25rem;
+ margin: 1.5rem 0;
+ color: var(--ctp-subtext1);
+}
+
+/* just-the-docs callout modifiers */
+.main-content blockquote.note { border-left-color: var(--ctp-blue); background: rgba(137,180,250,0.07); }
+.main-content blockquote.warning { border-left-color: var(--ctp-yellow); background: rgba(249,226,175,0.07); }
+.main-content blockquote.important{ border-left-color: var(--ctp-mauve); background: rgba(203,166,247,0.07); }
+
+/* ── Labels ───────────────────────────────────────────────────── */
+.label, .label-green, .label-yellow, .label-red, .label-blue, .label-purple {
+ border-radius: 5px !important;
+ font-size: 0.7rem !important;
+ font-weight: 700 !important;
+ letter-spacing: 0.06em !important;
+ padding: 0.2em 0.6em !important;
+ text-transform: uppercase !important;
+}
+
+/* ── Search ───────────────────────────────────────────────────── */
+.search-input {
+ border-radius: 8px !important;
+ font-family: var(--dt-font-sans) !important;
+ font-size: 0.9rem;
+ transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
+}
+
+.search-input:focus {
+ border-color: var(--ctp-blue) !important;
+ box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.15) !important;
+ outline: none !important;
+}
+
+/* ── Breadcrumbs ──────────────────────────────────────────────── */
+.breadcrumb-nav-list-item {
+ font-size: 0.8rem !important;
+}
+
+/* ── Footer ───────────────────────────────────────────────────── */
+.site-footer {
+ border-top: 1px solid var(--ctp-surface0) !important;
+ font-size: 0.825rem !important;
+ color: var(--ctp-overlay1) !important;
+}
+
+.site-footer a {
+ color: var(--ctp-blue) !important;
+}
+
+/* ── Top nav bar ──────────────────────────────────────────────── */
+.main-header {
+ border-bottom: 1px solid var(--ctp-surface0) !important;
+ box-shadow: 0 1px 0 var(--ctp-surface0) !important;
+}
+
+/* ── Badges/images ────────────────────────────────────────────── */
+.main-content img {
+ border-radius: 4px;
+}
+
+/* ── Page content spacing ─────────────────────────────────────── */
+.main-content {
+ font-size: 1rem;
+ padding-top: 1.5rem;
+}