diff --git a/docs/css/custom.css b/docs/css/custom.css index 0fac8dde..709642c5 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -1,611 +1,153 @@ -/* Semantica Documentation - Premium Green-Brown & Cream Theme */ +/* Semantica Documentation - Monochrome Pro Theme */ /* Smooth scrolling */ html { scroll-behavior: smooth; } -/* Cream background */ +/* + ========================================================================== + Color Variables - Monochrome Pro + Primary: #212121 (Grey 900) + Accent: #2962FF (Electric Blue) + ========================================================================== +*/ :root { - --md-default-bg-color: #FAF7F2; - --md-primary-fg-color: #4A4F2F; - --md-primary-fg-color--light: #8C9464; - --md-primary-fg-color--dark: #3A3E25; - --md-accent-fg-color: #8C9464; + /* Light Mode */ + --md-default-bg-color: #FFFFFF; + --md-default-fg-color: #212121; + --md-default-fg-color--light: #616161; + --md-default-fg-color--lighter: #9E9E9E; + --md-default-fg-color--lightest: #E0E0E0; + + --md-primary-fg-color: #212121; + --md-primary-fg-color--light: #484848; + --md-primary-fg-color--dark: #000000; + + --md-accent-fg-color: #2962FF; + + /* Code blocks */ + --md-code-bg-color: #F5F5F5; + --md-code-fg-color: #212121; } [data-md-color-scheme="slate"] { - --md-default-bg-color: #1a1a1a; -} + /* Dark Mode */ + --md-default-bg-color: #0F1115; + /* Very dark grey, almost black */ + --md-default-fg-color: #E0E0E0; -/* Dark Green-Brown Header */ -.md-header { - background-color: #4A4F2F !important; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} + --md-primary-fg-color: #0F1115; + /* Match bg for seamless look or slightly lighter */ + --md-primary-fg-color--light: #212121; + --md-primary-fg-color--dark: #000000; -[data-md-color-scheme="slate"] .md-header { - background-color: #4A4F2F !important; -} - -.md-header { - height: 2.4rem !important; -} - -.md-header__inner { - max-width: 100%; - padding: 0 1rem; - position: relative; - display: flex !important; - align-items: center !important; - justify-content: flex-start !important; - height: 2.4rem !important; -} - -/* Hide hamburger menu button */ -.md-header__button--menu { - display: none !important; -} - -/* "Semantica" with brain emoji and version badge */ -.md-header__title { - font-size: 1.25rem !important; - font-weight: 700 !important; - line-height: 1 !important; - margin: 0 !important; - padding: 0 !important; - margin-left: 0.5rem !important; - position: relative !important; - left: 0 !important; - transform: none !important; - display: flex !important; - align-items: center !important; - justify-content: flex-start !important; - height: 2.4rem !important; - color: #FFFFFF !important; - letter-spacing: 0.5px; - z-index: 10; -} - -/* Add brain emoji before title - perfectly aligned */ -.md-header__title::before { - content: "π§ "; - font-size: 1.25rem !important; - margin-right: 0.5rem !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - line-height: 1 !important; - height: 2.4rem !important; - vertical-align: middle !important; -} - -.md-header__title .md-header__button { - color: #FFFFFF !important; - font-size: 1.25rem !important; - font-weight: 700 !important; - letter-spacing: 0.5px; - display: flex !important; - align-items: center !important; - height: 2.4rem !important; - line-height: 1 !important; - margin: 0 !important; - padding: 0 !important; -} - -.md-header__title span { - font-size: 1.25rem !important; - font-weight: 700 !important; - letter-spacing: 0.5px; - color: #FFFFFF !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - line-height: 1 !important; - height: 2.4rem !important; - vertical-align: middle !important; - position: relative !important; -} - -/* Add version badge after "Semantica" text - perfectly aligned */ -.md-header__title span::after { - content: "0.0.1"; - font-size: 0.7rem !important; - font-weight: 500 !important; - background-color: rgba(255, 255, 255, 0.2) !important; - color: #FFFFFF !important; - padding: 0.15rem 0.4rem !important; - border-radius: 0.75rem !important; - margin-left: 0.5rem !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - line-height: 1 !important; - vertical-align: middle !important; - white-space: nowrap !important; - align-self: center !important; -} - -/* Hide logo */ -.md-header__button.md-logo { - display: none !important; -} - -/* Table of Contents - Three Column Layout with Sidebars */ -@media screen and (min-width: 76.25em) { - /* Left Navigation Sidebar - Narrower for more content space */ - .md-sidebar--primary { - width: 12rem !important; - position: fixed !important; - left: 0 !important; - top: 2.4rem !important; - height: calc(100vh - 2.4rem) !important; - overflow-y: auto !important; - overflow-x: hidden !important; - border-right: 1px solid rgba(0, 0, 0, 0.1) !important; - background-color: var(--md-default-bg-color) !important; - } - - [data-md-color-scheme="slate"] .md-sidebar--primary { - border-right: 1px solid rgba(255, 255, 255, 0.12) !important; - } - - /* Right TOC Sidebar - Slightly narrower */ - .md-sidebar--secondary { - position: fixed !important; - right: 0 !important; - top: 2.4rem !important; - width: 14rem !important; - height: calc(100vh - 2.4rem) !important; - overflow-y: auto !important; - overflow-x: hidden !important; - border-left: 1px solid rgba(0, 0, 0, 0.1) !important; - background-color: var(--md-default-bg-color) !important; - } - - [data-md-color-scheme="slate"] .md-sidebar--secondary { - border-left: 1px solid rgba(255, 255, 255, 0.12) !important; - } - - /* Content Area - Wider to fill more space, dense layout */ - .md-content { - margin-left: 12rem !important; - margin-right: 14rem !important; - max-width: none !important; - padding-left: 0 !important; - padding-right: 0 !important; - } - - /* Ensure sidebars scroll properly */ - .md-sidebar__scrollwrap { - overflow-y: auto !important; - overflow-x: hidden !important; - height: 100% !important; - } -} - -/* Custom Scrollbar Styling for Sidebars */ -.md-sidebar--primary::-webkit-scrollbar, -.md-sidebar--secondary::-webkit-scrollbar { - width: 8px; -} - -.md-sidebar--primary::-webkit-scrollbar-track, -.md-sidebar--secondary::-webkit-scrollbar-track { - background: transparent; -} - -.md-sidebar--primary::-webkit-scrollbar-thumb, -.md-sidebar--secondary::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.2); - border-radius: 4px; -} - -.md-sidebar--primary::-webkit-scrollbar-thumb:hover, -.md-sidebar--secondary::-webkit-scrollbar-thumb:hover { - background: rgba(0, 0, 0, 0.3); -} - -[data-md-color-scheme="slate"] .md-sidebar--primary::-webkit-scrollbar-thumb, -[data-md-color-scheme="slate"] .md-sidebar--secondary::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); -} - -[data-md-color-scheme="slate"] .md-sidebar--primary::-webkit-scrollbar-thumb:hover, -[data-md-color-scheme="slate"] .md-sidebar--secondary::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.3); -} - -/* Ensure content uses full available width - Gap-free layout */ -.md-grid { - max-width: 100% !important; -} - -.md-content__inner { - max-width: 100% !important; - padding-left: 2.5rem !important; - padding-right: 2.5rem !important; - margin: 0 !important; - width: 100% !important; -} - -.md-main__inner { - max-width: 100% !important; - margin: 0 !important; -} - -.md-container { - padding: 0 !important; - margin: 0 !important; -} - -/* Remove gaps between sidebars and content - Dense layout */ -@media screen and (min-width: 76.25em) { - .md-main { - margin: 0 !important; - padding: 0 !important; - width: 100% !important; - } - - .md-content { - padding-left: 0 !important; - padding-right: 0 !important; - margin-top: 0 !important; - width: 100% !important; - } - - /* Ensure sidebars are flush with content */ - .md-sidebar--primary { - margin-right: 0 !important; - } - - .md-sidebar--secondary { - margin-left: 0 !important; - } - - /* Make content area use maximum available width */ - .md-content__inner { - max-width: 100% !important; - width: 100% !important; - } -} - -/* Reduce spacing for compact, dense look */ -.md-content { - padding-top: 0.8rem !important; - padding-bottom: 1.2rem !important; -} - -/* Make content area wider and more dense */ -@media screen and (min-width: 76.25em) { - .md-content__inner { - padding-left: 2.5rem !important; - padding-right: 2.5rem !important; - } -} - -/* Tighter headings - More dense */ -.md-typeset h1 { - margin-top: 1.2rem !important; - margin-bottom: 0.5rem !important; - font-weight: 700; + margin-bottom: 1rem; + color: var(--md-default-fg-color); } .md-typeset h2 { - margin-top: 0.8rem !important; - margin-bottom: 0.3rem !important; - font-weight: 600; -} - -.md-typeset h3 { - margin-top: 0.8rem !important; - margin-bottom: 0.3rem !important; - font-weight: 600; -} - -.md-typeset h4 { - margin-top: 0.6rem !important; - margin-bottom: 0.25rem !important; + font-weight: 700; + letter-spacing: -0.01em; + margin-top: 2rem; + margin-bottom: 0.75rem; } .md-typeset p { - margin-top: 0.6em; - margin-bottom: 0.6em; line-height: 1.6; + margin-bottom: 1rem; } -.md-typeset ul, -.md-typeset ol { - margin-top: 0.6em; - margin-bottom: 0.6em; -} - -.md-typeset li { - margin-top: 0.3em; - margin-bottom: 0.3em; - line-height: 1.6; -} - -/* Sidebar spacing */ -.md-nav__link { - padding: 0.20rem 0.60rem !important; -} - -/* Clean TOC styling */ -.md-nav__link--active { - color: var(--md-primary-fg-color); - font-weight: 500; -} - -/* Better code blocks */ -.md-typeset pre { - border-radius: 6px; - background-color: #f8f6f0; -} - -[data-md-color-scheme="slate"] .md-typeset pre { - background-color: #1e1e1e !important; - color: #e0e0e0 !important; -} - -[data-md-color-scheme="slate"] .md-typeset pre code { - background-color: #1e1e1e !important; - color: #e0e0e0 !important; -} - -[data-md-color-scheme="slate"] .md-typeset code:not(pre code) { - background-color: #2d2d2d !important; - color: #e0e0e0 !important; - padding: 0.2em 0.4em; - border-radius: 3px; -} - -[data-md-color-scheme="slate"] .md-typeset a { - color: #8C9464 !important; -} - -[data-md-color-scheme="slate"] .md-typeset a:hover { - color: #a8b080 !important; -} - -[data-md-color-scheme="slate"] .md-typeset { - color: rgba(255, 255, 255, 0.87) !important; -} - -[data-md-color-scheme="slate"] .md-typeset p { - color: rgba(255, 255, 255, 0.87) !important; -} - -[data-md-color-scheme="slate"] .md-typeset li { - color: rgba(255, 255, 255, 0.87) !important; -} - -[data-md-color-scheme="slate"] .md-typeset table:not([class]) { - border-color: rgba(255, 255, 255, 0.12) !important; -} - -[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { - background-color: rgba(255, 255, 255, 0.05) !important; - color: rgba(255, 255, 255, 0.87) !important; -} - -[data-md-color-scheme="slate"] .md-typeset table:not([class]) td { - color: rgba(255, 255, 255, 0.87) !important; -} - -/* Accent color for links */ +/* Links */ .md-typeset a { - color: #4A4F2F; -} - -.md-typeset a:hover { - color: #8C9464; -} - -/* Theme toggle button - positioned before search with spacing */ -.md-header__button[for^="__palette"] { - margin: 0 !important; - margin-left: auto !important; - margin-right: 0.75rem !important; - padding: 0.5rem !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - height: 2.4rem !important; - width: 2.4rem !important; - color: #FFFFFF !important; - opacity: 1 !important; - visibility: visible !important; - cursor: pointer !important; - transition: opacity 0.2s ease !important; - order: 1 !important; -} - -/* Search button - positioned after theme toggle */ -.md-header__button[for="__search"], -.md-header__button[for^="__search"] { - order: 2 !important; - margin-right: 0.5rem !important; -} - -.md-header__button[for^="__palette"]:hover { - opacity: 0.8 !important; - background-color: rgba(255, 255, 255, 0.1) !important; - border-radius: 0.25rem !important; -} - -/* Ensure toggle button icon is visible */ -.md-header__button[for^="__palette"] svg { - width: 1.25rem !important; - height: 1.25rem !important; - fill: currentColor !important; - color: #FFFFFF !important; -} - -/* Ensure only one palette toggle button is visible */ -.md-header input[type="radio"][name="__palette"]:not(:checked) + label { - display: none !important; -} - -/* Material theme automatically shows only one toggle - ensure proper spacing */ -.md-header__inner { - padding-bottom: 0.5rem !important; - gap: 0.5rem !important; - display: flex !important; - align-items: center !important; -} - -/* Ensure proper spacing between theme toggle and search */ -.md-header__inner > .md-header__button[for^="__palette"] { - margin-right: 0.75rem !important; -} - -.md-header__inner > .md-header__button[for="__search"], -.md-header__inner > .md-header__button[for^="__search"] { - margin-left: 0 !important; - margin-right: 0.5rem !important; -} - -/* ============================================ - Pydantic-Style Callout Boxes (Admonitions) - ============================================ */ - -/* Base Admonition Styling */ -.md-typeset .admonition { - border-radius: 6px; - border-left-width: 4px; - margin: 1.5em 0; - padding: 1em 1.5em; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -[data-md-color-scheme="slate"] .md-typeset .admonition { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -/* Note - Blue */ -.md-typeset .admonition.note, -.md-typeset .admonition-title--note { - border-color: #2196F3; - background-color: rgba(33, 150, 243, 0.1); -} - -[data-md-color-scheme="slate"] .md-typeset .admonition.note { - background-color: rgba(33, 150, 243, 0.15); - border-color: #42A5F5; -} - -.md-typeset .admonition.note .admonition-title { - background-color: rgba(33, 150, 243, 0.2); - border-color: #2196F3; - color: #1976D2; - font-weight: 600; -} - -[data-md-color-scheme="slate"] .md-typeset .admonition.note .admonition-title { - background-color: rgba(33, 150, 243, 0.25); - color: #64B5F6; -} - -/* Tip - Green */ -.md-typeset .admonition.tip, -.md-typeset .admonition-title--tip { - border-color: #4CAF50; - background-color: rgba(76, 175, 80, 0.1); -} - -[data-md-color-scheme="slate"] .md-typeset .admonition.tip { - background-color: rgba(76, 175, 80, 0.15); - border-color: #66BB6A; + color: var(--md-accent-fg-color); + text-decoration: none; + font-weight: 500; + background-color: #F1F8F5; } .md-typeset .admonition.tip .admonition-title { - background-color: rgba(76, 175, 80, 0.2); - border-color: #4CAF50; - color: #388E3C; - font-weight: 600; + color: #00C853; +} + +[data-md-color-scheme="slate"] .md-typeset .admonition.tip { + border-color: #2E303E; + border-left-color: #69F0AE; + background-color: #0E1B14; } [data-md-color-scheme="slate"] .md-typeset .admonition.tip .admonition-title { - background-color: rgba(76, 175, 80, 0.25); - color: #81C784; + color: #69F0AE; } -/* Warning - Orange/Yellow */ -.md-typeset .admonition.warning, -.md-typeset .admonition-title--warning { - border-color: #FF9800; - background-color: rgba(255, 152, 0, 0.1); -} - -[data-md-color-scheme="slate"] .md-typeset .admonition.warning { - background-color: rgba(255, 152, 0, 0.15); - border-color: #FFB74D; +/* Warning */ +.md-typeset .admonition.warning { + border-color: #E0E0E0; + border-left-color: #FFAB00; + background-color: #FFF8E1; } .md-typeset .admonition.warning .admonition-title { - background-color: rgba(255, 152, 0, 0.2); - border-color: #FF9800; - color: #F57C00; - font-weight: 600; + color: #FFAB00; +} + +[data-md-color-scheme="slate"] .md-typeset .admonition.warning { + border-color: #2E303E; + border-left-color: #FFD740; + background-color: #1F1B0E; } [data-md-color-scheme="slate"] .md-typeset .admonition.warning .admonition-title { - background-color: rgba(255, 152, 0, 0.25); - color: #FFB74D; + color: #FFD740; } -/* Danger - Red */ -.md-typeset .admonition.danger, -.md-typeset .admonition-title--danger { - border-color: #F44336; - background-color: rgba(244, 67, 54, 0.1); -} - -[data-md-color-scheme="slate"] .md-typeset .admonition.danger { - background-color: rgba(244, 67, 54, 0.15); - border-color: #E57373; +/* Danger */ +.md-typeset .admonition.danger { + border-color: #E0E0E0; + border-left-color: #FF1744; + background-color: #FFEBEE; } .md-typeset .admonition.danger .admonition-title { - background-color: rgba(244, 67, 54, 0.2); - border-color: #F44336; - color: #D32F2F; - font-weight: 600; + color: #FF1744; +} + +[data-md-color-scheme="slate"] .md-typeset .admonition.danger { + border-color: #2E303E; + border-left-color: #FF5252; + background-color: #241214; } [data-md-color-scheme="slate"] .md-typeset .admonition.danger .admonition-title { - background-color: rgba(244, 67, 54, 0.25); - color: #EF5350; + color: #FF5252; } -/* Admonition Content Styling */ -.md-typeset .admonition p { - margin-top: 0.5em; - margin-bottom: 0.5em; +/* + ========================================================================== + Code Blocks + ========================================================================== +*/ +.md-typeset pre { + background-color: var(--md-code-bg-color); + border: 1px solid rgba(0, 0, 0, 0.05); + border-radius: 6px; } -.md-typeset .admonition p:first-child { - margin-top: 0; +[data-md-color-scheme="slate"] .md-typeset pre { + border-color: rgba(255, 255, 255, 0.05); } -.md-typeset .admonition p:last-child { - margin-bottom: 0; +/* Scrollbars */ +::-webkit-scrollbar { + width: 6px; + height: 6px; } -/* Admonition Icons */ -.md-typeset .admonition-title::before { - margin-right: 0.5em; +::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.2); + border-radius: 3px; } -/* Info - Alternative blue (if used) */ -.md-typeset .admonition.info { - border-color: #00BCD4; - background-color: rgba(0, 188, 212, 0.1); -} - -[data-md-color-scheme="slate"] .md-typeset .admonition.info { - background-color: rgba(0, 188, 212, 0.15); - border-color: #4DD0E1; +[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.2); } \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index d2402f00..e672031e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,112 +1,249 @@ -# Welcome to Semantica -
+