Enhance landing page features and footer design; update styles for improved aesthetics

Author: CodeDoctorDE

README.md

@@ -40,9 +40,19 @@ Butterfly is an open-source app for people who think better with space around th
 
 Use it for class notes, meeting notes, research, math, worksheets, planning, whiteboarding, storyboards, product sketches, or any project that starts messy and needs room to grow. Write by hand with a stylus, touch, or mouse, type text and Markdown, add shapes and lines, place images and photos, import PDFs, SVGs, and image files, then export your work as PDF, SVG, images, or portable Butterfly files.
 
-Butterfly tries to stay out of your way while you work. Recent files, quick-start templates, search, folders, imports, page navigation, and tool settings are close when you need them, but the document stays at the center. You can begin with a plain page, ruled paper, a grid, dotted paper, music paper, or your own template.
+## Features
 
-As your document grows, Butterfly gives you ways to keep it understandable. Split work into pages and page folders, use layers, mark important places with areas and waypoints, save reusable parts in packs, and keep palettes and text styles ready for the next document. Almost everything you add remains editable, so you can move, resize, recolor, reorder, and refine your work later instead of starting over.
+* **✍️ Tunable drawing tools:** Shape each pen around your workflow with smoothing, thinning, pressure behavior, zoom-dependent strokes, and shape detection.
+* **🧩 Mixed content:** Combine handwriting, text, Markdown, shapes, images, photos, PDFs, SVGs, rulers, grids, textures, laser pointer notes, and presentation tools.
+* **🛠️ Always editable:** Move, resize, recolor, reorder, and refine most elements later instead of starting over.
+* **🗂️ Project structure:** Organize large documents with multiple pages, page folders, layers, named areas, and waypoints.
+* **🎨 Reusable setup:** Save templates, packs, palettes, stamps, and text styles so your favorite layouts and tools follow you.
+* **🚀 Quick start:** Jump in from recent files, search, folders, imports, quick-start templates, and storage locations.
+* **🔒 Local first:** Work offline, store files locally, choose a different data directory, or connect WebDAV and Nextcloud.
+* **📤 Flexible export:** Share your work as PDF, SVG, images, or portable Butterfly files.
+* **🤝 Experimental collaboration:** Work together with end-to-end encrypted sessions through Swamp or a self-hosted WebSocket server.
+
+## Your work belongs to you
 
 Your files stay under your control. Work offline, store documents on your device, choose a different data directory, or connect WebDAV and Nextcloud if you want your own sync setup. There is no required account, no required subscription, and no required proprietary cloud.
 
