howone 0.1.29 → 0.1.31

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

@@ -1,193 +0,0 @@
-/* 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

@@ -1,66 +0,0 @@
-<!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

@@ -1,194 +0,0 @@
-/* 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);
-}