Skip to content

Commit c523dc3

Browse files
maribedrankkellydesign
maribedran
and
kkellydesign
authored
WT-878 Blog (#1148)
* Create blog index and article pages * Make sure pattern library templates always have l10n context * Implement blog index page * Implement blog topic pages * Blog layout adjustments * Add back link to blog topics and article pages * Add related articles to blog articles * Ruff * Fix blog index page tests * Fix firefox all tests that fail locally * Use same template for index and topic blog pages * Create more test blog articles * Only show featured article cards if at least 3 cards are available * Improve blog list pages performance * WIP blog index page custom content * Fix blog index page N+1 queries * Blog CSS adjustments * Implement blog page alternate illustratation cards layout * Use CSS to crop images in blog layout * Add grid with numbers to placeholder images to help visualize when they're cropped * Refactor blog all listing - Remove featured articles - Add display image field to articles - Allow index cards list block to have custom filtering * Improve blog tests * Adjust blog topics filter styles and implement scroll * fix to make tests pass * reduce all secondary flare26 bundle sizes * Add blog CSS bundle * index design revisions * topic page revisions * reducing unnecessarily long selectors * removing out-of-date tests * added new tests for topics page --------- Co-authored-by: Kasey Kelly <kasey@servee.com>
1 parent 0c375c0 commit c523dc3

49 files changed

Lines changed: 3159 additions & 88 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎bin/export-db-to-sqlite.sh‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,8 @@ python manage.py dumpdata \
175175
cms.DownloadPage \
176176
cms.DownloadIndexPage \
177177
cms.ThanksPage \
178+
cms.BlogIndexPage \
179+
cms.BlogArticlePage \
178180
cms.DownloadFirefoxCallToActionSnippet \
179181
cms.BannerSnippet \
180182
cms.PreFooterCTAFormSnippet \

‎l10n/en/cms/blog.ftl‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# This Source Code Form is subject to the terms of the Mozilla Public
2+
# License, v. 2.0. If a copy of the MPL was not distributed with this
3+
# file, You can obtain one at https://mozilla.org/MPL/2.0/.
4+
5+
blog-all-topics = All Topics
6+
blog-view-all-topics = View all topics
7+
blog-all-articles = All Articles
8+
blog-read-more = Read more
9+
blog-view-all = View All
10+
blog-back = Back
11+
blog-related-articles = Related Articles
12+
blog-pagination-label = Pagination
13+
blog-clear-topic-filter = Clear topic filter

‎media/css/cms/components/flare26-card.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -435,7 +435,7 @@ Step Cards List - With Kit variant
435435
.fl-step-card .fl-card-media {
436436
align-items: center;
437437
background: var(--fl-step-card-bg);
438-
border-radius: var(--token-layout-xs);
438+
border-radius: var(--token-border-radius-md);
439439
box-sizing: border-box;
440440
display: flex;
441441
flex-direction: column;
@@ -461,7 +461,7 @@ Step Cards List - With Kit variant
461461
align-items: center;
462462
background: var(--fl-step-card-index-bg);
463463
block-size: var(--token-layout-3xs);
464-
border-radius: var(--token-layout-3xs);
464+
border-radius: var(--token-border-radius-sm);
465465
box-sizing: border-box;
466466
color: var(--fl-theme-color-text);
467467
display: flex;
@@ -579,7 +579,7 @@ Illustration Card
579579

580580
.fl-illustration-card .fl-card-media,
581581
.fl-illustration-card .fl-card-media img {
582-
border-radius: var(--token-spacing-xl);
582+
border-radius: var(--token-border-radius-sm);
583583
inline-size: 100%;
584584
margin-block-end: var(--token-spacing-lg);
585585
}

‎media/css/cms/components/flare26-mediacontent.css‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
text-align: start;
2828
}
2929

30+
.fl-mediacontent-content .fl-heading-group {
31+
margin-block-end: var(--token-spacing-lg);
32+
}
33+
3034
.fl-mediacontent-content .fl-superheading {
3135
color: var(--fl-theme-color-brand-text);
3236
font-size: var(--fl-theme-label-caps-sm);
@@ -146,16 +150,3 @@
146150
border-radius: var(--token-spacing-lg);
147151
inline-size: 100%;
148152
}
149-
150-
/* Blog page related articles */
151-
.fl-blog-related-articles {
152-
display: flex;
153-
flex-direction: column;
154-
gap: var(--token-spacing-xl);
155-
margin-block-start: var(--token-layout-sm);
156-
}
157-
158-
.fl-blog-related-articles .fl-mediacontent {
159-
margin: 0;
160-
padding: 0;
161-
}

‎media/css/cms/components/flare26-tag.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
font-weight: var(--token-font-weight-semibold);
1717
gap: var(--token-spacing-xs);
1818
line-height: var(--fl-theme-line-height-base);
19+
line-height: 1;
1920
margin-block-end: var(--token-spacing-lg);
2021
margin-inline-end: var(--token-spacing-xs);
2122
padding: var(--token-spacing-sm) var(--token-spacing-md);
@@ -30,6 +31,38 @@
3031
margin-inline-start: var(--token-spacing-xs);
3132
}
3233

