diff --git a/site/css/components.css b/site/css/components.css index ec7dc58..6c61a5d 100644 --- a/site/css/components.css +++ b/site/css/components.css @@ -1733,18 +1733,11 @@ .gallery { grid-template-columns: 1fr; } } +/* Card = flush container. NO padding here so the thumb fills edge-to-edge + without negative-margin tricks. The inner .gallery__body carries the + padding + grid for the text rows. */ .gallery__item { - display: grid; - grid-template-areas: - "thumb thumb" - "num name" - "num shape" - "num desc" - "num open"; - grid-template-columns: 4rem 1fr; - grid-template-rows: auto repeat(4, auto); - gap: 0 var(--space-md); - padding: var(--space-lg); + display: block; text-decoration: none; color: inherit; background: var(--color-paper); @@ -1770,22 +1763,17 @@ outline-offset: 3px; } +/* Thumb = top of card, fills full width naturally. No negative margins, + no width:calc(...). Just width:100% + aspect-ratio. */ .gallery__thumb { - grid-area: thumb; display: block; - /* Width must EXCEED content area by 2*padding so the negative margins - reach the card's inside-border edge on both sides. width: 100% would - only fill the content area, leaving padding visible on the right. */ - width: calc(100% + 2 * var(--space-lg)); - margin-inline: calc(-1 * var(--space-lg)); - margin-block-start: calc(-1 * var(--space-lg)); - margin-block-end: var(--space-lg); + width: 100%; border-block-end: var(--rule-card, 1px) solid var(--color-rule); background: var(--color-paper-2); overflow: hidden; position: relative; - font-size: 0; /* kill any inline-element gap */ - aspect-ratio: 16 / 10; /* explicit, so the image always fits */ + font-size: 0; + aspect-ratio: 16 / 10; } .gallery__thumb img { @@ -1793,10 +1781,24 @@ width: 100%; height: 100%; object-fit: cover; - object-position: top left; /* keep hero region; crop empty right */ + object-position: top left; transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1); } +/* Body = padded grid for text rows. Replaces the grid the card itself + used to carry. Same row layout, same num-column width. */ +.gallery__body { + display: grid; + grid-template-areas: + "num name" + "num shape" + "num desc" + "num open"; + grid-template-columns: 4rem 1fr; + gap: 0 var(--space-md); + padding: var(--space-lg); +} + @media (hover: hover) and (pointer: fine) { .gallery__item:hover .gallery__thumb img, .gallery__item:focus-visible .gallery__thumb img { diff --git a/site/index.html b/site/index.html index b9fdff8..327776c 100644 --- a/site/index.html +++ b/site/index.html @@ -1,14 +1,17 @@ + Hallmark — A design skill that refuses to look AI-generated - + - + @@ -18,7 +21,8 @@ - + @@ -32,9 +36,10 @@ const q = url.searchParams.get("theme"); const t = q || localStorage.getItem("hallmark-theme"); if (t) document.documentElement.dataset.theme = t; - } catch (e) {} + } catch (e) { } + @@ -49,27 +54,45 @@ - + 
$npx skills add hallmark
@@ -334,7 +380,8 @@ II

Ask for a UI

-

In plain language. Hallmark refuses to design without a confirmed audience, use case, and tone — so it asks first.

+

In plain language. Hallmark refuses to design without a confirmed audience, use case, + and tone — so it asks first.

> build a landing page for a local bookshop's
@@ -347,7 +394,10 @@
           III
           

             
Five verbs: build, audit, refine, redesign, study

-            
The default verb builds. hallmark audit scores existing code against the tells. hallmark refine polishes in place. hallmark redesign rethinks the structure. hallmark study reads a screenshot you admire and extracts its DNA — macrostructure, archetypes, type-pairing role, colour anchor — never the pixels.

+            
The default verb builds. hallmark audit scores existing code against the
+              tells. hallmark refine polishes in place. hallmark redesign rethinks the
+              structure. hallmark study reads a screenshot you admire and extracts its DNA —
+              macrostructure, archetypes, type-pairing role, colour anchor — never the pixels.

           

           

             
$ claude "hallmark study ./reference.png"
@@ -376,7 +426,8 @@
 
         

           
npx  ·  any harness

-          
npx skills add hallmark

+          
npx skills add hallmark

         

 
         

@@ -414,96 +465,121 @@
         
       
 
