Skip to content

Commit b090de5

Browse files
djacuthilobillerbeck
djacu
and
thilobillerbeck
authored
branding-page: init (#1819)
Adds a new flake input for the branding repository. Adds the branding media-kit and guide to the development environment and website derivation. Creates a new page for branding assets and the guide and adds a link in the footer. --------- Co-authored-by: Thilo Billerbeck <[email protected]>
1 parent b95204d commit b090de5

File tree

6 files changed

+272
-19
lines changed

6 files changed

+272
-19
lines changed

‎core/src/assets/image/branding_guide_title_page.png‎

60.5 KB
Loading

‎core/src/components/pages/branding/LogoContainer.astro‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
import Button from '@/components/ui/Button.astro';
3+
import { Code } from 'astro:components';
4+
5+
const {
6+
type = 'logo',
7+
fillStyle = 'gradient',
8+
color = 'rainbow',
9+
fontColor = 'black',
10+
orientation = 'horizontal',
11+
style = 'regular',
12+
variant = 'recommended',
13+
} = Astro.props;
14+
15+
const brandUrl = `https://brand.nixos.org/logos/nixos-${type}-${color}-${fillStyle}-${fontColor}-${style}-${orientation}-${variant}.svg`;
16+
---
17+
18+
<div class="bg-secondary-afghani-blue-95 rounded-2xl p-4">
19+
<img
20+
src={brandUrl}
21+
class:list={[
22+
'w-auto rounded-2xl',
23+
fontColor === 'white' ? 'bg-primary-black' : 'bg-primary-white',
24+
]}
25+
/>
26+
<div class="mb-3 flex items-center gap-2 pt-4">
27+
<Code class="rounded-xl px-2 py-1" code={brandUrl} />
28+
</div>
29+
<div class="flex w-full justify-end gap-2">
30+
<Button
31+
color="semidarkblue"
32+
size="sm-mobfull"
33+
href={brandUrl}
34+
icon="mdi:download"
35+
label="Download"
36+
/>
37+
<Button
38+
color="semidarkblue"
39+
size="sm-mobfull"
40+
data-url={brandUrl}
41+
classList={['hidden']}
42+
icon="mdi:content-copy"
43+
label="Copy URL"
44+
/>
45+
</div>
46+
</div>
47+
48+
<script>
49+
document.querySelectorAll('button[data-url]').forEach((button) => {
50+
button.classList.remove('hidden');
51+
button.addEventListener('click', () => {
52+
const url = button.getAttribute('data-url');
53+
navigator.clipboard.writeText(url).then(
54+
function () {
55+
button.classList.toggle('bg-accent-zambian-green-55!');
56+
setTimeout(() => {
57+
button.classList.toggle('bg-accent-zambian-green-55!');
58+
}, 1000);
59+
},
60+
function (err) {
61+
console.error('Async: Could not copy text: ', err);
62+
button.classList.toggle('bg-accent-persian-orange-55!');
63+
setTimeout(() => {
64+
button.classList.toggle('bg-accent-persian-orange-55!');
65+
}, 1000);
66+
},
67+
);
68+
});
69+
});
70+
</script>

‎core/src/components/ui/Button.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const {
5757
label,
5858
nonPublic = false,
5959
icon = undefined,
60+
...other
6061
} = Astro.props;
6162
6263
const setIconSize = (size: string) => {
@@ -90,6 +91,7 @@ const setIconSize = (size: string) => {
9091
icon && 'flex items-center justify-start gap-4',
9192
!icon && 'flex items-center justify-center gap-1',
9293
]}
94+
{...other}
9395
>
9496
{icon && <Icon name={icon} size={setIconSize(size)} />}
9597
{nonPublic && <Icon name="mdi:lock" />}
@@ -112,9 +114,10 @@ const setIconSize = (size: string) => {
112114
classList,
113115
icon && 'flex items-center justify-start gap-4',
114116
]}
117+
{...other}
115118
>
116119
{icon && <Icon name={icon} />}
117-
<slot />
120+
{label || <slot />}
118121
</button>
119122
)
120123
}

‎core/src/content/menus/footer.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ sections:
1111
link: https://reproducible.nixos.org/
1212
- name: Security
1313
link: /community/teams/security
14+
- name: Branding
15+
link: /branding
1416
- name: Summer of Nix
1517
link: https://github.com/ngi-nix/summer-of-nix
1618
- name: Devices

