WT-878 Blog

bin/export-db-to-sqlite.sh

@@ -175,6 +175,8 @@ python manage.py dumpdata \
     cms.DownloadPage \
     cms.DownloadIndexPage \
     cms.ThanksPage \
+    cms.BlogIndexPage \
+    cms.BlogArticlePage \
     cms.DownloadFirefoxCallToActionSnippet \
     cms.BannerSnippet \
     cms.PreFooterCTAFormSnippet \

l10n/en/cms/blog.ftl

@@ -0,0 +1,13 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+blog-all-topics = All Topics
+blog-view-all-topics = View all topics
+blog-all-articles = All Articles
+blog-read-more = Read more
+blog-view-all = View All
+blog-back = Back
+blog-related-articles = Related Articles
+blog-pagination-label = Pagination
+blog-clear-topic-filter = Clear topic filter

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

@@ -435,7 +435,7 @@ Step Cards List - With Kit variant
 .fl-step-card .fl-card-media {
     align-items: center;
     background: var(--fl-step-card-bg);
-    border-radius: var(--token-layout-xs);
+    border-radius: var(--token-border-radius-md);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -461,7 +461,7 @@ Step Cards List - With Kit variant
     align-items: center;
     background: var(--fl-step-card-index-bg);
     block-size: var(--token-layout-3xs);
-    border-radius: var(--token-layout-3xs);
+    border-radius: var(--token-border-radius-sm);
     box-sizing: border-box;
     color: var(--fl-theme-color-text);
     display: flex;
@@ -579,7 +579,7 @@ Illustration Card
 
 .fl-illustration-card .fl-card-media,
 .fl-illustration-card .fl-card-media img {
-    border-radius: var(--token-spacing-xl);
+    border-radius: var(--token-border-radius-sm);
     inline-size: 100%;
     margin-block-end: var(--token-spacing-lg);
 }

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

@@ -27,6 +27,10 @@
     text-align: start;
 }
 
+.fl-mediacontent-content .fl-heading-group {
+    margin-block-end: var(--token-spacing-lg);
+}
+
 .fl-mediacontent-content .fl-superheading {
     color: var(--fl-theme-color-brand-text);
     font-size: var(--fl-theme-label-caps-sm);
@@ -146,16 +150,3 @@
     border-radius: var(--token-spacing-lg);
     inline-size: 100%;
 }
-
-/* Blog page related articles */
-.fl-blog-related-articles {
-    display: flex;
-    flex-direction: column;
-    gap: var(--token-spacing-xl);
-    margin-block-start: var(--token-layout-sm);
-}
-
-.fl-blog-related-articles .fl-mediacontent {
-    margin: 0;
-    padding: 0;
-}

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

@@ -16,6 +16,7 @@
     font-weight: var(--token-font-weight-semibold);
     gap: var(--token-spacing-xs);
     line-height: var(--fl-theme-line-height-base);
+    line-height: 1;
     margin-block-end: var(--token-spacing-lg);
     margin-inline-end: var(--token-spacing-xs);
     padding: var(--token-spacing-sm) var(--token-spacing-md);
@@ -30,6 +31,38 @@
     margin-inline-start: var(--token-spacing-xs);
 }
 
+.fl-tag.is-small {
+    padding: var(--token-spacing-xs) var(--token-spacing-sm);
+}
+
+.fl-tag.is-large {
+    border-radius: var(--token-border-radius-sm);
+    font-size: var(--fl-theme-font-size-body-sm);
+    font-weight: var(--token-font-weight-regular);
+    padding: var(--token-spacing-lg) var(--token-spacing-xl);
+}
+
+a.fl-tag,
+a.fl-tag:hover {
+    text-decoration: none;
+}
+
+a.fl-tag:hover {
+    background-color: var(--notification-link-hover-bg);
+    color: var(--token-color-white);
+    transition:
+        background-color 0.3s ease,
+        color 0.3s ease;
+}
+
+a.fl-tag:hover .fl-tag {
+    opacity: 1;
+}
+
+.fl-tag.is-uppercase {
+    text-transform: uppercase;
+}
+
 /* red */
 .fl-tag.fl-tag-red {
     background: var(--notification-red-bg);
@@ -48,6 +81,32 @@
     color: var(--notification-green-color);
 }
 