@@ -66,7 +76,7 @@ Butterfly is free, community translated, available on phones, tablets, desktops,
 Try Butterfly in your browser, install it on your devices, or explore the documentation:
 
 * [Download Butterfly](https://butterfly.linwood.dev/downloads)
-* [Try the web app](https://web.butterfly.linwood.dev)
+* [Try the web app](https://web.butterfly.linwood.dev) (Chromium-based browsers are recommended)
 * [Read the documentation](https://butterfly.linwood.dev/docs/v2/intro)
 * [Join the community](https://butterfly.linwood.dev/community)
 

docs/src/components/Footer.astro

@@ -7,55 +7,65 @@ import { Image } from "astro:assets";
   <slot />
 </StarlightFooter>
 <footer class="real-footer">
-  <a href="https://linwood.dev" target="_blank">
+  <a class="brand" href="https://linwood.dev" target="_blank">
     <Image
       src="https://www.linwood.dev/logos/logo.png"
       width="32"
       height="32"
-      alt="Linwood"
+      alt=""
     />
+    <strong>Linwood</strong>
   </a>
-  <div class="row">
-    <a target="_blank" class="btn" href="https://linwood.dev/imprint">Impressum</a
-    >
-    <a target="_blank" class="btn" href="https://linwood.dev/privacypolicy"
-      >Datenschutzerklärung</a
-    >
+  <div class="links">
+    <a target="_blank" class="btn" href="https://linwood.dev/imprint">Imprint</a>
+    <a target="_blank" class="btn" href="https://linwood.dev/privacypolicy">
+      Privacy policy
+    </a>
   </div>
 </footer>
 
 <style lang="scss">
   .real-footer {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
+    gap: 0.75rem 1.25rem;
     width: fit-content;
-    border-radius: 0.4rem;
     margin-top: 5rem;
-    background-color: var(--sl-color-gray-6);
-    padding: 0.5rem 1rem;
     margin-left: auto;
     margin-right: auto;
+    padding: 1rem;
+    background-color: var(--sl-color-gray-6);
+    border-radius: 1rem;
   }
-  .row {
+
+  .brand {
     display: flex;
     align-items: center;
-    gap: 1rem;
-    margin-top: 0.5rem;
+    gap: 0.5rem;
+    color: var(--sl-color-white);
+    text-decoration: none;
   }
-  .divider {
-    align-self: stretch;
-    width: 2px;
-    background-color: var(--sl-color-gray-4);
+
+  .brand:hover {
+    text-decoration: none;
+  }
+
+  .links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
   }
 
   .btn {
-    color: var(--sl-color-gray-10);
+    color: var(--sl-color-white);
     font-weight: 500;
     text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
+  }
+
+  .btn:hover {
+    text-decoration: none;
   }
 </style>

docs/src/components/LandingFeature.astro

@@ -63,8 +63,7 @@ const { image, alt, reverse = false, portrait = false } = Astro.props;
     max-height: 40rem;
     object-fit: contain;
     border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.65rem;
-    background: white;
+    border-radius: 1rem;
     box-shadow: var(--sl-shadow-md);
   }
 
@@ -129,6 +128,17 @@ const { image, alt, reverse = false, portrait = false } = Astro.props;
     --sl-content-width: 86rem;
   }
 
+  :global(html:has(.landing-feature) .sl-markdown-content > p > img) {
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 1rem;
+    box-shadow: var(--sl-shadow-md);
+    overflow: hidden;
+  }
+
+  :global(html:has(.landing-feature) .sl-markdown-content > p:has(> img) + .card-grid) {
+    margin-top: clamp(1.5rem, 4vw, 3rem) !important;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     @supports (animation-timeline: view()) {
       .landing-feature {

docs/src/content/docs/index.mdx

@@ -11,9 +11,6 @@ hero:
       link: /downloads/
       icon: download
       variant: primary
-    - text: Try it in your browser
-      link: https://web.butterfly.linwood.dev
-      icon: rocket
     - text: Read the Butterfly blog
       link: https://linwood.dev/butterfly
       icon: external
@@ -64,8 +61,6 @@ Butterfly is a creative workspace for people who think visually. Capture lecture
 
 An infinite canvas should still be easy to navigate. Butterfly lets one document contain multiple infinite pages, page folders, layers, named areas, and waypoints. Move from the big picture to one exact detail without losing your place.
 
-![A large Butterfly canvas with pages, handwritten notes, and drawing tools](@assets/img/showcase-canvas.png)
-
 <CardGrid stagger>
   <Card title="Every element stays editable" icon="pencil">
     Move, resize, recolor, and reorganize content after placing it. Your first attempt never has to be your final one.
@@ -132,7 +127,7 @@ No subscription is required. Download Butterfly, open the web app, and create yo
   />
   <LinkCard
     title="Try the web app"
-    description="Start a canvas in your browser without installing anything."
+    description="Start a canvas in your browser without installing anything. Chromium-based browsers are recommended."
     href="https://web.butterfly.linwood.dev"
   />
   <LinkCard

docs/src/styles/linwood-style.scss

@@ -22,6 +22,10 @@
 }
 header {
   backdrop-filter: lw.$elevation-filter;
+  background: color-mix(in srgb, var(--ls-background) 72%, transparent);
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--ls-background-text) 5%, transparent);
+  isolation: isolate;
 }
 .tagline, label, .site-title {
   color: var(--ls-background-text);
@@ -64,6 +68,16 @@ option {
 .sl-link-card a {
   text-decoration: none;
 }
+
+.sl-link-card {
+  --sl-color-gray-3: color-mix(in srgb, var(--ls-background-text) 78%, transparent);
+  border-radius: 1rem;
+}
+
+.card {
+  border-radius: 1rem;
+}
+
 .sidebar-content {
   padding-left: 6px;
   summary {