Files
feresaria/site/index.html
T

74 lines
6.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="#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/videos/ferese-demo-poster.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">
<script src="home.js" defer></script>
</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 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="https://github.com/ferese-wm/ferese/wiki">Documentation</a></nav>
<div class="header-actions"><a class="small-button" href="https://github.com/ferese-wm/ferese/wiki/Installation">Get Ferese</a></div>
</div>
</header>
<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="https://github.com/ferese-wm/ferese/wiki/Installation">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">
<video id="desktop-demo" width="2880" height="1800" controls muted loop playsinline preload="metadata" poster="assets/videos/ferese-demo-poster.webp" aria-label="Ferese desktop demonstration at twice the recorded speed">
<source src="assets/videos/ferese-demo-2x.mp4" type="video/mp4">
<a href="assets/videos/ferese-demo-2x.mp4">Watch the Ferese desktop demo at 2× speed</a>.
</video>
</div>
</div>
</section>
<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>
</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>
</div></section>
<section class="details-section page-width" aria-label="Panel and media features">
<article class="detail-feature">
<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 class="detail-feature">
<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>
<div class="gallery-link page-width"><a class="inline-link" href="https://github.com/ferese-wm/ferese/wiki/Screenshots">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="https://github.com/ferese-wm/ferese/wiki/Installation">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="#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="https://github.com/ferese-wm/ferese/wiki">Documentation</a><a href="https://github.com/ferese-wm/ferese">GitHub <svg class="icon"><use href="#i-external"/></svg></a></nav></footer>
</body>
</html>