feat(mkdocs): hopefully make the mkdocs look a little better?

This commit is contained in:
perf3ct 2025-08-18 18:13:38 +00:00
parent bb65938569
commit 05727d9a9d
No known key found for this signature in database
GPG Key ID: 569C4EEC436F5232
2 changed files with 81 additions and 12 deletions

View File

@ -3,13 +3,26 @@
/* Enhanced color scheme for better readability and warmth */ /* Enhanced color scheme for better readability and warmth */
:root { :root {
--readur-primary: #00acc1; /* Cyan - more vibrant */ --readur-primary: #00acc1; /* Cyan - more vibrant */
--readur-accent: #ffa726; /* Amber - warm accent */ --readur-accent: #64b5f6; /* Light blue - consistent accent */
--readur-success: #66bb6a; --readur-success: #66bb6a;
--readur-info: #42a5f5; --readur-info: #42a5f5;
--readur-warning: #ffa726; --readur-warning: #ffa726;
--readur-danger: #ef5350; --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 */ /* Dark theme overrides - warmer, less depressing */
[data-md-color-scheme="slate"] { [data-md-color-scheme="slate"] {
--md-default-bg-color: #1e2329; /* Warmer dark background */ --md-default-bg-color: #1e2329; /* Warmer dark background */
@ -25,30 +38,43 @@
/* Typography improvements */ /* Typography improvements */
.md-typeset { .md-typeset {
font-size: 1rem; /* Slightly larger base font */ font-size: 0.95rem; /* Comfortable reading size */
line-height: 1.7; /* Better line spacing */ line-height: 1.65; /* Better line spacing */
} }
.md-typeset h1 { .md-typeset h1 {
font-size: 2.2rem; font-size: 2rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin: 1.5rem 0 1rem; 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 { .md-typeset h2 {
font-size: 1.8rem; font-size: 1.65rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.01em; letter-spacing: -0.01em;
margin: 1.25rem 0 0.75rem; margin: 1.25rem 0 0.75rem;
} }
[data-md-color-scheme="slate"] .md-typeset h2 {
color: #d4dae2;
}
.md-typeset h3 { .md-typeset h3 {
font-size: 1.4rem; font-size: 1.3rem;
font-weight: 600; font-weight: 600;
margin: 1rem 0 0.5rem; margin: 1rem 0 0.5rem;
} }
[data-md-color-scheme="slate"] .md-typeset h3 {
color: #dde2e8;
}
.md-typeset p { .md-typeset p {
margin: 1rem 0; margin: 1rem 0;
} }
@ -67,6 +93,14 @@
border-radius: 0.25rem; 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 */ /* Navigation improvements */
.md-nav__link { .md-nav__link {
font-size: 0.95rem; font-size: 0.95rem;
@ -75,7 +109,7 @@
} }
.md-nav__link:hover { .md-nav__link:hover {
color: var(--md-accent-fg-color); color: #64b5f6; /* Consistent light blue */
} }
[data-md-color-scheme="slate"] .md-nav__link--active { [data-md-color-scheme="slate"] .md-nav__link--active {
@ -130,6 +164,12 @@
background: var(--md-default-bg-color--light); 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 > * { [data-md-color-scheme="slate"] .grid.cards > * {
border-color: #3a4149; border-color: #3a4149;
background: #272d35; background: #272d35;
@ -138,7 +178,7 @@
.grid.cards > *:hover { .grid.cards > *:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-3px); transform: translateY(-3px);
border-color: var(--md-accent-fg-color); border-color: #64b5f6;
} }
/* Custom admonitions with warmer colors */ /* Custom admonitions with warmer colors */
@ -161,11 +201,21 @@
/* Better table styling */ /* Better table styling */
.md-typeset table:not([class]) { .md-typeset table:not([class]) {
font-size: 0.95rem; font-size: 0.9rem;
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; 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 { [data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
background-color: #323842; background-color: #323842;
color: #e8eaed; color: #e8eaed;
@ -271,11 +321,30 @@ html {
/* Focus improvements for accessibility */ /* Focus improvements for accessibility */
*:focus-visible { *:focus-visible {
outline: 2px solid var(--md-accent-fg-color); outline: 2px solid #64b5f6;
outline-offset: 2px; outline-offset: 2px;
border-radius: 0.25rem; 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 */ /* Animation for page transitions */
.md-content__inner { .md-content__inner {
animation: fadeIn 0.3s ease-in; animation: fadeIn 0.3s ease-in;

View File

@ -22,7 +22,7 @@ theme:
- media: "(prefers-color-scheme: light)" - media: "(prefers-color-scheme: light)"
scheme: default scheme: default
primary: teal primary: teal
accent: amber accent: light-blue
toggle: toggle:
icon: material/brightness-7 icon: material/brightness-7
name: Switch to dark mode name: Switch to dark mode
@ -31,7 +31,7 @@ theme:
- media: "(prefers-color-scheme: dark)" - media: "(prefers-color-scheme: dark)"
scheme: slate scheme: slate
primary: cyan primary: cyan
accent: amber accent: light-blue
toggle: toggle:
icon: material/brightness-4 icon: material/brightness-4
name: Switch to light mode name: Switch to light mode