Skip to content

Commit 0b3e266

Browse files
pojntfxpojntfx
committed
feat: Add gradients to home page based on the Vancouver Flag colour palette
Signed-off-by: Felicitas Pojtinger <felicitas@pojtinger.com>
1 parent fc07064 commit 0b3e266

4 files changed

Lines changed: 345 additions & 44 deletions

File tree

‎assets/scss/main.scss‎

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,318 @@ $pf-v6-global--image-path: "../../images";
7575
--pf-t--global--font--weight--300: 700;
7676
}
7777

78+
// We want to use the Vancouver flag palette (blue #00529B, green #00703C, yellow #FFCC00, black, white)
79+
:root {
80+
--pf-x-hero-gradient-end: #c5e9d6;
81+
82+
--pf-t--color--blue--10: #f0f6ff;
83+
--pf-t--color--blue--20: #dceafb;
84+
--pf-t--color--blue--30: #b8d6f7;
85+
--pf-t--color--blue--40: #7ab8ed;
86+
--pf-t--color--blue--50: #00529b;
87+
--pf-t--color--blue--60: #003d74;
88+
--pf-t--color--blue--70: #002d57;
89+
--pf-t--color--blue--80: #001e3a;
90+
91+
--pf-t--color--green--10: #ddf0e5;
92+
--pf-t--color--green--20: #b3dfca;
93+
--pf-t--color--green--30: #6dbf93;
94+
--pf-t--color--green--40: #339f66;
95+
--pf-t--color--green--50: #00703c;
96+
--pf-t--color--green--60: #00572f;
97+
--pf-t--color--green--70: #003d21;
98+
--pf-t--color--green--80: #002615;
99+
100+
--pf-t--color--yellow--10: #fff5cc;
101+
--pf-t--color--yellow--20: #ffe680;
102+
--pf-t--color--yellow--30: #ffcc00;
103+
--pf-t--color--yellow--40: #d9ad00;
104+
--pf-t--color--yellow--50: #b38e00;
105+
--pf-t--color--yellow--60: #8c6f00;
106+
--pf-t--color--yellow--70: #665100;
107+
--pf-t--color--yellow--80: #4d3d00;
108+
109+
--pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
110+
--pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
111+
--pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
112+
--pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
113+
--pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
114+
--pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
115+
--pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
116+
--pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
117+
118+
--pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50);
119+
--pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60);
120+
--pf-t--global--focus-ring--color--default: var(
121+
--pf-t--global--focus-ring--color--100
122+
);
123+
124+
--pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
125+
--pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
126+
--pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
127+
--pf-t--global--text--color--link--default: var(
128+
--pf-t--global--text--color--link--100
129+
);
130+
--pf-t--global--text--color--link--hover: var(
131+
--pf-t--global--text--color--link--200
132+
);
133+
134+
--pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
135+
--pf-t--global--border--color--clicked: var(
136+
--pf-t--global--color--brand--200
137+
);
138+
--pf-t--global--border--color--brand--default: var(
139+
--pf-t--global--color--brand--default
140+
);
141+
--pf-t--global--border--color--brand--hover: var(
142+
--pf-t--global--color--brand--hover
143+
);
144+
--pf-t--global--border--color--brand--clicked: var(
145+
--pf-t--global--color--brand--clicked
146+
);
147+
148+
--pf-t--global--icon--color--brand--default: var(
149+
--pf-t--global--color--brand--default
150+
);
151+
--pf-t--global--icon--color--brand--hover: var(
152+
--pf-t--global--color--brand--hover
153+
);
154+
--pf-t--global--icon--color--brand--clicked: var(
155+
--pf-t--global--color--brand--clicked
156+
);
157+
158+
--pf-t--global--text--color--brand--default: var(
159+
--pf-t--global--color--brand--default
160+
);
161+
--pf-t--global--text--color--brand--hover: var(
162+
--pf-t--global--color--brand--hover
163+
);
164+
--pf-t--global--text--color--brand--clicked: var(
165+
--pf-t--global--color--brand--clicked
166+
);
167+
168+
--pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
169+
--pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
170+
171+
--pf-t--global--color--status--unread--default: var(
172+
--pf-t--global--color--brand--default
173+
);
174+
--pf-t--global--color--status--unread--hover: var(
175+
--pf-t--global--color--brand--hover
176+
);
177+
--pf-t--global--color--status--unread--clicked: var(
178+
--pf-t--global--color--brand--clicked
179+
);
180+
181+
--pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
182+
--pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
183+
--pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
184+
--pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
185+
--pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
186+
187+
--pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
188+
--pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
189+
--pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
190+
--pf-t--global--color--nonstatus--green--400: var(--pf-t--color--green--60);
191+
--pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
192+
193+
--pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
194+
--pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
195+
--pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
196+
--pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
197+
--pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
198+
199+
--pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
200+
--pf-t--global--color--status--success--150: var(--pf-t--color--green--60);
201+
--pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
202+
--pf-t--global--color--status--success--300: var(--pf-t--color--green--80);
203+
204+
--pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
205+
--pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
206+
--pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
207+
--pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
208+
--pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
209+
--pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
210+
211+
--pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
212+
--pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
213+
--pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
214+
--pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
215+
216+
--pf-t--global--background--color--highlight--100: var(
217+
--pf-t--color--yellow--30
218+
);
219+
--pf-t--global--background--color--highlight--200: var(
220+
--pf-t--color--yellow--40
221+
);
222+
223+
--pf-t--global--color--severity--moderate--100: var(
224+
--pf-t--color--yellow--40
225+
);
226+
--pf-t--global--color--severity--moderate--200: var(
227+
--pf-t--color--yellow--70
228+
);
229+
230+
--pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
231+
--pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
232+
--pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
233+
--pf-t--global--dark--color--severity--none--100: var(
234+
--pf-t--color--blue--30
235+
);
236+
--pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
237+
--pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
238+
--pf-t--global--dark--text--color--link--300: var(--pf-t--color--blue--10);
239+
--pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30);
240+
--pf-t--global--dark--color--nonstatus--blue--100: var(
241+
--pf-t--color--blue--30
242+
);
243+
--pf-t--global--dark--color--nonstatus--blue--200: var(
244+
--pf-t--color--blue--20
245+
);
246+
--pf-t--global--dark--color--nonstatus--blue--300: var(
247+
--pf-t--color--blue--10
248+
);
249+
--pf-t--global--dark--color--nonstatus--green--100: var(
250+
--pf-t--color--green--30
251+
);
252+
--pf-t--global--dark--color--nonstatus--green--200: var(
253+
--pf-t--color--green--20
254+
);
255+
--pf-t--global--dark--color--nonstatus--green--300: var(
256+
--pf-t--color--green--10
257+
);
258+
--pf-t--global--dark--color--nonstatus--yellow--100: var(
259+
--pf-t--color--yellow--30
260+
);
261+
--pf-t--global--dark--color--nonstatus--yellow--200: var(
262+
--pf-t--color--yellow--20
263+
);
264+
--pf-t--global--dark--color--nonstatus--yellow--300: var(
265+
--pf-t--color--yellow--10
266+
);
267+
--pf-t--global--dark--color--status--success--100: var(
268+
--pf-t--color--green--40
269+
);
270+
--pf-t--global--dark--color--status--success--200: var(
271+
--pf-t--color--green--30
272+
);
273+
--pf-t--global--dark--color--status--success--300: var(
274+
--pf-t--color--green--20
275+
);
276+
--pf-t--global--dark--color--status--warning--100: var(
277+
--pf-t--color--yellow--30
278+
);
279+
--pf-t--global--dark--color--status--warning--200: var(
280+
--pf-t--color--yellow--20
281+
);
282+
--pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
283+
--pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
284+
--pf-t--global--dark--background--color--highlight--100: var(
285+
--pf-t--color--yellow--20
286+
);
287+
--pf-t--global--dark--background--color--highlight--200: var(
288+
--pf-t--color--yellow--30
289+
);
290+
}
291+
292+
// We need to manually overwrite the colours in dark mode to be lighter,
293+
// else the contrast gets too low
294+
:root.pf-v6-theme-dark {
295+
--pf-t--color--blue--10: #f0f6ff;
296+
--pf-t--color--blue--20: #dceafb;
297+
--pf-t--color--blue--30: #b8d6f7;
298+
--pf-t--color--blue--40: #7ab8ed;
299+
--pf-t--color--green--10: #e8f7ed;
300+
--pf-t--color--green--20: #c2ebd3;
301+
--pf-t--color--green--30: #7dd4a3;
302+
--pf-t--color--green--40: #40b876;
303+
--pf-t--color--yellow--10: #fff8e0;
304+
--pf-t--color--yellow--20: #ffeda3;
305+
--pf-t--color--yellow--30: #ffcc00;
306+
307+
--pf-t--global--color--brand--default: #b8d6f7;
308+
--pf-t--global--color--brand--hover: #dceafb;
309+
--pf-t--global--color--brand--clicked: #dceafb;
310+
--pf-t--global--color--brand--100: #b8d6f7;
311+
--pf-t--global--color--brand--200: #dceafb;
312+
--pf-t--global--color--brand--300: #f0f6ff;
313+
314+
--pf-t--global--text--color--link--default: #b8d6f7;
315+
--pf-t--global--text--color--link--hover: #dceafb;
316+
--pf-t--global--text--color--link--100: #b8d6f7;
317+
--pf-t--global--text--color--link--200: #dceafb;
318+
--pf-t--global--text--color--link--250: #f0f6ff;
319+
320+
--pf-t--global--focus-ring--color--100: #b8d6f7;
321+
--pf-t--global--focus-ring--color--default: #b8d6f7;
322+
323+
--pf-t--global--border--color--hover: #b8d6f7;
324+
--pf-t--global--border--color--clicked: #dceafb;
325+
326+
--pf-t--global--text--color--brand--default: #b8d6f7;
327+
--pf-t--global--text--color--brand--hover: #dceafb;
328+
--pf-t--global--text--color--brand--clicked: #dceafb;
329+
--pf-t--global--icon--color--brand--default: #b8d6f7;
330+
--pf-t--global--icon--color--brand--hover: #dceafb;
331+
--pf-t--global--icon--color--brand--clicked: #dceafb;
332+
--pf-t--global--border--color--brand--default: #b8d6f7;
333+
--pf-t--global--border--color--brand--hover: #dceafb;
334+
--pf-t--global--border--color--brand--clicked: #dceafb;
335+
336+
--pf-t--global--color--status--unread--default: #b8d6f7;
337+
--pf-t--global--color--status--unread--hover: #dceafb;
338+
--pf-t--global--color--status--unread--clicked: #dceafb;
339+
340+
--pf-t--global--color--severity--none--100: #7ab8ed;
341+
--pf-t--global--color--severity--none--200: #003d74;
342+
343+
--pf-x-hero-gradient-end: #00572f;
344+
}
345+
346+
// The usually gray palette should be tinted blueish
347+
:root {
348+
--pf-t--color--gray--10: #eff3f7;
349+
--pf-t--color--gray--20: #dce3ea;
350+
--pf-t--color--gray--30: #c2cbd4;
351+
--pf-t--color--gray--40: #9ba6b2;
352+
--pf-t--color--gray--50: #6a7686;
353+
--pf-t--color--gray--60: #495461;
354+
--pf-t--color--gray--70: #343e4b;
355+
--pf-t--color--gray--80: #262f3a;
356+
--pf-t--color--gray--90: #1b2431;
357+
--pf-t--color--gray--95: #111a26;
358+
}
359+
360+
.pf-v6-c-nav {
361+
--pf-v6-c-nav__link--m-current--BackgroundColor: color-mix(
362+
in srgb,
363+
var(--pf-t--global--color--brand--default) 15%,
364+
var(--pf-t--global--background--color--primary--default)
365+
);
366+
}
367+
368+
.pf-v6-c-button.pf-m-primary {
369+
--pf-v6-c-button--m-primary--BackgroundColor: #00703c;
370+
--pf-v6-c-button--m-primary--hover--BackgroundColor: #00572f;
371+
--pf-v6-c-button--m-primary--m-clicked--BackgroundColor: #00572f;
372+
}
373+
374+
:root.pf-v6-theme-dark .pf-v6-c-button.pf-m-primary {
375+
--pf-v6-c-button--m-primary--BackgroundColor: #4cc88a;
376+
--pf-v6-c-button--m-primary--hover--BackgroundColor: #5dd69a;
377+
--pf-v6-c-button--m-primary--m-clicked--BackgroundColor: #5dd69a;
378+
--pf-v6-c-button--m-primary--Color: #0d1520;
379+
--pf-v6-c-button--m-primary--hover--Color: #0d1520;
380+
--pf-v6-c-button--m-primary--m-clicked--Color: #0d1520;
381+
}
382+
383+
html {
384+
background-color: var(--pf-t--global--background--color--secondary--default);
385+
}
386+
387+
luma-next-event .pf-v6-c-card {
388+
box-shadow: var(--pf-t--global--box-shadow--md);
389+
}
78390

79391
$font-path: "../../webfonts";
80392
@import "@fortawesome/fontawesome-free/scss/fontawesome";

‎layouts/_partials/footer.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
{{ $f := .Site.Data.content.footer }}
2+
{{ $isHome := .IsHome }}
23
<footer
34
class="pf-v6-c-page__main-section pf-m-no-fill pf-m-limit-width pf-m-align-center"
45
style="
5-
--pf-v6-c-page__main-section--BackgroundColor: var(
6-
--pf-t--global--background--color--secondary--default
7-
);
6+
{{ if $isHome }}
7+
--pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8+
{{ else }}
9+
background: linear-gradient(var(--pf-t--global--background--color--primary--default) 0%, var(--pf-t--global--background--color--secondary--default) 100%);
10+
{{ end }}
811
"
912
>
1013
<div

‎layouts/_partials/section-home.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<section
33
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
44
style="
5-
background: linear-gradient(color-mix(in srgb, var(--pf-t--global--background--color--primary--default) 80%, transparent) 0%, var(--pf-t--global--background--color--primary--default) 100%), url('{{ "design/lee-robinson-Yc9h5SJdEzI-unsplash.jpg" | relURL }}') center / cover;
5+
background: linear-gradient(color-mix(in srgb, var(--pf-t--global--background--color--primary--default) 80%, transparent) 0%, var(--pf-x-hero-gradient-end) 100%), url('{{ "design/lee-robinson-Yc9h5SJdEzI-unsplash.jpg" | relURL }}') center / cover;
66
padding-block: var(--pf-t--global--spacer--3xl);
77
"
88
>
@@ -53,6 +53,7 @@ <h1 class="pf-v6-u-font-size-4xl">
5353

5454
<section
5555
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
56+
style="background: var(--pf-x-hero-gradient-end); padding-block-end: var(--pf-t--global--spacer--3xl)"
5657
>
5758
<div
5859
class="pf-v6-c-page__main-body pf-v6-l-flex pf-m-column pf-m-gap-md"
@@ -130,6 +131,7 @@ <h3>{{ $c.next_meeting.title }}</h3>
130131

131132
<section
132133
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
134+
style="background: linear-gradient(var(--pf-x-hero-gradient-end) 0%, color-mix(in srgb, var(--pf-x-hero-gradient-end) 50%, var(--pf-t--global--background--color--secondary--default)) 100%)"
133135
>
134136
<div
135137
class="pf-v6-c-page__main-body pf-v6-l-flex pf-m-column pf-m-gap-md"
@@ -207,6 +209,7 @@ <h4>{{ .title }}</h4>
207209
{{ with $c.supporters }}
208210
<section
209211
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
212+
style="background: linear-gradient(color-mix(in srgb, var(--pf-x-hero-gradient-end) 50%, var(--pf-t--global--background--color--secondary--default)) 0%, var(--pf-t--global--background--color--secondary--default) 100%)"
210213
>
211214
<div
212215
class="pf-v6-c-page__main-body pf-v6-l-flex pf-m-column pf-m-gap-md"
@@ -281,6 +284,7 @@ <h4>{{ .title }}</h4>
281284

282285
<section
283286
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v6-u-display-none-on-xl"
287+
style="--pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--secondary--default)"
284288
>
285289
<div class="pf-v6-c-page__main-body">
286290
{{ partial "mastodon-feed" . }}

0 commit comments

Comments
 (0)