Refine the website and handbook with real desktop screenshots
This commit is contained in:
Samuel Onoja committed
1 parent
9c3893b36d
commit
0a48c07e86
41 files changed
+480
-1294
No files matched your search
@@ -13,7 +13,7 @@
|
||||
|
||||
Ferese combines a window manager and desktop shell with one configuration.
|
||||
|
||||
|
||||
|
||||
|
||||
[View more screenshots](docs/screenshots.md)
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 461 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 742 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 810 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 784 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 790 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 771 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 733 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 516 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 698 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 815 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
+36
-24
@@ -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.
|
||||
|
||||
[](images/screenshots/ferese-blue-dark.webp)
|
||||
|
||||
## Ferese Blue light
|
||||
|
||||
Appearance settings and the calendar with the default light wallpaper.
|
||||
|
||||
[](images/screenshots/ferese-blue-light.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.
|
||||
|
||||
[](images/screenshots/ferese-blue-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.
|
||||
|
||||
[](images/screenshots/everforest-desktop.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.
|
||||
|
||||
[](images/screenshots/gruvbox-desktop.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.
|
||||
|
||||
[](images/screenshots/rose-pine-dark.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.
|
||||
|
||||
[](images/screenshots/rose-pine-light.webp)
|
||||
[](images/screenshots/ferese-panel-settings.webp)
|
||||
|
||||
## Now playing
|
||||
|
||||
Spotify artwork and playback controls in a translucent popup.
|
||||
|
||||
[](images/screenshots/ferese-media.webp)
|
||||
|
||||
## Spotify and the terminal
|
||||
|
||||
Two windows over a mountain lake at dusk.
|
||||
|
||||
[](images/screenshots/ferese-spotify.webp)
|
||||
|
||||
## Bottom panel
|
||||
|
||||
The panel along the bottom edge, with a notification above it.
|
||||
|
||||
[](images/screenshots/ferese-bottom-panel.webp)
|
||||
+2
-2
@@ -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.
|
||||
|
||||
[](images/screenshots/rose-pine-dark.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.
|
||||
|
||||
[](images/screenshots/ferese-blue-overview.webp)
|
||||
[](images/screenshots/ferese-overview.webp)
|
||||
|
||||
## Movement that responds to what you do next
|
||||
|
||||
|
||||
+68
-13
@@ -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('<table>', '<div class="table-scroll" tabindex="0" role="region" aria-label="Reference table"><table>').replace('</table>', '</table></div>')
|
||||
navigation = ''.join(f'<a href="{s}.html"' + (' aria-current="page"' if s == slug else '') + f'>{escape(t)}</a>' for s, t, _ in PAGES if s != 'animation-model')
|
||||
navigation = ''.join(f'<a href="{s}.html"' + (' aria-current="page"' if s == slug else '') + f'>{escape(t)}</a>' for s, t, _ in PAGES)
|
||||
contents = ''.join(f'<a href="#{anchor}">{escape(heading)}</a>' for anchor, heading in toc)
|
||||
pager = ''
|
||||
if page_number:
|
||||
prev = PAGES[page_number - 1]
|
||||
pager += f'<a href="{prev[0]}.html"><small>PREVIOUS</small>← {escape(prev[1])}</a>'
|
||||
pager += f'<a class="pager-previous" href="{prev[0]}.html"><small>Previous</small>← {escape(prev[1])}</a>'
|
||||
if page_number + 1 < len(PAGES):
|
||||
nxt = PAGES[page_number + 1]
|
||||
pager += f'<a href="{nxt[0]}.html"><small>NEXT</small>{escape(nxt[1])} →</a>'
|
||||
pager += f'<a class="pager-next" href="{nxt[0]}.html"><small>Next</small>{escape(nxt[1])} →</a>'
|
||||
mobile_contents = (
|
||||
f'<details class="mobile-contents"><summary>On this page</summary><nav aria-label="Page sections">{contents}</nav></details>'
|
||||
if contents else ''
|
||||
)
|
||||
doc = f'''<!doctype html>
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#10151c"><title>{escape(title)} — Ferese handbook</title><meta name="description" content="{escape(title)} in the Ferese handbook: setup, configuration, and guides for your Wayland desktop.">
|
||||
<link rel="icon" href="../assets/branding/ferese.svg" type="image/svg+xml"><link rel="icon" href="../assets/favicon.ico" sizes="16x16 32x32 48x48"><link rel="icon" href="../assets/favicon-32.png" type="image/png" sizes="32x32"><link rel="stylesheet" href="../styles.css"><script src="../app.js" defer></script></head>
|
||||
<body class="docs-page"><a class="skip" href="#main">Skip to content</a>
|
||||
<header class="site-header"><div class="header-inner"><a class="brand" href="../" aria-label="Ferese home"><img class="brand-icon" src="../assets/branding/ferese.svg" width="950" height="950" alt=""><span class="brand-name">Ferese</span></a><nav aria-label="Main navigation"><a href="../">Overview</a><a href="./" aria-current="page">Documentation</a><a href="{REPO}">GitHub <svg class="link-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M7 17 17 7M7 7h10v10"/></svg></a></nav></div></header>
|
||||
<div class="docs-layout"><aside class="docs-sidebar"><div class="docs-search" hidden><label class="sr-only" for="docs-search">Search the handbook</label><input id="docs-search" type="search" placeholder="Search the handbook…" autocomplete="off" aria-controls="search-results"><div class="search-results" id="search-results" hidden></div><p class="sr-only" id="search-status" role="status"></p></div><details open><summary>FERESE HANDBOOK</summary><nav aria-label="Documentation">{navigation}</nav></details><div class="sidebar-links"><a href="{REPO}/issues">Report an issue <svg class="link-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M7 17 17 7M7 7h10v10"/></svg></a><a href="../">Back to Ferese ←</a></div></aside>
|
||||
<main class="docs-article" id="main"><div class="breadcrumb"><a href="./">Handbook</a><span aria-hidden="true">/</span><span>{escape(title)}</span></div><article class="prose">{body}</article><a class="edit-link" href="{REPO}/blob/main/{source.relative_to(ROOT)}">View this guide on GitHub <svg class="link-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M7 17 17 7M7 7h10v10"/></svg></a><nav class="docs-pager" aria-label="Previous and next guide">{pager}</nav></main>
|
||||
<aside class="docs-toc" aria-label="On this page">{'<p>ON THIS PAGE</p><nav>' + contents + '</nav>' if contents else ''}</aside></div>
|
||||
<footer class="site-footer page-width"><a class="brand" href="../" aria-label="Ferese home"><img class="brand-icon" src="../assets/branding/ferese.svg" width="950" height="950" alt=""></a><p>A Wayland desktop with scrolling layouts.</p><a href="{REPO}">Built in the open <svg class="link-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M7 17 17 7M7 7h10v10"/></svg></a></footer></body></html>'''
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111821">
|
||||
<title>{escape(title)} — Ferese handbook</title>
|
||||
<meta name="description" content="{escape(title)} in the Ferese handbook: setup, configuration, and guides for your Wayland desktop.">
|
||||
<link rel="icon" href="../assets/branding/ferese.svg" type="image/svg+xml">
|
||||
<link rel="icon" href="../assets/favicon.ico" sizes="16x16 32x32 48x48">
|
||||
<link rel="icon" href="../assets/favicon-32.png" type="image/png" sizes="32x32">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<link rel="stylesheet" href="../handbook.css">
|
||||
<script src="../app.js" defer></script>
|
||||
</head>
|
||||
<body class="docs-page">
|
||||
<svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
|
||||
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
|
||||
<symbol id="i-external" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"/></symbol>
|
||||
</defs></svg>
|
||||
<a class="skip" href="#main">Skip to content</a>
|
||||
<header class="site-header">
|
||||
<div class="header-inner page-width">
|
||||
<a class="brand" href="../" aria-label="Ferese home"><img src="../assets/branding/ferese.svg" width="34" height="34" alt=""><span>Ferese</span></a>
|
||||
<nav aria-label="Main navigation"><a href="../#make-room">The desktop</a><a href="../#appearance">Appearance</a><a href="./" aria-current="page">Handbook</a></nav>
|
||||
<div class="header-actions"><a class="small-button" href="installation.html">Get Ferese</a></div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="docs-layout page-width">
|
||||
<aside class="docs-sidebar" aria-label="Handbook navigation">
|
||||
<div class="docs-search" hidden>
|
||||
<label class="sr-only" for="docs-search">Search the handbook</label>
|
||||
<input id="docs-search" type="search" placeholder="Search the handbook…" autocomplete="off" aria-controls="search-results">
|
||||
<div class="search-results" id="search-results" hidden></div>
|
||||
<p class="sr-only" id="search-status" role="status"></p>
|
||||
</div>
|
||||
<details class="handbook-navigation" open>
|
||||
<summary>Browse the handbook <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></summary>
|
||||
<nav aria-label="Documentation">{navigation}</nav>
|
||||
</details>
|
||||
<div class="sidebar-links">
|
||||
<a href="{REPO}/issues">Report an issue <svg class="icon" aria-hidden="true"><use href="#i-external"/></svg></a>
|
||||
<a href="../">Back to Ferese</a>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="docs-article" id="main">
|
||||
<div class="breadcrumb"><a href="./">Handbook</a><span aria-hidden="true">/</span><span>{escape(title)}</span></div>
|
||||
{mobile_contents}
|
||||
<article class="prose">{body}</article>
|
||||
<a class="edit-link" href="{REPO}/blob/main/{source.relative_to(ROOT)}">View this guide on GitHub <svg class="icon" aria-hidden="true"><use href="#i-external"/></svg></a>
|
||||
<nav class="docs-pager" aria-label="Previous and next guide">{pager}</nav>
|
||||
</main>
|
||||
<aside class="docs-toc" aria-label="On this page">{'<p>On this page</p><nav>' + contents + '</nav>' if contents else ''}</aside>
|
||||
</div>
|
||||
<footer class="site-footer page-width">
|
||||
<a class="brand" href="../" aria-label="Ferese home"><img src="../assets/branding/ferese.svg" width="28" height="28" alt=""><span>Ferese</span></a>
|
||||
<span>Built in the open for Linux.</span>
|
||||
<nav aria-label="Footer navigation"><a href="./">Handbook</a><a href="{REPO}">GitHub <svg class="icon" aria-hidden="true"><use href="#i-external"/></svg></a></nav>
|
||||
</footer>
|
||||
</body>
|
||||
</html>'''
|
||||
(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}')
|
||||
+5
-2
@@ -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.
|
||||
+10
@@ -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");
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
+67
-112
@@ -1,129 +1,84 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#10151c" />
|
||||
<meta name="description" content="Ferese is a configurable Wayland desktop." />
|
||||
<meta property="og:title" content="Ferese — Wayland desktop" />
|
||||
<meta property="og:description" content="A configurable Wayland desktop." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://ferese-wm.github.io/ferese/assets/screenshots/ferese-blue-dark.webp" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<title>Ferese — Wayland desktop</title>
|
||||
<link rel="icon" href="assets/branding/ferese.svg" type="image/svg+xml" />
|
||||
<link rel="icon" href="assets/favicon.ico" sizes="16x16 32x32 48x48" />
|
||||
<link rel="icon" href="assets/favicon-32.png" type="image/png" sizes="32x32" />
|
||||
<link rel="stylesheet" href="styles.css?v=figtree" />
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111821">
|
||||
<meta name="description" content="Ferese is a configurable Wayland desktop for Linux. Explore its window layouts, shared themes, and editable panel.">
|
||||
<meta property="og:title" content="Ferese — A little more room.">
|
||||
<meta property="og:description" content="A configurable Wayland desktop for Linux that brings your windows and everyday controls together.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://ferese-wm.github.io/ferese/assets/screenshots/ferese-media.webp">
|
||||
<meta property="og:image:width" content="2880">
|
||||
<meta property="og:image:height" content="1800">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<title>Ferese — A little more room.</title>
|
||||
<link rel="icon" href="assets/branding/ferese.svg" type="image/svg+xml">
|
||||
<link rel="icon" href="assets/favicon.ico" sizes="16x16 32x32 48x48">
|
||||
<link rel="icon" href="assets/favicon-32.png" type="image/png" sizes="32x32">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="home.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
|
||||
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
|
||||
<symbol id="i-external" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"/></symbol>
|
||||
</defs></svg>
|
||||
<a class="skip" href="#main">Skip to content</a>
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<a class="brand" href="./" aria-label="Ferese home">
|
||||
<img class="brand-icon" src="assets/branding/ferese.svg" width="950" height="950" alt="" />
|
||||
<span class="brand-name">Ferese</span>
|
||||
</a>
|
||||
<nav aria-label="Main navigation">
|
||||
<a href="./" aria-current="page">Overview</a><a href="docs/screenshots.html">Screenshots</a><a
|
||||
href="docs/">Documentation</a><a href="https://github.com/ferese-wm/ferese">GitHub <svg class="link-arrow"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
|
||||
stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||||
<path d="M7 17 17 7M7 7h10v10" />
|
||||
</svg></a>
|
||||
</nav>
|
||||
<div class="header-inner page-width">
|
||||
<a class="brand" href="#main" aria-label="Ferese home"><img src="assets/branding/ferese.svg" width="34" height="34" alt=""><span>Ferese</span></a>
|
||||
<nav aria-label="Main navigation"><a href="#make-room">The desktop</a><a href="#appearance">Appearance</a><a href="docs/">Handbook</a></nav>
|
||||
<div class="header-actions"><a class="small-button" href="docs/installation.html">Get Ferese</a></div>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main" class="simple-home">
|
||||
<section class="product-intro page-width">
|
||||
<img class="intro-icon" src="assets/branding/ferese.svg" width="950" height="950" alt="" />
|
||||
<h1 class="product-tagline">
|
||||
A configurable Wayland desktop.
|
||||
</h1>
|
||||
<p class="product-description">
|
||||
Ferese combines a window manager and desktop shell
|
||||
with one configuration.
|
||||
</p>
|
||||
<div class="product-links">
|
||||
<a class="button" href="docs/installation.html">Install Ferese</a>
|
||||
<a class="button secondary" href="docs/">Documentation</a>
|
||||
<a class="source-link" href="https://github.com/ferese-wm/ferese">Source code <svg class="link-arrow"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
|
||||
stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||||
<path d="M7 17 17 7M7 7h10v10" />
|
||||
</svg></a>
|
||||
<main id="main">
|
||||
<section class="hero page-width" aria-labelledby="hero-title">
|
||||
<h1 id="hero-title">A little more room.</h1>
|
||||
<p class="hero-description">A configurable Wayland desktop for Linux that brings your windows and everyday controls together.</p>
|
||||
<div class="hero-actions"><a class="primary-button" href="docs/installation.html">Get Ferese <svg class="icon"><use href="#i-arrow"/></svg></a><a class="inline-link" href="#desktop-preview">Take a look <svg class="icon down"><use href="#i-arrow"/></svg></a></div>
|
||||
<div class="desktop-stage" id="desktop-preview">
|
||||
<div class="desktop-capture" id="desktop-capture">
|
||||
<img id="desktop-capture-image" src="assets/screenshots/ferese-media.webp" srcset="assets/screenshots/ferese-media-960.webp 960w, assets/screenshots/ferese-media-1440.webp 1440w, assets/screenshots/ferese-media.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc(100vw - 80px), 1120px" width="2880" height="1800" alt="The Ferese desktop with a translucent Now Playing popup showing Spotify artwork and playback controls over the blue and violet city wallpaper." fetchpriority="high">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<figure class="product-screenshot page-width">
|
||||
<a href="assets/screenshots/ferese-blue-dark.webp" aria-label="View the full-resolution Ferese desktop screenshot">
|
||||
<img src="assets/screenshots/ferese-blue-dark.webp" width="2880" height="1800"
|
||||
alt="Ferese Blue dark desktop with Appearance settings" fetchpriority="high" />
|
||||
</a>
|
||||
<figcaption>
|
||||
Ferese Blue dark with Appearance settings and the default wallpaper.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<section class="product-features page-width" aria-label="Features">
|
||||
<article>
|
||||
<h2>Window layouts</h2>
|
||||
<p>
|
||||
Scrolling columns, tree tiling, floating windows, and a workspace
|
||||
overview. Use keyboard shortcuts or gestures to move around.
|
||||
</p>
|
||||
<a href="docs/configuration.html#layout">Configure layouts →</a>
|
||||
<section class="layout-section page-width" id="make-room" aria-labelledby="layout-title">
|
||||
<div class="section-heading"><h2 id="layout-title">Space for the way<br>you think.</h2><p>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.</p></div>
|
||||
<figure class="feature-capture overview-capture">
|
||||
<a href="assets/screenshots/ferese-overview.webp" target="_blank" rel="noopener" aria-label="View the Overview screenshot at full resolution"><img src="assets/screenshots/ferese-overview-1440.webp" srcset="assets/screenshots/ferese-overview-960.webp 960w, assets/screenshots/ferese-overview-1440.webp 1440w, assets/screenshots/ferese-overview.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc(100vw - 80px), 1120px" width="2880" height="1800" alt="Ferese Overview showing three workspaces and open terminal and reading windows over the city wallpaper." loading="lazy" decoding="async"></a>
|
||||
<figcaption>Every workspace, in view.</figcaption>
|
||||
</figure>
|
||||
<div class="layout-details">
|
||||
<article class="detail-feature">
|
||||
<a class="detail-capture" href="assets/screenshots/ferese-window-layout.webp" target="_blank" rel="noopener" aria-label="View the window layout screenshot at full resolution"><img src="assets/screenshots/ferese-window-layout-960.webp" srcset="assets/screenshots/ferese-window-layout-960.webp 960w, assets/screenshots/ferese-window-layout-1440.webp 1440w, assets/screenshots/ferese-window-layout.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc((100vw - 112px) / 2), 544px" width="2880" height="1800" alt="A terminal and reading window arranged side by side over the city wallpaper." loading="lazy" decoding="async"></a>
|
||||
<h3>Keep your work together.</h3><p>Give each window room, with your reading and tools side by side.</p>
|
||||
</article>
|
||||
<article class="detail-feature">
|
||||
<a class="detail-capture" href="assets/screenshots/ferese-workspace-preview.webp" target="_blank" rel="noopener" aria-label="View the workspace preview screenshot at full resolution"><img src="assets/screenshots/ferese-workspace-preview-960.webp" srcset="assets/screenshots/ferese-workspace-preview-960.webp 960w, assets/screenshots/ferese-workspace-preview-1440.webp 1440w, assets/screenshots/ferese-workspace-preview.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc((100vw - 112px) / 2), 544px" width="2880" height="1800" alt="Three workspace thumbnails above a browser window, with the current workspace outlined in blue." loading="lazy" decoding="async"></a>
|
||||
<h3>Know where you left off.</h3><p>Hover over your workspaces for a preview of the windows in each one.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section class="appearance-section" id="appearance" aria-labelledby="appearance-title"><div class="page-width">
|
||||
<div class="centered-heading"><h2 id="appearance-title">One look. Everywhere.</h2><p>Choose your colours and shape your panel. A shared theme brings every part of Ferese together.</p></div>
|
||||
<figure class="feature-capture appearance-capture">
|
||||
<a href="assets/screenshots/ferese-appearance.webp" target="_blank" rel="noopener" aria-label="View the Appearance screenshot at full resolution"><img src="assets/screenshots/ferese-appearance-1440.webp" srcset="assets/screenshots/ferese-appearance-960.webp 960w, assets/screenshots/ferese-appearance-1440.webp 1440w, assets/screenshots/ferese-appearance.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc(100vw - 80px), 1120px" width="2880" height="1800" alt="Ferese Appearance settings showing six themes with paired light and dark colours." loading="lazy" decoding="async"></a>
|
||||
</figure>
|
||||
</div></section>
|
||||
<section class="details-section page-width" aria-label="Panel and media features">
|
||||
<article class="detail-feature">
|
||||
<a class="detail-capture" href="assets/screenshots/ferese-panel-settings.webp" target="_blank" rel="noopener" aria-label="View the Panel and Shell screenshot at full resolution"><img src="assets/screenshots/ferese-panel-settings-960.webp" srcset="assets/screenshots/ferese-panel-settings-960.webp 960w, assets/screenshots/ferese-panel-settings-1440.webp 1440w, assets/screenshots/ferese-panel-settings.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc((100vw - 104px) / 2), 548px" width="2880" height="1800" alt="Panel and Shell settings with a composition preview, top and bottom positions, and island surfaces." loading="lazy" decoding="async"></a>
|
||||
<h3>Your panel, your way.</h3><p>Arrange items in groups, choose their surfaces, and put your panel at the top or bottom of the screen.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Desktop tools</h2>
|
||||
<p>
|
||||
A menu bar, Control Center, Settings, notifications, and desktop widgets.
|
||||
</p>
|
||||
<a href="docs/why-ferese.html">Explore Ferese →</a>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Appearance</h2>
|
||||
<p>
|
||||
Choose your theme, wallpaper, and colors through Settings or a KDL config, and see changes as you make them.
|
||||
</p>
|
||||
<a href="docs/configuration.html#appearance">Customize Ferese →</a>
|
||||
<article class="detail-feature">
|
||||
<a class="detail-capture" href="assets/screenshots/ferese-media.webp" target="_blank" rel="noopener" aria-label="View the music popup screenshot at full resolution"><img src="assets/screenshots/ferese-media-960.webp" srcset="assets/screenshots/ferese-media-960.webp 960w, assets/screenshots/ferese-media-1440.webp 1440w, assets/screenshots/ferese-media.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc((100vw - 104px) / 2), 548px" width="2880" height="1800" alt="A translucent Now Playing popup with Spotify album artwork and playback controls." loading="lazy" decoding="async"></a>
|
||||
<h3>A little closer to your music.</h3><p>See what's playing and pause or skip a track, right from your panel.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="product-motion page-width" aria-labelledby="continuum-heading">
|
||||
<h2 id="continuum-heading">Continuum motion</h2>
|
||||
<p>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.</p>
|
||||
<a href="docs/animation-model.html">Explore the animation model →</a>
|
||||
</section>
|
||||
<section class="product-getting-started page-width">
|
||||
<h2>Getting started</h2>
|
||||
<p>
|
||||
The <a href="docs/installation.html">installation guide</a> covers
|
||||
dependencies, login, updates, and recovery. You can also
|
||||
<a href="docs/installation.html#preview-and-logs">preview Ferese</a>
|
||||
inside an existing Wayland session before installing.
|
||||
</p>
|
||||
<p>
|
||||
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 <a href="docs/screen-sharing.html">screen sharing and recording</a>
|
||||
for setup and limits.
|
||||
</p>
|
||||
<p>
|
||||
Find <a href="docs/shortcuts.html">shortcuts and mouse actions</a> in the handbook. Development happens
|
||||
<a href="https://github.com/ferese-wm/ferese">on GitHub</a>.
|
||||
</p>
|
||||
</section>
|
||||
<div class="gallery-link page-width"><a class="inline-link" href="docs/screenshots.html">See all desktop screenshots <svg class="icon"><use href="#i-arrow"/></svg></a></div>
|
||||
<section class="start-section page-width" aria-labelledby="start-title"><img class="start-logo" src="assets/branding/ferese.svg" width="74" height="74" alt=""><h2 id="start-title">Make yourself at home.</h2><p>Try Ferese in a nested session, or install it as your next desktop.</p><div class="hero-actions"><a class="primary-button" href="docs/installation.html">Get Ferese <svg class="icon"><use href="#i-arrow"/></svg></a><a class="inline-link" href="https://github.com/ferese-wm/ferese">Explore the source <svg class="icon"><use href="#i-external"/></svg></a></div></section>
|
||||
</main>
|
||||
<footer class="site-footer page-width">
|
||||
<a class="brand" href="./" aria-label="Ferese home">
|
||||
<img class="brand-icon" src="assets/branding/ferese.svg" width="950" height="950" alt="" />
|
||||
</a>
|
||||
<p>A Wayland desktop with scrolling layouts.</p>
|
||||
<a href="docs/">Read the handbook <svg class="link-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||||
<path d="M7 17 17 7M7 7h10v10" />
|
||||
</svg></a>
|
||||
</footer>
|
||||
<footer class="site-footer page-width"><a class="brand" href="#main" aria-label="Ferese home"><img src="assets/branding/ferese.svg" width="28" height="28" alt=""><span>Ferese</span></a><span>Built in the open for Linux.</span><nav aria-label="Footer navigation"><a href="docs/">Handbook</a><a href="https://github.com/ferese-wm/ferese">GitHub <svg class="icon"><use href="#i-external"/></svg></a></nav></footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+90
-1140
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user