Skip to content

Commit ba79696

Browse files
Adebesin-CellAdebesin-Cell
committed
refactor: per-variant downloads, better spacing, friendlier guidelines
- Each dark/light logo preview now has its own SVG/PNG download buttons - Increased spacing between logo cards - Guidelines reworded to a friendly blockquote ("just a note") - Removed app icon from logos (not relevant to branding) - Removed colors section
1 parent f22cec2 commit ba79696

File tree

2 files changed

+85
-55
lines changed

2 files changed

+85
-55
lines changed

‎app/pages/brand.vue‎

Lines changed: 83 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const logos = [
3333
altLight: () => $t('brand.logos.mark_light_alt'),
3434
width: 153,
3535
height: 153,
36-
span: false,
36+
span: true,
3737
},
3838
]
3939
@@ -80,69 +80,99 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
8080
{{ $t('brand.logos.description') }}
8181
</p>
8282

83-
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
83+
<div class="space-y-10">
8484
<figure
8585
v-for="logo in logos"
8686
:key="logo.src"
8787
class="m-0"
88-
:class="{ 'md:col-span-2': logo.span }"
8988
role="group"
9089
:aria-label="logo.name()"
9190
>
92-
<div class="grid grid-cols-2 gap-3 mb-3">
93-
<!-- Dark background preview -->
94-
<div
95-
class="bg-[#0a0a0a] rounded-lg p-6 sm:p-8 flex items-center justify-center border border-border min-h-32"
96-
>
97-
<img
98-
:src="logo.src"
99-
:alt="logo.altDark()"
100-
class="max-h-16 w-auto max-w-full"
101-
:class="{ 'max-h-20': logo.span }"
102-
/>
103-
</div>
104-
<!-- Light background preview -->
105-
<div
106-
class="bg-white rounded-lg p-6 sm:p-8 flex items-center justify-center border border-border min-h-32"
107-
>
108-
<AppLogo
109-
v-if="logo.src === '/logo.svg'"
110-
class="max-h-20 w-auto max-w-full text-[#0a0a0a]"
111-
:aria-label="logo.altLight()"
112-
/>
113-
<img
114-
v-else
115-
:src="logo.src"
116-
:alt="logo.altLight()"
117-
class="max-h-16 w-auto max-w-full"
118-
:style="logo.src === '/logo-mark.svg' ? 'filter: invert(1)' : ''"
119-
/>
120-
</div>
121-
</div>
91+
<figcaption class="font-mono text-sm text-fg mb-3">
92+
{{ logo.name() }}
93+
</figcaption>
12294

