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

docs: separate merged control labels and compact footer credits · unjs/unifont@e9042fe · GitHub

/ unifont Public

Commit e9042fe

Browse files
danielroe
committed
docs: separate merged control labels and compact footer credits
1 parent 16f41d2 commit e9042fe

5 files changed

Lines changed: 45 additions & 52 deletions

File tree

‎docs/app/components/CommandPalette.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,10 +276,14 @@ onMounted(() => {
276276
class="row__specimen"
277277
:style="{ fontFamily: `'${row.item.family}', var(--font-display)` }"
278278
>{{ row.item.family }}</span>
279+
{{ ' ' }}
279280
<span class="row__meta">{{ row.item.providers.join(' · ') }}</span>
280281
</template>
281282
<template v-else>
283+
<!-- Vue condenses whitespace between elements, so the separator is explicit or the
284+
label and the hint concatenate when the option is read out. -->
282285
<span class="row__label">{{ row.item.label }}</span>
286+
{{ ' ' }}
283287
<span class="row__meta">{{ row.item.hint }}</span>
284288
</template>
285289
</li>

‎docs/app/components/SiteFooter.vue‎

Lines changed: 31 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ const { data: credits } = await useFetch<ContributorsResponse>('/api/v1/contribu
99
})
1010
1111
const contributors = computed(() => credits.value?.contributors ?? [])
12+
// The API sorts by commit count, so the first entry leads.
13+
const top = computed(() => contributors.value[0]!)
1214
</script>
1315

1416
<template>
@@ -29,36 +31,31 @@ const contributors = computed(() => credits.value?.contributors ?? [])
2931
v-if="contributors.length"
3032
class="credits"
3133
>
32-
<ul
33-
class="credits__list"
34-
aria-label="Contributors"
34+
<!-- A link per avatar is a link and a list item per person once the styles are gone, so the
35+
row is decorative and the sentence below carries the same information as text. -->
36+
<div
37+
class="credits__row"
38+
aria-hidden="true"
3539
>
36-
<li
40+
<img
3741
v-for="person in contributors"
3842
:key="person.login"
43+
class="credits__avatar"
44+
:src="person.avatar"
45+
alt=""
46+
width="28"
47+
height="28"
48+
loading="lazy"
49+
decoding="async"
3950
>
40-
<!-- The avatar carries no text of its own, so the link is labelled instead. -->
41-
<a
42-
class="credits__person"
43-
:href="person.url"
44-
:aria-label="`${person.login}, ${person.contributions} ${person.contributions === 1 ? 'commit' : 'commits'}`"
45-
>
46-
<img
47-
class="credits__avatar"
48-
:src="person.avatar"
49-
alt=""
50-
width="28"
51-
height="28"
52-
loading="lazy"
53-
decoding="async"
54-
>
55-
</a>
56-
</li>
57-
</ul>
58-
<a
59-
class="credits__all"
60-
href="https://github.com/unjs/unifont/graphs/contributors"
61-
>all contributors</a>
51+
</div>
52+
<p class="credits__summary">
53+
{{ contributors.length }}
54+
{{ contributors.length === 1 ? 'person has' : 'people have' }}
55+
landed a commit, {{ top.login }} the most with {{ top.contributions }}
56+
{{ top.contributions === 1 ? 'commit' : 'commits' }}.
57+
<a href="https://github.com/unjs/unifont/graphs/contributors">all contributors</a>
58+
</p>
6259
</div>
6360

6461
<p class="colophon__line colophon__line--fine">
@@ -119,39 +116,25 @@ const contributors = computed(() => credits.value?.contributors ?? [])
119116
120117
.credits {
121118
display: flex;
122-
gap: var(--space-sm) var(--space-md);
123-
align-items: baseline;
124-
flex-wrap: wrap;
125-
margin-block: var(--space-xs);
119+
flex-direction: column;
120+
gap: var(--space-2xs);
121+
margin-block: var(--space-sm);
122+
padding-top: var(--space-sm);
123+
border-top: var(--rule-hair) solid var(--color-rule);
126124
}
127125
128-
.credits__list {
126+
.credits__row {
129127
display: flex;
130128
gap: var(--space-2xs);
131129
flex-wrap: wrap;
132130
min-height: 28px;
133-
margin: 0;
134-
padding: 0;
135-
list-style: none;
136131
}
137132
138-
.credits__all {
133+
.credits__summary {
139134
color: var(--color-neutral);
140-
font-family: var(--font-mono);
141135
font-size: var(--text-xs);
142136
}
143137
144-
.credits__person {
145-
display: block;
146-
border-radius: var(--radius-pill);
147-
text-decoration: none;
148-
transition: transform var(--dur-micro) var(--ease-out);
149-
}
150-
151-
.credits__person:hover {
152-
transform: translateY(-2px);
153-
}
154-
155138
.credits__avatar {
156139
display: block;
157140
width: 28px;
@@ -165,8 +148,7 @@ const contributors = computed(() => credits.value?.contributors ?? [])
165148
opacity var(--dur-short) var(--ease-out);
166149
}
167150
168-
.credits__person:hover .credits__avatar,
169-
.credits__person:focus-visible .credits__avatar {
151+
.credits__row:hover .credits__avatar {
170152
filter: none;
171153
opacity: 1;
172154
}

‎docs/app/components/SiteHeader.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ function isCurrent(to: string) {
3232
@click="palette.open()"
3333
>
3434
<span class="pill__label">Search every provider</span>
35+
<!-- Vue condenses whitespace between elements, so the separator is explicit or the two
36+
labels concatenate in the accessible name and in extracted text. -->
37+
{{ ' ' }}
3538
<kbd class="pill__hint">{{ shortcut }}</kbd>
3639
</button>
3740

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,7 @@ function turn(delta: number) {
195195
class="cell__specimen"
196196
:style="{ fontFamily: `'${entry.family}', var(--font-display)` }"
197197
>{{ entry.family }}</span>
198+
{{ ' ' }}
198199
<span class="cell__providers">{{ entry.providers.join(' · ') }}</span>
199200
</NuxtLink>
200201
</li>

‎docs/app/pages/index.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ await unifont.getFontProperties('Switzer')
5050
@click="palette.open()"
5151
>
5252
<span>Find a family</span>
53+
<!-- Vue condenses whitespace between elements, so the separator is explicit or the label
54+
and the shortcut concatenate in the accessible name and in extracted text. -->
55+
{{ ' ' }}
5356
<kbd>{{ shortcut }}</kbd>
5457
</button>
5558
<NuxtLink
@@ -386,7 +389,7 @@ await unifont.getFontProperties('Switzer')
386389
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
387390
gap: var(--space-2xl);
388391
align-items: start;
389-
padding-block: var(--space-3xl) var(--space-xl);
392+
padding-block: var(--space-2xl) var(--space-lg);
390393
border-bottom: var(--rule-hair) solid var(--color-rule);
391394
}
392395
@@ -433,7 +436,7 @@ await unifont.getFontProperties('Switzer')
433436
434437
/* ── Providers table ──────────────────────────────────────── */
435438
.providers {
436-
padding-block: var(--space-2xl);
439+
padding-block: var(--space-xl);
437440
border-bottom: var(--rule-hair) solid var(--color-rule);
438441
}
439442
@@ -513,7 +516,7 @@ await unifont.getFontProperties('Switzer')
513516
514517
.surfaces__row dt {
515518
font-family: var(--font-display);
516-
font-size: var(--text-md);
519+
font-size: var(--text-lg);
517520
}
518521
519522
.surfaces__row dd {

0 commit comments

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