‎core/src/pages/branding.astro‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
import LogoContainer from '@/components/pages/branding/LogoContainer.astro';
3+
import Container from '../components/layout/Container.astro';
4+
import PageHeader from '../components/layout/PageHeader.astro';
5+
import Layout from '../layouts/Layout.astro';
6+
7+
import BrandingGuideTitlePage from '@/assets/image/branding_guide_title_page.png';
8+
import Button from '@/components/ui/Button.astro';
9+
import { Image } from 'astro:assets';
10+
---
11+
12+
<Layout title="Branding">
13+
<PageHeader text="Branding" />
14+
<Container>
15+
<div
16+
class="bg-secondary-afghani-blue-95 mt-16 flex flex-col gap-4 rounded-2xl p-4 md:flex-row"
17+
>
18+
<Image
19+
class="w-auto md:h-56"
20+
src={BrandingGuideTitlePage}
21+
alt="Branding Guide Title Page"
22+
/>
23+
<div
24+
class="flex flex-2 flex-col items-start space-y-3 self-center leading-relaxed font-extralight"
25+
>
26+
<h2
27+
class="font-heading text-secondary-afghani-blue text-4xl leading-none font-bold"
28+
>
29+
NixOS Branding Guide
30+
</h2>
31+
<p class="mb-4">
32+
The <a
33+
href="https://brand.nixos.org/documents/nixos-branding-guide.pdf"
34+
download>NixOS Branding Guide</a
35+
> outlines the official visual identity of the NixOS project. It provides
36+
clear guidance on how to use the NixOS logo, colors, typography, and other
37+
brand elements across digital and print media. Whether you're creating
38+
a blog post, a presentation, a sticker, or a t-shirt, this guide helps
39+
ensure your materials reflect the NixOS brand consistently and respectfully.
40+
</p>
41+
<Button
42+
color="semidarkblue"
43+
size="sm-mobfull"
44+
href="https://brand.nixos.org/documents/nixos-branding-guide.pdf"
45+
icon="mdi:download"
46+
label="Download Branding Guide"
47+
/>
48+
</div>
49+
</div>
50+
</Container>
51+
<Container class="mt-16 space-y-4 leading-relaxed font-extralight">
52+
<h2
53+
class="font-heading text-secondary-afghani-blue mt-8 text-4xl leading-none font-bold"
54+
>
55+
NixOS Logos
56+
</h2>
57+
<p>
58+
Below are the official NixOS logo variants. These assets are available for
59+
use in accordance with the guidelines set out in the Branding Guide. Each
60+
version is designed for a specific use case—horizontal or vertical layout,
61+
dark or light backgrounds.
62+
</p>
63+
<p>
64+
Please refer to the Branding Guide for instructions on proper usage, clear
65+
space, and background contrast requirements.
66+
</p>
67+
<div class="grid grid-cols-1 gap-12 pb-12 md:grid-cols-2 md:gap-4">
68+
<LogoContainer
69+
type="logo"
70+
fillStyle="gradient"
71+
color="default"
72+
fontColor="black"
73+
orientation="horizontal"
74+
style="regular"
75+
variant="recommended"
76+
/>
77+
<LogoContainer
78+
type="logo"
79+
fillStyle="gradient"
80+
color="default"
81+
fontColor="white"
82+
orientation="horizontal"
83+
style="regular"
84+
variant="recommended"
85+
/>
86+
<LogoContainer
87+
type="logo"
88+
fillStyle="gradient"
89+
color="default"
90+
fontColor="black"
91+
orientation="vertical"
92+
style="regular"
93+
variant="recommended"
94+
/>
95+
<LogoContainer
96+
type="logo"
97+
fillStyle="gradient"
98+
color="default"
99+
fontColor="white"
100+
orientation="vertical"
101+
style="regular"
102+
variant="recommended"
103+
/>
104+
<LogoContainer
105+
type="logo"
106+
fillStyle="flat"
107+
color="black"
108+
fontColor="black"
109+
orientation="horizontal"
110+
style="regular"
111+
variant="recommended"
112+
/>
113+
<LogoContainer
114+
type="logo"
115+
fillStyle="flat"
116+
color="white"
117+
fontColor="white"
118+
orientation="horizontal"
119+
style="regular"
120+
variant="recommended"
121+
/>
122+
<LogoContainer
123+
type="logo"
124+
fillStyle="flat"
125+
color="black"
126+
fontColor="black"
127+
orientation="vertical"
128+
style="regular"
129+
variant="recommended"
130+
/>
131+
<LogoContainer
132+
type="logo"
133+
fillStyle="flat"
134+
color="white"
135+
fontColor="white"
136+
orientation="vertical"
137+
style="regular"
138+
variant="recommended"
139+
/>
140+
<LogoContainer
141+
type="logo"
142+
fillStyle="gradient"
143+
color="rainbow"
144+
fontColor="black"
145+
orientation="horizontal"
146+
style="regular"
147+
variant="recommended"
148+
/>
149+
<LogoContainer
150+
type="logo"
151+
fillStyle="gradient"
152+
color="rainbow"
153+
fontColor="white"
154+
orientation="horizontal"
155+
style="regular"
156+
variant="recommended"
157+
/>
158+
<LogoContainer
159+
type="logo"
160+
fillStyle="gradient"
161+
color="rainbow"
162+
fontColor="black"
163+
orientation="vertical"
164+
style="regular"
165+
variant="recommended"
166+
/>
167+
<LogoContainer
168+
type="logo"
169+
fillStyle="gradient"
170+
color="rainbow"
171+
fontColor="white"
172+
orientation="vertical"
173+
style="regular"
174+
variant="recommended"
175+
/>
176+
</div>
177+
</Container>
178+
</Layout>

‎flake.lock‎

Lines changed: 18 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)