Site: phone baseline, readable phone screenshots, 44 px taps

site/404.html

@@ -11,7 +11,7 @@
 <meta name="robots" content="noindex">
 <link rel="icon" type="image/png" href="/assets/favicon.png">
 <link rel="apple-touch-icon" href="/assets/icon-256.png">
-<link rel="stylesheet" href="/assets/site.css?v=1">
+<link rel="stylesheet" href="/assets/site.css?v=2">
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>

site/assets/site.css

@@ -39,7 +39,7 @@
 }
 
 * { box-sizing: border-box; }
-html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
 @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
 body {
   margin: 0;
@@ -50,7 +50,6 @@ body {
 }
 img { max-width: 100%; height: auto; display: block; }
 a { color: var(--terra); text-underline-offset: 3px; }
-a:hover { color: var(--terra-deep); }
 :focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
 code { font-family: var(--mono); font-size: 0.82em; background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 0.1em 0.35em; border-radius: 4px; }
 .wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
@@ -62,25 +61,20 @@ code { font-family: var(--mono); font-size: 0.82em; background: color-mix(in srg
 .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
 .brand-lockup { display: flex; align-items: center; min-width: 0; }
 .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 24px; font-weight: 500; letter-spacing: 0.01em; }
-.brand:hover { color: var(--ink); }
 .brand img { width: 28px; height: 28px; border-radius: 6px; }
 .by-basalt { font: 400 0.75rem/1 var(--mono); letter-spacing: 0.04em; color: var(--soft); text-decoration: none; margin-left: 10px; padding-top: 4px; white-space: nowrap; }
-.by-basalt:hover { color: var(--ink); text-decoration: underline; }
 .nav-links { display: flex; gap: 28px; font-size: 17px; }
 .nav-links a { color: var(--soft); text-decoration: none; }
-.nav-links a:hover { color: var(--ink); }
 .nav-end { display: flex; align-items: center; gap: 14px; }
 .nav-gh { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); text-decoration: none; font-size: 17px; }
 .nav-gh svg { width: 18px; height: 18px; }
-.nav-gh:hover { color: var(--ink); }
 
 /* Buttons */
-.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; text-decoration: none; font: 500 15px/1 var(--sans); padding: 12px 20px; border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s; }
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; text-decoration: none; font: 500 15px/1 var(--sans); padding: 12px 20px; border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s, transform .16s cubic-bezier(.23, 1, .32, 1); }
+.btn:active { transform: scale(.97); }
 .btn svg { width: 18px; height: 18px; }
 .btn-primary { background: var(--ink); color: var(--page); }
-.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--terra)); color: var(--page); }
 .btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
-.btn-secondary:hover { color: var(--ink); border-color: var(--soft); }
 .btn-sm { padding: 9px 15px; font-size: 14px; }
 .btn-lg { padding: 15px 26px; font-size: 16px; }
 