+/* white */
+.fl-tag.fl-tag-white {
+    background: var(--notification-white-bg);
+    color: var(--notification-white-color);
+}
+
+.fl-tag.fl-tag-light-purple {
+    background: var(--token-color-light-purple);
+    color: var(--token-color-white);
+}
+
+/* when a tag is used a badge within another tag. See Blog tags page. */
+.fl-tag:has(.fl-tag) {
+    position: relative;
+}
+
+.fl-tag .fl-tag {
+    font-weight: var(--token-font-weight-regular);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    opacity: 0;
+    position: absolute;
+    transform: translate(50%, -25%);
+    transition: opacity 0.3s ease;
+}
+
 .fl-tags {
     display: flex;
     flex-wrap: wrap;

media/css/cms/flare-mediacontent.css

@@ -125,16 +125,3 @@
     aspect-ratio: 16 / 9;
     border-radius: calc(var(--token-scale-16) * 1px);
 }
-
-/* Blog page related articles */
-.fl-blog-related-articles {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--token-scale-24) * 1px);
-    margin-top: calc(var(--token-scale-64) * 1px);
-}
-
-.fl-blog-related-articles .fl-mediacontent {
-    padding: 0;
-    margin: 0;
-}

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

@@ -0,0 +1,33 @@
+/* These @custom-media breakpoints set the following viewport sizes.
+Note that the device type in parentheses is only for intuitive reference,
+but not a guarantee since there is a wide range of devices with each
+viewport size and users may resize their browsers to different sizes.
+
+xs: < 600px (phones)
+sm: 600px - 899px (tablets in portrait)
+md: 900px - 1199px (tablets in landscape)
+lg: 1200px - 1799px (laptops and desktops)
+xl: > 1799px (big monitors)
+
+Start with base styles (no media query) for mobile first design, then
+add styles for larger viewports using --viewport-*-up media queries.
+
+Use --viewport-* queries sparingly, to target a specific viewport size.
+
+There are no --viewport-*-down queries to encourage mobile-first design.
+*/
+
+/* stylelint-disable at-rule-no-unknown */
+@custom-media --viewport-sm-up (min-width: 600px);
+@custom-media --viewport-md-up (min-width: 900px);
+@custom-media --viewport-lg-up (min-width: 1200px);
+@custom-media --viewport-xl-up (min-width: 1800px);
+
+@custom-media --viewport-xs (max-width: 599px);
+@custom-media --viewport-sm (min-width: 600px) and (max-width: 899px);
+@custom-media --viewport-md (min-width: 900px) and (max-width: 1199px);
+@custom-media --viewport-lg (min-width: 1200px) and (max-width: 1799px);
+@custom-media --viewport-xl (min-width: 1800px);
+
+@custom-media --viewport-below-md (max-width: 899px);
+@custom-media --viewport-below-lg (max-width: 1199px);

media/css/cms/flare26-pagination.css

@@ -0,0 +1,21 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+.fl-pagination {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+}
+
+.fl-pagination-prev .fl-button,
+.fl-pagination-next .fl-button {
+    border-radius: var(--token-border-radius-3xs);
+    padding-inline: var(--token-spacing-md);
+}
+
+.fl-pagination-next {
+    text-align: end;
+}

media/css/cms/flare26-theme.css

@@ -19,6 +19,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
     --fl-theme-color-link: var(--token-color-link-purple);
     --fl-theme-color-link-hover: var(--token-color-link-purple);
     --fl-theme-color-link-alt-hover: var(--token-color-black-4);
+    --fl-theme-color-link-fade: var(--token-color-grey-4);
     --fl-theme-accent-color: var(--fl-theme-color-link);
 
     /* Background colors */
@@ -156,6 +157,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
 
     /* base/purple */
     --notification-bg: var(--token-color-soft-purple);
+    --notification-link-hover-bg: var(--token-color-dark-purple);
     --notification-color: var(--token-color-black-1);
     --notification-border-color: var(--token-color-soft-purple-2);
     --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
     --notification-green-border-color: var(--token-color-secondary-green);
     --notification-green-icon-bg: var(--token-color-secondary-green);
 
+    /* white */
+    --notification-white-bg: var(--token-color-white);
+    --notification-white-color: var(--token-color-black-4);
+    --notification-white-border-color: var(--token-color-white);
+    --notification-white-icon-bg: var(--token-color-white);
+
     /* form fields. For now, only newsletter signups. */
     --fl-theme-form-field-background: rgba(255, 255, 255, 0.92);
     --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
     --fl-theme-color-brand-text: var(--token-color-soft-purple-4);
     --fl-theme-color-link: var(--token-color-soft-purple-4);
     --fl-theme-color-link-hover: var(--token-color-white);
