howone 0.1.20 → 0.1.23

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/output.css

@@ -0,0 +1,193 @@
+/* Hallmark · macrostructure: Specimen · H4 hero knobs: number-column=margin, alignment=left-bias
+ * theme: Specimen · accent: warm-orange ~3% · enrichment: none (typography only)
+ * studied: yes · DNA-source: user reference (Aperture-style portfolio) · paid-fonts: not confirmed (free pairing applied)
+ */
+
+:root {
+  --color-paper: oklch(96% 0.018 80);
+  --color-paper-2: oklch(93% 0.020 80);
+  --color-rule: oklch(82% 0.020 75);
+  --color-ink: oklch(20% 0.014 60);
+  --color-ink-soft: oklch(45% 0.016 60);
+  --color-ink-muted: oklch(64% 0.016 60);
+  --color-accent: oklch(64% 0.13 45);
+
+  --font-display: "Fraunces", "EB Garamond", "Cormorant Garamond", Georgia, serif;
+  --font-body: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+  --space-2xs: 0.5rem;
+  --space-xs: 0.75rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4.5rem;
+  --space-3xl: 6.5rem;
+  --space-4xl: 9rem;
+
+  --measure-prose: 60ch;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --dur-micro: 180ms;
+}
+
+* { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+.page {
+  max-width: 64rem;
+  margin: 0 auto;
+  padding: var(--space-4xl) var(--space-lg) var(--space-2xl);
+}
+
+/* Masthead — italic-serif name in the top-left margin */
+.masthead {
+  margin-block-end: var(--space-4xl);
+}
+
+.masthead__brand {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 400;
+  font-variation-settings: "opsz" 144;
+  font-size: clamp(4rem, 9vw, 7.5rem);
+  line-height: 0.92;
+  letter-spacing: -0.04em;
+  margin: 0 0 var(--space-md);
+  color: var(--color-ink);
+}
+
+.masthead__brand-em { color: var(--color-accent); font-style: italic; }
+
+.masthead__sub {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  color: var(--color-ink-soft);
+  text-transform: uppercase;
+  margin: 0;
+  max-width: 60ch;
+}
+
+/* Works — numbered project list */
+.works {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-block-start: 1px solid var(--color-rule);
+}
+
+.work {
+  display: grid;
+  grid-template-columns: 6rem 1fr;
+  gap: var(--space-lg);
+  align-items: baseline;
+  padding: var(--space-2xl) 0;
+  border-block-end: 1px solid var(--color-rule);
+  position: relative;
+  transition: background var(--dur-micro) var(--ease-out);
+}
+
+.work:hover { background: var(--color-paper-2); }
+
+.work__num {
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.16em;
+  color: var(--color-ink-muted);
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+  align-self: start;
+  padding-block-start: 0.6em;
+  transition: color var(--dur-micro) var(--ease-out);
+}
+
+.work:hover .work__num { color: var(--color-ink); }
+
+/* Active state — the warm-orange accent on one row only */
+.work--active .work__num { color: var(--color-accent); }
+
+.work__name {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 400;
+  font-variation-settings: "opsz" 72;
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  line-height: 1.1;
+  letter-spacing: -0.015em;
+  margin: 0 0 var(--space-2xs);
+  color: var(--color-ink);
+}
+
+.work__desc {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--color-ink-soft);
+  margin: 0;
+  max-width: var(--measure-prose);
+}
+
+/* Colophon — single line, small caps */
+.colophon {
+  margin-block-start: var(--space-3xl);
+  padding-block-start: var(--space-md);
+  border-block-start: 1px solid var(--color-rule);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm) var(--space-xl);
+  font-family: var(--font-body);
+  font-size: 0.8125rem; /* bumped from screenshot's 11px to comfortable 13px */
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+}
+
+.colophon__brand {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 1rem;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--color-ink);
+}
+
+.colophon a {
+  color: var(--color-ink-soft);
+  text-decoration: none;
+  border-block-end: 1px solid transparent;
+  padding-block-end: 1px;
+  transition: color var(--dur-micro) var(--ease-out),
+              border-color var(--dur-micro) var(--ease-out);
+}
+
+.colophon a:hover, .colophon a:focus-visible {
+  color: var(--color-accent);
+  border-block-end-color: var(--color-accent);
+}
+
+.colophon a:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 4px;
+}
+
+@media (max-width: 48rem) {
+  .page { padding: var(--space-2xl) var(--space-md) var(--space-xl); }
+  .work { grid-template-columns: 4rem 1fr; gap: var(--space-md); padding: var(--space-xl) 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .work, .work__num, .colophon a { transition: none; }
+}

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/output.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Coelho Studio — product design for early-stage Lisbon companies</title>
+  <meta name="description" content="A small product-design studio in Lisbon. Three people, six current projects, mostly working with early-stage companies." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400;1,9..144,500&family=Geist:wght@400;500&display=swap" />
+  <link rel="stylesheet" href="output.css" />
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <h1 class="masthead__brand">Coelho<span class="masthead__brand-em">,</span></h1>
+      <p class="masthead__sub">Product design · Lisbon · est. 2024 · three of us · six projects this year</p>
+    </header>
+
+    <ul class="works" role="list">
+      <li class="work">
+        <span class="work__num">01</span>
+        <h2 class="work__name">Tide</h2>
+        <p class="work__desc">Indie-podcast hosting platform · brand &amp; product design · 2024 — present</p>
+      </li>
+
+      <li class="work work--active">
+        <span class="work__num">02</span>
+        <h2 class="work__name">Maple Street Bread</h2>
+        <p class="work__desc">A small artisan bakery's identity, signage, and packaging · 2025 · active</p>
+      </li>
+
+      <li class="work">
+        <span class="work__num">03</span>
+        <h2 class="work__name">Foundry</h2>
+        <p class="work__desc">SOC 2 / ISO 27001 compliance SaaS · brand, marketing site, in-app patterns · 2025</p>
+      </li>
+
+      <li class="work">
+        <span class="work__num">04</span>
+        <h2 class="work__name">Meridian</h2>
+        <p class="work__desc">Environmental-products studio · manifesto site · 2025</p>
+      </li>
+
+      <li class="work">
+        <span class="work__num">05</span>
+        <h2 class="work__name">Cohort</h2>
+        <p class="work__desc">Cohort-based courses platform · brand &amp; product · 2024–2025</p>
+      </li>
+
+      <li class="work">
+        <span class="work__num">06</span>
+        <h2 class="work__name">Tracejam</h2>
+        <p class="work__desc">Distributed-tracing SaaS · brand, landing page, in-app dashboard · 2024</p>
+      </li>
+    </ul>
+
+    <footer class="colophon">
+      <span class="colophon__brand">Coelho</span>
+      <span>Lisbon · 2026</span>
+      <span><a href="mailto:hello@coelho.studio">hello@coelho.studio</a></span>
+      <span><a href="#">cv</a> · <a href="#">notes</a> · <a href="#">case studies</a></span>
+    </footer>
+  </main>
+</body>
+</html>

package/templates/vite/.howone/skills/hallmark/site/css/base.css

@@ -0,0 +1,194 @@
+/* Hallmark — base: fonts, reset, body */
+
+/* — Google Fonts — all theme display & alt faces ——————————— */
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Instrument+Serif:ital@0;1&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=DM+Serif+Display:ital@0;1&family=Anton&family=Space+Grotesk:wght@300;400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..700&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap");
+
+/* — Reset ———————————————————————————————————————————— */
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
+  margin: 0;
+}
+
+img, picture, svg, video { display: block; max-width: 100%; height: auto; }
+
+button, input, select, textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button { background: none; border: 0; padding: 0; cursor: pointer; }
+
+a { color: inherit; text-decoration: none; }
+
+ul, ol { margin: 0; padding: 0; list-style: none; }
+
+:focus { outline: none; }
+:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+/* — Theme transitions — targeted so type swap feels intentional —— */
+html,
+body,
+.nav,
+.opening__title,
+.opening__sub,
+.section__title,
+.spec__name,
+.spec__rule,
+.tell,
+.tell__viz,
+.tell__meta,
+.tell__name,
+.tell__why,
+.step__head,
+.step__sub,
+.install__body,
+.foot,
+.code,
+.swatch,
+.section__head,
+.vs,
+.vs__col,
+.vs__caption,
+hr.rule,
+.themer,
+.themer__btn {
+  transition:
+    background-color var(--dur-short) var(--ease-out),
+    color var(--dur-short) var(--ease-out),
+    border-color var(--dur-short) var(--ease-out);
+}
+
+/* — Body ————————————————————————————————————————————— */
+html {
+  background: var(--color-paper);
+  color: var(--color-ink);
+  /* Hard stop on horizontal overflow at the root. `clip` (not `hidden`)
+     so descendants with `position: sticky` keep working. */
+  overflow-x: clip;
+}
+
+body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: var(--text-base);
+  line-height: var(--lh-relaxed);
+  letter-spacing: var(--tracking-normal);
+  font-feature-settings: "ss01", "ss02", "cv01";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100dvh;
+  padding-inline: max(var(--page-gutter), env(safe-area-inset-left));
+  padding-block-end: env(safe-area-inset-bottom);
+  overflow-x: clip;
+}
+
+/* Long-word safety: hero display headlines must break inside long
+   words on narrow viewports rather than push the layout wider than
+   the viewport. Critical for hyphenated brand-style words like
+   "AI-generated" in uppercase / heavy display faces. */
+.hero__display,
+.section__title,
+.skill-row__title {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+/* — Selection ——————————————————————————————————————— */
+::selection {
+  background: var(--color-accent);
+  color: var(--color-paper);
+}
+
+/* — Typography primitives ——————————————————————————— */
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  font-weight: var(--display-weight, 400);
+  font-style: var(--display-style, normal);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--tracking-display);
+  color: var(--color-ink);
+  font-optical-sizing: auto;
+  font-variation-settings:
+    "opsz" var(--display-optical, 48),
+    "SOFT" var(--display-soft, 0);
+}
+
+h1 { font-size: var(--text-display); }
+h2 { font-size: var(--text-display-s); }
+h3 { font-size: var(--text-xl); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-style: normal; font-variation-settings: normal; }
+h4 { font-size: var(--text-md); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-style: normal; font-variation-settings: normal; }
+
+p { max-width: var(--measure); }
+
+strong { font-weight: 500; }
+
+em { font-style: italic; }
+
+code, kbd, samp, pre {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  font-feature-settings: "tnum";
+}
+
+/* — Utility: label (small caps numbering) —————————— */
+.label {
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  font-weight: 400;
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+/* — Utility: rule (hairline divider) ———————————————— */
+.rule {
+  border: 0;
+  border-top: var(--rule-hair) solid var(--color-rule);
+  margin: 0;
+}
+
+.rule-strong {
+  border-top-color: var(--color-rule-2);
+  border-top-width: var(--rule-fine);
+}
+
+/* — Utility: serif (editorial emphasis) ———————————— */
+.serif {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-optical-sizing: auto;
+  font-variant-numeric: oldstyle-nums;
+}
+
+.serif-italic {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-weight: 400;
+}
+
+/* — Utility: tabular numbers ————————————————————————— */
+.tnum { font-variant-numeric: tabular-nums; }
+
+/* — Utility: container ————————————————————————————————— */
+.container {
+  max-width: var(--page-max);
+  margin-inline: auto;
+  width: 100%;
+}
+
+/* — Orange square (the accent mark) ——————————————————— */
+.mark {
+  display: inline-block;
+  width: 0.55em;
+  height: 0.55em;
+  background: var(--color-accent);
+  vertical-align: 0.04em;
+  transition: background-color var(--dur-short) var(--ease-out);
+}