@@ -170,6 +164,7 @@ code { font-family: var(--mono); font-size: 0.82em; background: color-mix(in srg
 .doc p, .doc li { color: var(--soft); }
 .doc li { margin-bottom: 8px; }
 .doc b { color: var(--ink); font-weight: 500; }
+.doc code { overflow-wrap: anywhere; }
 .doc .lede-doc { font-size: 22px; color: var(--ink); }
 
 /* Basalt product footer (basalt/footer), mapped to Folio's tokens. */
@@ -182,7 +177,6 @@ code { font-family: var(--mono); font-size: 0.82em; background: color-mix(in srg
 .footer-brand p { color: var(--ink-3); margin: 10px 0 0; max-width: 26em; }
 .footer nav { display: grid; gap: 8px; align-content: start; }
 .footer nav a { color: var(--ink-2); text-decoration: none; }
-.footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
 .f-title { font-weight: 600; color: var(--ink); margin: 0 0 4px; }
 .footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; gap: 8px; color: var(--ink-3); font-size: 12.5px; }
 .footer-base p { margin: 0; }
@@ -212,3 +206,28 @@ code { font-family: var(--mono); font-size: 0.82em; background: color-mix(in srg
 .section-head .eyebrow { color: var(--terra); font-size: 13px; margin: 0 0 14px; }
 .trust a { white-space: nowrap; }
 .doc .eyebrow { color: var(--terra); }
+
+/* Phone baseline: hover only where a mouse can hover, so a tapped link
+   doesn't keep its hover colour. */
+@media (hover: hover) and (pointer: fine) {
+  a:hover { color: var(--terra-deep); }
+  .brand:hover { color: var(--ink); }
+  .by-basalt:hover { color: var(--ink); text-decoration: underline; }
+  .nav-links a:hover { color: var(--ink); }
+  .nav-gh:hover { color: var(--ink); }
+  .btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--terra)); color: var(--page); }
+  .btn-secondary:hover { color: var(--ink); border-color: var(--soft); }
+  .footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
+}
+/* Touch: 44 px hit areas without changing the look. */
+@media (pointer: coarse) {
+  .nav-gh { min-height: 44px; min-width: 44px; justify-content: center; }
+  .brand { min-height: 44px; }
+  .nav-end .btn-sm { position: relative; }
+  .nav-end .btn-sm::after { content: ""; position: absolute; inset: -6px -4px; }
+  .by-basalt { padding-block: 14px 10px; }
+  .footer nav { gap: 0; }
+  .footer nav a { padding-block: 10px; }
+  .footer-base a, .trust a, .catch a { display: inline-block; padding-block: 10px; margin-block: -10px; }
+}
+.frame picture { display: block; }

site/index.html

@@ -28,7 +28,7 @@
 
 <link rel="icon" type="image/png" href="/assets/favicon.png">
 <link rel="apple-touch-icon" href="/assets/icon-256.png">
-<link rel="stylesheet" href="/assets/site.css?v=1">
+<link rel="stylesheet" href="/assets/site.css?v=2">
 <script type="application/ld+json">{"@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Folio", "description": "A free, open-source desktop app for opencode that sets each coding-agent session as a chapter of a book: commands as footnotes, edits as plates you accept or reject.", "applicationCategory": "DeveloperApplication", "operatingSystem": "macOS 12 or later, Windows 10 or later, Linux", "softwareVersion": "0.3.0", "url": "https://folio.hellobasalt.dev/", "downloadUrl": "https://github.com/dpdev69/folio/releases/latest", "installUrl": "https://github.com/dpdev69/folio/releases/latest", "image": "https://folio.hellobasalt.dev/assets/og-image.png", "screenshot": "https://folio.hellobasalt.dev/assets/shot-plate.webp", "license": "https://opensource.org/licenses/MIT", "isAccessibleForFree": true, "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}, "author": {"@type": "Organization", "name": "Folio contributors", "url": "https://github.com/dpdev69/folio"}, "publisher": {"@type": "Organization", "@id": "https://hellobasalt.dev/#org", "name": "Basalt Studio", "alternateName": "Basalt", "url": "https://hellobasalt.dev/", "sameAs": ["https://x.com/hellobasalt", "https://www.youtube.com/@hellobasalt"]}, "sameAs": ["https://github.com/dpdev69/folio"]}</script>
 <script type="application/ld+json">{"@context": "https://schema.org", "@type": "WebSite", "name": "Folio", "url": "https://folio.hellobasalt.dev/", "publisher": {"@id": "https://hellobasalt.dev/#org"}}</script>
 <script type="application/ld+json">{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Is Folio free?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. Folio is open source under the MIT license. There is no account and nothing to buy. The free OpenCode Zen models need no key; other providers bill you directly if you paste their key."}}, {"@type": "Question", "name": "Do I need to install opencode first?", "acceptedAnswer": {"@type": "Answer", "text": "No. The installer carries opencode 2.0.32 and starts it for you on a random local port with a password made for that launch. You can also attach Folio to an opencode server you started yourself."}}, {"@type": "Question", "name": "Does Folio replace opencode?", "acceptedAnswer": {"@type": "Answer", "text": "No. opencode does the work. Folio is a different way to read and steer it: it talks to opencode's own HTTP API and does not fork or patch it."}}, {"@type": "Question", "name": "Will it touch my own opencode setup?", "acceptedAnswer": {"@type": "Answer", "text": "The bundled opencode keeps its sessions, keys and cache in Folio's own app data folder. It never opens your opencode database, and your opencode config folder stays yours."}}, {"@type": "Question", "name": "Does Folio send my code anywhere?", "acceptedAnswer": {"@type": "Answer", "text": "Folio itself sends nothing to Basalt. opencode sends your prompts and the files it reads to the model provider you choose, the same as it does in the terminal."}}, {"@type": "Question", "name": "macOS says it can't check Folio for malware. What do I do?", "acceptedAnswer": {"@type": "Answer", "text": "The build isn't signed with an Apple Developer ID yet. Open System Settings, then Privacy & Security, and click Open Anyway next to the message about Folio. If macOS says the app is damaged, run xattr -dr com.apple.quarantine /Applications/Folio.app in Terminal and open it again."}}]}</script>
@@ -85,7 +85,7 @@ <h1>Your coding agent, <em>set as a book.</em></h1>
       </div>
 
       <div class="hero-shot">
-        <figure class="frame"><img src="/assets/shot-plate.webp" alt="A Folio spread titled Chapter I, Add farewell function to src/greet.ts. The left page opens with a drop cap, then the request in blue handwriting, the reply in prose and eight footnotes for the files the agent read and the commands it ran. The right page shows Plate I, the diff for src/greet.ts, with Accept, Revise, Reject and Fold back under it." width="2200" height="1391" fetchpriority="high"></figure>
+        <figure class="frame"><picture><source media="(max-width: 600px)" srcset="/assets/shot-plate-phone.webp" width="874" height="1212"><img src="/assets/shot-plate.webp" alt="A Folio spread titled Chapter I, Add farewell function to src/greet.ts. The left page opens with a drop cap, then the request in blue handwriting, the reply in prose and eight footnotes for the files the agent read and the commands it ran. The right page shows Plate I, the diff for src/greet.ts, with Accept, Revise, Reject and Fold back under it." width="2200" height="1391" fetchpriority="high"></picture></figure>
         <p class="caption">A real session on opencode 2.0.32. opencode named the chapter from the request, and the edit it made faces the page as Plate I.</p>
       </div>
     </div>
@@ -125,7 +125,7 @@ <h3>Every edit is a plate.</h3>
             <li><b>Fold back</b> puts the plate away until you want it.</li>
           </ul>
         </div>
-        <figure class="frame"><img src="/assets/shot-plate-crop.webp" alt="Plate I, src/greet.ts, plus four lines: a new farewell function under greet, with Accept, Revise, Reject and Fold back underneath." width="1060" height="780" loading="lazy"></figure>
+        <figure class="frame"><picture><source media="(max-width: 600px)" srcset="/assets/shot-plate-crop-phone.webp" width="720" height="510"><img src="/assets/shot-plate-crop.webp" alt="Plate I, src/greet.ts, plus four lines: a new farewell function under greet, with Accept, Revise, Reject and Fold back underneath." width="1060" height="780" loading="lazy"></picture></figure>
       </article>
 
       <article class="feature flip">
@@ -134,7 +134,7 @@ <h3>Ask before it writes.</h3>
           <p>Turn on <b>Ask before the press writes</b> in the menu and opencode stops before each edit and each shell command. The question sits at the foot of the page with the proposed change facing it.</p>
           <p>The answers are <b>Allow once</b> and <b>No</b>. There's deliberately no “Always”: in opencode that saves a rule for the whole project, and one click would quietly switch the setting off.</p>
         </div>
-        <figure class="frame"><img src="/assets/shot-ask.webp" alt="Chapter II paused before an edit: the request in ink on the left, May I edit src/greet.ts? Allow once · No at the foot of the page, and the proposed one-line comment set as Plate I on the right." width="1280" height="840" loading="lazy"></figure>
+        <figure class="frame"><picture><source media="(max-width: 600px)" srcset="/assets/shot-ask-phone.webp" width="460" height="305"><img src="/assets/shot-ask.webp" alt="Chapter II paused before an edit: the request in ink on the left, May I edit src/greet.ts? Allow once · No at the foot of the page, and the proposed one-line comment set as Plate I on the right." width="1280" height="840" loading="lazy"></picture></figure>
       </article>
 
       <article class="feature">
@@ -143,7 +143,7 @@ <h3>It brings its own opencode.</h3>
           <p>The installer carries opencode 2.0.32 and starts it for you on a random local port, with a password made for that launch. It keeps its own sessions and keys, so your opencode setup stays untouched.</p>
           <p>The free OpenCode Zen models work without a key. Paste a key for another provider if you have one, or attach Folio to an opencode server you already run.</p>
         </div>
-        <figure class="frame"><img src="/assets/shot-title.webp" alt="Folio's title page: The press is ready. Using opencode 2.0.32 with a free OpenCode Zen model. Open a folder, use a provider key, or read the sample." width="1600" height="1012" loading="lazy"></figure>
+        <figure class="frame"><picture><source media="(max-width: 600px)" srcset="/assets/shot-title-phone.webp" width="636" height="320"><img src="/assets/shot-title.webp" alt="Folio's title page: The press is ready. Using opencode 2.0.32 with a free OpenCode Zen model. Open a folder, use a provider key, or read the sample." width="1600" height="1012" loading="lazy"></picture></figure>
       </article>
 
       <article class="feature flip">
@@ -152,7 +152,7 @@ <h3>Six themes, light and dark.</h3>
           <p>Original, Quiet, Paper, Bold, Calm and Focus each pair a typeface with a palette in both appearances. Text size, line spacing, margins and justified text are yours to set, and every theme keeps its ink readable on the page.</p>
           <p>Highlight a passage to write in the margin. The reply sits beside your note and can replace the passage.</p>
         </div>
-        <figure class="frame"><img src="/assets/shot-themes.webp" alt="A chapter in the dark appearance with the Calm theme, and the Themes and Settings menu open: text size, appearance, and six swatches, Original, Quiet, Paper, Bold, Calm and Focus." width="1600" height="1012" loading="lazy"></figure>
+        <figure class="frame"><picture><source media="(max-width: 600px)" srcset="/assets/shot-themes-phone.webp" width="750" height="560"><img src="/assets/shot-themes.webp" alt="A chapter in the dark appearance with the Calm theme, and the Themes and Settings menu open: text size, appearance, and six swatches, Original, Quiet, Paper, Bold, Calm and Focus." width="1600" height="1012" loading="lazy"></picture></figure>
       </article>
     </div>
   </section>

site/privacy.html

@@ -11,7 +11,7 @@
 <link rel="canonical" href="https://folio.hellobasalt.dev/privacy">
 <link rel="icon" type="image/png" href="/assets/favicon.png">
 <link rel="apple-touch-icon" href="/assets/icon-256.png">
-<link rel="stylesheet" href="/assets/site.css?v=1">
+<link rel="stylesheet" href="/assets/site.css?v=2">
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>

site/terms.html

@@ -11,7 +11,7 @@
 <link rel="canonical" href="https://folio.hellobasalt.dev/terms">
 <link rel="icon" type="image/png" href="/assets/favicon.png">
 <link rel="apple-touch-icon" href="/assets/icon-256.png">
-<link rel="stylesheet" href="/assets/site.css?v=1">
+<link rel="stylesheet" href="/assets/site.css?v=2">
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>