+    --fl-theme-color-link-fade: var(--token-color-grey-1);
     --token-color-error-text-color: var(--token-color-soft-magenta);
     --fl-theme-code-background: var(--token-color-link-purple);
 
@@ -315,6 +324,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
 
     /* base/purple */
     --notification-bg: var(--token-color-purple);
+    --notification-link-hover-bg: var(--token-color-light-purple-60);
     --notification-color: var(--token-color-white);
     --notification-border-color: var(--token-color-link-purple);
     --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
 
     /* base/purple */
     --notification-bg: var(--token-color-soft-purple);
+    --notification-link-hover-bg: var(--token-color-dark-purple);
     --notification-color: var(--token-color-black-1);
     --notification-border-color: var(--token-color-soft-purple-2);
     --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
         --fl-theme-color-brand-text: var(--token-color-soft-purple-4);
         --fl-theme-color-link: var(--token-color-soft-purple-4);
         --fl-theme-color-link-hover: var(--token-color-white);
+        --fl-theme-color-link-fade: var(--token-color-grey-1);
         --token-color-error-text-color: var(--token-color-soft-magenta);
         --fl-theme-code-background: var(--token-color-link-purple);
 
@@ -612,6 +624,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
 
         /* base/purple */
         --notification-bg: var(--token-color-purple);
+        --notification-link-hover-bg: var(--token-color-light-purple-60);
         --notification-color: var(--token-color-white);
         --notification-border-color: var(--token-color-link-purple);
         --notification-icon-bg: var(--token-color-soft-purple);

media/css/cms/flare26-tokens.css

@@ -170,6 +170,7 @@ Static values extracted from Figma that do not change based on context.
     --token-layout-2xl: 200px;
 
     /* Border radius variables */
+    --token-border-radius-3xs: 4px;
     --token-border-radius-2xs: 8px;
     --token-border-radius-xs: 12px;
     --token-border-radius-sm: 24px;
@@ -210,37 +211,3 @@ Static values extracted from Figma that do not change based on context.
     --token-transition-base: 0.2s ease;
     --token-transition-slow: 0.3s ease;
 }
-
-/* These @custom-media breakpoints set the following viewport sizes.
-Note that the device type in parentheses is only for intuitive reference,
-but not a guarantee since there is a wide range of devices with each
-viewport size and users may resize their browsers to different sizes.
-
-xs: < 600px (phones)
-sm: 600px - 899px (tablets in portrait)
-md: 900px - 1199px (tablets in landscape)
-lg: 1200px - 1799px (laptops and desktops)
-xl: > 1799px (big monitors)
-
-Start with base styles (no media query) for mobile first design, then
-add styles for larger viewports using --viewport-*-up media queries.
-
-Use --viewport-* queries sparingly, to target a specific viewport size.
-
-There are no --viewport-*-down queries to encourage mobile-first design.
-*/
-
-/* stylelint-disable at-rule-no-unknown */
-@custom-media --viewport-sm-up (min-width: 600px);
-@custom-media --viewport-md-up (min-width: 900px);
-@custom-media --viewport-lg-up (min-width: 1200px);
-@custom-media --viewport-xl-up (min-width: 1800px);
-
-@custom-media --viewport-xs (max-width: 599px);
-@custom-media --viewport-sm (min-width: 600px) and (max-width: 899px);
-@custom-media --viewport-md (min-width: 900px) and (max-width: 1199px);
-@custom-media --viewport-lg (min-width: 1200px) and (max-width: 1799px);
-@custom-media --viewport-xl (min-width: 1800px);
-
-@custom-media --viewport-below-md (max-width: 899px);
-@custom-media --viewport-below-lg (max-width: 1199px);

media/css/cms/flare26.css

@@ -29,6 +29,7 @@ https://mozmeao.github.io/platform-docs/browser-support/
 @import 'flare26-animations.css' layer(base);
 @import 'flare26-base.css' layer(base);
 @import 'flare26-tokens.css' layer(theme);
+@import 'flare26-media-query-tokens.css' layer(theme);
 @import 'flare26-theme.css' layer(theme);
 @import 'flare26-defaults.css' layer(defaults);
 @import 'flare26-template.css' layer(template);