livemark 0.28.0 → 0.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "livemark",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "Livemark description",
   "license": "MIT",
   "author": "Evgeny Karev",

package/skills/livemark-customization/SKILL.md

@@ -59,7 +59,7 @@ The command refuses to overwrite an existing override (and exits 1 after copying
 
 ## Typical workflow: announcement banner
 
-Prefer the `banner` config option — an inline Markdown string, rendered to HTML at build time and exposed as `bannerHtml` from `livemark:virtual`. Escape `components/Banner.tsx` only for icons or custom markup. The strip spans the full page width above both the sidebar and the sticky header — it scrolls away while the sidebar and header pin to the top (the sidebar container is `sticky`, not `fixed`, for this). Let it wrap (`flex-wrap`, `text-balance`, `min-w-0`) rather than `truncate`, so phones neither clip it nor scroll sideways. Style the injected HTML from the wrapper (`[&_a]:underline`): Tailwind never sees classes inside a config string. Search and the theme toggle sit at the right of the header, not in the sidebar. The header's section strip is `components/HeaderNav.tsx`; it tells `Header` when to render `<Search compact />` and folds what still doesn't fit into a "More" menu. Below `lg`, `Search` opens `components/HeaderSearch.tsx` instead of the dialog: a field that covers the whole header bar, with results dropping full-width beneath it — positioned `absolute` against the sticky header, so an override must stay inside `<header>`.
+Prefer the `banner` config option — an inline Markdown string, rendered to HTML at build time and exposed as `bannerHtml` from `livemark:virtual`. Escape `components/Banner.tsx` only for icons or custom markup. The strip spans the full page width above both the sidebar and the sticky header — it scrolls away while the sidebar and header pin to the top (the sidebar container is `sticky`, not `fixed`, for this). Let it wrap (`flex-wrap`, `text-balance`, `min-w-0`) rather than `truncate`, so phones neither clip it nor scroll sideways. An escaped strip may keep to one line instead, as livemark.dev's does: `truncate` the message (`min-w-0` lets a flex item shrink), keep the link `shrink-0`, and hide its label with `sr-only sm:not-sr-only` — `hidden` would leave the phone's arrow-only link without a name. Style the injected HTML from the wrapper (`[&_a]:underline`): Tailwind never sees classes inside a config string. Search and the theme toggle sit at the right of the header, not in the sidebar. The header's section strip is `components/HeaderNav.tsx`; it tells `Header` when to render `<Search compact />` and folds what still doesn't fit into a "More" menu. Below `lg`, `Search` opens `components/HeaderSearch.tsx` instead of the dialog: a field that covers the whole header bar, with results dropping full-width beneath it — positioned `absolute` against the sticky header, so an override must stay inside `<header>`.
 
 ## Sidebar escapes
 

package/skills/livemark-landing/SKILL.md

@@ -54,8 +54,8 @@ The reference runs Hero → a differentiator ("Stays out of your way") → a fea
 
 ## Patterns from the reference
 
-- **Section shell** — `<section className="border-b border-border">` around `mx-auto max-w-6xl px-6 py-24`, a centred heading block (`max-w-2xl`, `h2` at `text-3xl md:text-4xl`), and one showcase section tinted with `bg-primary/5` to break the rhythm. Two-column sections pair a text list with a visual: `grid grid-cols-1 md:grid-cols-2`.
-- **Hero** — a small uppercase eyebrow in `text-primary`, a short `h1`, a lede capped at `max-w-[52ch]`, then two actions: a primary button to the docs and an outline one to the source. Buttons are `buttonVariants` from `livemark/elements/button` on a `Link` or `<a>`, plus `no-underline`.
+- **Section shell** — `<section className="border-b border-border">` around `mx-auto max-w-6xl px-6 py-16 md:py-24`, a centred heading block (`max-w-2xl`, `mb-10 md:mb-16`, `h2` at `text-3xl md:text-4xl`), and one showcase section tinted with `bg-primary/5` to break the rhythm. Two-column sections pair a text list with a visual: `grid grid-cols-1 md:grid-cols-2`.
+- **Hero** — a small uppercase eyebrow in `text-primary`, a short `h1`, a lede capped at `max-w-[52ch]`, then two actions: a primary button to the docs and an outline one to the source. Buttons are `buttonVariants` from `livemark/elements/button` on a `Link` or `<a>`, plus `no-underline`. On phones give each `flex-1 px-3 sm:flex-none sm:px-5`: the pair shares one row, and when it cannot, wraps into two equal full-width buttons instead of two ragged ones.
 - **Internal links** go through `<Link to="/$" params={{ _splat: "introduction" }}>`, so `base` and client navigation keep working; external links get `target="_blank" rel="noopener noreferrer"`.
 - **Show the product** — real screenshots, not stock art. Each shot ships light and dark as two `<img>`, toggled with `dark:hidden` / `hidden dark:block`: the theme is a class on `<html>`, which `<picture media>` cannot see. Put them in `.livemark/public/` and reference them from `/`.
 - **Window cards** — a bordered `rounded-card` frame with a title bar and a mono file label (`WindowCard`) makes code, file trees and rendered output read as the real thing.
@@ -66,7 +66,7 @@ The reference runs Hero → a differentiator ("Stays out of your way") → a fea
 ## Rules of thumb
 
 1. **Every animation honours reduced motion** — `motion-reduce:` utilities or a `@media (prefers-reduced-motion: reduce)` block, as the reference's carousel and background do.
-2. **Phone first.** Grids start at one column, action rows `flex-wrap`, secondary labels are `hidden sm:inline`. Check 375px wide: no horizontal scroll.
+2. **Phone first.** Grids start at one column, action rows `flex-wrap`, secondary labels are `hidden sm:inline`. Check 375px wide, then again with the root font at 125% — Android text scaling grows every rem, padding included: no horizontal scroll, the `h1` and the action row still fit.
 3. **Prerender-safe.** `/` is rendered at build time, so nothing touches `window` or `document` during render — only in effects and handlers.
 4. **Import via `livemark/*`** (`components`, `elements`, `hooks`), never relative paths into `node_modules`, so escaped components compose.
 5. **One file is fine.** Keep the landing in `index.tsx`; move a piece to `.livemark/components/` only when another route reuses it.