-      
Eight landing pages produced by exercising the skill across contrasting briefs. Each page is its own self-contained HTML + CSS — no shared theme, no shared layout. Every one carries a /* Hallmark · macrostructure: … */ stamp at the top of its CSS. Hover any thumbnail to see the page open in a new tab.

+      
Eight landing pages produced by exercising the skill across contrasting briefs. Each
+        page is its own self-contained HTML + CSS — no shared theme, no shared layout. Every one carries a
+        /* Hallmark · macrostructure: … */ stamp at the top of its CSS. Hover any thumbnail to see the page
+        open in a new tab.

 
       

 
         
           
-          01
-          Tide
-          Quote-Led · Atelier · no enrichment
-          Indie podcast. Context skipped — the skill inferred the audio domain.
-          View ↗
+          

+            01
+            Tide
+            Quote-Led · Atelier · no enrichment
+            Indie podcast. Context skipped — the skill inferred the audio domain.
+            View ↗
+          

         
 
         
           
-          02
-          Streampipe
-          Workbench · Terminal · Tier-A CSS-art mockup
-          Open-source CLI. Theme requested. Hand-built phosphor-green terminal.
-          View ↗
+          

+            02
+            Streampipe
+            Workbench · Terminal · Tier-A CSS-art mockup
+            Open-source CLI. Theme requested. Hand-built phosphor-green terminal.
+            View ↗
+          

         
 
         
           
-          03
-          Maple Street Bread
-          Long Document · Linen · Tier-B hand-built SVG loaf
-          Artisan bakery. Letter-style hero, drop-cap body, hand-drawn loaf.
-          View ↗
+          

+            03
+            Maple Street Bread
+            Long Document · Linen · Tier-B hand-built SVG loaf
+            Artisan bakery. Letter-style hero, drop-cap body, hand-drawn loaf.
+            View ↗
+          

         
 
         
           
-          04
-          Meridian
-          Manifesto · Manifesto · principles + practice + reading
-          Studio manifesto. Pure black, oversized white display, eleven sections.
-          View ↗
+          

+            04
+            Meridian
+            Manifesto · Manifesto · principles + practice + reading
+            Studio manifesto. Pure black, oversized white display, eleven sections.
+            View ↗
+          

         
 
         
           
-          05
-          Tracejam
-          Bento Grid · Pastel · clipped-edge dashboard
-          SaaS observability. Hand-built CSS-art trace waterfall, asymmetric Bento.
-          View ↗
+          

+            05
+            Tracejam
+            Bento Grid · Pastel · clipped-edge dashboard
+            SaaS observability. Hand-built CSS-art trace waterfall, asymmetric Bento.
+            View ↗
+          

         
 
         
           
-          06
-          Anya
-          Long Document · Studio · no enrichment
-          Software architect personal site. Italic Fraunces + Geist, tabular work sheet.
-          View ↗
+          

+            06
+            Anya
+            Long Document · Studio · no enrichment
+            Software architect personal site. Italic Fraunces + Geist, tabular work
+              sheet.
+            View ↗
+          

         
 
         
           
-          07
-          Foundry
-          Stat-Led · Plain (#fff) · animated counter + pricing pulse
-          SOC2 compliance SaaS. Pure-white paper, ink-blue accent, display-heavy Inter Tight — counterweight to the warm-paper themes.
-          View ↗
+          

+            07
+            Foundry
+            Stat-Led · Plain (#fff) · animated counter + pricing pulse
+            SOC2 compliance SaaS. Pure-white paper, ink-blue accent, display-heavy Inter
+              Tight — counterweight to the warm-paper themes.
+            View ↗
+          

         
 
         
           
-          08
-          Cohort
-          Marquee Hero · Salon · continuous-scroll + stagger reveal
-          Cohort-based courses platform. Marquee of live courses, alternating features, salon tone.
-          View ↗
+          

+            08
+            Cohort
+            Marquee Hero · Salon · continuous-scroll + stagger reveal
+            Cohort-based courses platform. Marquee of live courses, alternating features,
+              salon tone.
+            View ↗
+          

         
 
       

@@ -512,7 +588,8 @@
     
 
     
-    

+    

+    

 
   
 
@@ -525,7 +602,8 @@
       
{{lede}}

       

         
{{ctaLabel}}

-        
$npx skills add hallmark

+        
$npx skills add hallmark

       

     

   
@@ -603,7 +681,8 @@
         
{{title}}

         
{{lede}}

         

-          
$npx skills add hallmark

+          
$npx skills add hallmark