34+
.fl-tag.is-small {
35+
padding: var(--token-spacing-xs) var(--token-spacing-sm);
36+
}
37+
38+
.fl-tag.is-large {
39+
border-radius: var(--token-border-radius-sm);
40+
font-size: var(--fl-theme-font-size-body-sm);
41+
font-weight: var(--token-font-weight-regular);
42+
padding: var(--token-spacing-lg) var(--token-spacing-xl);
43+
}
44+
45+
a.fl-tag,
46+
a.fl-tag:hover {
47+
text-decoration: none;
48+
}
49+
50+
a.fl-tag:hover {
51+
background-color: var(--notification-link-hover-bg);
52+
color: var(--token-color-white);
53+
transition:
54+
background-color 0.3s ease,
55+
color 0.3s ease;
56+
}
57+
58+
a.fl-tag:hover .fl-tag {
59+
opacity: 1;
60+
}
61+
62+
.fl-tag.is-uppercase {
63+
text-transform: uppercase;
64+
}
65+
3366
/* red */
3467
.fl-tag.fl-tag-red {
3568
background: var(--notification-red-bg);
@@ -48,6 +81,32 @@
4881
color: var(--notification-green-color);
4982
}
5083

84+
/* white */
85+
.fl-tag.fl-tag-white {
86+
background: var(--notification-white-bg);
87+
color: var(--notification-white-color);
88+
}
89+
90+
.fl-tag.fl-tag-light-purple {
91+
background: var(--token-color-light-purple);
92+
color: var(--token-color-white);
93+
}
94+
95+
/* when a tag is used a badge within another tag. See Blog tags page. */
96+
.fl-tag:has(.fl-tag) {
97+
position: relative;
98+
}
99+
100+
.fl-tag .fl-tag {
101+
font-weight: var(--token-font-weight-regular);
102+
inset-block-start: 0;
103+
inset-inline-end: 0;
104+
opacity: 0;
105+
position: absolute;
106+
transform: translate(50%, -25%);
107+
transition: opacity 0.3s ease;
108+
}
109+
51110
.fl-tags {
52111
display: flex;
53112
flex-wrap: wrap;

‎media/css/cms/flare-mediacontent.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -125,16 +125,3 @@
125125
aspect-ratio: 16 / 9;
126126
border-radius: calc(var(--token-scale-16) * 1px);
127127
}
128-
129-
/* Blog page related articles */
130-
.fl-blog-related-articles {
131-
display: flex;
132-
flex-direction: column;
133-
gap: calc(var(--token-scale-24) * 1px);
134-
margin-top: calc(var(--token-scale-64) * 1px);
135-
}
136-
137-
.fl-blog-related-articles .fl-mediacontent {
138-
padding: 0;
139-
margin: 0;
140-
}

