FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

docs: expose each family name once and tighten lower-page rhythm · unjs/unifont@16f41d2 · GitHub

/ unifont Public

Commit 16f41d2

Browse files
danielroe
committed
docs: expose each family name once and tighten lower-page rhythm
1 parent 3b2c74d commit 16f41d2

3 files changed

Lines changed: 20 additions & 34 deletions

File tree

‎docs/app/components/SiteFooter.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,16 @@ const contributors = computed(() => credits.value?.contributors ?? [])
3737
v-for="person in contributors"
3838
:key="person.login"
3939
>
40-
<!-- The avatar is the link, so its `alt` names the destination rather than the
41-
picture, and carries the commit count. -->
40+
<!-- The avatar carries no text of its own, so the link is labelled instead. -->
4241
<a
4342
class="credits__person"
4443
:href="person.url"
44+
:aria-label="`${person.login}, ${person.contributions} ${person.contributions === 1 ? 'commit' : 'commits'}`"
4545
>
4646
<img
4747
class="credits__avatar"
4848
:src="person.avatar"
49-
:alt="`${person.login} on GitHub, ${person.contributions} commits`"
49+
alt=""
5050
width="28"
5151
height="28"
5252
loading="lazy"
@@ -55,6 +55,10 @@ const contributors = computed(() => credits.value?.contributors ?? [])
5555
</a>
5656
</li>
5757
</ul>
58+
<a
59+
class="credits__all"
60+
href="https://github.com/unjs/unifont/graphs/contributors"
61+
>all contributors</a>
5862
</div>
5963

6064
<p class="colophon__line colophon__line--fine">
@@ -72,7 +76,7 @@ const contributors = computed(() => credits.value?.contributors ?? [])
7276

7377
<style scoped>
7478
.colophon {
75-
margin-top: var(--space-4xl);
79+
margin-top: var(--space-2xl);
7680
border-top: var(--rule-heavy) solid var(--color-ink);
7781
background: var(--color-paper-2);
7882
}
@@ -131,6 +135,12 @@ const contributors = computed(() => credits.value?.contributors ?? [])
131135
list-style: none;
132136
}
133137
138+
.credits__all {
139+
color: var(--color-neutral);
140+
font-family: var(--font-mono);
141+
font-size: var(--text-xs);
142+
}
143+
134144
.credits__person {
135145
display: block;
136146
border-radius: var(--radius-pill);

‎docs/app/pages/fonts/index.vue‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -190,13 +190,11 @@ function turn(delta: number) {
190190
@mouseenter="prefetch(entry.family)"
191191
@focus="prefetch(entry.family)"
192192
>
193-
<!-- Set twice, in its own face and in mono; only one of them is read out. -->
193+
<!-- The name is set once, in its own face, and is the link's accessible name. -->
194194
<span
195195
class="cell__specimen"
196-
aria-hidden="true"
197196
:style="{ fontFamily: `'${entry.family}', var(--font-display)` }"
198197
>{{ entry.family }}</span>
199-
<span class="cell__name">{{ entry.family }}</span>
200198
<span class="cell__providers">{{ entry.providers.join(' · ') }}</span>
201199
</NuxtLink>
202200
</li>
@@ -378,16 +376,8 @@ function turn(delta: number) {
378376
overflow-wrap: anywhere;
379377
}
380378
381-
.cell__name {
382-
margin-top: auto;
383-
font-size: var(--text-sm);
384-
}
385-
386-
.cell__link:hover .cell__name {
387-
color: var(--color-ink-strong);
388-
}
389-
390379
.cell__providers {
380+
margin-top: auto;
391381
color: var(--color-neutral);
392382
font-family: var(--font-mono);
393383
font-size: var(--text-xs);

‎docs/app/pages/index.vue‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,11 @@ await unifont.getFontProperties('Switzer')
8888
@mouseenter="prefetchFamilyData(family)"
8989
@focus="prefetchFamilyData(family)"
9090
>
91-
<!-- Set twice, in its own face and in mono; only one of them is read out. -->
91+
<!-- The name is set once, in its own face, and is the link's accessible name. -->
9292
<span
9393
class="cell__specimen"
94-
aria-hidden="true"
9594
:data-specimen="family"
9695
>{{ family }}</span>
97-
<span class="cell__name">{{ family }}</span>
9896
</NuxtLink>
9997
</li>
10098
</ul>
@@ -377,18 +375,6 @@ await unifont.getFontProperties('Switzer')
377375
overflow-wrap: anywhere;
378376
}
379377
380-
.cell__link:hover .cell__name {
381-
color: var(--color-ink-strong);
382-
}
383-
384-
.cell__name {
385-
margin-top: auto;
386-
color: var(--color-neutral);
387-
font-family: var(--font-mono);
388-
font-size: var(--text-xs);
389-
transition: color var(--dur-micro) var(--ease-out);
390-
}
391-
392378
.index__more {
393379
margin-top: var(--space-lg);
394380
font-size: var(--text-sm);
@@ -504,7 +490,7 @@ await unifont.getFontProperties('Switzer')
504490
505491
/* ── Surfaces ─────────────────────────────────────────────── */
506492
.surfaces {
507-
padding-block: var(--space-2xl) var(--space-xl);
493+
padding-block: var(--space-xl) var(--space-lg);
508494
}
509495
510496
.surfaces h2 {
@@ -519,8 +505,8 @@ await unifont.getFontProperties('Switzer')
519505
520506
.surfaces__row {
521507
display: grid;
522-
grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
523-
gap: var(--space-md) var(--space-xl);
508+
grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
509+
gap: var(--space-sm) var(--space-xl);
524510
padding-block: var(--space-md);
525511
border-top: var(--rule-hair) solid var(--color-rule);
526512
}

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL