From 05727d9a9db945ea6e76c9144ebe2aeed9f90c41 Mon Sep 17 00:00:00 2001 From: perf3ct Date: Mon, 18 Aug 2025 18:13:38 +0000 Subject: [PATCH] feat(mkdocs): hopefully make the mkdocs look a little better? --- docs/stylesheets/extra.css | 89 +++++++++++++++++++++++++++++++++----- mkdocs.yml | 4 +- 2 files changed, 81 insertions(+), 12 deletions(-) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index f001ecb..d014f25 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -3,13 +3,26 @@ /* Enhanced color scheme for better readability and warmth */ :root { --readur-primary: #00acc1; /* Cyan - more vibrant */ - --readur-accent: #ffa726; /* Amber - warm accent */ + --readur-accent: #64b5f6; /* Light blue - consistent accent */ --readur-success: #66bb6a; --readur-info: #42a5f5; --readur-warning: #ffa726; --readur-danger: #ef5350; } +/* Light theme overrides - warmer, more inviting */ +[data-md-color-scheme="default"] { + --md-default-bg-color: #fafbfc; /* Slightly warm white */ + --md-default-bg-color--light: #f5f7f9; + --md-default-bg-color--lighter: #eceff3; + --md-default-fg-color: #2d3748; /* Warmer dark text */ + --md-default-fg-color--light: #4a5568; + --md-default-fg-color--lighter: #718096; + --md-code-bg-color: #f7f9fb; /* Light blue-gray code bg */ + --md-code-fg-color: #2d3748; + --md-typeset-a-color: #0284c7; /* Friendly blue links */ +} + /* Dark theme overrides - warmer, less depressing */ [data-md-color-scheme="slate"] { --md-default-bg-color: #1e2329; /* Warmer dark background */ @@ -25,30 +38,43 @@ /* Typography improvements */ .md-typeset { - font-size: 1rem; /* Slightly larger base font */ - line-height: 1.7; /* Better line spacing */ + font-size: 0.95rem; /* Comfortable reading size */ + line-height: 1.65; /* Better line spacing */ } .md-typeset h1 { - font-size: 2.2rem; + font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin: 1.5rem 0 1rem; } +/* Softer title colors in dark mode */ +[data-md-color-scheme="slate"] .md-typeset h1 { + color: #cbd2db; /* Slightly muted for less brightness */ +} + .md-typeset h2 { - font-size: 1.8rem; + font-size: 1.65rem; font-weight: 600; letter-spacing: -0.01em; margin: 1.25rem 0 0.75rem; } +[data-md-color-scheme="slate"] .md-typeset h2 { + color: #d4dae2; +} + .md-typeset h3 { - font-size: 1.4rem; + font-size: 1.3rem; font-weight: 600; margin: 1rem 0 0.5rem; } +[data-md-color-scheme="slate"] .md-typeset h3 { + color: #dde2e8; +} + .md-typeset p { margin: 1rem 0; } @@ -67,6 +93,14 @@ border-radius: 0.25rem; } +[data-md-color-scheme="default"] .md-typeset code { + background-color: #e8f4f8; + color: #0891b2; /* Teal code in light mode */ + padding: 0.2em 0.4em; + border-radius: 0.25rem; + font-weight: 500; +} + /* Navigation improvements */ .md-nav__link { font-size: 0.95rem; @@ -75,7 +109,7 @@ } .md-nav__link:hover { - color: var(--md-accent-fg-color); + color: #64b5f6; /* Consistent light blue */ } [data-md-color-scheme="slate"] .md-nav__link--active { @@ -130,6 +164,12 @@ background: var(--md-default-bg-color--light); } +[data-md-color-scheme="default"] .grid.cards > * { + border-color: #e2e8f0; + background: #ffffff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + [data-md-color-scheme="slate"] .grid.cards > * { border-color: #3a4149; background: #272d35; @@ -138,7 +178,7 @@ .grid.cards > *:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); transform: translateY(-3px); - border-color: var(--md-accent-fg-color); + border-color: #64b5f6; } /* Custom admonitions with warmer colors */ @@ -161,11 +201,21 @@ /* Better table styling */ .md-typeset table:not([class]) { - font-size: 0.95rem; + font-size: 0.9rem; border-radius: 0.5rem; overflow: hidden; } +[data-md-color-scheme="default"] .md-typeset table:not([class]) th { + background-color: #f1f5f9; + color: #1e293b; + font-weight: 600; +} + +[data-md-color-scheme="default"] .md-typeset table:not([class]) td { + border-color: #e2e8f0; +} + [data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background-color: #323842; color: #e8eaed; @@ -271,11 +321,30 @@ html { /* Focus improvements for accessibility */ *:focus-visible { - outline: 2px solid var(--md-accent-fg-color); + outline: 2px solid #64b5f6; outline-offset: 2px; border-radius: 0.25rem; } +/* Scrollbar styling */ +[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb { + background-color: #4a6fa5; + border-radius: 0.25rem; +} + +[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover { + background-color: #64b5f6; +} + +[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb { + background-color: #90cdf4; + border-radius: 0.25rem; +} + +[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb:hover { + background-color: #64b5f6; +} + /* Animation for page transitions */ .md-content__inner { animation: fadeIn 0.3s ease-in; diff --git a/mkdocs.yml b/mkdocs.yml index 5a8d5ad..2627719 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -22,7 +22,7 @@ theme: - media: "(prefers-color-scheme: light)" scheme: default primary: teal - accent: amber + accent: light-blue toggle: icon: material/brightness-7 name: Switch to dark mode @@ -31,7 +31,7 @@ theme: - media: "(prefers-color-scheme: dark)" scheme: slate primary: cyan - accent: amber + accent: light-blue toggle: icon: material/brightness-4 name: Switch to light mode