‎media/css/cms/flare26-media-query-tokens.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* These @custom-media breakpoints set the following viewport sizes.
2+
Note that the device type in parentheses is only for intuitive reference,
3+
but not a guarantee since there is a wide range of devices with each
4+
viewport size and users may resize their browsers to different sizes.
5+
6+
xs: < 600px (phones)
7+
sm: 600px - 899px (tablets in portrait)
8+
md: 900px - 1199px (tablets in landscape)
9+
lg: 1200px - 1799px (laptops and desktops)
10+
xl: > 1799px (big monitors)
11+
12+
Start with base styles (no media query) for mobile first design, then
13+
add styles for larger viewports using --viewport-*-up media queries.
14+
15+
Use --viewport-* queries sparingly, to target a specific viewport size.
16+
17+
There are no --viewport-*-down queries to encourage mobile-first design.
18+
*/
19+
20+
/* stylelint-disable at-rule-no-unknown */
21+
@custom-media --viewport-sm-up (min-width: 600px);
22+
@custom-media --viewport-md-up (min-width: 900px);
23+
@custom-media --viewport-lg-up (min-width: 1200px);
24+
@custom-media --viewport-xl-up (min-width: 1800px);
25+
26+
@custom-media --viewport-xs (max-width: 599px);
27+
@custom-media --viewport-sm (min-width: 600px) and (max-width: 899px);
28+
@custom-media --viewport-md (min-width: 900px) and (max-width: 1199px);
29+
@custom-media --viewport-lg (min-width: 1200px) and (max-width: 1799px);
30+
@custom-media --viewport-xl (min-width: 1800px);
31+
32+
@custom-media --viewport-below-md (max-width: 899px);
33+
@custom-media --viewport-below-lg (max-width: 1199px);

‎media/css/cms/flare26-pagination.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*
2+
* This Source Code Form is subject to the terms of the Mozilla Public
3+
* License, v. 2.0. If a copy of the MPL was not distributed with this
4+
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
5+
*/
6+
7+
.fl-pagination {
8+
align-items: center;
9+
display: grid;
10+
grid-template-columns: 1fr auto 1fr;
11+
}
12+
13+
.fl-pagination-prev .fl-button,
14+
.fl-pagination-next .fl-button {
15+
border-radius: var(--token-border-radius-3xs);
16+
padding-inline: var(--token-spacing-md);
17+
}
18+
19+
.fl-pagination-next {
20+
text-align: end;
21+
}

‎media/css/cms/flare26-theme.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
1919
--fl-theme-color-link: var(--token-color-link-purple);
2020
--fl-theme-color-link-hover: var(--token-color-link-purple);
2121
--fl-theme-color-link-alt-hover: var(--token-color-black-4);
22+
--fl-theme-color-link-fade: var(--token-color-grey-4);
2223
--fl-theme-accent-color: var(--fl-theme-color-link);
2324

2425
/* Background colors */
@@ -156,6 +157,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
156157

157158
/* base/purple */
158159
--notification-bg: var(--token-color-soft-purple);
160+
--notification-link-hover-bg: var(--token-color-dark-purple);
159161
--notification-color: var(--token-color-black-1);
160162
--notification-border-color: var(--token-color-soft-purple-2);
161163
--notification-icon-bg: var(--token-color-dark-purple);
@@ -181,6 +183,12 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
181183
--notification-green-border-color: var(--token-color-secondary-green);
182184
--notification-green-icon-bg: var(--token-color-secondary-green);
183185

186+
/* white */
187+
--notification-white-bg: var(--token-color-white);
188+
--notification-white-color: var(--token-color-black-4);
189+
--notification-white-border-color: var(--token-color-white);
190+
--notification-white-icon-bg: var(--token-color-white);
191+
184192
/* form fields. For now, only newsletter signups. */
185193
--fl-theme-form-field-background: rgba(255, 255, 255, 0.92);
186194
--fl-theme-form-field-border-color: var(--token-color-black-1);
@@ -249,6 +257,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
249257
--fl-theme-color-brand-text: var(--token-color-soft-purple-4);
250258
--fl-theme-color-link: var(--token-color-soft-purple-4);
251259
--fl-theme-color-link-hover: var(--token-color-white);
260+
--fl-theme-color-link-fade: var(--token-color-grey-1);
252261
--token-color-error-text-color: var(--token-color-soft-magenta);
253262
--fl-theme-code-background: var(--token-color-link-purple);
254263

