diff --git a/content/_index.md b/content/_index.md index 6a33080..8e7cd7f 100644 --- a/content/_index.md +++ b/content/_index.md @@ -2,16 +2,16 @@ title = "Phel: A Functional Lisp Dialect for PHP Developers" +++ -**Phel** is a functional programming language that compiles down to PHP. It's a modern Lisp dialect inspired by [Clojure](https://clojure.org/) and [Janet](https://janet-lang.org/), tailored to bring functional elegance and expressive code to the world of PHP development. +Phel language logo -Phel language logo +**Phel** is a functional programming language that compiles to PHP — a modern Lisp dialect inspired by [Clojure](https://clojure.org/) and [Janet](https://janet-lang.org/), bringing functional elegance and expressive code to PHP development.
- + Try Phel with Docker - + Read Documentation diff --git a/content/documentation/getting-started.md b/content/documentation/getting-started.md index ab26f44..4f3717f 100644 --- a/content/documentation/getting-started.md +++ b/content/documentation/getting-started.md @@ -110,7 +110,7 @@ vendor/bin/phel test --filter foo ## Editor Support -- [VSCode](https://github.com/phel-lang/phel-vs-code-extension) - [PhpStorm](https://github.com/phel-lang/phel-intellij-plugin) +- [VSCode](https://github.com/phel-lang/phel-vs-code-extension) - [Emacs](https://codeberg.org/mmontone/interactive-lang-tools) - [Vim](https://github.com/danirod/phel.vim) diff --git a/css/base.css b/css/base.css index c3e9c63..bfcc8f3 100644 --- a/css/base.css +++ b/css/base.css @@ -1,428 +1,421 @@ -@layer base { - /* Root & HTML Setup */ - :root { - box-sizing: border-box; - font-family: var(--font-primary); - line-height: var(--leading-relaxed); - background-color: var(--color-light-bg); - color: var(--color-light-text-primary); - font-size: var(--font-size); - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - html { - @apply scroll-smooth bg-white; - -webkit-text-size-adjust: 100%; - -moz-tab-size: 4; - tab-size: 4; - scroll-behavior: smooth; - } - - *, - ::after, - ::before { - @apply box-border border-0 border-solid; - border-color: var(--color-light-border); - } - - body { - @apply m-0 min-h-screen antialiased; - font-family: var(--font-primary); - background-color: var(--color-light-bg); - color: var(--color-light-text-primary); - font-size: var(--font-size); - line-height: var(--leading-relaxed); - padding-top: var(--header-height); - overflow-x: hidden; - transition: background-color var(--duration-normal) var(--ease-out), - color var(--duration-normal) var(--ease-out); - } - - /* Reset spacing */ - * + * { - margin-top: 1.5em; - } - - li, - kbd, - div, - input, - option, - select, - a, - textarea, - body, - span, - dd, - code, - label, - [column] { - margin: 0; - } - - /* Modern Link Styling */ - a { - color: var(--color-light-link); - text-decoration: none; - transition: all var(--duration-fast) var(--ease-out); - border-radius: var(--radius-sm); - position: relative; - } - - a:hover { - color: var(--color-light-link); - text-decoration: none; - } - - a:focus-visible { - outline: 2px solid var(--color-light-link); - outline-offset: 3px; - } - - /* Modern link underline effect */ - a:not([class])::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: var(--color-light-link); - transition: width var(--duration-normal) var(--ease-out); - } - - a:not([class]):hover::after { - width: 100%; - } - - /* Touch-friendly tap targets */ - a, - area, - button, - input, - label, - select, - textarea, - [tabindex] { - -ms-touch-action: manipulation; - touch-action: manipulation; - } - - /* Modern Heading Typography */ - h1, - h2, - h3, - h4, - h5, - h6 { - color: var(--color-light-text-primary); - font-family: var(--font-secondary); - font-weight: 700; - line-height: 1.2; - letter-spacing: -0.02em; - transition: color var(--duration-normal) var(--ease-out); - } - - h1 { - font-size: clamp(2rem, 5vw, 2.5rem); - margin: 1em 0 0.5em; - } - - h2 { - font-size: clamp(1.75rem, 4vw, 2rem); - margin: 1em 0 0.5em; - } - - h3 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); - margin: 1em 0 0.5em; - } - - h4 { - font-size: clamp(1.25rem, 3vw, 1.5rem); - margin: 1em 0 0.5em; - } - - h5 { - font-size: clamp(1.125rem, 2.5vw, 1.25rem); - margin: 1em 0 0.5em; - } - - h6 { - font-size: clamp(1rem, 2vw, 1.125rem); - margin: 1em 0 0.5em; - } - - /* Heading links */ - h1 a, - h2 a, - h3 a { - color: inherit; - } - - h1 a::after, - h2 a::after, - h3 a::after { - display: none; - } - - h1 a:hover, - h1 a:focus, - h2 a:hover, - h2 a:focus, - h3 a:hover, - h3 a:focus { - color: var(--color-light-link); - text-decoration: none; - } - - /* Modern HR with gradient */ - hr { - background: linear-gradient( - 90deg, - transparent, - var(--color-light-border) 20%, - var(--color-light-border) 80%, - transparent - ); - height: 1px; - border: 0; - margin: 2.5em 0; - } - - /* Navigation */ - nav ol, - nav ul { - padding-left: 0; - } - - nav li { - list-style: none; - } - - /* Paragraph styling */ - p { - @apply mb-4; - line-height: var(--leading-relaxed); - color: var(--color-light-text-secondary); - } - - /* Modern List Styling */ - ul, - ol { - padding-left: 1.5em; - line-height: var(--leading-relaxed); - } - - ul { - list-style-type: none; - } - - ul li { - position: relative; - padding-left: 1.5em; - } - - ul li::before { - content: ''; - position: absolute; - left: 0; - top: 0.65em; - width: 0.5em; - height: 0.5em; - background: var(--color-light-link); - border-radius: 50%; - } - - ul ol, - ul ul, - ol ol, - ol ul { - padding-left: 1.5em; - margin-top: 0.5em; - } - - /* Modern numbered lists */ - ol { - counter-reset: item; - } - - ol li { - list-style: none; - position: relative; - } - - ol li:before { - content: counter(item) '.'; - counter-increment: item; - position: absolute; - left: -1.5em; - font-weight: 700; - color: var(--color-light-link); - } - - /* Images with modern styling */ - img { - max-width: 100%; - height: auto; - border-radius: var(--radius-lg); - } - - /* Modern Blockquote */ - blockquote { - position: relative; - background: var(--color-light-blockquote-bg); - margin: 2em 0; - padding: var(--space-md) var(--space-lg); - padding-left: calc(var(--space-lg) + 2em); - border-left: 3px solid var(--color-light-blockquote-border); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); - font-style: italic; - color: var(--color-light-text-secondary); - display: flex; - align-items: center; - min-height: 3em; - } - - blockquote::before { - content: '"'; - position: absolute; - left: 1.7rem; - top: 50%; - transform: translateY(-50%); - font-size: 2.5em; - color: var(--color-light-blockquote-border); - opacity: 0.3; - font-family: Georgia, serif; - line-height: 1; - } - - blockquote p { - margin-bottom: 0; - } - - /* Separator */ - .separator { - @apply mx-auto my-12 border-t-8 border-dotted; - width: 20%; - border-color: var(--color-light-border); - opacity: 0.5; - } - - /* Modern Code Blocks */ - pre { - padding: 1.5em; - font-size: var(--font-size-code); - font-family: var(--font-mono); - background: var(--color-light-code-bg); - border: 1px solid var(--color-light-border); - border-radius: var(--radius-lg); - overflow-x: auto; - max-width: 100%; - box-shadow: var(--shadow-sm); - line-height: 1.6; - position: relative; - } - - pre::-webkit-scrollbar { - height: 8px; - } - - pre::-webkit-scrollbar-track { - background: transparent; - } - - pre::-webkit-scrollbar-thumb { - background: var(--color-light-border); - border-radius: var(--radius-full); - } - - pre::-webkit-scrollbar-thumb:hover { - background: var(--color-gray-base); - } - - /* Inline code with modern badge style */ - p code, - li code { - padding: 0.2em 0.5em; - margin: 0; - font-size: 0.9em; - font-family: var(--font-mono); - background-color: var(--color-light-code-inline-bg); - color: var(--color-light-link); - border-radius: var(--radius-sm); - border: 1px solid var(--color-light-border); - font-weight: 500; - } - - /* Modern Selection */ - ::selection { - background: rgba(99, 102, 241, 0.2); - color: inherit; - } - - ::-moz-selection { - background: rgba(99, 102, 241, 0.2); - color: inherit; - } - - /* Focus visible states */ - :root { - --border: var(--color-light-border); - } - - .dark { - --border: var(--color-dark-border); - } - - button:focus-visible { - outline: 2px solid var(--color-light-link); - outline-offset: 3px; - border-radius: var(--radius-md); - } - - /* Tables with modern styling */ - table { - width: 100%; - max-width: 100%; - border-collapse: separate; - border-spacing: 0; - margin: 2em 0; - border-radius: var(--radius-lg); - overflow: hidden; - box-shadow: var(--shadow-sm); - display: block; - overflow-x: auto; - } - - th { - background: var(--color-light-bg-secondary); - padding: 0.75em 1em; - text-align: left; - font-weight: 600; - color: var(--color-light-text-primary); - border-bottom: 2px solid var(--color-light-link); - } - - td { - padding: 0.75em 1em; - border-bottom: 1px solid var(--color-light-border); - } - - tr:last-child td { - border-bottom: none; - } - - tr:hover { - background: var(--color-light-surface-hover); - transition: background var(--duration-fast) var(--ease-out); - } - - /* Smooth scrolling with offset for fixed header */ - [id] { - scroll-margin-top: calc(var(--header-height) + 2rem); - } +/* Root & HTML Setup */ +:root { + box-sizing: border-box; + font-family: var(--font-primary); + line-height: var(--leading-relaxed); + background-color: var(--color-light-bg); + color: var(--color-light-text-primary); + font-size: var(--font-size); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +html { + scroll-behavior: smooth; + background-color: white; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + tab-size: 4; +} + +*, +::after, +::before { + box-sizing: border-box; + border: 0; + border-style: solid; + border-color: var(--color-light-border); +} + +body { + margin: 0; + min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: var(--color-light-bg); + color: var(--color-light-text-primary); + font-size: var(--font-size); + line-height: var(--leading-relaxed); + padding-top: var(--header-height); + overflow-x: hidden; + transition: background-color var(--duration-normal) var(--ease-out), + color var(--duration-normal) var(--ease-out); +} + +/* Reset spacing */ +* + * { + margin-top: 1.5em; +} + +li, +kbd, +div, +input, +option, +select, +a, +textarea, +body, +span, +dd, +code, +label, +[column] { + margin: 0; +} + +/* Modern Link Styling */ +a { + color: var(--color-light-link); + text-decoration: none; + transition: all var(--duration-fast) var(--ease-out); + border-radius: var(--radius-sm); + position: relative; +} + +a:hover { + color: var(--color-light-link); + text-decoration: none; +} + +a:focus-visible { + outline: 2px solid var(--color-light-link); + outline-offset: 3px; +} + +/* Modern link underline effect */ +a:not([class])::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + background: var(--color-light-link); + transition: width var(--duration-normal) var(--ease-out); +} + +a:not([class]):hover::after { + width: 100%; +} + +/* Touch-friendly tap targets */ +a, +area, +button, +input, +label, +select, +textarea, +[tabindex] { + -ms-touch-action: manipulation; + touch-action: manipulation; +} + +/* Modern Heading Typography */ +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--color-light-text-primary); + font-weight: 700; + line-height: 1.2; + letter-spacing: -0.02em; + transition: color var(--duration-normal) var(--ease-out); +} + +h1 { + font-size: clamp(2rem, 5vw, 2.5rem); + margin: 1em 0 0.5em; +} + +h2 { + font-size: clamp(1.75rem, 4vw, 2rem); + margin: 1em 0 0.5em; +} + +h3 { + font-size: clamp(1.5rem, 3.5vw, 1.75rem); + margin: 1em 0 0.5em; +} + +h4 { + font-size: clamp(1.25rem, 3vw, 1.5rem); + margin: 1em 0 0.5em; +} + +h5 { + font-size: clamp(1.125rem, 2.5vw, 1.25rem); + margin: 1em 0 0.5em; +} + +h6 { + font-size: clamp(1rem, 2vw, 1.125rem); + margin: 1em 0 0.5em; +} + +/* Heading links */ +h1 a, +h2 a, +h3 a { + color: inherit; +} + +h1 a::after, +h2 a::after, +h3 a::after { + display: none; +} + +h1 a:hover, +h1 a:focus, +h2 a:hover, +h2 a:focus, +h3 a:hover, +h3 a:focus { + color: var(--color-light-link); + text-decoration: none; +} + +/* Modern HR with gradient */ +hr { + background: linear-gradient( + 90deg, + transparent, + var(--color-light-border) 20%, + var(--color-light-border) 80%, + transparent + ); + height: 1px; + border: 0; + margin: 2.5em 0; +} + +/* Navigation */ +nav ol, +nav ul { + padding-left: 0; +} + +nav li { + list-style: none; +} + +/* Paragraph styling */ +p { + margin-bottom: 1rem; + line-height: var(--leading-relaxed); + color: var(--color-light-text-secondary); +} + +/* Modern List Styling */ +ul, +ol { + padding-left: 1.5em; + line-height: var(--leading-relaxed); +} + +ul { + list-style-type: none; +} + +ul li { + position: relative; + padding-left: 1.5em; +} + +ul li::before { + content: ''; + position: absolute; + left: 0; + top: 0.65em; + width: 0.5em; + height: 0.5em; + background: var(--color-light-link); + border-radius: 50%; +} + +ul ol, +ul ul, +ol ol, +ol ul { + padding-left: 1.5em; + margin-top: 0.5em; +} + +/* Modern numbered lists */ +ol { + counter-reset: item; +} + +ol li { + list-style: none; + position: relative; +} + +ol li:before { + content: counter(item) '.'; + counter-increment: item; + position: absolute; + left: -1.5em; + font-weight: 700; + color: var(--color-light-link); +} + +/* Images with modern styling */ +img { + max-width: 100%; + height: auto; + border-radius: var(--radius-lg); +} + +/* Modern Blockquote */ +blockquote { + position: relative; + background: var(--color-light-blockquote-bg); + margin: 2em 0; + padding: var(--space-md) var(--space-lg); + padding-left: calc(var(--space-lg) + 2em); + border-left: 3px solid var(--color-light-blockquote-border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + font-style: italic; + color: var(--color-light-text-secondary); + display: flex; + align-items: center; + min-height: 3em; +} + +blockquote::before { + content: '"'; + position: absolute; + left: 1.7rem; + top: 50%; + transform: translateY(-50%); + font-size: 2.5em; + color: var(--color-light-blockquote-border); + opacity: 0.3; + font-family: Georgia, serif; + line-height: 1; +} + +blockquote p { + margin-bottom: 0; +} + +/* Modern Code Blocks */ +pre { + padding: 1.5em; + font-size: var(--font-size-code); + font-family: var(--font-mono); + background: var(--color-light-code-bg); + border: 1px solid var(--color-light-border); + border-radius: var(--radius-lg); + overflow-x: auto; + max-width: 100%; + box-shadow: var(--shadow-sm); + line-height: 1.6; + position: relative; +} + +pre::-webkit-scrollbar { + height: 8px; +} + +pre::-webkit-scrollbar-track { + background: transparent; +} + +pre::-webkit-scrollbar-thumb { + background: var(--color-light-border); + border-radius: var(--radius-full); +} + +pre::-webkit-scrollbar-thumb:hover { + background: var(--color-gray-base); +} + +/* Inline code with modern badge style */ +p code, +li code { + padding: 0.2em 0.5em; + margin: 0; + font-size: 0.9em; + font-family: var(--font-mono); + background-color: var(--color-light-code-inline-bg); + color: var(--color-light-link); + border-radius: var(--radius-sm); + border: 1px solid var(--color-light-border); + font-weight: 500; +} + +/* Modern Selection */ +::selection { + background: rgba(99, 102, 241, 0.2); + color: inherit; +} + +::-moz-selection { + background: rgba(99, 102, 241, 0.2); + color: inherit; +} + +/* Focus visible states */ +:root { + --border: var(--color-light-border); +} + +.dark { + --border: var(--color-dark-border); +} + +button:focus-visible { + outline: 2px solid var(--color-light-link); + outline-offset: 3px; + border-radius: var(--radius-md); +} + +/* Tables with modern styling */ +table { + width: 100%; + max-width: 100%; + border-collapse: separate; + border-spacing: 0; + margin: 2em 0; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + display: block; + overflow-x: auto; +} + +th { + background: var(--color-light-bg-secondary); + padding: 0.75em 1em; + text-align: left; + font-weight: 600; + color: var(--color-light-text-primary); + border-bottom: 2px solid var(--color-light-link); +} + +td { + padding: 0.75em 1em; + border-bottom: 1px solid var(--color-light-border); +} + +tr:last-child td { + border-bottom: none; +} + +tr:hover { + background: var(--color-light-surface-hover); + transition: background var(--duration-fast) var(--ease-out); +} + +/* Smooth scrolling with offset for fixed header */ +[id] { +scroll-margin-top: calc(var(--header-height) + 2rem); } diff --git a/css/components/animations.css b/css/components/animations.css new file mode 100644 index 0000000..35afac7 --- /dev/null +++ b/css/components/animations.css @@ -0,0 +1,49 @@ +/* ======================================== + ANIMATIONS + Global keyframe animations + ======================================== */ + +/* Fade animations */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Slide animations */ +@keyframes slideInDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Scale animations */ +@keyframes expandSearch { + from { + transform: scale(0.95); + opacity: 0.8; + } + to { + transform: scale(1); + opacity: 1; + } +} diff --git a/css/components/api.css b/css/components/api.css new file mode 100644 index 0000000..663ba41 --- /dev/null +++ b/css/components/api.css @@ -0,0 +1,431 @@ +.api-index { + list-style: none; + padding: 0; + margin: var(--space-2xl) 0; +} + +.api-index li { + list-style: none; + margin: 0; + padding: 0; +} + +.api-index li::before { + display: none; +} + +.api-index__entry { + margin: var(--space-3xl) 0; + max-width: 100%; + padding: 0; + width: 100%; +} + +/* API Namespace Toggle */ +.api-namespace__toggle { + align-items: flex-end; + background: 0 0; + border: none; + border-bottom: 2px solid var(--color-light-border); + cursor: default; + display: flex; + justify-content: space-between; + padding: 0 0 var(--space-sm); + text-align: left; + transition: all var(--duration-fast) var(--ease-out); + width: 100%; +} + +.api-namespace__title { + color: var(--color-light-link); + font-size: var(--text-2xl); + font-weight: 600; + letter-spacing: -.02em; + line-height: 1; + margin: 0; + padding: 0; +} + +.api-namespace__toggle-indicator { + align-items: flex-end; + display: flex; + flex-direction: row; + flex-shrink: 0; + gap: var(--space-sm); +} + +/* Hide indicator for namespaces without overflow */ +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content:not(.has-overflow) ~ * .api-namespace__toggle-indicator, +.api-index__entry:has(.api-namespace__content:not(.has-overflow)) .api-namespace__toggle-indicator { + display: none; +} + +.api-index__entry:has(.api-namespace__content.has-overflow) .api-namespace__toggle { + cursor: pointer; +} + +.api-namespace__toggle-text { + color: var(--color-light-link); + opacity: 0.8; + font-size: var(--text-sm); + font-weight: 600; + transition: opacity var(--duration-fast) var(--ease-out); +} + +.api-namespace__icon { + color: var(--color-light-link); + flex-shrink: 0; + height: 18px; + opacity: .8; + transition: transform var(--duration-normal) var(--ease-out); + width: 18px; +} + +.api-namespace__toggle:hover .api-namespace__toggle-text, +.api-namespace__toggle:hover .api-namespace__icon { + opacity: 1; + color: var(--color-light-link); +} + +.api-namespace__toggle[aria-expanded="true"] .api-namespace__icon { + transform: rotate(180deg); +} + +/* API Namespace Content */ +.api-namespace__content { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + list-style: none; + margin: 0; + max-height: 5000px; + max-width: 100%; + overflow: visible; + padding: 0; + position: relative; + transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.3s ease-out; + width: 100%; + opacity: 1; +} + +/* Only collapse if has overflow */ +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content { + margin-bottom: var(--space-lg); + max-height: 160px; + overflow: hidden; +} + +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow { + border-radius: var(--radius-lg); + cursor: pointer; + width: calc(100% + var(--space-md) * 2); +} + +/* Pills Container */ +.api-index__entry > ul { + margin-bottom: var(--space-lg); + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + list-style: none; + padding: var(--space-lg) 0; +} + +.api-index__entry > ul li { + flex-shrink: 0; +} + +.api-index__entry > ul a { + display: inline-block; + padding: var(--space-xs) var(--space-md); + background: var(--color-light-bg-secondary); + color: var(--color-light-text-secondary); + border: 1px solid var(--color-light-border); + border-radius: var(--radius-lg); + text-decoration: none; + font-size: var(--text-sm); + font-weight: 500; + transition: all var(--duration-fast) var(--ease-out); + box-shadow: var(--shadow-sm); +} + +.api-index__entry > ul a::after { + display: none; +} + +.api-index__entry > ul a:hover { + background: var(--color-light-link); + color: white; + border-color: var(--color-light-link); + box-shadow: var(--shadow-md); + transform: translateY(-1px); +} + +/* Collapsed State with Fade - ONLY for items with overflow */ +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient(to bottom, transparent 0%, var(--color-light-bg) 100%); + pointer-events: none; + opacity: 0; + animation: fadeInGradient 0.3s ease-out 0.1s forwards; +} + +@keyframes fadeInGradient { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* Hide fade when expanded */ +.api-namespace__toggle[aria-expanded="true"] + .api-namespace__content.has-overflow::after { + opacity: 0; + animation: none; +} + +/* Expand Button */ +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow::before { + content: 'Expand'; + position: absolute; + top: 65%; + left: 50%; + transform: translate(-50%, -50%); + padding: var(--space-sm) var(--space-lg); + background: var(--color-light-link); + color: #fff; + border: 1px solid var(--color-light-link); + border-radius: var(--radius-lg); + font-size: var(--text-sm); + font-weight: 600; + z-index: 10; + box-shadow: none; + opacity: 0; + pointer-events: none; + animation: fadeInButton 0.3s ease-out 0.2s forwards; +} + +@keyframes fadeInButton { + from { + opacity: 0; + transform: translate(-50%, -40%); + } + to { + opacity: 0.8; + transform: translate(-50%, -50%); + } +} + +/* Hide button when expanded */ +.api-namespace__toggle[aria-expanded="true"] + .api-namespace__content.has-overflow::before { + opacity: 0; + animation: none; +} + +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow:hover::before { + opacity: 1; +} + +/* Namespaces without overflow should not have pointer cursor on toggle */ +.api-index__entry:has(.api-namespace__content:not(.has-overflow)) .api-namespace__toggle { + cursor: default; +} + +/* Disable all interaction with pills when collapsed */ +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow a { + pointer-events: none; + cursor: default; +} + +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow a:hover { + background: var(--color-light-bg-secondary) !important; + color: var(--color-light-text-secondary) !important; + border-color: var(--color-light-border) !important; + box-shadow: var(--shadow-sm) !important; + transform: none !important; +} + +/* Enable interaction when expanded */ +.api-namespace__toggle[aria-expanded="true"] + .api-namespace__content a { + pointer-events: auto; +} + +/* When hovering over collapsed area */ +.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow:hover ~ .api-namespace__toggle .api-namespace__toggle-text, +.api-index__entry:has(.api-namespace__content.has-overflow:hover) .api-namespace__toggle-text { + opacity: 1; + color: var(--color-light-link); +} + +.api-index__entry:has(.api-namespace__content.has-overflow:hover) .api-namespace__icon { + opacity: 1; + color: var(--color-light-link); +} + +/* Mobile responsiveness */ +@media (max-width: 767px) { + .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow { + width: 100%; + } +} + +/* API Documentation Page */ +.api-doc { + margin: var(--space-2xl) 0; +} + +.api-doc__header { + display: flex; + align-items: baseline; + gap: var(--space-md); + margin-bottom: var(--space-lg); +} + +.api-doc__name { + font-size: var(--text-2xl); + font-weight: 700; + color: var(--color-light-text-primary); +} + +.api-doc__type { + font-size: var(--text-sm); + color: var(--color-light-text-secondary); + background: var(--color-light-surface); + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-sm); + border: 1px solid var(--color-light-border); +} + +.api-doc__description { + padding: 0 var(--space-lg); + color: var(--color-light-text-secondary); + line-height: var(--leading-relaxed); +} + +/* ======================================== + DARK MODE + ======================================== */ + +.dark .site-navigation-title { + color: var(--color-dark-text-primary); +} + +.dark .site-navigation__entry a { + color: var(--color-dark-text-secondary); +} + +.dark .site-navigation__entry a:hover { + background: var(--color-dark-surface-hover); + color: var(--color-dark-text-accent); +} + +.dark .site-navigation__entry.active a { + color: var(--color-dark-text-accent); + background: var(--color-dark-surface-hover); +} + +.dark .page-toc { + border-bottom-color: var(--color-dark-border); +} + +.dark .page-toc h2 { + color: var(--color-dark-text-primary); +} + +.dark .page-toc a { + color: var(--color-dark-text-secondary); +} + +.dark .page-toc a:hover { + color: var(--color-dark-text-accent); + background: var(--color-dark-surface-hover); +} + +.dark .page-toc a.active { + color: var(--color-dark-text-accent); + background: var(--color-dark-surface-hover); +} + +.dark .api-namespace__toggle { + border-bottom-color: var(--color-dark-border); +} + +.dark .api-namespace__title { + color: var(--color-dark-text-accent); +} + +.dark .api-namespace__toggle-text { + color: #bfa4ff; + opacity: 0.8; +} + +.dark .api-namespace__toggle:hover .api-namespace__toggle-text { + opacity: 1; + color: #c2acf5; +} + +.dark .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow:hover ~ .api-namespace__toggle .api-namespace__toggle-text, +.dark .api-index__entry:has(.api-namespace__content.has-overflow:hover) .api-namespace__toggle-text { + opacity: 1; + color: #c2acf5; +} + +.dark .api-namespace__icon { + color: #bfa4ff; + opacity: 0.8; +} + +.dark .api-namespace__toggle:hover .api-namespace__icon { + opacity: 1; + color: #c2acf5; +} + +.dark .api-index__entry:has(.api-namespace__content.has-overflow:hover) .api-namespace__icon { + opacity: 1; + color: #c2acf5; +} + +.dark .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content::after { + background: linear-gradient(to bottom, + transparent 0%, + var(--color-dark-bg) 100%); +} + +.dark .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow::before { + background: var(--color-dark-text-accent); + color: var(--color-dark-bg); + border: 1px solid var(--color-dark-text-accent); + box-shadow: none; +} + +.dark .api-index__entry > ul a { + background: var(--color-dark-surface); + color: var(--color-dark-text-secondary); + border-color: var(--color-dark-border); + box-shadow: var(--shadow-dark-sm); +} + +.dark .api-index__entry > ul a:hover { + background: var(--color-dark-text-accent); + color: var(--color-dark-bg); + border-color: var(--color-dark-text-accent); + box-shadow: var(--shadow-dark-md); +} + +/* Disable hover effects on pills when collapsed - Dark Mode */ +.dark .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow a:hover { + background: var(--color-dark-surface) !important; + color: var(--color-dark-text-secondary) !important; + border-color: var(--color-dark-border) !important; + box-shadow: var(--shadow-dark-sm) !important; + transform: none !important; +} + diff --git a/css/components/blog.css b/css/components/blog.css index 21f0fa8..a6cfd8b 100644 --- a/css/components/blog.css +++ b/css/components/blog.css @@ -1,5 +1,10 @@ -/* Blog post list */ -@utility post-list { +.blog-intro { + font-size: var(--text-lg); + color: var(--color-light-text-secondary); + margin-bottom: var(--space-2xl); +} + +.post-list { list-style: none; padding: 0; margin: 0; @@ -22,10 +27,10 @@ .post-list li a::after { content: ''; position: absolute; - bottom: 0; + bottom: -2px; left: 0; width: 0; - height: 1px; + height: 2px; background: var(--color-light-link); transition: width var(--duration-normal) var(--ease-out); } @@ -35,7 +40,7 @@ } /* Pagination */ -@utility pagination { +.pagination { display: flex; justify-content: center; align-items: center; @@ -43,55 +48,51 @@ margin: var(--space-3xl) 0; } -.pagination a { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 40px; - height: 40px; - padding: var(--space-sm) var(--space-md); - background: var(--color-light-surface); +.pagination .btn { color: var(--color-light-link); - border: 1px solid var(--color-light-border); - border-radius: var(--radius-md); - font-weight: 600; - text-decoration: none; - transition: all var(--duration-fast) var(--ease-out); } -.pagination a::after { - display: none; +.pagination__btn--previous { + margin-right: auto; } -.pagination a.active { - background: var(--color-light-link); - color: white; - border-color: var(--color-light-link); +.pagination__btn--next { + margin-left: auto; } -.pagination a.previous { - margin-right: auto; +/* ======================================== + DARK MODE + ======================================== */ + +.dark .blog-intro { + color: var(--color-dark-text-secondary); } -.pagination a.next { - margin-left: auto; +.dark .post-list li a { + border-bottom-color: var(--color-dark-border); } -.pagination a.next::after { - content: ' →'; - margin-left: var(--space-xs); +.dark .post-list li a::after { + background: var(--color-dark-text-accent); } -/* Featured post highlight */ -/*.post-list li.featured a {*/ -/* border: 2px solid var(--color-light-link);*/ -/* background: linear-gradient(*/ -/* 135deg,*/ -/* rgba(99, 102, 241, 0.05),*/ -/* transparent*/ -/* );*/ -/*}*/ +.dark .post-list li a h2 { + color: var(--color-dark-text-primary); +} -/*.post-list li.featured a::before {*/ -/* transform: scaleY(1);*/ -/*}*/ +.dark .post-list li a:hover h2 { + color: var(--color-dark-text-accent); +} + +.dark .post-list li a .meta { + color: var(--color-dark-text-muted); +} + +.dark .post-list li a .excerpt { + color: var(--color-dark-text-secondary); +} + +/* Pagination dark mode - inherit from .btn-secondary, add link color */ +.dark .pagination .btn { + color: var(--color-dark-text-accent); +} diff --git a/css/components/code-block.css b/css/components/code-block.css index 9d5008f..ad6a635 100644 --- a/css/components/code-block.css +++ b/css/components/code-block.css @@ -51,11 +51,37 @@ } .copy-code-button.copied { - background-color: var(--color-phel-primary); - border-color: var(--color-phel-primary); + background-color: var(--color-light-link); + border-color: var(--color-light-link); } .copy-code-button.copied svg { stroke: white; } +/* ======================================== + DARK MODE + ======================================== */ + +.dark .copy-code-button { + background-color: rgba(42, 49, 60, 0.95); + border-color: #475569; +} + +.dark .copy-code-button svg { + stroke: #cbd5e1; +} + +.dark .copy-code-button:hover { + background-color: #2f3741; +} + +.dark .copy-code-button.copied { + background-color: var(--color-dark-text-accent); + border-color: var(--color-dark-text-accent); +} + +.dark .copy-code-button.copied svg { + stroke: white; +} + diff --git a/css/components/dark-mode.css b/css/components/dark-mode.css index e25fc41..8e433ce 100644 --- a/css/components/dark-mode.css +++ b/css/components/dark-mode.css @@ -31,177 +31,6 @@ background-color: var(--color-dark-bg); } -/* Modern Dark Header with glassmorphism */ -.dark .site-header { - background: var(--color-dark-header-bg); - backdrop-filter: blur(var(--backdrop-blur-header)) saturate(180%); - -webkit-backdrop-filter: blur(var(--backdrop-blur-header)) saturate(180%); - border-bottom-color: var(--color-dark-header-footer-border); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), - 0 2px 4px -1px rgba(0, 0, 0, 0.2); -} - -.dark .site-header.scrolled { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); -} - -/* Dark logo styling */ -.dark .site-header__logo .phel-logo { - stroke: var(--color-dark-text-primary); - filter: drop-shadow(0 2px 4px rgba(241, 245, 249, 0.1)); -} - -.dark .site-header__logo .logo-text { - color: var(--color-dark-text-primary); -} - - -/* Dark navigation */ -.dark .site-header__navigation a { - color: var(--color-dark-text-secondary); -} - -.dark .site-header__navigation a::after { - background: var(--color-dark-text-accent); -} - -.dark .site-header__navigation a:hover { - color: var(--color-dark-text-accent); -} - -.dark .site-header__navigation li.active a { - color: var(--color-dark-text-accent); -} - -/* Mobile hamburger icon dark mode */ -.dark .site-header__mobile-menu .hamburger-icon span { - background: var(--color-dark-text-primary); -} - -.dark .site-header__mobile-menu .hamburger-icon:hover { - background: rgba(191, 164, 255, 0.15); -} - -/* Mobile navigation overlay dark */ -@media (max-width: 1039px) { - .dark .mobile-menu-overlay { - background: var(--color-dark-header-bg); - backdrop-filter: blur(var(--backdrop-blur-lg)); - -webkit-backdrop-filter: blur(var(--backdrop-blur-lg)); - } - - .dark .mobile-menu-nav a { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - color: var(--color-dark-text-primary); - } - - .dark .mobile-menu-nav a:hover, - .dark .mobile-menu-nav a:active { - background: var(--color-dark-text-accent); - border-color: var(--color-dark-text-accent); - color: var(--color-dark-bg); - } - - .dark .mobile-menu-link { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - color: var(--color-dark-text-primary); - } - - .dark .mobile-menu-link:hover, - .dark .mobile-menu-link:active { - background: var(--color-dark-text-accent); - border-color: var(--color-dark-text-accent); - color: var(--color-dark-bg); - } - - .dark .mobile-menu-actions { - border-top-color: var(--color-dark-border); - } - - .dark .mobile-dark-mode-toggle { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - color: var(--color-dark-text-primary); - } - - .dark .mobile-dark-mode-toggle:hover { - background: rgba(191, 164, 255, 0.15); - border-color: var(--color-dark-text-accent); - } - - .dark .mobile-menu-toggle span { - background: var(--color-dark-text-primary); - } - - .dark .mobile-menu-toggle:hover { - background: rgba(191, 164, 255, 0.15); - } -} - -/* Dark search input with modern styling */ -.dark #search { - background-color: var(--color-dark-bg-secondary); - color: var(--color-dark-text-primary); - border-color: #3a3a3a; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); -} - -.dark #search:hover { - border-color: #4a4a4a; - box-shadow: var(--shadow-dark-sm); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); -} - -.dark #search:focus { - border-color: #5a5a5a; - background-color: var(--color-dark-surface); - box-shadow: 0 0 0 3px rgba(90, 90, 90, 0.3), - var(--shadow-dark-sm); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); -} - -.dark #search::placeholder { - color: var(--color-dark-text-muted); -} - -/* Dark mode clear button */ -.dark #search::-webkit-search-cancel-button { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); - opacity: 0.8; -} - -.dark #search::-webkit-search-cancel-button:hover { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); - opacity: 1; -} - -/* Dark search results scrollbar */ -.dark .search-results::-webkit-scrollbar-thumb { - background: var(--color-dark-border); -} - -.dark .search-results::-webkit-scrollbar-thumb:hover { - background: var(--color-dark-border-subtle); -} - -/* Dark action buttons */ -.dark .site-header__actions { - color: var(--color-dark-text-primary); -} - -.dark .site-header__link, -.dark .dark-mode-toggle { - color: var(--color-dark-text-secondary); -} - -.dark .site-header__link:hover, -.dark .dark-mode-toggle:hover { - color: var(--color-dark-text-accent); - background: rgba(191, 164, 255, 0.15); -} - /* Dark typography */ .dark h1, .dark h2, @@ -237,7 +66,7 @@ color: var(--color-dark-text-accent); } -/* Dark images - no animations */ +/* Dark images */ .dark img { opacity: 1; } @@ -312,461 +141,12 @@ ); } -/* Dark separator */ -.dark .separator { - border-color: var(--color-dark-border); -} - /* Dark layout components */ .dark .one-column-layout, .dark .two-column-layout { background: transparent; } -@media (min-width: 1040px) { - .dark .two-column-layout__sidebar { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - box-shadow: var(--shadow-dark-sm); - } -} - -@media (max-width: 1039px) { - .dark .two-column-layout__sidebar { - background: transparent; - border-bottom-color: var(--color-dark-border); - } -} - -/* Dark mode for sidebar toggle */ -.dark .sidebar-toggle { - background: var(--color-dark-surface); - border-color: var(--color-dark-text-secondary); - color: var(--color-dark-text-primary); -} - -.dark .sidebar-toggle:hover { - background: var(--color-dark-surface-hover); - border-color: var(--color-dark-text-accent); - color: var(--color-dark-text-accent); -} - -/* Dark mode for sidebar accordion open state */ -.dark .two-column-layout__sidebar:has(.sidebar-content.active) { - border-bottom-color: var(--color-dark-border); -} - -.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb { - background: var(--color-dark-border); - background-clip: padding-box; -} - -.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb:hover { - background: var(--color-gray-base); - background-clip: padding-box; -} - -/* Dark TOC */ -.dark .page-toc { - border-bottom-color: var(--color-dark-border); -} - -.dark .page-toc h2 { - color: var(--color-dark-text-primary); -} - -/* Dark site navigation title */ -.dark .site-navigation-title { - color: var(--color-dark-text-primary); -} - -/* Dark mode anchor links */ -.dark .zola-anchor, -.dark .zola-anchor:hover { - color: var(--color-dark-anchor); -} - -/* Dark mode solution toggle */ -.dark .solution label { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - color: var(--color-dark-text-primary); -} - -.dark .solution label:hover { - background: var(--color-dark-surface-hover); - border-color: var(--color-dark-text-accent); - color: var(--color-dark-text-accent); -} - -.dark .solution input[type="checkbox"]:checked ~ label { - background: var(--color-dark-text-accent); - color: var(--color-dark-bg); - border-color: var(--color-dark-text-accent); -} - -/* Dark mode navigation */ -.dark .site-navigation__entry a { - color: var(--color-dark-text-secondary); -} - -.dark .site-navigation__entry a:hover { - background: var(--color-dark-surface-hover); - color: var(--color-dark-text-accent); -} - -.dark .site-navigation__entry.active a { - color: var(--color-dark-text-accent); - background: var(--color-dark-surface-hover); -} - -/* Dark mode blog styling */ -.dark .post-list li a { - border-bottom-color: var(--color-dark-border); -} - -.dark .post-list li a::after { - background: var(--color-dark-text-accent); -} - -.dark .post-list li a h2 { - color: var(--color-dark-text-primary); -} - -.dark .post-list li a:hover h2 { - color: var(--color-dark-text-accent); -} - -.dark .post-list li a .meta { - color: var(--color-dark-text-muted); -} - -.dark .post-list li a .excerpt { - color: var(--color-dark-text-secondary); -} - -/* Dark mode blog pagination */ -.dark .pagination a { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - color: var(--color-dark-text-primary); -} - -.dark .pagination a:hover { - background: var(--color-dark-surface-hover); - border-color: var(--color-dark-text-accent); - color: var(--color-dark-text-accent); -} - -.dark .pagination a.active { - background: var(--color-dark-text-accent); - color: var(--color-dark-bg); - border-color: var(--color-dark-text-accent); -} - -/* Dark mode blog tags */ -.dark .blog-tag { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - color: var(--color-dark-text-secondary); -} - -.dark .blog-tag:hover { - background: var(--color-dark-surface-hover); - border-color: var(--color-dark-text-accent); - color: var(--color-dark-text-accent); -} - -/* Dark API Index Pills */ -.dark .api-namespace-toggle { - border-bottom-color: var(--color-dark-border); -} - -.dark .api-namespace-title { - color: var(--color-dark-text-accent); -} - -.dark .api-namespace-toggle-text { - color: #bfa4ff; - opacity: 0.8; -} - -.dark .api-namespace-toggle:hover .api-namespace-toggle-text { - opacity: 1; - color: #c2acf5; -} - -/* When hovering over collapsed area in dark mode */ -.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover ~ .api-namespace-toggle .api-namespace-toggle-text, -.dark .api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-toggle-text { - opacity: 1; - color: #c2acf5; -} - -.dark .api-namespace-icon { - color: #bfa4ff; - opacity: 0.8; -} - -.dark .api-namespace-toggle:hover .api-namespace-icon { - opacity: 1; - color: #c2acf5; -} - -/* When hovering over collapsed area in dark mode */ -.dark .api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon { - opacity: 1; - color: #c2acf5; -} - -.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after { - background: linear-gradient(to bottom, - transparent 0%, - var(--color-dark-bg) 100%); -} - -.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before { - background: var(--color-dark-text-accent); - color: var(--color-dark-bg); - border: 1px solid var(--color-dark-text-accent); - box-shadow: none; -} - -.dark .api-index__entry > ul a { - background: var(--color-dark-surface); - color: var(--color-dark-text-secondary); - border-color: var(--color-dark-border); - box-shadow: var(--shadow-dark-sm); -} - -.dark .api-index__entry > ul a:hover { - background: var(--color-dark-text-accent); - color: var(--color-dark-bg); - border-color: var(--color-dark-text-accent); - box-shadow: var(--shadow-dark-md); -} - -.dark .page-toc a { - color: var(--color-dark-text-secondary); -} - -.dark .page-toc a:hover { - color: var(--color-dark-text-accent); - background: var(--color-dark-surface-hover); -} - -.dark .page-toc a.active { - color: var(--color-dark-text-accent); - background: var(--color-dark-surface-hover); -} - -/* Dark cards and navigation */ -.dark .related-container { - background: transparent; - border: none; - box-shadow: none; -} - -.dark .related-container .link { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - color: var(--color-dark-text-accent); -} - -.dark .related-container .link:hover { - border-color: var(--color-dark-text-accent); - background: var(--color-dark-surface-hover); -} - -.dark .related-container .link .link-title { - color: var(--color-dark-text-accent); -} - -.dark .related-container .link > span:not(.link-title) { - color: var(--color-dark-text-accent); -} - -/* Dark card */ -.dark .card { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - box-shadow: var(--shadow-dark-sm); -} - -.dark .card:hover { - box-shadow: var(--shadow-dark-lg); - border-color: var(--color-dark-text-accent); -} - -/* Dark badges */ -.dark .badge-primary { - background: rgba(191, 164, 255, 0.2); - color: var(--color-dark-text-accent); -} - -.dark .badge-warning { - background: rgba(245, 158, 11, 0.2); - color: #fbbf24; -} - -.dark .badge-error { - background: rgba(239, 68, 68, 0.2); - color: #f87171; -} - -/* Dark buttons */ -.dark .btn-primary { - background: var(--color-dark-text-accent); - color: var(--color-dark-bg); - box-shadow: var(--shadow-dark-sm); -} - -.dark .btn-primary:hover { - background: #c2acf5; - box-shadow: var(--shadow-dark-md); -} - -.dark .btn-secondary { - background: var(--color-dark-surface); - color: var(--color-dark-text-accent); - border-color: var(--color-dark-text-accent); -} - -.dark .btn-secondary:hover { - background: rgba(191, 164, 255, 0.15); -} - -/* Dark back to top button */ -.dark .back-to-top-button, -.dark #back-to-top-button { - background: var(--color-dark-surface); - color: var(--color-dark-text-primary); - border: 1px solid var(--color-dark-border); -} - -.dark .back-to-top-button:hover, -.dark #back-to-top-button:hover { - background: var(--color-dark-text-accent); - color: var(--color-dark-bg); - border-color: var(--color-dark-text-accent); -} - -/* Dark search results */ -.dark .search-results { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - box-shadow: var(--shadow-dark-lg); - color: var(--color-dark-text-primary); -} - -.dark .search-results__item { - border-bottom-color: var(--color-dark-border); - opacity: 0.7; -} - -.dark .search-result-link { - color: var(--color-dark-text-primary); -} - -.dark .search-results__item:hover { - background: var(--color-dark-surface-hover); - opacity: 0.8; -} - -.dark .result-type-badge--api { - background: var(--color-dark-text-accent); - color: var(--color-dark-bg); - border: 1px solid var(--color-dark-text-accent); -} - -.dark .search-results__item .fn-name { - color: var(--color-dark-text-accent); -} - -.dark .search-results__item .fn-signature { - color: var(--color-dark-text-accent); -} - -.dark .search-results__item strong { - color: var(--color-dark-text-accent); -} - -.dark .search-results__item .title { - color: var(--color-dark-text-primary); -} - -.dark .search-results__item .desc { - color: var(--color-dark-text-primary); -} - -.dark .search-results__item mark { - background: rgba(191, 164, 255, 0.3); - color: var(--color-dark-text-accent); -} - -/* Dark footer */ -.dark .site-footer { - background: var(--color-dark-header-bg); - border-top-color: var(--color-dark-header-footer-border); -} - -.dark .footer-logo .phel-logo { - stroke: white; -} - -.dark .footer-logo .logo-text { - color: var(--color-dark-text-primary); -} - -.dark .footer-description { - color: var(--color-dark-text-secondary); -} - -.dark .footer-social a { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); - color: var(--color-dark-text-primary); -} - -.dark .footer-social a:hover { - background: var(--color-dark-text-accent); - border-color: var(--color-dark-text-accent); - color: var(--color-dark-bg); -} - -.dark .footer-column h3 { - color: var(--color-dark-text-primary); -} - -.dark .footer-column ul li a { - color: var(--color-dark-text-secondary); -} - -.dark .footer-column ul li a:hover { - color: var(--color-dark-text-accent); -} - -.dark .footer-bottom { - border-top-color: var(--color-dark-border); -} - -.dark .footer-copyright { - color: var(--color-dark-text-secondary); -} - -.dark .footer-badge { - color: var(--color-dark-text-secondary); -} - -.dark .footer-badge-separator { - color: var(--color-dark-text-muted); -} - -.dark .footer-badge-version { - background: var(--color-dark-text-accent); - color: var(--color-dark-bg); -} - /* Dark focus states */ .dark a:focus-visible, .dark button:focus-visible { @@ -781,107 +161,3 @@ .dark ::-moz-selection { background: rgba(191, 164, 255, 0.3); } - -/* Dark mode code block copy button */ -.dark .copy-code-button { - background-color: rgba(42, 49, 60, 0.95); - border-color: #475569; -} - -.dark .copy-code-button svg { - stroke: #cbd5e1; -} - -.dark .copy-code-button:hover { - background-color: #2f3741; -} - -.dark .copy-code-button.copied { - background-color: var(--color-dark-text-accent); - border-color: var(--color-dark-text-accent); -} - -.dark .copy-code-button.copied svg { - stroke: white; -} - -/* Homepage Title Accent - Dark Mode */ -.dark .homepage-title-accent { - color: var(--color-dark-text-accent); -} - -.dark .homepage-content > p:first-of-type { - color: var(--color-dark-text-primary); -} - -.dark .why-card { - background: var(--color-dark-bg); - border-color: var(--color-dark-border); - color: var(--color-dark-text-primary); -} - -.dark .why-card:hover { - border-color: var(--color-dark-text-accent); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); -} - -.dark .why-card-icon { - color: var(--color-dark-text-accent); -} - -/* Homepage Code Section - Dark Mode */ -.dark .homepage-code-section { - background: rgba(191, 164, 255, 0.05); -} - -/* Homepage CTA Buttons - Dark Mode */ -.dark .homepage-cta-primary { - background: var(--color-dark-text-accent); - border-color: var(--color-dark-text-accent); - color: var(--color-dark-bg); -} - -.dark .homepage-cta-primary:hover { - background: #c2acf5; - border-color: #c2acf5; - color: var(--color-dark-bg);; -} - -.dark .homepage-cta-secondary { - background: transparent; - color: var(--color-dark-text-primary); - border-color: var(--color-dark-border); -} - -.dark .homepage-cta-secondary:hover { - border-color: var(--color-dark-text-accent); - color: var(--color-dark-text-accent); -} - -/* Features Grid - Dark Mode */ -.dark .feature-card { - background: var(--color-dark-surface); - border-color: var(--color-dark-border); -} - -.dark .feature-card:hover { - border-color: var(--color-dark-text-accent); - box-shadow: var(--shadow-dark-sm); -} - -.dark .feature-icon { - color: var(--color-dark-text-accent); -} - -.dark .feature-title { - color: var(--color-dark-text-primary); -} - -.dark .feature-description { - color: var(--color-dark-text-secondary); -} - -.dark .feature-items p, -.dark .feature-items li { - color: var(--color-dark-text-secondary); -} diff --git a/css/components/documentation.css b/css/components/documentation.css index 9189ce0..f837df9 100644 --- a/css/components/documentation.css +++ b/css/components/documentation.css @@ -1,529 +1,51 @@ -/* Documentation navigation in sidebar */ -@utility docs-nav { +/* Documentation Navigation */ +.docs-nav { padding: 0; margin: 0; -} - -.docs-nav ul { list-style: none; - padding: 0; - margin: 0; } .docs-nav li { - margin: 0; - padding: 0; -} - -.docs-nav li::before { - display: none; -} - -.docs-nav > ul > li { - margin-bottom: var(--space-md); -} - -.docs-nav a { - display: block; - padding: var(--space-sm) var(--space-md); - color: var(--color-light-text-secondary); - font-size: var(--text-sm); - font-weight: 500; - border-radius: var(--radius-md); - text-decoration: none; - transition: all var(--duration-fast) var(--ease-out); - position: relative; -} - -.docs-nav a::after { - display: none; -} - -.docs-nav a:hover { - color: var(--color-light-link); - background: var(--color-light-surface-hover); - transform: translateX(4px); -} - -.docs-nav a.active, -.docs-nav a[aria-current='page'] { - color: var(--color-light-link); - background: var(--color-light-surface-hover); - font-weight: 600; - border-left: 3px solid var(--color-light-link); - padding-left: calc(var(--space-md) - 3px); -} - -/* Nested navigation */ -.docs-nav ul ul { - margin-top: var(--space-sm); - margin-left: var(--space-md); - padding-left: var(--space-md); - border-left: 1px solid var(--color-light-border); -} - -.docs-nav ul ul a { - font-size: var(--text-xs); - padding: var(--space-xs) var(--space-sm); -} - -/* Documentation section headers */ -.docs-nav > ul > li > span { - display: block; - padding: var(--space-sm) var(--space-md); - color: var(--color-gray-base); - font-size: var(--text-xs); - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - margin-bottom: var(--space-xs); -} - -/* Table of contents */ -@utility page-toc { - display: none; - margin-bottom: var(--space-2xl); - padding-bottom: var(--space-xl); - border-bottom: 2px solid var(--color-light-border); -} - -@media (min-width: 1040px) { - .page-toc { - display: block; - } -} - -.page-toc h2 { - font-size: var(--text-sm); - font-weight: 700; - color: var(--color-light-text-primary); - margin: 0 0 var(--space-md) 0; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.page-toc ul { list-style: none; - padding: 0; - margin: 0; -} - -.page-toc li { margin: 0; padding: 0; } -.page-toc li::before { - display: none; -} - -.page-toc a { - display: block; - padding: var(--space-xs) var(--space-sm); - color: var(--color-light-text-secondary); - font-size: var(--text-sm); - line-height: 1.6; - text-decoration: none; - border-radius: var(--radius-sm); - transition: all var(--duration-fast) var(--ease-out); -} - -.page-toc a::after { +.docs-nav li::before { display: none; } -.page-toc a:hover { - color: var(--color-light-link); - background: var(--color-light-surface-hover); -} - -.page-toc a.active { - color: var(--color-light-link); - font-weight: 600; - background: var(--color-light-surface-hover); -} - -.page-toc ul ul { - margin-left: var(--space-md); - margin-top: var(--space-xs); -} - -.page-toc ul ul a { - font-size: var(--text-xs); -} - -/* Custom scrollbar for TOC */ -.page-toc::-webkit-scrollbar { - width: 4px; -} - -.page-toc::-webkit-scrollbar-track { - background: transparent; -} - -.page-toc::-webkit-scrollbar-thumb { - background: var(--color-light-border); - border-radius: var(--radius-full); -} - -/* API Index - Pill Style */ -@utility api-index { - list-style: none; - padding: 0; - margin: var(--space-2xl) 0; - width: 100%; - max-width: 100%; -} - -@media (max-width: 767px) { - .api-index { - padding: 0; - margin: var(--space-xl) 0; - max-width: 100%; - } -} - -.api-index__entry { - margin: var(--space-3xl) 0; - padding: 0; - width: 100%; +/* Documentation Content */ +.documentation-content { max-width: 100%; } -@media (max-width: 767px) { - .api-index__entry { - margin: var(--space-xl) 0; - max-width: 100%; - } -} - -.api-index__entry::before { - display: none; -} - -.api-namespace-toggle { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - background: none; - border: none; - padding: 0; - cursor: default; - text-align: left; - transition: all var(--duration-fast) var(--ease-out); - border-bottom: 2px solid var(--color-light-border); - padding-bottom: var(--space-sm); - margin-bottom: var(--space-lg); -} - -/* Only make it interactive when there's overflow */ -.api-index__entry:has(.api-namespace-content.has-overflow) .api-namespace-toggle { - cursor: pointer; +.documentation-content h1 { + font-size: var(--text-3xl); + margin-bottom: var(--space-xl); } -.api-namespace-title { +.documentation-content h2 { font-size: var(--text-2xl); - font-weight: 600; - color: var(--color-light-link); - margin: 0; - padding: 0; - letter-spacing: -0.02em; - line-height: 1; -} - -.api-namespace-toggle-indicator { - display: none; - align-items: flex-end; - gap: var(--space-sm); - flex-shrink: 0; -} - -/* Only show indicator when there's overflow */ -.api-index__entry:has(.api-namespace-content.has-overflow) .api-namespace-toggle-indicator { - display: flex; -} - -.api-namespace-toggle-text { - font-size: var(--text-sm); - font-weight: 600; - color: var(--color-phel-primary); - opacity: 0.8; - transition: opacity var(--duration-fast) var(--ease-out); -} - -.api-namespace-toggle:hover .api-namespace-toggle-text { - opacity: 1; - color: var(--color-phel-primary); -} - -/* When hovering over collapsed area, highlight the toggle text */ -.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover ~ .api-namespace-toggle .api-namespace-toggle-text, -.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-toggle-text { - opacity: 1; - color: var(--color-phel-primary); -} - -/* Update text content based on state */ -.api-namespace-toggle[aria-expanded="true"] .api-namespace-toggle-text::before { - content: "Show less"; -} - -.api-namespace-toggle[aria-expanded="false"] .api-namespace-toggle-text::before { - content: "Show all"; -} - -.api-namespace-icon { - flex-shrink: 0; - color: var(--color-phel-primary); - transition: transform var(--duration-normal) var(--ease-out); - opacity: 0.8; - width: 24px; - height: 24px; -} - -.api-namespace-toggle:hover .api-namespace-icon { - opacity: 1; - color: var(--color-phel-primary); -} - -/* When hovering over collapsed area, highlight the icon */ -.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon { - opacity: 1; - color: var(--color-phel-primary); -} - -/* Collapsed (closed) = chevron down (V), Expanded (open) = chevron up (^) */ -.api-namespace-toggle[aria-expanded="true"] .api-namespace-icon { - transform: rotate(180deg); -} - -.api-namespace-content { - display: flex; - flex-wrap: wrap; - gap: var(--space-sm); - list-style: none; - padding: 0; - margin: 0; - position: relative; - max-height: 5000px; - overflow: visible; - transition: max-height var(--duration-normal) var(--ease-out); - width: 100%; - max-width: 100%; - box-sizing: border-box; -} - -@media (max-width: 767px) { - .api-namespace-content { - gap: var(--space-xs); - max-width: 100%; - padding: 0; - } - - .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow { - width: 100%; - } -} - -/* Collapsed state - show preview with fade */ -.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content { - max-height: 160px; - overflow: hidden; + margin-top: var(--space-2xl); margin-bottom: var(--space-lg); + padding-bottom: var(--space-sm); + border-bottom: 2px solid var(--color-light-border); } -/* Make entire collapsed area clickable */ -.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow { - cursor: pointer; - border-radius: var(--radius-lg); - width: calc(100% + var(--space-md) * 2); -} - -/* Disable pill interactions when collapsed and has overflow */ -.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow a { - pointer-events: none; - cursor: pointer; -} - -.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 120px; - background: linear-gradient(to bottom, - transparent 0%, - var(--color-light-bg) 100%); - pointer-events: none; - opacity: 0; - transition: opacity var(--duration-fast) var(--ease-out); -} - -/* Only show fade when content is taller than max-height */ -.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::after { - opacity: 1; -} - -/* Expand overlay for collapsed sections with overflow */ -.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before { - content: 'Expand'; - position: absolute; - top: 65%; - left: 50%; - transform: translate(-50%, -50%); - padding: var(--space-sm) var(--space-lg); - background: var(--color-light-link); - color: white; - border: 1px solid var(--color-light-link); - border-radius: var(--radius-lg); - font-size: var(--text-sm); - font-weight: 600; - box-shadow: none; - opacity: 0.8; - pointer-events: none; - transition: opacity var(--duration-normal) var(--ease-in); - z-index: 10; -} - -/* Expanded state - show all */ -.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content { - max-height: 5000px; -} - -.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content::after { - display: none; -} - -.api-index__entry > ul li { - margin: 0; - padding: 0; -} - -.api-index__entry > ul li::before { - display: none; -} - -.api-index__entry > ul a { - display: inline-block; - padding: var(--space-xs) var(--space-md); - background: var(--color-light-bg-secondary); - color: var(--color-light-text-secondary); - font-size: var(--text-sm); - font-weight: 500; - border: 1px solid var(--color-light-border); - border-radius: var(--radius-lg); - text-decoration: none; - transition: all var(--duration-fast) var(--ease-out); - box-shadow: var(--shadow-xs); - max-width: 100%; - word-break: break-word; - overflow-wrap: break-word; -} - -.api-index__entry > ul a::after { - display: none; -} - -.api-index__entry > ul a:hover { - background: var(--color-light-link); - color: white; - border-color: var(--color-light-link); - box-shadow: var(--shadow-sm); - transform: translateY(-1px); -} - -/* Mobile-specific pill constraints */ -@media (max-width: 767px) { - .api-index__entry > ul a { - padding: var(--space-xs) var(--space-sm); - font-size: 0.75rem; - max-width: 100%; - flex-shrink: 1; - min-width: 0; - } -} - -/* Documentation content enhancements */ -.documentation-content { - font-size: var(--text-body); - line-height: var(--leading-relaxed); -} - -/* Exercise Solution Toggle */ -.solution { - margin: var(--space-xl) 0; -} - -.solution input[type="checkbox"] { - display: none; -} - -.solution label { - display: inline-flex; - align-items: center; - justify-content: center; - padding: var(--space-sm) var(--space-md); - background: var(--color-light-surface); - color: var(--color-light-link); - border: 1px solid var(--color-light-border); - border-radius: var(--radius-md); - cursor: pointer; - font-size: var(--text-sm); - font-weight: 600; - transition: all var(--duration-fast) var(--ease-out); +.documentation-content h3 { + font-size: var(--text-xl); + margin-top: var(--space-xl); margin-bottom: var(--space-md); } -.solution label:hover { - border-color: var(--color-light-link); - background: var(--color-light-surface-hover); -} - -/* Hide solution content by default */ -.solution input[type="checkbox"] ~ * { - display: none; -} - -.solution input[type="checkbox"] ~ label { - display: inline-block; -} - -/* Show solution when checkbox is checked */ -.solution input[type="checkbox"]:checked ~ * { - display: block; -} - -.solution input[type="checkbox"]:checked ~ label { - display: inline-flex; - background: var(--color-light-link); - color: white; - border-color: var(--color-light-link); -} - -.solution input[type="checkbox"]:checked ~ label::before { - content: '← Hide solution'; -} - -.solution input[type="checkbox"]:not(:checked) ~ label::before { - content: '→ Show solution'; -} - -/* Remove default label text */ -.solution label { - font-size: 0; -} - -.solution label::before { - font-size: var(--text-sm); -} - -/* Add space between heading text and anchor link */ +/* Anchor Links */ .zola-anchor { margin-left: var(--space-sm); - color: var(--color-light-anchor); opacity: 0; + color: var(--color-light-anchor); + text-decoration: none; + font-weight: 400; transition: opacity var(--duration-fast) var(--ease-out); } @@ -536,97 +58,19 @@ h6:hover .zola-anchor { opacity: 1; } -/* API documentation specific */ -.api-doc { - margin: var(--space-2xl) 0; -} - -.api-doc-header { - display: flex; - align-items: baseline; - gap: var(--space-md); - padding: var(--space-lg); - background: var(--color-light-bg-secondary); - border: 1px solid var(--color-light-border); - border-radius: var(--radius-lg); - margin-bottom: var(--space-md); -} - -.api-doc-name { - font-family: var(--font-mono); - font-size: var(--text-lg); - font-weight: 700; - color: var(--color-light-link); -} - -.api-doc-type { - padding: var(--space-xs) var(--space-sm); - font-size: var(--text-xs); - font-weight: 600; - background: var(--color-light-surface-hover); - color: var(--color-light-link); - border-radius: var(--radius-sm); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.api-doc-description { - padding: 0 var(--space-lg); - color: var(--color-light-text-secondary); - line-height: var(--leading-relaxed); -} - -/* Code examples with header */ -.code-block-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--space-sm) var(--space-lg); - background: var(--color-light-bg-secondary); - border: 1px solid var(--color-light-border); - border-bottom: none; - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - font-size: var(--text-sm); - font-weight: 600; - color: var(--color-light-text-secondary); -} - -.code-block-header + pre { - border-radius: 0 0 var(--radius-lg) var(--radius-lg); -} - -.copy-code-button:active { - transform: translateY(0); -} - -/* Breadcrumbs */ -.breadcrumbs { - display: flex; - align-items: center; - gap: var(--space-sm); - margin-bottom: var(--space-xl); - padding: var(--space-md); - background: var(--color-light-bg-secondary); - border-radius: var(--radius-lg); - font-size: var(--text-sm); -} - -.breadcrumbs a { +.zola-anchor:hover { color: var(--color-light-link); - text-decoration: none; - transition: color var(--duration-fast) var(--ease-out); } -.breadcrumbs a::after { - display: none; -} +/* ======================================== + DARK MODE + ======================================== */ -.breadcrumbs a:hover { - color: var(--color-light-link); +.dark .documentation-content h2 { + border-bottom-color: var(--color-dark-border); } -.breadcrumbs span:not(:last-child)::after { - content: '→'; - margin-left: var(--space-sm); - color: var(--color-gray-light); +.dark .zola-anchor, +.dark .zola-anchor:hover { + color: var(--color-dark-anchor); } diff --git a/css/components/exercises.css b/css/components/exercises.css new file mode 100644 index 0000000..51d1f41 --- /dev/null +++ b/css/components/exercises.css @@ -0,0 +1,40 @@ +.solution { + margin: var(--space-xl) 0; +} + +.solution input[type="checkbox"] { + display: none; +} + +.solution .btn::before { + content: '→ Show solution'; +} + +.solution input[type="checkbox"]:checked ~ .btn.btn-secondary { + background: var(--color-light-link) !important; + color: white !important; + border-color: var(--color-light-link) !important; +} + +.solution input[type="checkbox"]:checked ~ .btn::before { + content: '← Hide solution'; +} + +.solution .solution-content { + display: none; +} + +.solution input[type="checkbox"]:checked ~ .solution-content { + display: block; +} + +/* ======================================== + DARK MODE + ======================================== */ + +.dark .solution input[type="checkbox"]:checked ~ .btn.btn-secondary { + background: var(--color-dark-text-accent) !important; + color: var(--color-dark-bg) !important; + border-color: var(--color-dark-text-accent) !important; +} + diff --git a/css/components/footer.css b/css/components/footer.css index 00f831c..c806a17 100644 --- a/css/components/footer.css +++ b/css/components/footer.css @@ -1,4 +1,3 @@ -/* Footer Styles */ .site-footer { background: var(--color-light-bg-secondary); border-top: 1px solid var(--color-light-border); @@ -302,3 +301,69 @@ margin-top: var(--space-3xl); } } + +/* ======================================== + DARK MODE + ======================================== */ + +.dark .site-footer { + background: var(--color-dark-header-bg); + border-top-color: var(--color-dark-header-footer-border); +} + +.dark .footer-logo .phel-logo { + stroke: white; +} + +.dark .footer-logo .logo-text { + color: var(--color-dark-text-primary); +} + +.dark .footer-description { + color: var(--color-dark-text-secondary); +} + +.dark .footer-social a { + background: var(--color-dark-surface); + border-color: var(--color-dark-border); + color: var(--color-dark-text-primary); +} + +.dark .footer-social a:hover { + background: var(--color-dark-text-accent); + border-color: var(--color-dark-text-accent); + color: var(--color-dark-bg); +} + +.dark .footer-column h3 { + color: var(--color-dark-text-primary); +} + +.dark .footer-column ul li a { + color: var(--color-dark-text-secondary); +} + +.dark .footer-column ul li a:hover { + color: var(--color-dark-text-accent); +} + +.dark .footer-bottom { + border-top-color: var(--color-dark-border); +} + +.dark .footer-copyright { + color: var(--color-dark-text-secondary); +} + +.dark .footer-badge { + color: var(--color-dark-text-secondary); +} + +.dark .footer-badge-separator { + color: var(--color-dark-text-muted); +} + +.dark .footer-badge-version { + background: var(--color-dark-text-accent); + color: var(--color-dark-bg); +} diff --git a/css/components/header.css b/css/components/header.css index fa9847b..4b1bbca 100644 --- a/css/components/header.css +++ b/css/components/header.css @@ -1,5 +1,5 @@ /* Header Container */ -@utility site-header { +.site-header { position: fixed; top: 0; left: 0; @@ -94,7 +94,7 @@ LOGO ======================================== */ -@utility site-header__logo { +.site-header__logo { display: flex; align-items: center; flex-shrink: 0; @@ -130,7 +130,7 @@ DESKTOP NAVIGATION ======================================== */ -@utility site-header__navigation { +.site-header__navigation { display: none; flex: 0 1 auto; align-items: center; @@ -203,158 +203,11 @@ } } -/* ======================================== - SEARCH - ======================================== */ - -@utility site-header__search { - position: relative; - margin-left: auto; - flex: 1; - max-width: 370px; - transition: max-width var(--duration-normal) var(--ease-out); -} - -@media (min-width: 1040px) { - .site-header__search:focus-within { - max-width: 600px; - } -} - -#search { - width: 100%; - padding: var(--space-sm) var(--space-md); - padding-left: 36px; - font-size: var(--text-sm); - font-family: var(--font-primary); - color: var(--color-light-text-primary); - background-color: var(--color-light-bg-secondary); - border: 1px solid var(--color-light-border); - border-radius: var(--radius-full); - outline: none; - transition: all var(--duration-normal) var(--ease-out); - box-shadow: var(--shadow-xs); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: 10px center; - background-size: 16px; -} - -#search:hover { - border-color: var(--color-light-link); - box-shadow: var(--shadow-sm); -} - -#search:focus { - border-color: var(--color-light-link); - background-color: var(--color-light-surface); - box-shadow: 0 0 0 3px var(--color-light-surface-hover), - var(--shadow-md); -} - -#search::placeholder { - color: var(--color-gray-light); -} - -/* Custom clear button for search input */ -#search::-webkit-search-cancel-button { - -webkit-appearance: none; - appearance: none; - height: 18px; - width: 18px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); - background-size: 18px 18px; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; - opacity: 0.8; - transition: opacity var(--duration-fast) var(--ease-out); -} - -#search::-webkit-search-cancel-button:hover { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); - opacity: 1; -} - -/* Mobile search adjustments */ -@media (max-width: 1039px) { - .site-header__search { - flex: 0 0 auto; - width: 50%; - min-width: 180px; - max-width: 360px; - transition: all var(--duration-normal) var(--ease-out); - } - - #search { - font-size: max(var(--text-sm), 16px); - padding: var(--space-sm) var(--space-md); - padding-left: 36px; - background-size: 16px; - background-position: 10px center; - width: 100%; - border: 1px solid var(--color-light-border); - transition: all var(--duration-normal) var(--ease-out); - } - - #search::placeholder { - opacity: 1; - transition: opacity var(--duration-fast) var(--ease-out); - } - - /* When search is expanded on mobile, hide other elements */ - .site-header__container.search-expanded { - gap: 0; - padding-left: var(--space-md); - padding-right: var(--space-md); - } - - .site-header__container.search-expanded .mobile-menu-toggle, - .site-header__container.search-expanded .site-header__logo { - opacity: 0; - pointer-events: none; - width: 0; - min-width: 0; - margin: 0; - padding: 0; - overflow: hidden; - transition: all var(--duration-normal) var(--ease-out); - } - - .site-header__container.search-expanded .site-header__search { - flex: 1 1 100%; - width: 100%; - max-width: none; - margin: 0; - } - - .site-header__container.search-expanded #search { - width: 100%; - border-color: var(--color-light-link); - animation: expandSearch var(--duration-normal) var(--ease-out); - } - - .site-header__container.search-expanded #search::placeholder { - opacity: 1; - } -} - -@keyframes expandSearch { - from { - transform: scale(0.95); - opacity: 0.8; - } - to { - transform: scale(1); - opacity: 1; - } -} - /* ======================================== DESKTOP ACTIONS (Dark Mode, Social) ======================================== */ -@utility site-header__actions { +.site-header__actions { display: none; } @@ -367,7 +220,7 @@ } } -@utility site-header__link { +.site-header__link { display: inline-flex; align-items: center; justify-content: center; @@ -389,7 +242,7 @@ height: 20px; } -@utility dark-mode-toggle { +.dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; @@ -440,11 +293,11 @@ opacity: 1 !important; } -.mobile-menu-nav { +.mobile-menu__nav { padding: var(--space-xl) var(--space-lg); } -.mobile-menu-nav ul { +.mobile-menu__nav ul { list-style: none; padding: 0; margin: 0; @@ -453,19 +306,19 @@ gap: var(--space-md); } -.mobile-menu-nav li { +.mobile-menu__nav li { margin: 0; width: 100%; } -.mobile-menu-nav li::before { +.mobile-menu__nav li::before { display: none; } -.mobile-menu-nav a { +.mobile-menu__nav a { display: block; width: 100%; - padding: var(--space-sm) var(--space-md); + padding: 0.4rem var(--space-md); font-size: var(--text-xl); font-weight: 600; color: var(--color-light-text-primary); @@ -478,12 +331,12 @@ box-sizing: border-box; } -.mobile-menu-nav a::after { +.mobile-menu__nav a::after { display: none; } -.mobile-menu-nav a:hover, -.mobile-menu-nav a:active { +.mobile-menu__nav a:hover, +.mobile-menu__nav a:active { background: var(--color-light-link); color: white; border-color: var(--color-light-link); @@ -491,7 +344,7 @@ } /* Mobile menu social links */ -.mobile-menu-link { +.mobile-menu__link { display: flex; align-items: center; justify-content: center; @@ -511,30 +364,37 @@ margin-top: var(--space-md); } -.mobile-menu-link::after { +.mobile-menu__link::after { display: none; } -.mobile-menu-link:hover, -.mobile-menu-link:active { +.mobile-menu__link:hover, +.mobile-menu__link:active { background: var(--color-light-link); color: white; border-color: var(--color-light-link); transform: scale(1.02); } -.mobile-menu-link svg { +.mobile-menu__link svg { flex-shrink: 0; } -/* Mobile menu actions (Dark mode toggle) */ -.mobile-menu-actions { - margin-top: var(--space-2xl); - padding-top: var(--space-xl); +/* Mobile menu actions (Social links + Dark mode toggle) */ +.mobile-menu__actions { + margin-top: var(--space-xl); + padding-top: var(--space-sm); border-top: 2px solid var(--color-light-border); } -.mobile-dark-mode-toggle { +.mobile-menu__social-links { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-md); + margin-bottom: var(--space-lg); +} + +.mobile-menu__dark-mode-toggle { display: flex; align-items: center; justify-content: center; @@ -549,15 +409,14 @@ border-radius: var(--radius-xl); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); - font-family: var(--font-primary); } -.mobile-dark-mode-toggle:hover { +.mobile-menu__dark-mode-toggle:hover { background: var(--color-light-surface-hover); border-color: var(--color-light-link); } -.mobile-dark-mode-toggle svg { +.mobile-menu__dark-mode-toggle svg { width: 24px; height: 24px; } @@ -575,14 +434,124 @@ body.menu-open { } /* ======================================== - ANIMATIONS + DARK MODE ======================================== */ -@keyframes fadeIn { - from { - opacity: 0; +.dark .site-header { + background: var(--color-dark-header-bg); + backdrop-filter: blur(var(--backdrop-blur-header)) saturate(180%); + -webkit-backdrop-filter: blur(var(--backdrop-blur-header)) saturate(180%); + border-bottom-color: var(--color-dark-header-footer-border); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), + 0 2px 4px -1px rgba(0, 0, 0, 0.2); +} + +.dark .site-header.scrolled { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); +} + +.dark .site-header__logo .phel-logo { + stroke: var(--color-dark-text-primary); + filter: drop-shadow(0 2px 4px rgba(241, 245, 249, 0.1)); +} + +.dark .site-header__logo .logo-text { + color: var(--color-dark-text-primary); +} + +.dark .site-header__navigation a { + color: var(--color-dark-text-secondary); +} + +.dark .site-header__navigation a::after { + background: var(--color-dark-text-accent); +} + +.dark .site-header__navigation a:hover { + color: var(--color-dark-text-accent); +} + +.dark .site-header__navigation li.active a { + color: var(--color-dark-text-accent); +} + +.dark .site-header__mobile-menu .hamburger-icon span { + background: var(--color-dark-text-primary); +} + +.dark .site-header__mobile-menu .hamburger-icon:hover { + background: rgba(191, 164, 255, 0.15); +} + +.dark .site-header__actions { + color: var(--color-dark-text-primary); +} + +.dark .site-header__link, +.dark .dark-mode-toggle { + color: var(--color-dark-text-secondary); +} + +.dark .site-header__link:hover, +.dark .dark-mode-toggle:hover { + color: var(--color-dark-text-accent); + background: rgba(191, 164, 255, 0.15); +} + +/* Mobile menu dark mode */ +@media (max-width: 1039px) { + .dark .mobile-menu-overlay { + background: var(--color-dark-header-bg); + backdrop-filter: blur(var(--backdrop-blur-lg)); + -webkit-backdrop-filter: blur(var(--backdrop-blur-lg)); + } + + .dark .mobile-menu__nav a { + background: var(--color-dark-surface); + border-color: var(--color-dark-border); + color: var(--color-dark-text-primary); + } + + .dark .mobile-menu__nav a:hover, + .dark .mobile-menu__nav a:active { + background: var(--color-dark-text-accent); + border-color: var(--color-dark-text-accent); + color: var(--color-dark-bg); } - to { - opacity: 1; + + .dark .mobile-menu__link { + background: var(--color-dark-surface); + border-color: var(--color-dark-border); + color: var(--color-dark-text-primary); + } + + .dark .mobile-menu__link:hover, + .dark .mobile-menu__link:active { + background: var(--color-dark-text-accent); + border-color: var(--color-dark-text-accent); + color: var(--color-dark-bg); + } + + .dark .mobile-menu__actions { + border-top-color: var(--color-dark-border); + } + + .dark .mobile-menu__dark-mode-toggle { + background: var(--color-dark-surface); + border-color: var(--color-dark-border); + color: var(--color-dark-text-primary); + } + + .dark .mobile-menu__dark-mode-toggle:hover { + background: rgba(191, 164, 255, 0.15); + border-color: var(--color-dark-text-accent); + } + + .dark .mobile-menu-toggle span { + background: var(--color-dark-text-primary); + } + + .dark .mobile-menu-toggle:hover { + background: rgba(191, 164, 255, 0.15); } } diff --git a/css/components/features.css b/css/components/homepage.css similarity index 73% rename from css/components/features.css rename to css/components/homepage.css index ab8b157..a6cb83c 100644 --- a/css/components/features.css +++ b/css/components/homepage.css @@ -1,28 +1,4 @@ -/* Homepage Content */ -.homepage-content h1 { - font-size: 2.5rem; - font-weight: 800; - line-height: 1.1; - margin: var(--space-3xl) 0 var(--space-lg); - text-align: center; -} - -.homepage-title-accent { - color: var(--color-phel-primary); -} - -@media (min-width: 640px) { - .homepage-content h1 { - font-size: 3rem; - } -} - -@media (min-width: 1024px) { - .homepage-content h1 { - font-size: 3.5rem; - } -} - +/* Homepage Content Container */ .homepage-content h2 { text-align: center; font-size: var(--text-3xl); @@ -42,7 +18,7 @@ .homepage-content > p:first-of-type { font-size: var(--text-lg); color: var(--color-light-text-secondary); - margin-bottom: var(--space-2xl); + margin-bottom: var(--space-xl); max-width: 50rem; margin-left: auto; margin-right: auto; @@ -50,9 +26,7 @@ .homepage-content img { display: block; - margin-left: auto; - margin-right: auto; - margin-bottom: var(--space-3xl); + margin: var(--space-2xl) auto; user-select: none; -webkit-user-drag: none; pointer-events: none; @@ -131,12 +105,12 @@ } .why-card:hover { - border-color: var(--color-phel-primary); + border-color: var(--color-light-link); box-shadow: var(--shadow-sm); } .why-card-icon { - color: var(--color-phel-primary); + color: var(--color-light-link); } .why-card-icon svg { @@ -212,14 +186,15 @@ } .homepage-cta-primary { - background: var(--color-phel-primary); + background: var(--color-light-link); color: white; - border: 2px solid var(--color-phel-primary); + border: 2px solid var(--color-light-link); } .homepage-cta-primary:hover { background: #6d3fc2; border-color: #6d3fc2; + color: white; } .homepage-cta-secondary { @@ -229,8 +204,8 @@ } .homepage-cta-secondary:hover { - border-color: var(--color-phel-primary); - color: var(--color-phel-primary); + border-color: var(--color-light-link); + color: var(--color-light-link); } .homepage-cta-icon { @@ -277,12 +252,12 @@ } .feature-card:hover { - border-color: var(--color-phel-primary); + border-color: var(--color-light-link); box-shadow: var(--shadow-sm); } .feature-icon { - color: var(--color-phel-primary); + color: var(--color-light-link); margin-bottom: var(--space-sm); } @@ -342,3 +317,80 @@ display: none; } +/* ======================================== + DARK MODE + ======================================== */ + +.dark .homepage-content > p:first-of-type { + color: var(--color-dark-text-primary); +} + +.dark .homepage-code-section { + background: rgba(191, 164, 255, 0.05); +} + +.dark .why-card { + background: var(--color-dark-bg); + border-color: var(--color-dark-border); + color: var(--color-dark-text-primary); +} + +.dark .why-card:hover { + border-color: var(--color-dark-text-accent); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); +} + +.dark .why-card-icon { + color: var(--color-dark-text-accent); +} + +.dark .homepage-cta-primary { + background: var(--color-dark-text-accent); + border-color: var(--color-dark-text-accent); + color: var(--color-dark-bg); +} + +.dark .homepage-cta-primary:hover { + background: #c2acf5; + border-color: #c2acf5; + color: var(--color-dark-bg); +} + +.dark .homepage-cta-secondary { + background: transparent; + color: var(--color-dark-text-primary); + border-color: var(--color-dark-border); +} + +.dark .homepage-cta-secondary:hover { + border-color: var(--color-dark-text-accent); + color: var(--color-dark-text-accent); +} + +.dark .feature-card { + background: var(--color-dark-surface); + border-color: var(--color-dark-border); +} + +.dark .feature-card:hover { + border-color: var(--color-dark-text-accent); + box-shadow: var(--shadow-dark-sm); +} + +.dark .feature-icon { + color: var(--color-dark-text-accent); +} + +.dark .feature-title { + color: var(--color-dark-text-primary); +} + +.dark .feature-description { + color: var(--color-dark-text-secondary); +} + +.dark .feature-items p, +.dark .feature-items li { + color: var(--color-dark-text-secondary); +} + diff --git a/css/components/layout.css b/css/components/layout.css index 06fb7f7..94e3920 100644 --- a/css/components/layout.css +++ b/css/components/layout.css @@ -1,5 +1,5 @@ /* Layout Container with smooth transitions */ -@utility layout-container { +.layout-container { min-height: 100vh; display: flex; flex-direction: column; @@ -8,7 +8,7 @@ } /* One Column Layout - Modern Content */ -@utility one-column-layout { +.one-column-layout { margin: 0 auto; width: 100%; max-width: var(--container-content); @@ -23,10 +23,9 @@ } /* Two Column Layout - Modern Documentation */ -@utility two-column-layout { +.two-column-layout { display: grid; grid-template-columns: minmax(0, 1fr); - gap: var(--space-md); max-width: var(--container-wide); width: 100%; margin: 0 auto; @@ -52,7 +51,7 @@ } /* Sidebar with modern sticky behavior */ -@utility two-column-layout__sidebar { +.two-column-layout__sidebar { order: -1; } @@ -62,13 +61,13 @@ align-items: center; justify-content: center; width: 100%; - padding: var(--space-md); + padding: 0.7rem; background: var(--color-light-bg-secondary); border: 1px solid var(--color-light-border); border-radius: var(--radius-lg); color: var(--color-light-text-primary); cursor: pointer; - margin: var(--space-xl) 0; + margin: var(--space-xl) 0 var(--space-sm); transition: all var(--duration-fast) var(--ease-out); position: relative; z-index: 10; @@ -111,7 +110,7 @@ /* Add bottom border to sidebar when accordion is open on mobile */ .two-column-layout__sidebar:has(.sidebar-content.active) { - padding-bottom: var(--space-xl); + padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-light-border); } @@ -127,16 +126,15 @@ .two-column-layout__sidebar { order: -1; margin-bottom: 0; - padding-bottom: 0; - padding: var(--space-xl); - border-bottom: none; + padding: var(--space-xl) var(--space-xl) 0 var(--space-xl); + /*border-bottom: none;*/ + border: 1px solid var(--color-light-border); position: sticky; top: calc(var(--header-height) + var(--space-xl)); align-self: start; max-height: calc(100vh - var(--header-height) - var(--space-2xl)); overflow-y: auto; background: var(--color-light-surface); - border: 1px solid var(--color-light-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); transition: all var(--duration-normal) var(--ease-out); @@ -175,7 +173,7 @@ } /* Main content area */ -@utility two-column-layout__main { +.two-column-layout__main { order: 1; min-width: 0; width: 100%; @@ -192,7 +190,7 @@ } /* Modern Page Navigation (Previous/Next) */ -@utility related-container { +.related-container { display: flex; justify-content: space-between; gap: var(--space-lg); @@ -206,42 +204,21 @@ } } -.related-container .link { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--space-sm); - min-width: 40px; - height: 40px; - padding: var(--space-sm) var(--space-md); - background: var(--color-light-surface); +/* Related navigation buttons now use .btn from utilities */ +.related-container .btn { color: var(--color-light-link); - border: 1px solid var(--color-light-border); - border-radius: var(--radius-md); - font-weight: 600; - text-decoration: none; - transition: all var(--duration-fast) var(--ease-out); } -.related-container .link:hover { - border-color: var(--color-light-link); - background: var(--color-light-surface-hover); -} - -.related-container .link::after { - display: none; -} - -.related-container .link .link-title { +.related-container .link__title { flex: 1; } -.related-container .link > span:not(.link-title) { +.related-container .link > span:not(.link__title) { flex-shrink: 0; } /* Back to Top Button */ -@utility back-to-top-button { +.back-to-top-button { position: fixed; bottom: var(--space-2xl); right: var(--space-xl); @@ -280,34 +257,77 @@ transform: scale(0.95); } -/* Animation keyframes */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); +/* ======================================== + DARK MODE + ======================================== */ + +@media (min-width: 1040px) { + .dark .two-column-layout__sidebar { + background: var(--color-dark-surface); + border-color: var(--color-dark-border); + box-shadow: var(--shadow-dark-sm); } } -@keyframes slideInRight { - from { - opacity: 0; - transform: translateX(-30px); - } - to { - opacity: 1; - transform: translateX(0); +@media (max-width: 1039px) { + .dark .two-column-layout__sidebar { + background: transparent; + border-bottom-color: var(--color-dark-border); } } -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.8; - } +.dark .sidebar-toggle { + background: var(--color-dark-surface); + border-color: var(--color-dark-text-secondary); + color: var(--color-dark-text-primary); +} + +.dark .sidebar-toggle:hover { + background: var(--color-dark-surface-hover); + border-color: var(--color-dark-text-accent); + color: var(--color-dark-text-accent); +} + +.dark .two-column-layout__sidebar:has(.sidebar-content.active) { + border-bottom-color: var(--color-dark-border); +} + +.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb { + background: var(--color-dark-border); + border: 2px solid transparent; + background-clip: padding-box; +} + +.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb:hover { + background: var(--color-gray-base); + background-clip: padding-box; +} + +.dark .related-container { + background: transparent; + border: none; + box-shadow: none; +} + +/* Related container dark mode - btn styles inherited, add link color */ +.dark .related-container .btn { + color: var(--color-dark-text-accent); +} + +.dark .related-container .link > span:not(.link-title) { + color: var(--color-dark-text-accent); +} + +.dark .back-to-top-button, +.dark #back-to-top-button { + background: var(--color-dark-surface); + color: var(--color-dark-text-primary); + border: 1px solid var(--color-dark-border); +} + +.dark .back-to-top-button:hover, +.dark #back-to-top-button:hover { + background: var(--color-dark-text-accent); + color: var(--color-dark-bg); + border-color: var(--color-dark-text-accent); } diff --git a/css/components/navigation.css b/css/components/navigation.css index b9a8602..506bfd6 100644 --- a/css/components/navigation.css +++ b/css/components/navigation.css @@ -16,73 +16,3 @@ .top-navigation li::before { display: none; } - -@media (min-width: 1040px) { - .top-navigation__item--github, - .top-navigation__item--x { - display: none; - } -} - -/* Site Navigation (sidebar) */ -.site-navigation-title { - font-size: var(--text-sm); - font-weight: 700; - color: var(--color-light-text-primary); - margin: 0 0 var(--space-md) 0; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -@media (min-width: 1040px) { - .site-navigation-title { - margin-top: 0; - } -} - -.site-navigation { - list-style: none; - padding: 0; - margin: 0; -} - -.site-navigation li { - list-style: none; - margin: 0; - padding: 0; -} - -.site-navigation li::before { - display: none; -} - -.site-navigation__entry { - margin: var(--space-xs) 0; -} - -.site-navigation__entry a { - display: block; - padding: var(--space-sm) var(--space-md); - color: var(--color-light-text-secondary); - font-size: var(--text-sm); - font-weight: 500; - border-radius: var(--radius-md); - text-decoration: none; - transition: all var(--duration-fast) var(--ease-out); -} - -.site-navigation__entry a::after { - display: none; -} - -.site-navigation__entry a:hover { - color: var(--color-light-link); - background: var(--color-light-surface-hover); -} - -.site-navigation__entry.active a { - color: var(--color-light-link); - background: var(--color-light-surface-hover); - font-weight: 600; -} - diff --git a/css/components/search.css b/css/components/search.css index 6d9a25e..94d2ccc 100644 --- a/css/components/search.css +++ b/css/components/search.css @@ -1,5 +1,136 @@ +.site-header__search { + position: relative; + margin-left: auto; + flex: 1; + max-width: 370px; + transition: max-width var(--duration-normal) var(--ease-out); +} + +@media (min-width: 1040px) { + .site-header__search:focus-within { + max-width: 600px; + } +} + +#search { + width: 100%; + padding: var(--space-sm) var(--space-md); + padding-left: 36px; + font-size: var(--text-sm); + color: var(--color-light-text-primary); + background-color: var(--color-light-bg-secondary); + border: 1px solid var(--color-light-border); + border-radius: var(--radius-full); + outline: none; + transition: all var(--duration-normal) var(--ease-out); + box-shadow: var(--shadow-xs); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 10px center; + background-size: 16px; +} + +#search:hover { + border-color: var(--color-light-link); + box-shadow: var(--shadow-sm); +} + +#search:focus { + border-color: var(--color-light-link); + background-color: var(--color-light-surface); + box-shadow: 0 0 0 3px var(--color-light-surface-hover), + var(--shadow-md); +} + +#search::placeholder { + color: var(--color-gray-light); +} + +/* Custom clear button for search input */ +#search::-webkit-search-cancel-button { + -webkit-appearance: none; + appearance: none; + height: 18px; + width: 18px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + opacity: 0.8; + transition: opacity var(--duration-fast) var(--ease-out); +} + +#search::-webkit-search-cancel-button:hover { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); + opacity: 1; +} + +/* Mobile search adjustments */ +@media (max-width: 1039px) { + .site-header__search { + flex: 0 0 auto; + width: 50%; + min-width: 180px; + max-width: 360px; + transition: all var(--duration-normal) var(--ease-out); + } + + #search { + font-size: max(var(--text-sm), 16px); + padding: var(--space-sm) var(--space-md); + padding-left: 36px; + background-size: 16px; + background-position: 10px center; + width: 100%; + border: 1px solid var(--color-light-border); + transition: all var(--duration-normal) var(--ease-out); + } + + #search::placeholder { + opacity: 1; + transition: opacity var(--duration-fast) var(--ease-out); + } + + /* When search is expanded on mobile, hide other elements */ + .site-header__container.search-expanded { + gap: 0; + padding-left: var(--space-md); + padding-right: var(--space-md); + } + + .site-header__container.search-expanded .mobile-menu-toggle, + .site-header__container.search-expanded .site-header__logo { + opacity: 0; + pointer-events: none; + width: 0; + min-width: 0; + margin: 0; + padding: 0; + overflow: hidden; + transition: all var(--duration-normal) var(--ease-out); + } + + .site-header__container.search-expanded .site-header__search { + flex: 1 1 100%; + width: 100%; + max-width: none; + margin: 0; + } + + .site-header__container.search-expanded #search { + width: 100%; + border-color: var(--color-light-link); + animation: expandSearch var(--duration-normal) var(--ease-out); + } + + .site-header__container.search-expanded #search::placeholder { + opacity: 1; + } +} + /* Search results dropdown with glassmorphism */ -@utility search-results { +.search-results { position: absolute; top: calc(100% + var(--space-sm)); left: 0; @@ -57,7 +188,7 @@ } /* Search results list */ -@utility search-results__items { +.search-results__items { list-style: none; padding: var(--space-sm); margin: 0; @@ -73,7 +204,7 @@ } /* Individual search result item */ -@utility search-results__item { +.search-results__item { display: flex; flex-direction: column; gap: var(--space-md); @@ -91,7 +222,7 @@ opacity: 0.9; } -.search-result-link { +.search-results__link { display: block; text-decoration: none; color: var(--color-light-text-primary); @@ -113,7 +244,7 @@ min-width: 0; } -.result-type-badge { +.search-results__badge { display: inline-flex; align-items: center; padding: 3px 8px; @@ -127,12 +258,12 @@ line-height: 1.2; } -.result-type-badge--api { +.search-results__badge--api { background: var(--color-light-link); color: white; } -.result-type-badge--docs { +.search-results__badge--docs { background: var(--color-light-text-accent); color: white; } @@ -217,30 +348,6 @@ border-left: 3px solid var(--color-light-link); } -/* Category badges in search results */ -.search-results__item .category { - display: inline-block; - padding: var(--space-xs) var(--space-sm); - font-size: var(--text-xs); - font-weight: 600; - border-radius: var(--radius-full); - background: var(--color-light-surface-hover); - color: var(--color-light-link); - margin-top: var(--space-sm); -} - -/* Animation keyframes */ -@keyframes slideInDown { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - /* Mobile responsive */ @media (max-width: 1039px) { .search-results { @@ -252,3 +359,108 @@ padding: var(--space-md); } } + +/* ======================================== + DARK MODE + ======================================== */ + +.dark #search { + background-color: #1d232f; + color: var(--color-dark-text-primary); + border-color: #3a3a3a; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); +} + +.dark #search:hover { + border-color: #4a4a4a; + box-shadow: var(--shadow-dark-sm); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); +} + +.dark #search:focus { + border-color: #5a5a5a; + background-color: var(--color-dark-surface); + box-shadow: 0 0 0 3px rgba(90, 90, 90, 0.3), + var(--shadow-dark-sm); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); +} + +.dark #search::placeholder { + color: var(--color-dark-text-muted); +} + +.dark #search::-webkit-search-cancel-button { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); + opacity: 0.8; +} + +.dark #search::-webkit-search-cancel-button:hover { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); + opacity: 1; +} + +.dark .search-results { + background: var(--color-dark-surface); + border-color: var(--color-dark-border); + box-shadow: var(--shadow-dark-lg); + color: var(--color-dark-text-primary); +} + +.dark .search-results__item { + border-bottom-color: var(--color-dark-border); + opacity: 0.7; +} + +.dark .search-results__link { + color: var(--color-dark-text-primary); +} + +.dark .search-results__item:hover { + background: var(--color-dark-surface-hover); + opacity: 0.8; +} + +.dark .search-results__badge--api { + background: var(--color-dark-text-accent); + color: var(--color-dark-bg); + border: 1px solid var(--color-dark-text-accent); +} + +.dark .search-results__badge--docs { + background: var(--color-dark-link); + color: var(--color-dark-bg); + border: 1px solid var(--color-dark-link); +} + +.dark .search-results__item .fn-name { + color: var(--color-dark-text-accent); +} + +.dark .search-results__item .fn-signature { + color: var(--color-dark-text-accent); +} + +.dark .search-results__item strong { + color: var(--color-dark-text-accent); +} + +.dark .search-results__item .title { + color: var(--color-dark-text-primary); +} + +.dark .search-results__item .desc { + color: var(--color-dark-text-primary); +} + +.dark .search-results__item mark { + background: rgba(191, 164, 255, 0.3); + color: var(--color-dark-text-accent); +} + +.dark .search-results::-webkit-scrollbar-thumb { + background: var(--color-dark-border); +} + +.dark .search-results::-webkit-scrollbar-thumb:hover { + background: var(--color-dark-border-subtle); +} diff --git a/css/components/sidebar.css b/css/components/sidebar.css new file mode 100644 index 0000000..de14170 --- /dev/null +++ b/css/components/sidebar.css @@ -0,0 +1,180 @@ +/* Sidebar Title */ +.site-navigation__title { + font-size: var(--text-sm); + font-weight: 700; + color: var(--color-light-text-primary); + margin: var(--space-lg) 0 var(--space-md) 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +@media (min-width: 1040px) { + .site-navigation__title { + margin-top: 0; + } +} + +/* Site Navigation */ +.site-navigation { + list-style: none; + padding: 0; + margin: 0; +} + +.site-navigation li { + list-style: none; + margin: 0; + padding: 0; +} + +.site-navigation li::before { + display: none; +} + +.site-navigation__entry { + margin: var(--space-xs) 0; +} + +.site-navigation__entry a { + display: block; + padding: var(--space-sm) var(--space-md); + color: var(--color-light-text-secondary); + font-size: var(--text-sm); + font-weight: 500; + border-radius: var(--radius-md); + text-decoration: none; + transition: all var(--duration-fast) var(--ease-out); +} + +.site-navigation__entry a::after { + display: none; +} + +.site-navigation__entry a:hover { + color: var(--color-light-link); + background: var(--color-light-surface-hover); +} + +.site-navigation__entry.active a { + color: var(--color-light-link); + background: var(--color-light-surface-hover); + font-weight: 600; +} + +/* Page TOC */ +.page-toc { + display: none; + margin-bottom: var(--space-2xl); + padding-bottom: var(--space-lg); + border-bottom: 2px solid var(--color-light-border); +} + +@media (min-width: 1040px) { + .page-toc { + display: block; + } +} + +.page-toc h2 { + font-size: var(--text-sm); + font-weight: 700; + color: var(--color-light-text-primary); + margin: 0 0 var(--space-md) 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.page-toc ul { + list-style: none; + padding: 0; + margin: 0; +} + +.page-toc li { + list-style: none; + margin: 0; + padding: 0; +} + +.page-toc li::before { + display: none; +} + +.page-toc a { + display: block; + padding: var(--space-xs) var(--space-md); + font-size: var(--text-sm); + color: var(--color-light-text-secondary); + text-decoration: none; + border-radius: var(--radius-md); + transition: all var(--duration-fast) var(--ease-out); +} + +.page-toc a::after { + display: none; +} + +.page-toc a:hover { + color: var(--color-light-link); + background: var(--color-light-surface-hover); +} + +.page-toc a.active { + color: var(--color-light-link); + background: var(--color-light-surface-hover); + font-weight: 600; +} + +.page-toc ul ul { + margin-left: var(--space-md); +} + +.page-toc ul ul a { + font-size: var(--text-xs); + padding-left: var(--space-sm); +} + +/* ======================================== + DARK MODE + ======================================== */ + +.dark .site-navigation__title { + color: var(--color-dark-text-primary); +} + +.dark .site-navigation__entry a { + color: var(--color-dark-text-secondary); +} + +.dark .site-navigation__entry a:hover { + background: var(--color-dark-surface-hover); + color: var(--color-dark-text-accent); +} + +.dark .site-navigation__entry.active a { + color: var(--color-dark-text-accent); + background: var(--color-dark-surface-hover); +} + +.dark .page-toc { + border-bottom-color: var(--color-dark-border); +} + +.dark .page-toc h2 { + color: var(--color-dark-text-primary); +} + +.dark .page-toc a { + color: var(--color-dark-text-secondary); +} + +.dark .page-toc a:hover { + color: var(--color-dark-text-accent); + background: var(--color-dark-surface-hover); +} + +.dark .page-toc a.active { + color: var(--color-dark-text-accent); + background: var(--color-dark-surface-hover); +} + diff --git a/css/components/utilities.css b/css/components/utilities.css new file mode 100644 index 0000000..8162b55 --- /dev/null +++ b/css/components/utilities.css @@ -0,0 +1,319 @@ +/* ======================================== + UTILITY CLASSES + Base classes for common patterns + ======================================== */ + +/* ======================================== + BUTTONS + ======================================== */ + +/* Base button styles */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + font-size: var(--text-sm); + font-weight: 600; + text-decoration: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--duration-fast) var(--ease-out); + user-select: none; + border: 1px solid transparent; +} + +/* Button variants */ +.btn-primary { + background: var(--color-light-link); + color: white; + border-color: var(--color-light-link); +} + +.btn-primary:hover { + background: var(--color-light-link-hover, #5a5fcf); + border-color: var(--color-light-link-hover, #5a5fcf); +} + +.btn-secondary { + background: var(--color-light-surface); + color: var(--color-light-text-primary); + border-color: var(--color-light-border); +} + +.btn-secondary:hover { + background: var(--color-light-surface-hover); + border-color: var(--color-light-link); + color: var(--color-light-link); +} + +.btn-ghost { + background: transparent; + color: var(--color-gray-dark); + border-color: transparent; +} + +.btn-ghost:hover { + background: var(--color-light-surface-hover); + color: var(--color-light-link); +} + +/* Button sizes */ +.btn-sm { + min-width: 40px; + height: 40px; + padding: var(--space-xs) var(--space-sm); + font-size: var(--text-xs); +} + +.btn-md { + min-width: 40px; + height: 40px; + padding: var(--space-sm) var(--space-md); +} + +.btn-lg { + padding: var(--space-md) var(--space-lg); + font-size: var(--text-base); +} + +/* Button shapes */ +.btn-rounded { + border-radius: var(--radius-lg); +} + +.btn-pill { + border-radius: var(--radius-full); +} + +.btn-square { + width: 40px; + height: 40px; + padding: 0; +} + +/* ======================================== + BADGES + ======================================== */ + +.badge { + display: inline-flex; + align-items: center; + padding: 3px 8px; + font-size: 0.65rem; + font-weight: 600; + border-radius: var(--radius-full); + white-space: nowrap; + flex-shrink: 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.badge-primary { + background: var(--color-light-link); + color: white; +} + +.badge-secondary { + background: var(--color-light-surface); + color: var(--color-light-text-secondary); + border: 1px solid var(--color-light-border); +} + +/* ======================================== + FLEX UTILITIES + ======================================== */ + +.flex { + display: flex; +} + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +.flex-between { + display: flex; + align-items: center; + justify-content: space-between; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.items-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.gap-sm { + gap: var(--space-sm); +} + +.gap-md { + gap: var(--space-md); +} + +.gap-lg { + gap: var(--space-lg); +} + +/* ======================================== + SPACING UTILITIES + ======================================== */ + +.m-0 { + margin: 0; +} + +.mt-sm { + margin-top: var(--space-sm); +} + +.mt-md { + margin-top: var(--space-md); +} + +.mt-lg { + margin-top: var(--space-lg); +} + +.mb-sm { + margin-bottom: var(--space-sm); +} + +.mb-md { + margin-bottom: var(--space-md); +} + +.mb-lg { + margin-bottom: var(--space-lg); +} + +/* ======================================== + TEXT UTILITIES + ======================================== */ + +.text-center { + text-align: center; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.font-bold { + font-weight: 700; +} + +.font-semibold { + font-weight: 600; +} + +/* ======================================== + DISPLAY UTILITIES + ======================================== */ + +.hidden { + display: none; +} + +.block { + display: block; +} + +.inline-block { + display: inline-block; +} + +/* ======================================== + SIZE UTILITIES + ======================================== */ + +.w-full { + width: 100%; +} + +.w-auto { + width: auto; +} + +.h-full { + height: 100%; +} + +.h-auto { + height: auto; +} + +.max-w-full { + max-width: 100%; +} + +.min-w-0 { + min-width: 0; +} + +/* ======================================== + DARK MODE + ======================================== */ + +.dark .btn-primary { + background: var(--color-dark-text-accent); + color: var(--color-dark-bg); + border-color: var(--color-dark-text-accent); +} + +.dark .btn-primary:hover { + background: #c2acf5; + border-color: #c2acf5; +} + +.dark .btn-secondary { + background: var(--color-dark-surface); + color: var(--color-dark-text-primary); + border-color: var(--color-dark-border); +} + +.dark .btn-secondary:hover { + background: var(--color-dark-surface-hover); + border-color: var(--color-dark-text-accent); + color: var(--color-dark-text-accent); +} + +.dark .btn-ghost { + color: var(--color-dark-text-secondary); +} + +.dark .btn-ghost:hover { + background: rgba(191, 164, 255, 0.15); + color: var(--color-dark-text-accent); +} + +.dark .badge-primary { + background: var(--color-dark-text-accent); + color: var(--color-dark-bg); +} + +.dark .badge-secondary { + background: var(--color-dark-surface); + color: var(--color-dark-text-secondary); + border-color: var(--color-dark-border); +} + diff --git a/css/theme.css b/css/theme.css index 452f0d5..a8e2a00 100644 --- a/css/theme.css +++ b/css/theme.css @@ -1,4 +1,4 @@ -@import 'tailwindcss'; +@import 'tailwindcss/theme' layer(theme); @source '../content/**/*.md'; @@ -15,7 +15,6 @@ --color-light-link: #512da8; --color-light-border: #e2e8f0; --color-light-border-subtle: #f1f5f9; - --color-phel-primary: #512da8; /* Modern Color Palette - Dark Mode */ --color-dark-bg: #212830; @@ -24,7 +23,7 @@ --color-dark-text-secondary: #cbd5e1; --color-dark-text-muted: #94a3b8; --color-dark-text-accent: #bfa4ff; - --color-dark-link: #bfa4ff; + --color-dark-link: #d1c7e5; --color-dark-border: #3a3a3a; --color-dark-border-subtle: #2a2a2a; --color-dark-header-footer-border: #151a24; @@ -36,7 +35,7 @@ --color-dark-surface: #2a313c; --color-dark-surface-hover: #262c36; - /* Code & Catalogue */ + /* Code */ --color-light-code-bg: #f1f5f9; --color-light-code-inline-bg: #e2e8f0; --color-dark-code-bg: #262c36; @@ -54,33 +53,14 @@ /* Extended Color Palette */ - --color-blue-darker: #1e40af; - --color-blue-dark: #2563eb; - --color-blue-base: #3b82f6; - --color-blue-light: #60a5fa; - --color-blue-lighter: #93c5fd; - - --color-green-darker: #047857; - --color-green-dark: #059669; - --color-green-base: #10b981; - --color-green-light: #34d399; - --color-green-lighter: #6ee7b7; - - --color-red-darker: #b91c1c; - --color-red-dark: #dc2626; - --color-red-base: #ef4444; - --color-red-light: #f87171; - --color-red-lighter: #fca5a5; - --color-gray-darker: #252525; --color-gray-dark: #475569; --color-gray-base: #64748b; --color-gray-light: #94a3b8; --color-gray-lighter: #cbd5e1; - /* Modern Typography */ + /* Typography */ --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - --font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Consolas', 'Monaco', monospace; --font-inter: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; diff --git a/scripts/concat-tailwind.js b/scripts/concat-tailwind.js index 19209de..5f89058 100644 --- a/scripts/concat-tailwind.js +++ b/scripts/concat-tailwind.js @@ -6,17 +6,33 @@ const outFile = path.join(projectRoot, 'css', 'tailwind.entry.css'); // Define concatenation order (top → bottom) const parts = [ + // 1. Foundation 'css/theme.css', 'css/base.css', - 'css/components/footer.css', + 'css/components/utilities.css', + + // 2. Layout & Structure + 'css/components/layout.css', 'css/components/header.css', + 'css/components/footer.css', 'css/components/navigation.css', - 'css/components/layout.css', - 'css/components/search.css', - 'css/components/documentation.css', + 'css/components/sidebar.css', + + // 3. Pages + 'css/components/homepage.css', 'css/components/blog.css', - 'css/components/features.css', + 'css/components/documentation.css', + 'css/components/api.css', + 'css/components/exercises.css', + + // 4. Features + 'css/components/search.css', 'css/components/code-block.css', + + // 5. Animations + 'css/components/animations.css', + + // 6. Dark Mode (last to override) 'css/components/dark-mode.css', ]; diff --git a/static/api-accordion.js b/static/api-accordion.js index 2e3705d..6d82a93 100644 --- a/static/api-accordion.js +++ b/static/api-accordion.js @@ -1,14 +1,24 @@ // API Namespace Accordion document.addEventListener('DOMContentLoaded', function() { - const toggleButtons = document.querySelectorAll('.api-namespace-toggle'); + const toggleButtons = document.querySelectorAll('.api-namespace__toggle'); toggleButtons.forEach(function(button) { // Check if content has overflow const content = button.nextElementSibling; - if (content && content.classList.contains('api-namespace-content')) { + const toggleText = button.querySelector('.api-namespace__toggle-text'); + + if (content && content.classList.contains('api-namespace__content')) { // Check if content height exceeds the collapsed max-height (160px) if (content.scrollHeight > 160) { content.classList.add('has-overflow'); + + // Set initial text based on aria-expanded state + updateToggleText(button, toggleText); + } else { + // Hide toggle text if no overflow + if (toggleText) { + toggleText.style.display = 'none'; + } } // Click on content area when collapsed expands it @@ -17,15 +27,28 @@ document.addEventListener('DOMContentLoaded', function() { if (isCollapsed && content.classList.contains('has-overflow')) { e.preventDefault(); button.setAttribute('aria-expanded', 'true'); + updateToggleText(button, toggleText); } }); } - // Toggle functionality on button click + // Toggle functionality on button click - ONLY for items with overflow button.addEventListener('click', function() { - const isExpanded = this.getAttribute('aria-expanded') === 'true'; - this.setAttribute('aria-expanded', !isExpanded); + const content = this.nextElementSibling; + if (content && content.classList.contains('has-overflow')) { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + updateToggleText(this, toggleText); + } }); }); + + // Helper function to update toggle text + function updateToggleText(button, toggleText) { + if (!toggleText) return; + + const isExpanded = button.getAttribute('aria-expanded') === 'true'; + toggleText.textContent = isExpanded ? 'Show less' : 'Show all'; + } }); diff --git a/static/mobile-menu.js b/static/mobile-menu.js index ac36266..655ba91 100644 --- a/static/mobile-menu.js +++ b/static/mobile-menu.js @@ -64,7 +64,7 @@ if (document.readyState !== 'loading') { // Mobile dark mode toggle (separate initialization) document.addEventListener('DOMContentLoaded', function() { - const mobileDarkToggle = document.querySelector('.mobile-dark-mode-toggle'); + const mobileDarkToggle = document.querySelector('.mobile-menu__dark-mode-toggle'); const mainDarkToggle = document.getElementById('dark-mode-toggle'); if (mobileDarkToggle && mainDarkToggle) { diff --git a/static/search.js b/static/search.js index 4878ecd..f9f4ec9 100644 --- a/static/search.js +++ b/static/search.js @@ -276,23 +276,23 @@ function createMenuItem(result, index) { function formatSearchResultItem(item) { if (item.type === "documentation") { - return `` + return `` + `
` + `
` + `${item.title}` - + `Docs` + + `Docs` + `
` + `${item.content}` + `
`; } else { - return `` + return `` + `
` + `
` + `
` + `${item.name} ` + `${item.signature}` + `
` - + `API` + + `API` + `
` + `${item.desc}` + `
`; diff --git a/templates/blog-entry.html b/templates/blog-entry.html index 00e3eb5..ae44820 100644 --- a/templates/blog-entry.html +++ b/templates/blog-entry.html @@ -14,15 +14,15 @@

{{page.title}}

{% if page.lower %} - ← - {{ page.lower.title }} + {{ page.lower.title }} {% endif %} {% if page.higher %} - + {{ page.higher.title }} → {% endif %} diff --git a/templates/blog.html b/templates/blog.html index e0640ee..2057246 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -6,7 +6,7 @@ {% endblock meta_content %} {% block content %}

Blog

-

Find the newest information about Phel in our Blog.

+

Find the newest information about Phel in our Blog.

{% endblock content %} diff --git a/templates/header.html b/templates/header.html index 4e57b41..2ff2930 100644 --- a/templates/header.html +++ b/templates/header.html @@ -50,12 +50,26 @@
-