skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Restyle font pair cards after fonttrio's pairing anatomy.

Browse Source 
The heading family name sits big in its own face; one sentence in the
body face names its partner in bold and carries the why line. The
sentence demonstrates the body font, so the Heading/Body labels go.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
2026-09-01 10:02:39 +05:00
co-authored by Cursor
parent 51ce043130
commit 9af6fc1cb7
2 changed files with 12 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
picker/pages/index.astro
+1 -4
View File
@@ -391,11 +391,8 @@ const roles = [
<input type="radio" name="font-pair" />
<span class="picker-strategy-indicator" aria-hidden="true"></span>
<span class="picker-type-copy">
<span class="picker-type-role">Heading</span>
<strong class="picker-type-sample-heading" data-pair-heading></strong>
<span class="picker-type-role">Body</span>
<span class="picker-type-sample-body" data-pair-body></span>
<span class="picker-type-why" data-pair-why></span>
<span class="picker-type-desc">Paired with <b data-pair-body></b>. <span data-pair-why></span></span>
</span>
</label>
</template>
picker/styles/picker.css
+11 -22
View File
@@ -1812,40 +1812,29 @@ html.light .ks-button.ks-button-ghost:hover {
display: grid;
}
.picker-type-role {
color: var(--ks-text-muted);
font-family: var(--ks-mono);
font-size: 0.62rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Fonttrio-style specimen: the heading family name set big in its own
face, then one sentence in the body face that names its partner. The
sentence demonstrates the body font, so no Heading/Body labels. */
.picker-type-sample-heading {
margin: 6px 0 14px;
color: var(--ks-champagne);
font-family: var(--pair-heading, var(--ks-font-display));
font-size: 1.65rem;
font-weight: var(--pair-heading-weight, 600);
line-height: 1.1;
line-height: 1.15;
}
.picker-type-sample-body {
margin-top: 6px;
.picker-type-desc {
margin-top: 10px;
color: var(--ks-text);
font-family: var(--pair-body, var(--ks-font));
font-size: var(--ks-type-body-size);
font-size: 0.92rem;
font-weight: var(--pair-body-weight, 400);
line-height: 1.3;
line-height: 1.55;
}
.picker-type-why {
margin-top: 12px;
color: var(--ks-text-muted);
font-family: var(--pair-body, var(--ks-font));
font-size: 0.78rem;
line-height: 1.5;
.picker-type-desc b {
font: inherit;
font-weight: 700;
}
.picker-preview-type {