@@ -315,6 +324,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
315324

316325
/* base/purple */
317326
--notification-bg: var(--token-color-purple);
327+
--notification-link-hover-bg: var(--token-color-light-purple-60);
318328
--notification-color: var(--token-color-white);
319329
--notification-border-color: var(--token-color-link-purple);
320330
--notification-icon-bg: var(--token-color-soft-purple);
@@ -464,6 +474,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
464474

465475
/* base/purple */
466476
--notification-bg: var(--token-color-soft-purple);
477+
--notification-link-hover-bg: var(--token-color-dark-purple);
467478
--notification-color: var(--token-color-black-1);
468479
--notification-border-color: var(--token-color-soft-purple-2);
469480
--notification-icon-bg: var(--token-color-dark-purple);
@@ -547,6 +558,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
547558
--fl-theme-color-brand-text: var(--token-color-soft-purple-4);
548559
--fl-theme-color-link: var(--token-color-soft-purple-4);
549560
--fl-theme-color-link-hover: var(--token-color-white);
561+
--fl-theme-color-link-fade: var(--token-color-grey-1);
550562
--token-color-error-text-color: var(--token-color-soft-magenta);
551563
--fl-theme-code-background: var(--token-color-link-purple);
552564

@@ -612,6 +624,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
612624

613625
/* base/purple */
614626
--notification-bg: var(--token-color-purple);
627+
--notification-link-hover-bg: var(--token-color-light-purple-60);
615628
--notification-color: var(--token-color-white);
616629
--notification-border-color: var(--token-color-link-purple);
617630
--notification-icon-bg: var(--token-color-soft-purple);

‎media/css/cms/flare26-tokens.css‎

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ Static values extracted from Figma that do not change based on context.
170170
--token-layout-2xl: 200px;
171171

172172
/* Border radius variables */
173+
--token-border-radius-3xs: 4px;
173174
--token-border-radius-2xs: 8px;
174175
--token-border-radius-xs: 12px;
175176
--token-border-radius-sm: 24px;
@@ -210,37 +211,3 @@ Static values extracted from Figma that do not change based on context.
210211
--token-transition-base: 0.2s ease;
211212
--token-transition-slow: 0.3s ease;
212213
}
213-
214-
/* These @custom-media breakpoints set the following viewport sizes.
215-
Note that the device type in parentheses is only for intuitive reference,
216-
but not a guarantee since there is a wide range of devices with each
217-
viewport size and users may resize their browsers to different sizes.
218-
219-
xs: < 600px (phones)
220-
sm: 600px - 899px (tablets in portrait)
221-
md: 900px - 1199px (tablets in landscape)
222-
lg: 1200px - 1799px (laptops and desktops)
223-
xl: > 1799px (big monitors)
224-
225-
Start with base styles (no media query) for mobile first design, then
226-
add styles for larger viewports using --viewport-*-up media queries.
227-
228-
Use --viewport-* queries sparingly, to target a specific viewport size.
229-
230-
There are no --viewport-*-down queries to encourage mobile-first design.
231-
*/
232-
233-
/* stylelint-disable at-rule-no-unknown */
234-
@custom-media --viewport-sm-up (min-width: 600px);
235-
@custom-media --viewport-md-up (min-width: 900px);
236-
@custom-media --viewport-lg-up (min-width: 1200px);
237-
@custom-media --viewport-xl-up (min-width: 1800px);
238-
239-
@custom-media --viewport-xs (max-width: 599px);
240-
@custom-media --viewport-sm (min-width: 600px) and (max-width: 899px);
241-
@custom-media --viewport-md (min-width: 900px) and (max-width: 1199px);
242-
@custom-media --viewport-lg (min-width: 1200px) and (max-width: 1799px);
243-
@custom-media --viewport-xl (min-width: 1800px);
244-
245-
@custom-media --viewport-below-md (max-width: 899px);
246-
@custom-media --viewport-below-lg (max-width: 1199px);

0 commit comments

Comments
 (0)