123-
<figcaption class="flex items-center justify-between gap-3">
124-
<span class="font-mono text-sm text-fg">{{ logo.name() }}</span>
125-
<div class="flex items-center gap-2">
126-
<a
127-
:href="logo.src"
128-
:download="logo.src.replace('/', '')"
129-
class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted border border-border rounded-md px-2.5 py-1 hover:bg-bg-muted hover:text-fg transition-colors duration-200 no-underline focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
130-
:aria-label="$t('brand.logos.download_svg_aria', { name: logo.name() })"
95+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
96+
<!-- Dark variant -->
97+
<div>
98+
<div
99+
class="bg-[#0a0a0a] rounded-lg p-6 sm:p-8 flex items-center justify-center border border-border min-h-32 mb-2"
131100
>
132-
<span class="i-lucide:download w-3.5 h-3.5" aria-hidden="true" />
133-
{{ $t('brand.logos.download_svg') }}
134-
</a>
135-
<ButtonBase
136-
size="sm"
137-
classicon="i-lucide:download"
138-
:aria-label="$t('brand.logos.download_png_aria', { name: logo.name() })"
139-
:disabled="pngLoading.has(logo.src)"
140-
@click="handlePngDownload(logo)"
101+
<img
102+
:src="logo.src"
103+
:alt="logo.altDark()"
104+
class="max-h-16 w-auto max-w-full"
105+
:class="{ 'max-h-20': logo.span }"
106+
/>
107+
</div>
108+
<div class="flex items-center justify-between">
109+
<span class="text-xs text-fg-subtle font-mono">{{ $t('brand.logos.on_dark') }}</span>
110+
<div class="flex items-center gap-2">
111+
<a
112+
:href="logo.src"
113+
:download="logo.src.replace('/', '')"
114+
class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted border border-border rounded-md px-2.5 py-1 hover:bg-bg-muted hover:text-fg transition-colors duration-200 no-underline focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
115+
:aria-label="$t('brand.logos.download_svg_aria', { name: `${logo.name()} (${$t('brand.logos.on_dark')})` })"
116+
>
117+
<span class="i-lucide:download w-3.5 h-3.5" aria-hidden="true" />
118+
{{ $t('brand.logos.download_svg') }}
119+
</a>
120+
<ButtonBase
121+
size="sm"
122+
classicon="i-lucide:download"
123+
:aria-label="$t('brand.logos.download_png_aria', { name: `${logo.name()} (${$t('brand.logos.on_dark')})` })"
124+
:disabled="pngLoading.has(logo.src)"
125+
@click="handlePngDownload(logo)"
126+
>
127+
{{ $t('brand.logos.download_png') }}
128+
</ButtonBase>
129+
</div>
130+
</div>
131+
</div>
132+
133+
<!-- Light variant -->
134+
<div>
135+
<div
136+
class="bg-white rounded-lg p-6 sm:p-8 flex items-center justify-center border border-border min-h-32 mb-2"
141137
>
142-
{{ $t('brand.logos.download_png') }}
143-
</ButtonBase>
138+
<AppLogo
139+
v-if="logo.src === '/logo.svg'"
140+
class="max-h-20 w-auto max-w-full text-[#0a0a0a]"
141+
:aria-label="logo.altLight()"
142+
/>
143+
<img
144+
v-else
145+
:src="logo.src"
146+
:alt="logo.altLight()"
147+
class="max-h-16 w-auto max-w-full"
148+
:style="logo.src === '/logo-mark.svg' ? 'filter: invert(1)' : ''"
149+
/>
150+
</div>
151+
<div class="flex items-center justify-between">
152+
<span class="text-xs text-fg-subtle font-mono">{{ $t('brand.logos.on_light') }}</span>
153+
<div class="flex items-center gap-2">
154+
<a
155+
:href="logo.src"
156+
:download="logo.src.replace('/', '')"
157+
class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted border border-border rounded-md px-2.5 py-1 hover:bg-bg-muted hover:text-fg transition-colors duration-200 no-underline focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
158+
:aria-label="$t('brand.logos.download_svg_aria', { name: `${logo.name()} (${$t('brand.logos.on_light')})` })"
159+
>
160+
<span class="i-lucide:download w-3.5 h-3.5" aria-hidden="true" />
161+
{{ $t('brand.logos.download_svg') }}
162+
</a>
163+
<ButtonBase
164+
size="sm"
165+
classicon="i-lucide:download"
166+
:aria-label="$t('brand.logos.download_png_aria', { name: `${logo.name()} (${$t('brand.logos.on_light')})` })"
167+
:disabled="pngLoading.has(logo.src)"
168+
@click="handlePngDownload(logo)"
169+
>
170+
{{ $t('brand.logos.download_png') }}
171+
</ButtonBase>
172+
</div>
173+
</div>
144174
</div>
145-
</figcaption>
175+
</div>
146176
</figure>
147177
</div>
148178
</section>

‎i18n/locales/en.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1511,8 +1511,8 @@
15111511
"numbers": "0123456789"
15121512
},
15131513
"guidelines": {
1514-
"title": "guidelines",
1515-
"message": "Please leave sufficient contrast with the background and a large enough logo size (more than 24px). This is important for our users' accessibility, and we hope you'll help us uphold these values."
1514+
"title": "just a note",
1515+
"message": "When using the npmx logo, we kindly ask that you keep it legible — ensure there's enough contrast against the background and don't go smaller than 24px. Accessibility matters to us, and we appreciate you keeping that in mind."
15161516
}
15171517
}
15181518
}

0 commit comments

Comments
 (0)