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

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-primary: #00acc1;  /* Cyan - more vibrant */
-  --readur-accent: #526cfe;
+  --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));
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1rem;
+  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);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px);
+  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);
+  background-color: rgba(102, 187, 106, 0.15);
-  border-color: rgb(43, 155, 70);
+  border-color: #66bb6a;
-}
-
-.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;
 }
 
 /* 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 {
+[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
-  background-color: var(--md-primary-fg-color);
+  background-color: #323842;
-  color: var(--md-primary-bg-color);
+  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;
+  padding: 0.3em 0.6em;
-  font-size: 0.75rem;
+  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;
+  background-color: #ffa726;
-  color: #333;
+  color: #1e2329;
 }
 
 .badge-deprecated {
-  background-color: #dc3545;
+  background-color: #ef5350;
   color: white;
 }
 
-/* Improve search results */
+/* Search improvements */
-.md-search-result__meta {
+[data-md-color-scheme="slate"] .md-search__form {
-  color: var(--md-default-fg-color--light);
+  background-color: #2a3038;
-  font-size: 0.75rem;
+  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);
+  }
 }

mkdocs.yml

@@ -21,25 +21,25 @@ theme:
     # Light mode
     - media: "(prefers-color-scheme: light)"
       scheme: default
-      primary: indigo
+      primary: teal
-      accent: indigo
+      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
+      primary: cyan
-      accent: indigo
+      accent: amber
       toggle:
         icon: material/brightness-4
         name: Switch to light mode
   
-  # Font configuration
+  # Font configuration - more readable, friendly fonts
   font:
-    text: Roboto
+    text: Inter
-    code: Roboto Mono
+    code: JetBrains Mono
   
   # Features
   features: