External/hallmark
1
0
Fork 0
mirror of https://github.com/Nutlope/hallmark.git synced 2026-08-14 12:35:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Drop Roman numerals from skills section · perfect left-alignment

Browse Source 
· Removed the 4 .skill-row__num spans (I/II/III/IV) from index.html.
· Collapsed .skill-row__head from 4rem 1fr two-column grid to single
  column — section labels, verb headings, and body content all hang
  from the same left content edge now.
· Dropped the 4rem padding-inline-start from .skill-row__body and
  .skill-row__body--full so demo content aligns with the verb title
  above it (was previously indented to clear the numeral gutter).
· Removed the .skill-row__num base + per-theme override blocks from
  sections.css since the markup no longer exists.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Youssef
2026-05-07 10:46:57 +01:00
co-authored by Claude Opus 4.7
parent 4ebeedfa99
commit 2cd507718b
2 changed files with 4 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/css/sections.css
+4 -52
View File
@@ -572,50 +572,11 @@
.skill-row__head {
display: grid;
grid-template-columns: 4rem 1fr;
gap: var(--space-md);
align-items: start;
grid-template-columns: 1fr;
gap: var(--space-xs);
margin-block-end: var(--space-md);
}
@media (max-width: 60rem) {
.skill-row__head {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
}
.skill-row__num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(3.5rem, 5vw + 0.5rem, 6rem);
line-height: 0.9;
color: var(--color-muted);
letter-spacing: -0.01em;
user-select: none;
padding-block-start: 0.05em;
font-feature-settings: "tnum";
}
@media (max-width: 60rem) {
.skill-row__num { display: none; }
}
[data-theme="brutal"] .skill-row__num,
[data-theme="manifesto"] .skill-row__num,
[data-theme="terminal"] .skill-row__num,
[data-theme="sport"] .skill-row__num,
[data-theme="almanac"] .skill-row__num,
[data-theme="quiet"] .skill-row__num,
[data-theme="bloom"] .skill-row__num,
[data-theme="riso"] .skill-row__num {
font-family: var(--font-mono);
font-style: normal;
font-weight: 500;
font-size: clamp(3rem, 4.5vw + 0.4rem, 5rem);
}
.skill-row__head-body {
display: grid;
gap: var(--space-sm);
@@ -709,28 +670,19 @@
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--space-xl);
align-items: start;
padding-inline-start: 4rem;
}
@media (max-width: 60rem) {
.skill-row__body {
grid-template-columns: 1fr;
gap: var(--space-lg);
padding-inline-start: 0;
}
}
/* Full-width body — no right info column. Used by Refine + Redesign
so the before/after diptych takes the whole row width. */
/* Full-width body — no right info column. Used by Redesign so the
before/after diptych takes the whole row width. */
.skill-row__body--full {
grid-template-columns: 1fr;
padding-inline-start: 4rem;
}
@media (max-width: 60rem) {
.skill-row__body--full {
padding-inline-start: 0;
}
}
.skill-row__demo {
site/index.html
-4
View File
@@ -342,7 +342,6 @@
<!-- Row I — Build (default) -->
<li class="skill-row" data-verb="build">
<header class="skill-row__head">
<span class="skill-row__num num--roman" aria-hidden="true">I</span>
<div class="skill-row__head-body">
<h3 class="skill-row__title">Build <span class="skill-row__title-meta">(default)</span></h3>
<p class="skill-row__lede">Ask for a page. Get a page that doesn't look generated. Hallmark picks a macrostructure first, then dresses it — and refuses to repeat the same shape twice.</p>
@@ -372,7 +371,6 @@
<!-- Row II — Study (preserves the existing DNA cards as THE demo) -->
<li class="skill-row" data-verb="study">
<header class="skill-row__head">
<span class="skill-row__num num--roman" aria-hidden="true">II</span>
<div class="skill-row__head-body">
<h3 class="skill-row__title">Study</h3>
<p class="skill-row__lede">Paste a design you admire. Hallmark reads its structure, not its pixels — and returns a 10-field DNA card you can build against. Never copies. Never claims to ID fonts.</p>
@@ -407,7 +405,6 @@
<!-- Row III — Audit -->
<li class="skill-row" data-verb="audit">
<header class="skill-row__head">
<span class="skill-row__num num--roman" aria-hidden="true">III</span>
<div class="skill-row__head-body">
<h3 class="skill-row__title">Audit</h3>
<p class="skill-row__lede">Point Hallmark at a page. Get a ranked punch list of what's wrong — scored against the anti-pattern catalogue. <strong>No edits.</strong> Just the diagnosis.</p>
@@ -465,7 +462,6 @@
<!-- Row IV — Redesign -->
<li class="skill-row" data-verb="redesign">
<header class="skill-row__head">
<span class="skill-row__num num--roman" aria-hidden="true">IV</span>
<div class="skill-row__head-body">
<h3 class="skill-row__title">Redesign</h3>
<p class="skill-row__lede">Same content. Same brand. Different bones. Hallmark throws out the structural fingerprint and rebuilds with a deliberately different one — new section rhythm, new heading placement, new component voice.</p>