diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index c9603fb..f001ecb 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,76 +1,195 @@ /* Custom styles for Readur documentation */ -/* Brand colors */ +/* Enhanced color scheme for better readability and warmth */ :root { - --readur-primary: #4051b5; - --readur-accent: #526cfe; + --readur-primary: #00acc1; /* Cyan - more vibrant */ + --readur-accent: #ffa726; /* Amber - warm accent */ + --readur-success: #66bb6a; + --readur-info: #42a5f5; + --readur-warning: #ffa726; + --readur-danger: #ef5350; +} + +/* Dark theme overrides - warmer, less depressing */ +[data-md-color-scheme="slate"] { + --md-default-bg-color: #1e2329; /* Warmer dark background */ + --md-default-bg-color--light: #272d35; + --md-default-bg-color--lighter: #323842; + --md-default-fg-color: #e8eaed; /* Softer white text */ + --md-default-fg-color--light: #b8bec7; + --md-default-fg-color--lighter: #8b939e; + --md-code-bg-color: #2a3038; /* Warmer code background */ + --md-code-fg-color: #e8eaed; + --md-typeset-a-color: #64b5f6; /* Softer blue links */ +} + +/* Typography improvements */ +.md-typeset { + font-size: 1rem; /* Slightly larger base font */ + line-height: 1.7; /* Better line spacing */ +} + +.md-typeset h1 { + font-size: 2.2rem; + font-weight: 600; + letter-spacing: -0.02em; + margin: 1.5rem 0 1rem; +} + +.md-typeset h2 { + font-size: 1.8rem; + font-weight: 600; + letter-spacing: -0.01em; + margin: 1.25rem 0 0.75rem; +} + +.md-typeset h3 { + font-size: 1.4rem; + font-weight: 600; + margin: 1rem 0 0.5rem; +} + +.md-typeset p { + margin: 1rem 0; +} + +/* Better code blocks */ +.md-typeset pre > code { + font-size: 0.9rem; + line-height: 1.6; + padding: 1.25rem; +} + +[data-md-color-scheme="slate"] .md-typeset code { + background-color: #2a3038; + color: #80cbc4; /* Cyan tint for inline code */ + padding: 0.2em 0.4em; + border-radius: 0.25rem; +} + +/* Navigation improvements */ +.md-nav__link { + font-size: 0.95rem; + padding: 0.6rem 0.8rem; + transition: all 0.2s ease; +} + +.md-nav__link:hover { + color: var(--md-accent-fg-color); +} + +[data-md-color-scheme="slate"] .md-nav__link--active { + color: #64b5f6; + font-weight: 500; +} + +/* Sidebar styling */ +.md-sidebar { + width: 15rem; +} + +.md-sidebar--primary .md-sidebar__scrollwrap { + padding: 1rem 0; +} + +/* Content area improvements */ +.md-content { + max-width: 55rem; /* Optimal reading width */ + margin: 0 auto; + padding: 1rem 2rem; +} + +.md-content__inner { + margin: 0 auto; + padding: 0; +} + +/* Table of contents */ +.md-nav--secondary .md-nav__link { + font-size: 0.85rem; + padding: 0.4rem 0.8rem; +} + +[data-md-color-scheme="slate"] .md-nav--secondary { + border-left: 2px solid #323842; } /* Grid cards for homepage */ .grid.cards { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1.25rem; margin: 2rem 0; } .grid.cards > * { - padding: 1rem; + padding: 1.25rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; transition: all 0.3s ease; + background: var(--md-default-bg-color--light); +} + +[data-md-color-scheme="slate"] .grid.cards > * { + border-color: #3a4149; + background: #272d35; } .grid.cards > *:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); + transform: translateY(-3px); + border-color: var(--md-accent-fg-color); +} + +/* Custom admonitions with warmer colors */ +[data-md-color-scheme="slate"] .md-typeset .admonition { + background-color: #272d35; + border-radius: 0.5rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } -/* Custom admonitions */ .md-typeset .admonition.example, .md-typeset details.example { - border-color: rgb(43, 155, 70); + border-color: #66bb6a; } .md-typeset .example > .admonition-title, .md-typeset .example > summary { - background-color: rgba(43, 155, 70, 0.1); - border-color: rgb(43, 155, 70); -} - -.md-typeset .example > .admonition-title::before, -.md-typeset .example > summary::before { - background-color: rgb(43, 155, 70); - -webkit-mask-image: var(--md-admonition-icon--example); - mask-image: var(--md-admonition-icon--example); -} - -/* Code block enhancements */ -.md-typeset pre > code { - font-size: 0.85rem; + background-color: rgba(102, 187, 106, 0.15); + border-color: #66bb6a; } /* Better table styling */ .md-typeset table:not([class]) { - font-size: 0.9rem; + font-size: 0.95rem; + border-radius: 0.5rem; + overflow: hidden; } -.md-typeset table:not([class]) th { - background-color: var(--md-primary-fg-color); - color: var(--md-primary-bg-color); +[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { + background-color: #323842; + color: #e8eaed; + font-weight: 600; +} + +[data-md-color-scheme="slate"] .md-typeset table:not([class]) td { + border-color: #3a4149; } /* Responsive images */ .md-typeset img { max-width: 100%; height: auto; + border-radius: 0.5rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin: 1.5rem 0; } /* Custom badges */ .badge { display: inline-block; - padding: 0.25em 0.5em; - font-size: 0.75rem; + padding: 0.3em 0.6em; + font-size: 0.8rem; font-weight: 600; line-height: 1; text-align: center; @@ -80,40 +199,95 @@ } .badge-new { - background-color: #28a745; + background-color: #66bb6a; color: white; } .badge-beta { - background-color: #ffc107; - color: #333; + background-color: #ffa726; + color: #1e2329; } .badge-deprecated { - background-color: #dc3545; + background-color: #ef5350; color: white; } -/* Improve search results */ -.md-search-result__meta { - color: var(--md-default-fg-color--light); - font-size: 0.75rem; +/* Search improvements */ +[data-md-color-scheme="slate"] .md-search__form { + background-color: #2a3038; + border: 1px solid #3a4149; +} + +[data-md-color-scheme="slate"] .md-search__input { + color: #e8eaed; +} + +.md-search-result__meta { + color: var(--md-default-fg-color--light); + font-size: 0.8rem; +} + +/* Header improvements */ +.md-header { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +[data-md-color-scheme="slate"] .md-header { + background-color: #1e2329; + border-bottom: 1px solid #323842; +} + +/* Footer styling */ +[data-md-color-scheme="slate"] .md-footer { + background-color: #1a1f25; + border-top: 1px solid #323842; } -/* Custom footer */ .md-footer-meta__inner { display: flex; justify-content: space-between; align-items: center; + padding: 1rem; } /* Announcement bar */ .md-banner { - background-color: var(--readur-accent); + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; + padding: 0.75rem; } .md-banner a { color: white; text-decoration: underline; + font-weight: 500; +} + +/* Smooth scrolling */ +html { + scroll-behavior: smooth; +} + +/* Focus improvements for accessibility */ +*:focus-visible { + outline: 2px solid var(--md-accent-fg-color); + outline-offset: 2px; + border-radius: 0.25rem; +} + +/* Animation for page transitions */ +.md-content__inner { + animation: fadeIn 0.3s ease-in; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index f8eadfe..5a8d5ad 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -21,25 +21,25 @@ theme: # Light mode - media: "(prefers-color-scheme: light)" scheme: default - primary: indigo - accent: indigo + primary: teal + accent: amber toggle: icon: material/brightness-7 name: Switch to dark mode - # Dark mode + # Dark mode - warmer, less depressing colors - media: "(prefers-color-scheme: dark)" scheme: slate - primary: indigo - accent: indigo + primary: cyan + accent: amber toggle: icon: material/brightness-4 name: Switch to light mode - # Font configuration + # Font configuration - more readable, friendly fonts font: - text: Roboto - code: Roboto Mono + text: Inter + code: JetBrains Mono # Features features: