diff --git a/README.md b/README.md index e2442cc..da07e5d 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Ferese combines a window manager and desktop shell with one configuration. -![Ferese Blue dark desktop with Appearance settings](docs/images/screenshots/ferese-blue-dark.webp) +![Ferese desktop with a translucent Now Playing popup showing Spotify artwork and playback controls](docs/images/screenshots/ferese-media.webp) [View more screenshots](docs/screenshots.md) diff --git a/docs/images/screenshots/everforest-desktop.webp b/docs/images/screenshots/everforest-desktop.webp deleted file mode 100644 index 301b7c4..0000000 Binary files a/docs/images/screenshots/everforest-desktop.webp and /dev/null differ diff --git a/docs/images/screenshots/ferese-appearance-1440.webp b/docs/images/screenshots/ferese-appearance-1440.webp new file mode 100644 index 0000000..df1f672 Binary files /dev/null and b/docs/images/screenshots/ferese-appearance-1440.webp differ diff --git a/docs/images/screenshots/ferese-appearance-960.webp b/docs/images/screenshots/ferese-appearance-960.webp new file mode 100644 index 0000000..7896dd0 Binary files /dev/null and b/docs/images/screenshots/ferese-appearance-960.webp differ diff --git a/docs/images/screenshots/ferese-appearance.webp b/docs/images/screenshots/ferese-appearance.webp new file mode 100644 index 0000000..e8ad911 Binary files /dev/null and b/docs/images/screenshots/ferese-appearance.webp differ diff --git a/docs/images/screenshots/ferese-blue-dark.webp b/docs/images/screenshots/ferese-blue-dark.webp deleted file mode 100644 index 190ccda..0000000 Binary files a/docs/images/screenshots/ferese-blue-dark.webp and /dev/null differ diff --git a/docs/images/screenshots/ferese-blue-light.webp b/docs/images/screenshots/ferese-blue-light.webp deleted file mode 100644 index 509ae7f..0000000 Binary files a/docs/images/screenshots/ferese-blue-light.webp and /dev/null differ diff --git a/docs/images/screenshots/ferese-blue-overview.webp b/docs/images/screenshots/ferese-blue-overview.webp deleted file mode 100644 index c8af10a..0000000 Binary files a/docs/images/screenshots/ferese-blue-overview.webp and /dev/null differ diff --git a/docs/images/screenshots/ferese-bottom-panel.webp b/docs/images/screenshots/ferese-bottom-panel.webp new file mode 100644 index 0000000..60fe797 Binary files /dev/null and b/docs/images/screenshots/ferese-bottom-panel.webp differ diff --git a/docs/images/screenshots/ferese-desktop-city-1440.webp b/docs/images/screenshots/ferese-desktop-city-1440.webp new file mode 100644 index 0000000..834da7b Binary files /dev/null and b/docs/images/screenshots/ferese-desktop-city-1440.webp differ diff --git a/docs/images/screenshots/ferese-desktop-city-960.webp b/docs/images/screenshots/ferese-desktop-city-960.webp new file mode 100644 index 0000000..5e321f7 Binary files /dev/null and b/docs/images/screenshots/ferese-desktop-city-960.webp differ diff --git a/docs/images/screenshots/ferese-desktop-city.webp b/docs/images/screenshots/ferese-desktop-city.webp new file mode 100644 index 0000000..9b7ff98 Binary files /dev/null and b/docs/images/screenshots/ferese-desktop-city.webp differ diff --git a/docs/images/screenshots/ferese-desktop-lake.webp b/docs/images/screenshots/ferese-desktop-lake.webp new file mode 100644 index 0000000..85845c2 Binary files /dev/null and b/docs/images/screenshots/ferese-desktop-lake.webp differ diff --git a/docs/images/screenshots/ferese-media-1440.webp b/docs/images/screenshots/ferese-media-1440.webp new file mode 100644 index 0000000..8445eae Binary files /dev/null and b/docs/images/screenshots/ferese-media-1440.webp differ diff --git a/docs/images/screenshots/ferese-media-960.webp b/docs/images/screenshots/ferese-media-960.webp new file mode 100644 index 0000000..26f3db0 Binary files /dev/null and b/docs/images/screenshots/ferese-media-960.webp differ diff --git a/docs/images/screenshots/ferese-media.webp b/docs/images/screenshots/ferese-media.webp new file mode 100644 index 0000000..987fc6b Binary files /dev/null and b/docs/images/screenshots/ferese-media.webp differ diff --git a/docs/images/screenshots/ferese-overview-1440.webp b/docs/images/screenshots/ferese-overview-1440.webp new file mode 100644 index 0000000..dad1bd3 Binary files /dev/null and b/docs/images/screenshots/ferese-overview-1440.webp differ diff --git a/docs/images/screenshots/ferese-overview-960.webp b/docs/images/screenshots/ferese-overview-960.webp new file mode 100644 index 0000000..c2d0165 Binary files /dev/null and b/docs/images/screenshots/ferese-overview-960.webp differ diff --git a/docs/images/screenshots/ferese-overview.webp b/docs/images/screenshots/ferese-overview.webp new file mode 100644 index 0000000..6318369 Binary files /dev/null and b/docs/images/screenshots/ferese-overview.webp differ diff --git a/docs/images/screenshots/ferese-panel-settings-1440.webp b/docs/images/screenshots/ferese-panel-settings-1440.webp new file mode 100644 index 0000000..8c0bf62 Binary files /dev/null and b/docs/images/screenshots/ferese-panel-settings-1440.webp differ diff --git a/docs/images/screenshots/ferese-panel-settings-960.webp b/docs/images/screenshots/ferese-panel-settings-960.webp new file mode 100644 index 0000000..791c6f1 Binary files /dev/null and b/docs/images/screenshots/ferese-panel-settings-960.webp differ diff --git a/docs/images/screenshots/ferese-panel-settings.webp b/docs/images/screenshots/ferese-panel-settings.webp new file mode 100644 index 0000000..9aa4e7f Binary files /dev/null and b/docs/images/screenshots/ferese-panel-settings.webp differ diff --git a/docs/images/screenshots/ferese-spotify.webp b/docs/images/screenshots/ferese-spotify.webp new file mode 100644 index 0000000..d8584df Binary files /dev/null and b/docs/images/screenshots/ferese-spotify.webp differ diff --git a/docs/images/screenshots/ferese-window-layout-1440.webp b/docs/images/screenshots/ferese-window-layout-1440.webp new file mode 100644 index 0000000..be63a3b Binary files /dev/null and b/docs/images/screenshots/ferese-window-layout-1440.webp differ diff --git a/docs/images/screenshots/ferese-window-layout-960.webp b/docs/images/screenshots/ferese-window-layout-960.webp new file mode 100644 index 0000000..abdb479 Binary files /dev/null and b/docs/images/screenshots/ferese-window-layout-960.webp differ diff --git a/docs/images/screenshots/ferese-window-layout.webp b/docs/images/screenshots/ferese-window-layout.webp new file mode 100644 index 0000000..8a88621 Binary files /dev/null and b/docs/images/screenshots/ferese-window-layout.webp differ diff --git a/docs/images/screenshots/ferese-workspace-preview-1440.webp b/docs/images/screenshots/ferese-workspace-preview-1440.webp new file mode 100644 index 0000000..43be608 Binary files /dev/null and b/docs/images/screenshots/ferese-workspace-preview-1440.webp differ diff --git a/docs/images/screenshots/ferese-workspace-preview-960.webp b/docs/images/screenshots/ferese-workspace-preview-960.webp new file mode 100644 index 0000000..ced9816 Binary files /dev/null and b/docs/images/screenshots/ferese-workspace-preview-960.webp differ diff --git a/docs/images/screenshots/ferese-workspace-preview.webp b/docs/images/screenshots/ferese-workspace-preview.webp new file mode 100644 index 0000000..b6499cd Binary files /dev/null and b/docs/images/screenshots/ferese-workspace-preview.webp differ diff --git a/docs/images/screenshots/gruvbox-desktop.webp b/docs/images/screenshots/gruvbox-desktop.webp deleted file mode 100644 index bad0891..0000000 Binary files a/docs/images/screenshots/gruvbox-desktop.webp and /dev/null differ diff --git a/docs/images/screenshots/rose-pine-dark.webp b/docs/images/screenshots/rose-pine-dark.webp deleted file mode 100644 index c1b4404..0000000 Binary files a/docs/images/screenshots/rose-pine-dark.webp and /dev/null differ diff --git a/docs/images/screenshots/rose-pine-light.webp b/docs/images/screenshots/rose-pine-light.webp deleted file mode 100644 index c908e89..0000000 Binary files a/docs/images/screenshots/rose-pine-light.webp and /dev/null differ diff --git a/docs/screenshots.md b/docs/screenshots.md index 13ce37c..e2cdd0a 100644 --- a/docs/screenshots.md +++ b/docs/screenshots.md @@ -1,45 +1,57 @@ # Screenshots -Click an image to open it at full size. +Click an image to open the original 2880 × 1800 capture. -## Ferese Blue dark +## The desktop -Appearance settings with the default dark wallpaper. +A translucent panel over a mountain lake at dusk. -[![Ferese Blue dark desktop with Appearance settings.](images/screenshots/ferese-blue-dark.webp)](images/screenshots/ferese-blue-dark.webp) - -## Ferese Blue light - -Appearance settings and the calendar with the default light wallpaper. - -[![Ferese Blue light desktop with Appearance settings and the calendar.](images/screenshots/ferese-blue-light.webp)](images/screenshots/ferese-blue-light.webp) +[![Ferese desktop with Now Playing controls above a mountain lake at dusk.](images/screenshots/ferese-desktop-lake.webp)](images/screenshots/ferese-desktop-lake.webp) ## Workspace overview -Terminal and Settings windows, with previews of three workspaces. +Open windows and previews of three workspaces. -[![Ferese Blue overview with a terminal, Settings and three workspace cards.](images/screenshots/ferese-blue-overview.webp)](images/screenshots/ferese-blue-overview.webp) +[![Ferese Overview with terminal and reading windows.](images/screenshots/ferese-overview.webp)](images/screenshots/ferese-overview.webp) -## Everforest +## Workspace previews -Appearance settings and the calendar over a custom forest wallpaper. +Thumbnails of three workspaces, with the current workspace highlighted. -[![Everforest desktop with Appearance settings and the calendar.](images/screenshots/everforest-desktop.webp)](images/screenshots/everforest-desktop.webp) +[![Workspace previews above a browser window on the city desktop.](images/screenshots/ferese-workspace-preview.webp)](images/screenshots/ferese-workspace-preview.webp) -## Gruvbox +## Windows side by side -Appearance settings and the calendar over a custom landscape wallpaper. +A terminal and reading window share the desktop. -[![Gruvbox desktop with Appearance settings and the calendar.](images/screenshots/gruvbox-desktop.webp)](images/screenshots/gruvbox-desktop.webp) +[![Terminal and reading windows arranged side by side.](images/screenshots/ferese-window-layout.webp)](images/screenshots/ferese-window-layout.webp) -## Rosé Pine dark +## Appearance -Theme previews, Control Center and a file manager. +Six themes, each with paired light and dark colours. -[![Rosé Pine dark desktop with Settings, Control Center and a file manager.](images/screenshots/rose-pine-dark.webp)](images/screenshots/rose-pine-dark.webp) +[![Ferese Appearance settings with six theme previews.](images/screenshots/ferese-appearance.webp)](images/screenshots/ferese-appearance.webp) -## Rosé Pine light +## Panel & Shell -Appearance settings and a file manager over the same custom wallpaper. +Panel composition, position and surface settings. -[![Rosé Pine light desktop with Settings and a file manager.](images/screenshots/rose-pine-light.webp)](images/screenshots/rose-pine-light.webp) +[![Panel and Shell settings with a composition preview and island surfaces.](images/screenshots/ferese-panel-settings.webp)](images/screenshots/ferese-panel-settings.webp) + +## Now playing + +Spotify artwork and playback controls in a translucent popup. + +[![Ferese Now Playing popup above the city wallpaper.](images/screenshots/ferese-media.webp)](images/screenshots/ferese-media.webp) + +## Spotify and the terminal + +Two windows over a mountain lake at dusk. + +[![Spotify and a terminal open over the mountain lake wallpaper.](images/screenshots/ferese-spotify.webp)](images/screenshots/ferese-spotify.webp) + +## Bottom panel + +The panel along the bottom edge, with a notification above it. + +[![Bottom panel and a screenshot notification over the city wallpaper.](images/screenshots/ferese-bottom-panel.webp)](images/screenshots/ferese-bottom-panel.webp) diff --git a/docs/why-ferese.md b/docs/why-ferese.md index 74f6e13..1633507 100644 --- a/docs/why-ferese.md +++ b/docs/why-ferese.md @@ -12,7 +12,7 @@ Settings and `~/.config/ferese/config.kdl` are two ways to edit the same configu The shared settings have a defined scope. Ferese can coordinate the surfaces it draws and the transitions it manages; it does not control every animation an application draws inside its own window. That distinction matters when describing a consistent desktop: consistency between Ferese’s components should not be confused with taking over application behaviour. -[![Rosé Pine dark desktop with Settings, Control Center and a file manager.](images/screenshots/rose-pine-dark.webp)](images/screenshots/rose-pine-dark.webp) +[![Ferese Appearance settings with six paired light and dark themes.](images/screenshots/ferese-appearance.webp)](images/screenshots/ferese-appearance.webp) ## Different work needs different arrangements @@ -22,7 +22,7 @@ Ferese supports both, with the layout selected per workspace. Floating windows a Even within scrolling, moving focus does not always need to move the desktop. Ferese’s minimal focus strategy leaves a fully visible column where it is and scrolls only far enough to reveal a hidden edge. Other strategies centre the focused column or arrange columns into viewport-sized pages. These choices affect how much the desktop moves while you work, so they belong in the layout’s behaviour rather than being treated as visual decoration. -[![Ferese Blue overview with a terminal, Settings and three workspace previews.](images/screenshots/ferese-blue-overview.webp)](images/screenshots/ferese-blue-overview.webp) +[![Ferese Overview with open windows and three workspace previews.](images/screenshots/ferese-overview.webp)](images/screenshots/ferese-overview.webp) ## Movement that responds to what you do next diff --git a/scripts/build-site.py b/scripts/build-site.py index 45f2213..d428f80 100644 --- a/scripts/build-site.py +++ b/scripts/build-site.py @@ -28,7 +28,7 @@ md = MarkdownIt('commonmark', {'html': False}).enable('table') if OUTPUT.exists(): shutil.rmtree(OUTPUT) OUTPUT.mkdir(parents=True) -for name in ('index.html', 'styles.css', 'app.js'): +for name in ('index.html', 'home.css', 'handbook.css', 'styles.css', 'app.js'): shutil.copy2(ROOT / 'site' / name, OUTPUT / name) (OUTPUT / 'assets').mkdir(exist_ok=True) shutil.copytree(ROOT / 'site/assets', OUTPUT / 'assets', dirs_exist_ok=True) @@ -91,25 +91,80 @@ for page_number, (slug, title, source) in enumerate(PAGES): search_index.extend(sections) body = md.renderer.render(tokens, md.options, {}) body = body.replace('', '
').replace('
', '') - navigation = ''.join(f'{escape(t)}' for s, t, _ in PAGES if s != 'animation-model') + navigation = ''.join(f'{escape(t)}' for s, t, _ in PAGES) contents = ''.join(f'{escape(heading)}' for anchor, heading in toc) pager = '' if page_number: prev = PAGES[page_number - 1] - pager += f'PREVIOUS← {escape(prev[1])}' + pager += f'Previous← {escape(prev[1])}' if page_number + 1 < len(PAGES): nxt = PAGES[page_number + 1] - pager += f'NEXT{escape(nxt[1])} →' + pager += f'Next{escape(nxt[1])} →' + mobile_contents = ( + f'
On this page
' + if contents else '' + ) doc = f''' - -{escape(title)} — Ferese handbook - - -
Ferese
-
-
Handbook{escape(title)}
{body}
View this guide on GitHub
-
-''' + + + + + + {escape(title)} — Ferese handbook + + + + + + + + + + + +
+
+ Ferese + +
Get Ferese
+
+
+
+ +
+
Handbook{escape(title)}
+ {mobile_contents} +
{body}
+ View this guide on GitHub + +
+ +
+ + +''' (OUTPUT / 'docs' / f'{slug}.html').write_text(doc) (OUTPUT / 'docs/search-index.json').write_text(json.dumps(search_index, ensure_ascii=False)) print(f'Built website and {len(PAGES)} handbook pages at {OUTPUT}') diff --git a/site/README.md b/site/README.md index 08043c3..569abfa 100644 --- a/site/README.md +++ b/site/README.md @@ -15,7 +15,9 @@ python3 -m http.server 8080 --bind 127.0.0.1 --directory build/site Open http://localhost:8080 for the homepage or http://localhost:8080/docs/ for the handbook. Rebuild and refresh the browser after changing the site sources or guides. -- `site/index.html` and `site/styles.css`: homepage and shared visual design. +- `site/index.html` and `site/home.css`: homepage and desktop screenshots. +- `site/styles.css`: shared dark appearance, typography and navigation. +- `site/handbook.css`: handbook layout, search and reference tables. - `site/content/index.md`: handbook introduction. - `docs/*.md`: guides; published pages are listed in `scripts/build-site.py`. - `scripts/build-site.py`: renders Markdown, resolves links, generates section @@ -60,4 +62,5 @@ when no custom wallpaper is set. Settings keeps both defaults available below the current wallpaper preview. Screenshots live in `docs/images/screenshots` and are shared by the README and -website. They use lossless WebP at the original 2880×1800 resolution. +website. Full captures retain their original 2880×1800 resolution, while the +homepage uses smaller WebP versions for narrower screens. diff --git a/site/app.js b/site/app.js index 811f0c7..868a7f4 100644 --- a/site/app.js +++ b/site/app.js @@ -1,4 +1,14 @@ // Progressive enhancement for the handbook. Navigation and content work without JS. +const handbookNavigation = document.querySelector('.handbook-navigation'); +if (handbookNavigation) { + const compactLayout = matchMedia('(max-width: 900px)'); + const updateNavigation = () => { handbookNavigation.open = !compactLayout.matches; }; + updateNavigation(); + compactLayout.addEventListener('change', updateNavigation); + handbookNavigation.addEventListener('click', (event) => { + if (compactLayout.matches && event.target.closest('nav a')) handbookNavigation.open = false; + }); +} const search = document.querySelector("#docs-search"); const results = document.querySelector("#search-results"); const status = document.querySelector("#search-status"); diff --git a/site/handbook.css b/site/handbook.css new file mode 100644 index 0000000..85c87dc --- /dev/null +++ b/site/handbook.css @@ -0,0 +1,128 @@ +.docs-layout { + display: grid; + grid-template-columns: 195px minmax(0, 1fr) 165px; + gap: 38px; + align-items: start; + padding-block: 48px 90px; +} +.docs-sidebar, .docs-toc { + position: sticky; + top: 110px; + max-height: calc(100dvh - 145px); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--line) transparent; +} +.docs-sidebar { z-index: 2; } +.docs-sidebar summary { list-style: none; color: var(--muted); font-size: 12px; font-weight: 550; margin: 0 0 14px; } +.docs-sidebar summary::-webkit-details-marker { display: none; } +.docs-sidebar summary .icon { display: none; } +.docs-sidebar nav { display: grid; gap: 4px; } +.docs-sidebar nav a { + display: block; + padding: 9px 12px; + color: var(--muted); + border-radius: 8px; + font-size: 13px; + line-height: 1.5; + transition: background .15s, color .15s; +} +.docs-sidebar nav a:hover { background: var(--soft); color: var(--ink); } +.docs-sidebar nav a[aria-current=page] { background: #3d7be618; color: var(--accent); font-weight: 550; } +.sidebar-links { display: grid; gap: 14px; margin-top: 25px; padding: 21px 12px 0; border-top: 1px solid var(--line); } +.sidebar-links a { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; } +.sidebar-links a:hover { color: var(--ink); } +.sidebar-links .icon { width: 12px; height: 12px; } +.docs-article { min-width: 0; } +.breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--muted); font-size: 11px; line-height: 1.6; } +.breadcrumb a:hover { color: var(--accent); } +.prose { min-width: 0; font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; } +.prose h1 { margin: 0 0 24px; color: var(--ink); font-size: 44px; font-weight: 560; line-height: 1.15; letter-spacing: -1.7px; text-wrap: balance; } +.prose > p { margin: 18px 0; color: var(--muted); } +.prose > p:first-of-type { font-size: 17px; line-height: 1.85; } +.prose h2 { margin: 48px 0 18px; padding-top: 27px; border-top: 1px solid var(--line); font-size: 27px; font-weight: 550; letter-spacing: -.8px; line-height: 1.25; text-wrap: balance; } +.prose h3 { margin: 31px 0 12px; font-size: 19px; font-weight: 550; letter-spacing: -.3px; line-height: 1.4; } +.prose h4 { margin: 25px 0 10px; font-size: 16px; font-weight: 550; } +.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } +.prose a:hover { color: var(--ink); } +.prose strong { color: var(--ink); font-weight: 550; } +.prose a:has(img) { display: block; max-width: 100%; line-height: 0; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; } +.prose img { display: block; width: 100%; height: auto; } +.prose code { font: .85em var(--mono); color: #dbe7fa; padding: 2px 5px; background: var(--raised); border-radius: 4px; overflow-wrap: anywhere; } +.prose pre { position: relative; margin: 25px 0; padding: 43px 18px 18px; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: #dbe7fa; font: 12px/1.85 var(--mono); } +.prose pre code { padding: 0; background: none; white-space: pre; overflow-wrap: normal; font: inherit; } +.code-copy { position: absolute; top: 9px; right: 10px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); color: var(--muted); font-size: 10px; } +.code-copy:hover { color: var(--ink); border-color: #ffffff25; } +.prose ul, .prose ol { padding-left: 22px; color: var(--muted); } +.prose li { margin-bottom: 9px; } +.prose li::marker { color: var(--muted); } +.prose li > p { margin-block: 8px; } +.prose blockquote { margin: 26px 0; padding: 4px 20px; border-left: 2px solid var(--accent); background: var(--soft); border-radius: 0 10px 10px 0; color: var(--muted); } +.prose blockquote p { margin: 12px 0; } +.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 35px; } +.table-scroll { max-width: 100%; margin: 25px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; } +.prose table { width: 100%; border-collapse: collapse; color: var(--muted); font-size: 12px; line-height: 1.8; } +.prose th { text-align: left; color: var(--ink); background: var(--soft); font-weight: 550; white-space: nowrap; } +.prose td, .prose th { padding: 13px 15px; border-bottom: 1px solid var(--line); min-width: 110px; vertical-align: top; } +.prose td:first-child { min-width: 145px; } +.prose tr:last-child td { border-bottom: 0; } +.docs-toc > p { margin: 0 0 15px; color: var(--muted); font-size: 11px; font-weight: 550; } +.docs-toc nav { display: grid; gap: 12px; padding-left: 14px; border-left: 1px solid var(--line); } +.docs-toc a { color: var(--muted); font-size: 11px; line-height: 1.65; } +.docs-toc a:hover { color: var(--accent); } +.mobile-contents { display: none; } +.edit-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; color: var(--muted); font-size: 11px; } +.edit-link:hover { color: var(--accent); } +.edit-link .icon { width: 12px; height: 12px; } +.docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; } +.docs-pager a { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; line-height: 1.6; transition: background .15s, border-color .15s; } +.docs-pager a:hover { background: var(--soft); border-color: #ffffff25; } +.docs-pager .pager-next { grid-column: 2; text-align: right; } +.docs-pager small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; } +.docs-search { position: relative; margin-bottom: 26px; } +.docs-search input { display: block; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); color: var(--ink); font-size: 12px; } +.docs-search input::placeholder { color: var(--muted); opacity: 1; } +.search-results { position: absolute; z-index: 10; top: calc(100% + 8px); left: 0; width: min(560px, calc(100vw - 80px)); max-height: 60dvh; overflow: auto; border: 1px solid #ffffff25; border-radius: 12px; background: var(--raised); box-shadow: 0 20px 50px #0006; } +.search-results a { display: block; padding: 16px; border-bottom: 1px solid var(--line); } +.search-results a:last-child { border-bottom: 0; } +.search-results a:hover { background: #ffffff06; } +.search-results strong { display: block; color: var(--accent); font-size: 13px; font-weight: 550; } +.search-results span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.7; } +.search-results > p { margin: 0; padding: 16px; color: var(--muted); font-size: 12px; line-height: 1.7; } +.docs-sidebar:has(.search-results:not([hidden])) { overflow: visible; } +@media (max-width: 1100px) { + .docs-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 36px; } + .docs-toc { display: none; } + .mobile-contents { display: block; margin-bottom: 25px; border-bottom: 1px solid var(--line); padding-bottom: 14px; } + .mobile-contents summary { cursor: pointer; color: var(--muted); font-size: 12px; } + .mobile-contents nav { display: grid; gap: 11px; margin-top: 15px; } + .mobile-contents a { color: var(--muted); font-size: 12px; line-height: 1.5; } + .mobile-contents a:hover { color: var(--accent); } +} +@media (max-width: 900px) { + .docs-layout { display: block; padding-block: 30px 70px; } + .docs-sidebar { position: static; max-height: none; overflow: visible; margin-bottom: 36px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); } + .docs-search { margin-bottom: 15px; } + .docs-search input { background: var(--page); } + .docs-sidebar summary { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; cursor: pointer; font-size: 13px; color: var(--ink); } + .docs-sidebar summary .icon { display: block; width: 14px; height: 14px; transform: rotate(90deg); } + .docs-sidebar details[open] summary .icon { transform: rotate(-90deg); } + .docs-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 15px; } + .docs-sidebar nav a { font-size: 12px; } + .sidebar-links { display: none; } + .search-results { width: 100%; } + .prose h1 { font-size: 40px; letter-spacing: -1.3px; } +} +@media (max-width: 700px) { + .docs-layout { padding-block: 24px 60px; } + .docs-sidebar { margin-bottom: 30px; } + .breadcrumb { flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } + .prose { font-size: 15px; line-height: 1.9; } + .prose > p:first-of-type { font-size: 16px; } + .prose h1 { font-size: 35px; letter-spacing: -1px; } + .prose h2 { margin-top: 37px; padding-top: 23px; font-size: 25px; } + .prose h3 { font-size: 18px; } + .prose pre { padding-inline: 14px; font-size: 11px; } + .docs-pager { gap: 10px; } + .docs-pager a { padding: 14px 12px; font-size: 12px; } +} diff --git a/site/home.css b/site/home.css new file mode 100644 index 0000000..2009fc0 --- /dev/null +++ b/site/home.css @@ -0,0 +1,73 @@ +.hero { text-align: center; padding-top: 64px; } +h1 { font-size: clamp(45px, 6.1vw, 80px); font-weight: 590; letter-spacing: -.055em; line-height: 1.08; margin: 0; text-wrap: balance; } +.hero-description { font-size: 18px; line-height: 1.6; max-width: 555px; margin: 22px auto 0; color: var(--muted); text-wrap: balance; } +.hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 27px; } +.primary-button { display: inline-flex; align-items: center; gap: 16px; background: var(--button); color: #fff; padding: 13px 22px; border-radius: 30px; font-size: 13px; font-weight: 500; transition: background .2s; } +.primary-button .icon { width: 17px; height: 17px; } +.down { transform: rotate(90deg); } +.desktop-stage { min-width: 0; max-width: 100%; margin-top: 47px; scroll-margin-top: 100px; } +.desktop-capture { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--soft); box-shadow: 0 28px 60px -38px #000000a0; } +.desktop-capture img { display: block; width: 100%; height: auto; aspect-ratio: 8/5; } +.layout-section { padding-block: 132px 115px; } +.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 55px; margin-bottom: 39px; } +h2 { font-size: 48px; line-height: 1.12; font-weight: 560; letter-spacing: -2px; margin: 0; text-wrap: balance; } +.section-heading > p { max-width: 405px; margin: 0; font-size: 15px; line-height: 1.85; color: var(--muted); text-wrap: pretty; } +.feature-capture { min-width: 0; max-width: 100%; margin: 0; } +.feature-capture > a, .detail-capture { display: block; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--page); line-height: 0; } +.feature-capture img, .detail-capture img { display: block; width: 100%; height: auto; } +.feature-capture figcaption { margin-top: 19px; color: var(--muted); font-size: 12px; text-align: center; } +.details-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 115px; } +.layout-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; } +.gallery-link { padding-top: 44px; text-align: center; } +.detail-feature { min-width: 0; } +.detail-capture { border-radius: 17px; } +.detail-feature h3 { margin: 25px 0 12px; font-size: 25px; font-weight: 550; letter-spacing: -.8px; } +.detail-feature p { max-width: 445px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; text-wrap: pretty; } +.appearance-section { padding-block: 93px 83px; background: var(--soft); } +.centered-heading { text-align: center; max-width: 650px; margin: 0 auto 40px; } +.centered-heading p { font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 465px; margin: 20px auto 0; text-wrap: balance; } +.start-section { text-align: center; padding-block: 115px 104px; } +.start-logo { width: 74px; height: 74px; margin: 0 auto 23px; } +.start-section h2 { font-size: 44px; } +.start-section p { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 20px auto 0; max-width: 470px; text-wrap: balance; } +@media (max-width: 1100px) { + .section-heading { gap: 40px; } + .section-heading > p { max-width: 370px; } +} +@media (max-width: 900px) { + .section-heading > p { max-width: 310px; } + .section-heading h2 { font-size: 40px; } +} +@media (max-width: 700px) { + .hero { padding-top: 52px; } + h1 { font-size: clamp(40px, 7.5vw, 54px); letter-spacing: -2px; } + .hero-description { font-size: 15px; line-height: 1.7; max-width: 400px; margin-top: 20px; } + .hero-actions { gap: 24px; margin-top: 24px; } + .primary-button { font-size: 12px; padding: 12px 19px; } + .desktop-stage { margin-top: 36px; } + .desktop-capture { border-radius: 18px; } + .layout-section { padding-block: 86px 75px; } + .section-heading { flex-direction: column; align-items: flex-start; gap: 21px; margin-bottom: 30px; } + .section-heading h2 { font-size: 36px; letter-spacing: -1.4px; } + .section-heading > p { max-width: 480px; font-size: 14px; line-height: 1.8; } + .appearance-section { padding-block: 68px 57px; } + .centered-heading { margin-bottom: 28px; } + .centered-heading h2 { font-size: 36px; letter-spacing: -1.5px; } + .centered-heading p { font-size: 14px; margin-top: 18px; max-width: 370px; } + .feature-capture > a { border-radius: 17px; } + .feature-capture figcaption { font-size: 10px; margin-top: 13px; } + .details-section { grid-template-columns: 1fr; gap: 42px; padding-top: 70px; } + .layout-details { grid-template-columns: 1fr; gap: 42px; margin-top: 36px; } + .gallery-link { padding-top: 32px; } + .detail-feature h3 { font-size: 24px; margin-top: 21px; } + .detail-feature p { font-size: 14px; max-width: 480px; } + .start-section { padding-block: 78px 70px; } + .start-logo { width: 62px; height: 62px; margin-bottom: 22px; } + .start-section h2 { font-size: 35px; letter-spacing: -1.5px; } + .start-section p { font-size: 14px; max-width: 370px; margin-top: 19px; } +} +@media (max-width: 380px) { + .hero { padding-top: 44px; } + h1 { font-size: 37px; letter-spacing: -1.7px; } + .hero-description { font-size: 14px; } +} diff --git a/site/index.html b/site/index.html index 866b453..5ea1e91 100644 --- a/site/index.html +++ b/site/index.html @@ -1,129 +1,84 @@ - - - - - - - - - - - Ferese — Wayland desktop - - - - + + + + + + + + + + + + Ferese — A little more room. + + + + + - +
-
- - - Ferese - - +
+ Ferese + +
Get Ferese
-
-
- -

- A configurable Wayland desktop. -

-

- Ferese combines a window manager and desktop shell - with one configuration. -

-
- Install Ferese - Documentation - Source code +
+
+

A little more room.

+

A configurable Wayland desktop for Linux that brings your windows and everyday controls together.

+
Get Ferese Take a look
+
+
+ The Ferese desktop with a translucent Now Playing popup showing Spotify artwork and playback controls over the blue and violet city wallpaper. +
-
- - Ferese Blue dark desktop with Appearance settings - -
- Ferese Blue dark with Appearance settings and the default wallpaper. -
-
-
-
-

Window layouts

-

- Scrolling columns, tree tiling, floating windows, and a workspace - overview. Use keyboard shortcuts or gestures to move around. -

- Configure layouts → +
+

Space for the way
you think.

Let your windows scroll into place, or share the screen in a tree layout. Open Overview to see your workspaces and find the window you need.

+
+ Ferese Overview showing three workspaces and open terminal and reading windows over the city wallpaper. +
Every workspace, in view.
+
+
+
+ A terminal and reading window arranged side by side over the city wallpaper. +

Keep your work together.

Give each window room, with your reading and tools side by side.

+
+
+ Three workspace thumbnails above a browser window, with the current workspace outlined in blue. +

Know where you left off.

Hover over your workspaces for a preview of the windows in each one.

+
+
+
+
+

One look. Everywhere.

Choose your colours and shape your panel. A shared theme brings every part of Ferese together.

+
+ Ferese Appearance settings showing six themes with paired light and dark colours. +
+
+
+
+ Panel and Shell settings with a composition preview, top and bottom positions, and island surfaces. +

Your panel, your way.

Arrange items in groups, choose their surfaces, and put your panel at the top or bottom of the screen.

-
-

Desktop tools

-

- A menu bar, Control Center, Settings, notifications, and desktop widgets. -

- Explore Ferese → -
-
-

Appearance

-

- Choose your theme, wallpaper, and colors through Settings or a KDL config, and see changes as you make them. -

- Customize Ferese → +
+ A translucent Now Playing popup with Spotify album artwork and playback controls. +

A little closer to your music.

See what's playing and pause or skip a track, right from your panel.

-
-

Continuum motion

-

Continuum carries your gesture’s momentum into workspace transitions and keeps motion continuous when you change direction. Adjust spring response and speed to your taste, or enable reduced motion.

- Explore the animation model → -
-
-

Getting started

-

- The installation guide covers - dependencies, login, updates, and recovery. You can also - preview Ferese - inside an existing Wayland session before installing. -

-

- Share a display with recording and conferencing apps through Ferese’s - native screen-sharing portal. Choose what to share and stop at any time. - See screen sharing and recording - for setup and limits. -

-

- Find shortcuts and mouse actions in the handbook. Development happens - on GitHub. -

-
+
See all desktop screenshots
+

Make yourself at home.

Try Ferese in a nested session, or install it as your next desktop.

Get Ferese Explore the source
- + - diff --git a/site/styles.css b/site/styles.css index 4536749..31480a0 100644 --- a/site/styles.css +++ b/site/styles.css @@ -1,444 +1,58 @@ @font-face { - font-family: "Figtree"; - src: url("assets/fonts/Figtree-Variable.ttf") format("truetype"); - font-style: normal; + font-family: Figtree; + src: url('assets/fonts/Figtree-Variable.ttf') format('truetype'); font-weight: 300 900; font-display: swap; } - @font-face { - font-family: "JetBrains Mono"; - src: url("assets/fonts/JetBrainsMono-Regular.ttf") format("truetype"); - font-style: normal; - font-weight: 400; + font-family: JetBrains; + src: url('assets/fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-display: swap; } - :root { - --paper: #10151c; - --white: #18212c; - --ink: #edf2f8; - --muted: #a5b1c1; - --line: #2c3745; - --blue: #91b8ff; - --soft: #1c2838; - --mono: - "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; - --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: dark; + --page: #111821; + --soft: #171e27; + --raised: #1e2530; + --ink: #f4f7fb; + --muted: #a0adbf; + --line: #ffffff12; + --accent: #8dbaff; + --button: #3d7be6; + --mono: JetBrains, ui-monospace, monospace; } -* { - box-sizing: border-box; -} -html { - scroll-behavior: smooth; - scroll-padding-top: 95px; -} +* { box-sizing: border-box; } +html { scroll-behavior: smooth; scroll-padding-top: 100px; } body { margin: 0; - background: var(--paper); + background: var(--page); color: var(--ink); - font: 17px/1.65 var(--sans); + font-family: Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } -a { - color: inherit; - text-decoration: none; -} -button, -input { - font: inherit; -} -button { - cursor: pointer; -} -a:focus-visible, -button:focus-visible, -input:focus-visible, -summary:focus-visible { - outline: 3px solid var(--blue); +a { color: inherit; text-decoration: none; } +button, input { font: inherit; } +button { color: inherit; cursor: pointer; } +button, a { -webkit-tap-highlight-color: transparent; } +img { display: block; max-width: 100%; height: auto; } +figure { min-width: 0; } +button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { + outline: 3px solid var(--accent); outline-offset: 4px; } -img { - display: block; - max-width: 100%; - height: auto; -} -h1, -h2, -h3, -p, -figure, -dl { - margin: 0; -} -.page-width, -.header-inner { - width: min(1280px, calc(100% - 96px)); - margin-inline: auto; -} -.site-header { - border-bottom: 1px solid var(--line); - background: var(--paper); -} -.header-inner { - display: flex; - align-items: center; - justify-content: space-between; - height: 88px; - gap: 30px; -} -.brand { - display: inline-flex; - align-items: center; -} -.site-header .brand { - gap: 8px; +::selection { background: #3d7be640; } +[hidden] { display: none !important; } +.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; } +.icon { + width: 20px; + height: 20px; + fill: none; + stroke: currentColor; + stroke-width: 1.7; + stroke-linecap: round; + stroke-linejoin: round; flex-shrink: 0; } -.brand-name { - font-size: 20px; - font-weight: 600; - letter-spacing: -0.02em; -} -.brand-icon { - width: 56px; - height: auto; -} -.site-header nav { - display: flex; - gap: 36px; - align-items: center; - font-size: 14px; -} -.site-header nav a { - padding: 10px 0; - position: relative; - white-space: nowrap; -} -.site-header nav a[aria-current="page"]:after { - content: ""; - position: absolute; - height: 2px; - bottom: 0; - left: 0; - right: 0; - background: var(--ink); -} -.site-header nav a:hover, -.inline-link:hover, -.rail-link:hover, -.site-footer > a:last-child:hover { - color: var(--blue); -} -.eyebrow { - font: 10px/1.7 var(--mono); - letter-spacing: 1.2px; -} -.hero { - padding-block: 58px 64px; -} -.hero-kicker { - display: flex; - justify-content: space-between; - color: var(--muted); - margin-bottom: 34px; -} -.hero-grid { - display: grid; - grid-template-columns: 1.35fr 1fr; - gap: 80px; - align-items: end; -} -h1 { - font-size: clamp(47px, 5.5vw, 78px); - font-weight: 500; - letter-spacing: -3.7px; - line-height: 1.08; -} -h1 span { - color: var(--blue); -} -.hero-description { - max-width: 410px; - padding-bottom: 5px; -} -.hero-description > p { - font-size: 15px; - line-height: 1.9; - color: var(--muted); -} -.hero-links { - display: flex; - align-items: center; - gap: 24px; - margin-top: 26px; -} -.button { - display: inline-flex; - align-items: center; - justify-content: space-between; - gap: 33px; - background: var(--ink); - color: #fff; - padding: 13px 19px; - font-size: 14px; - transition: background 0.15s; -} -.button:hover { - background: var(--blue); -} -.inline-link { - font-size: 12px; - display: inline-flex; - gap: 12px; - align-items: center; -} -.desktop-hero { - scroll-margin-top: 25px; -} -.image-label { - display: flex; - justify-content: space-between; - padding: 12px 0; - border-top: 1px solid var(--ink); - font: 9px var(--mono); - letter-spacing: 1px; -} -.desktop-hero img { - width: 100%; - border: 1px solid var(--line); -} -figcaption { - display: flex; - justify-content: space-between; - gap: 20px; - color: var(--muted); - font-size: 11px; - padding-top: 17px; -} -figcaption > span:last-child { - font: 9px/1.7 var(--mono); -} -.editorial-section { - display: grid; - grid-template-columns: 220px minmax(0, 1fr); - column-gap: 65px; - padding-block: 105px; - border-top: 1px solid var(--line); - margin-top: 76px; -} -.section-rail { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - gap: 30px; - color: var(--muted); -} -.rail-link { - font-size: 11px; -} -h2 { - font-size: clamp(32px, 3.2vw, 46px); - font-weight: 500; - line-height: 1.18; - letter-spacing: -1.7px; -} -.section-intro { - max-width: 630px; - font-size: 16px; - line-height: 1.85; - color: var(--muted); - margin-top: 24px; -} -.layout-explanations { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 40px; - margin-top: 46px; -} -.layout-explanations article { - border-top: 1px solid var(--line); - padding-top: 20px; -} -h3 { - font-size: 18px; - font-weight: 550; - letter-spacing: -0.4px; -} -.layout-explanations p, -.appearance-notes p { - font-size: 13px; - line-height: 1.9; - color: var(--muted); - margin-top: 12px; -} -.key-line { - display: flex; - align-items: center; - gap: 6px; - flex-wrap: wrap; - font: 10px var(--mono); - margin-top: 23px; -} -.key-line > span:last-child { - font: 10px var(--sans); - margin-left: 4px; - color: var(--muted); -} -kbd { - border: 1px solid var(--line); - border-bottom-width: 2px; - padding: 3px 6px; - background: var(--white); - font: 10px var(--mono); -} -.aside-note { - font-size: 11px; - color: var(--muted); - margin-top: 30px; -} -.appearance-section { - background: var(--soft); -} -.appearance-section .editorial-section { - border: 0; - margin-top: 0; - padding-block: 85px; -} -.appearance-shot { - grid-column: 1/-1; - margin-top: 46px; -} -.appearance-shot img { - width: 100%; - border: 1px solid var(--line); -} -.appearance-shot figcaption > span:first-child { - font: 10px var(--mono); -} -.appearance-notes { - grid-column: 1/-1; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 45px; - margin-top: 44px; -} -.appearance-notes h3 { - font-size: 16px; -} -.setup-section { - margin-top: 0; - border-top: 0; -} -.capabilities { - margin-top: 37px; -} -.capabilities > div { - display: grid; - grid-template-columns: 150px 1fr; - gap: 25px; - border-top: 1px solid var(--line); - padding: 21px 0; -} -.capabilities dt { - font-size: 13px; - font-weight: 600; -} -.capabilities dd { - margin: 0; - font-size: 13px; - color: var(--muted); - max-width: 480px; - line-height: 1.9; -} -.start-section { - background: #202a24; - color: #f7f8f5; - padding-block: 75px; -} -.start-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 100px; -} -.start-section .eyebrow { - color: #b9c9b5; -} -.start-section h2 { - font-size: 51px; - margin-block: 22px; -} -.start-section p { - font-size: 13px; - line-height: 1.9; - color: #c1ccc3; - max-width: 410px; - margin-bottom: 28px; -} -.button.light { - background: #edf3e8; - color: #202a24; -} -.button.light:hover { - background: #d9e6d0; -} -.start-links { - align-self: center; -} -.start-links a { - display: flex; - justify-content: space-between; - align-items: center; - gap: 20px; - padding: 25px 0; - border-top: 1px solid #4a564a; -} -.start-links a:last-child { - border-bottom: 1px solid #4a564a; -} -.start-links small { - display: block; - color: #b9c9b5; - font: 9px var(--mono); - letter-spacing: 1.2px; - margin-bottom: 8px; -} -.start-links strong { - font-size: 19px; - font-weight: 400; -} -.start-links a:hover strong { - text-decoration: underline; - text-underline-offset: 5px; -} -.site-footer { - display: flex; - align-items: center; - gap: 25px; - padding-block: 35px; -} -.site-footer p { - font-size: 12px; - color: var(--muted); -} -.site-footer > a:last-child { - margin-left: auto; - font-size: 12px; -} -.skip { - position: fixed; - left: 14px; - top: -100px; - padding: 12px 18px; - color: #10151c; - background: var(--blue); - z-index: 10; -} -.skip:focus { - top: 12px; -} .sr-only { position: absolute; width: 1px; @@ -450,732 +64,68 @@ kbd { white-space: nowrap; border: 0; } -/* The handbook shares the site's typography and navigation. */ -.docs-page .site-header { +.skip { + position: fixed; + top: -100px; + left: 24px; + z-index: 100; + padding: 12px 18px; + border: 1px solid var(--line); + border-radius: 10px; + background: var(--page); +} +.skip:focus { top: 12px; } +.page-width { width: calc(100% - 80px); max-width: 1120px; margin-inline: auto; } +.site-header { position: sticky; top: 0; - z-index: 5; -} -.docs-layout { - display: grid; - grid-template-columns: 205px minmax(0, 760px) 180px; - gap: 42px; - width: min(1360px, calc(100% - 72px)); - margin: 0 auto; - padding-block: 42px 80px; - align-items: start; -} -.docs-sidebar, -.docs-toc { - position: sticky; - top: 124px; - max-height: calc(100vh - 155px); - overflow: auto; -} -.docs-sidebar summary { - font: 10px var(--mono); - letter-spacing: 1px; - list-style: none; - margin-bottom: 18px; - color: var(--muted); -} -.docs-sidebar nav { - display: grid; - gap: 3px; -} -.docs-sidebar nav a { - font-size: 14px; - padding: 8px 12px; - border-left: 2px solid transparent; -} -.docs-sidebar nav a:hover { - background: var(--soft); -} -.docs-sidebar nav a[aria-current="page"] { - border-color: var(--blue); - color: var(--blue); - background: var(--soft); - font-weight: 600; -} -.sidebar-links { - border-top: 1px solid var(--line); - padding-top: 17px; - margin-top: 25px; - font-size: 11px; - display: grid; - gap: 12px; - color: var(--muted); -} -.docs-article { - min-width: 0; -} -.breadcrumb { - font: 10px var(--mono); - color: var(--muted); - margin-bottom: 18px; - display: flex; - gap: 10px; -} -.docs-article h1 { - font-size: 46px; - letter-spacing: -1.7px; - margin-bottom: 28px; - line-height: 1.15; -} -.prose { - font-size: 16px; - line-height: 1.9; -} -.prose > p { - margin-block: 18px; - color: #c2ccd9; -} -.prose > p:first-of-type { - font-size: 17px; - line-height: 1.85; - color: var(--muted); -} -.prose h2 { - font-size: 27px; - letter-spacing: -0.8px; - border-top: 1px solid var(--line); - padding-top: 28px; - margin-top: 48px; - margin-bottom: 17px; - scroll-margin-top: 115px; -} -.prose h3 { - font-size: 18px; - margin-block: 30px 12px; - scroll-margin-top: 115px; -} -.prose a { - color: var(--blue); - text-decoration: underline; - text-underline-offset: 3px; - overflow-wrap: anywhere; -} -.prose code { - font-family: var(--mono); - font-size: 0.88em; - background: var(--soft); - padding: 2px 5px; - overflow-wrap: anywhere; -} -.prose pre { - position: relative; - border: 1px solid var(--line); - background: #151e29; - margin-block: 25px; - padding: 40px 18px 18px; - overflow-x: auto; - line-height: 1.8; - font-size: 12px; -} -.prose pre code { - padding: 0; - background: none; - white-space: pre; - overflow-wrap: normal; - font-size: inherit; -} -.code-copy { - position: absolute; - right: 8px; - top: 7px; - background: var(--paper); - border: 1px solid var(--line); - padding: 3px 9px; - font: 10px var(--sans); - color: var(--muted); -} -.prose li { - margin-bottom: 8px; -} -.prose ul, -.prose ol { - padding-left: 23px; -} -.table-scroll { - overflow-x: auto; - margin-block: 25px; - border: 1px solid var(--line); -} -.prose table { - border-collapse: collapse; - width: 100%; - font-size: 12px; - line-height: 1.7; -} -.prose th { - text-align: left; - background: var(--soft); - font-weight: 600; - white-space: nowrap; -} -.prose td, -.prose th { - padding: 12px; - border-bottom: 1px solid var(--line); - vertical-align: top; - min-width: 110px; -} -.prose td:first-child { - min-width: 160px; -} -.prose tr:last-child td { - border-bottom: 0; -} -.prose blockquote { - border-left: 2px solid var(--blue); - padding: 2px 18px; - margin: 25px 0; - background: var(--soft); -} -.prose blockquote p { - margin-block: 12px; -} -.docs-toc > p { - font: 9px var(--mono); - letter-spacing: 1px; - color: var(--muted); - margin: 0 0 15px; -} -.docs-toc nav { - display: grid; - gap: 12px; -} -.docs-toc a { - font-size: 12px; - line-height: 1.5; - color: var(--muted); - border-left: 1px solid var(--line); - padding-left: 13px; -} -.docs-toc a:hover { - color: var(--blue); - border-color: var(--blue); -} -.docs-pager { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px; - margin-top: 50px; - padding-top: 25px; - border-top: 1px solid var(--line); -} -.docs-pager a { - font-size: 14px; -} -.docs-pager a:last-child { - text-align: right; - grid-column: 2; -} -.docs-pager small { - display: block; - color: var(--muted); - font: 9px var(--mono); - margin-bottom: 6px; -} -.edit-link { - font-size: 11px; - color: var(--muted); - display: inline-block; - margin-top: 35px; -} -.docs-search { - margin-bottom: 24px; - position: relative; -} -.docs-search input { - width: 100%; - border: 1px solid var(--line); - background: var(--white); - color: var(--ink); - padding: 10px 12px; - font-size: 12px; - border-radius: 0; -} -.search-results { - position: absolute; - top: 47px; - left: 0; - width: min(660px, calc(100vw - 48px)); - max-height: 65vh; - overflow: auto; - background: var(--white); - border: 1px solid var(--line); - box-shadow: 0 12px 35px #0006; - z-index: 8; -} -.search-results[hidden] { - display: none; -} -.search-results a { - display: block; - padding: 14px 17px; + z-index: 30; + background: color-mix(in srgb, var(--page) 92%, transparent); + backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); } -.search-results a:hover { - background: var(--soft); -} -.search-results strong { - display: block; - font-size: 13px; - color: var(--blue); -} -.search-results span { - display: block; - font-size: 11px; - color: var(--muted); - line-height: 1.7; - margin-top: 5px; -} -.search-results > p { - padding: 15px; - font-size: 12px; -} -.search-summary { - color: var(--muted); - font-size: 11px; - margin-top: 6px; -} -.docs-sidebar:has(.search-results:not([hidden])) { - overflow: visible; -} +.header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 26px; } +.brand { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 630; letter-spacing: -.7px; } +.brand img { width: 34px; height: 34px; } +.site-header nav { display: flex; align-items: center; gap: 28px; margin-left: auto; margin-right: 28px; } +.site-header nav a { font-size: 12px; color: var(--muted); transition: color .2s; } +.site-header nav a:hover, .site-header nav a[aria-current=page] { color: var(--ink); } +.header-actions { display: flex; align-items: center; gap: 15px; } +.small-button { padding: 8px 15px; background: var(--button); color: #fff; border-radius: 20px; font-size: 11px; white-space: nowrap; } +.small-button:hover, .primary-button:hover { background: #326cce; } +.inline-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--accent); } +.inline-link:hover { text-decoration: underline; text-underline-offset: 4px; } +.inline-link .icon { width: 15px; height: 15px; } +.site-footer { display: flex; align-items: center; gap: 25px; border-top: 1px solid var(--line); padding-block: 26px; margin-bottom: 10px; } +.site-footer .brand { font-size: 18px; } +.site-footer .brand img { width: 28px; height: 28px; } +.site-footer > span { font-size: 11px; color: var(--muted); } +.site-footer nav { display: flex; gap: 24px; margin-left: auto; } +.site-footer nav a { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); } +.site-footer nav .icon { width: 12px; height: 12px; } +.site-footer nav a:hover { color: var(--ink); } @media (max-width: 1100px) { - .hero-grid { - gap: 40px; - } - .editorial-section { - grid-template-columns: 175px minmax(0, 1fr); - gap: 35px; - } - .docs-layout { - grid-template-columns: 185px minmax(0, 1fr); - gap: 35px; - } - .docs-toc { - display: none; - } - .start-grid { - gap: 60px; - } + .page-width { width: calc(100% - 64px); } } -@media (max-width: 760px) { - .page-width, - .header-inner { - width: calc(100% - 40px); - } - .header-inner { - height: 74px; - gap: 12px; - } - .brand-icon { - width: 48px; - height: auto; - } - .site-header nav { - gap: 12px; - font-size: 12px; - } - .site-header nav a:first-child { - display: none; - } - .hero { - padding-block: 35px 40px; - } - .hero-platform { - display: none; - } - .hero-kicker { - margin-bottom: 25px; - } - .hero-grid { - grid-template-columns: 1fr; - gap: 25px; - } - h1 { - font-size: 54px; - letter-spacing: -2.8px; - } - .hero-description { - max-width: 480px; - } - .hero-description > p { - font-size: 14px; - } - .hero-links { - gap: 22px; - margin-top: 22px; - } - .hero-links .button { - font-size: 12px; - } - .inline-link { - font-size: 11px; - } - .image-label { - font-size: 8px; - } - .desktop-hero figcaption { - font-size: 10px; - display: block; - } - .desktop-hero figcaption > span:last-child { - display: block; - margin-top: 5px; - font-size: 8px; - } - .editorial-section { - grid-template-columns: 1fr; - gap: 25px; - margin-top: 40px; - padding-block: 45px; - } - .section-rail { - flex-direction: row; - align-items: center; - gap: 15px; - } - .eyebrow { - font-size: 9px; - letter-spacing: 0.7px; - } - .rail-link { - font-size: 10px; - } - h2 { - font-size: 33px; - letter-spacing: -1px; - } - .section-intro { - font-size: 14px; - margin-top: 20px; - } - .layout-explanations { - gap: 25px; - margin-top: 32px; - grid-template-columns: 1fr; - } - .layout-explanations h3 { - font-size: 18px; - } - .key-line { - margin-top: 16px; - } - .aside-note { - margin-top: 24px; - } - .appearance-section .editorial-section { - padding-block: 45px; - } - .appearance-shot { - margin-top: 6px; - } - .appearance-shot figcaption { - font-size: 9px; - gap: 15px; - } - .appearance-shot figcaption > span:first-child { - font-size: 8px; - white-space: nowrap; - } - .appearance-shot figcaption > span:last-child { - font: 9px var(--sans); - } - .appearance-notes { - grid-template-columns: 1fr; - gap: 24px; - margin-top: 3px; - } - .appearance-notes p { - margin-top: 6px; - } - .setup-section { - margin-top: 0; - } - .capabilities { - margin-top: 25px; - } - .capabilities > div { - grid-template-columns: 1fr; - gap: 7px; - padding-block: 17px; - } - .start-section { - padding-block: 43px; - } - .start-grid { - grid-template-columns: 1fr; - gap: 30px; - } - .start-section h2 { - font-size: 43px; - } - .start-section p { - font-size: 13px; - } - .start-links strong { - font-size: 17px; - } - .site-footer { - gap: 12px; - flex-wrap: wrap; - padding-block: 26px; - } - .site-footer p { - font-size: 12px; - } - .site-footer > a:last-child { - font-size: 12px; - } - .docs-layout { - width: calc(100% - 36px); - grid-template-columns: 1fr; - gap: 30px; - padding-top: 24px; - } - .docs-sidebar { - position: relative; - top: auto; - max-height: none; - overflow: visible; - } - .docs-sidebar details { - border-bottom: 1px solid var(--line); - padding-bottom: 16px; - } - .docs-sidebar summary { - cursor: pointer; - list-style: revert; - margin: 0 0 13px; - } - .docs-sidebar nav { - grid-template-columns: 1fr 1fr; - gap: 0; - } - .docs-sidebar nav a { - font-size: 13px; - padding: 6px 10px; - } - .sidebar-links { - display: none; - } - .docs-search { - margin-bottom: 18px; - } - .search-results { - width: 100%; - } - .docs-article h1 { - font-size: 37px; - letter-spacing: -1px; - } - .prose { - font-size: 16px; - } - .prose h2 { - font-size: 25px; - } - .prose pre { - font-size: 11px; - } - .docs-page .site-header { - position: relative; - } - .prose h2, - .prose h3 { - scroll-margin-top: 20px; - } -} -@media (max-width: 480px) { - .header-inner { - height: auto; - min-height: 74px; - flex-wrap: wrap; - gap: 4px; - padding-block: 10px; - } - .site-header nav { - width: 100%; - justify-content: space-between; - } +@media (max-width: 700px) { + html { scroll-padding-top: 88px; } + .page-width { width: calc(100% - 40px); } + .header-inner { height: 66px; gap: 16px; } + .brand { font-size: 21px; gap: 7px; } + .brand img { width: 30px; height: 30px; } + .site-header nav { display: none; } + .small-button { padding: 9px 14px; } + .inline-link { font-size: 12px; } + .site-footer { flex-wrap: wrap; gap: 17px; padding-block: 23px; margin-bottom: 5px; } + .site-footer > span { font-size: 10px; } + .site-footer nav { width: 100%; margin-left: 0; gap: 22px; } + .site-footer nav a { font-size: 11px; } } @media (max-width: 380px) { - h1 { - font-size: 47px; - } - .site-header nav { - gap: 12px; - } - .hero-links { - gap: 14px; - } - .button { - gap: 20px; - } - .site-footer > a:last-child { - margin-left: 0; - } - .rail-link { - max-width: 130px; - text-align: right; - } + .page-width { width: calc(100% - 32px); } + .site-footer > span { font-size: 9px; } } @media (prefers-reduced-motion: reduce) { - html { - scroll-behavior: auto; - } - *, - *::before, - *::after { - animation: none !important; - transition: none !important; - } -} - -/* Compact product homepage. */ -.simple-home .page-width { - max-width: 1000px; -} -.product-intro { - text-align: center; - padding-block: 24px 34px; -} -.intro-icon { - width: 128px; - height: auto; - margin: 0 auto; -} -.product-tagline { - font-size: 20px; - font-weight: 400; - letter-spacing: normal; - line-height: 1.5; -} -.product-description { - color: var(--muted); - max-width: 600px; - margin: 13px auto 0; - font-size: 17px; -} -.product-links { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 14px; - margin-top: 24px; -} -.product-links .button { - border-radius: 5px; - background: #285ec2; - border: 1px solid #285ec2; - padding: 11px 20px; -} -.product-links .button:hover { - background: #3471db; -} -.product-links .secondary { - background: transparent; - color: var(--blue); -} -.product-links .secondary:hover { - background: var(--soft); -} -.source-link { - font-size: 14px; - color: var(--muted); - margin-left: 5px; -} -.product-screenshot img { - width: 100%; - border: 1px solid var(--line); - border-radius: 8px; -} -.product-screenshot figcaption { - justify-content: center; - padding-top: 10px; - font-size: 12px; -} -.product-features { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 35px; - padding-block: 40px; -} -.product-features h2, -.product-motion h2, -.product-getting-started h2 { - font-size: 22px; - font-weight: 600; - letter-spacing: -0.4px; - line-height: 1.4; -} -.product-features p, -.product-motion p, -.product-getting-started p { - font-size: 16px; - color: var(--muted); - margin-top: 12px; - line-height: 1.8; -} -.product-features a, -.product-motion a { - display: inline-block; - font-size: 14px; - color: var(--blue); - margin-top: 12px; -} -.product-motion, -.product-getting-started { - border-top: 1px solid var(--line); - padding-block: 28px 42px; -} -.product-getting-started a { - color: var(--blue); - text-decoration: underline; - text-underline-offset: 3px; -} -.simple-home + .site-footer { - max-width: 1000px; - border-top: 1px solid var(--line); -} -@media (max-width: 760px) { - .product-intro { - padding-block: 35px 27px; - } - .product-tagline { - font-size: 19px; - } - .product-description { - font-size: 16px; - } - .product-links { - gap: 10px; - } - .product-links .button { - padding: 10px 15px; - font-size: 13px; - } - .source-link { - font-size: 13px; - } - .product-features { - grid-template-columns: 1fr; - gap: 25px; - padding-block: 30px; - } - .product-features p { - margin-top: 7px; - } -} - -/* SVG external-link arrows avoid platform emoji presentation. */ -.link-arrow { - display: inline-block; - width: 1em; - height: 1em; - vertical-align: -0.125em; + html { scroll-behavior: auto; } + *, *::before, *::after { animation: none !important; transition: none !important; } }