A fix for flash of unstyled font

404.html

@@ -12,8 +12,7 @@
   <div class="static-content-page portfolio-bloglist-wrapper">
     <div class="banner-bg newspage-wrapper">
       <div class="banner-bg-gradient padding-y-2" style="background-image: url(../assets/images/homepage-gradient-bg.jpg)">
-        <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
+        {% include "components/gradient-bg-image.html" %}
         <section class="grid-container header-section usa-section" aria-label="Introduction">
             <h1>{{ title }}</h1>
             <h2>We can’t find the page you requested. But at 10x, we believe in smart experimentation and trying to make a difference.</h2>

_data/assetPaths.json

@@ -21,7 +21,7 @@
   "check_circle.svg": "/assets/assets/check_circle-FKYRF36F.svg",
   "checkbox-indeterminate.svg": "/assets/assets/checkbox-indeterminate-HJACJSU3.svg",
   "checkbox-indeterminate-alt.svg": "/assets/assets/checkbox-indeterminate-alt-SXGAHOOI.svg",
-  "close.svg": "/assets/images/close-x.svg",
+  "close.svg": "/assets/assets/close-D6X4FKTZ.svg",
   "correct8.svg": "/assets/assets/correct8-BW6WT7U2.svg",
   "correct8-alt.svg": "/assets/assets/correct8-alt-M4H3GT6Q.svg",
   "delna.webp": "/assets/assets/delna-Y7FFIQ4T.webp",
@@ -37,7 +37,7 @@
   "frank.webp": "/assets/assets/frank-WEGTXKFN.webp",
   "header-bottom-border.webp": "/assets/assets/header-bottom-border-K2INIIYM.webp",
   "hero.jpg": "/assets/assets/hero-OXUBFI7L.jpg",
-  "homepage-gradient-bg.jpg": "/assets/images/homepage-gradient-bg-mobile.jpg",
+  "homepage-gradient-bg.jpg": "/assets/assets/homepage-gradient-bg-L552LDA4.jpg",
   "homepage-gradient-bg-mobile.jpg": "/assets/assets/homepage-gradient-bg-mobile-7NX7I3DV.jpg",
   "impact-report_pdf-icon.webp": "/assets/assets/impact-report_pdf-icon-ARH2FAXH.webp",
   "info.svg": "/assets/assets/info-TBKQSD4V.svg",
@@ -83,66 +83,8 @@
   "tts-inclusive-grid-map.svg": "/assets/assets/tts-inclusive-grid-map-D5DPHQNA.svg",
   "unfold_more.svg": "/assets/assets/unfold_more-WL443JWS.svg",
   "warning.svg": "/assets/assets/warning-5OR6W6GJ.svg",
-  "merriweathe": "/assets/fonts/merriweather",
-  "poppin": "/assets/fonts/poppins",
-  "public": "/assets/fonts/public-sans",
-  "roboto": "/assets/fonts/roboto-mono",
-  "source-sans": "/assets/fonts/source-sans-pro",
-  "10x.png": "/assets/images/10x-logo.png",
-  "10x.webp": "/assets/images/10x-logo.webp",
-  "10x_og_imag.png": "/assets/images/10x_og_image.png",
-  "access-to-data.png": "/assets/images/access-to-data-icon.png",
-  "access-to-data.webp": "/assets/images/access-to-data-icon.webp",
-  "benefits-eligibility.png": "/assets/images/benefits-eligibility-icon.png",
-  "benefits-eligibility.webp": "/assets/images/benefits-eligibility-icon.webp",
-  "cloud_go.png": "/assets/images/cloud_gov.png",
-  "current-report-icon.png": "/assets/images/current-report-icon-solid.png",
-  "current-report-icon.svg": "/assets/images/current-report-icon-floated.svg",
-  "current-report.svg": "/assets/images/current-report-icon.svg",
-  "customer-experience.png": "/assets/images/customer-experience-icon.png",
-  "customer-experience.webp": "/assets/images/customer-experience-icon.webp",
-  "digitalgov.png": "/assets/images/digitalgov-logo.png",
-  "equity-project.png": "/assets/images/equity-project-icon.png",
-  "equity-project.webp": "/assets/images/equity-project-icon.webp",
-  "external-link.svg": "/assets/images/external-link-icon.svg",
-  "gradient.png": "/assets/images/gradient-bg.png",
-  "gradient_her.png": "/assets/images/gradient_hero.png",
-  "gsa.svg": "/assets/images/gsa-logo.svg",
-  "header-bottom.png": "/assets/images/header-bottom-border.png",
-  "header-bottom.webp": "/assets/images/header-bottom-border.webp",
-  "homepage-gradient.jpg": "/assets/images/homepage-gradient-bg.jpg",
-  "homepage-gradient.png": "/assets/images/homepage-gradient-bg.png",
-  "impact": "/assets/images/impact-reports",
-  "left.svg": "/assets/images/left-arrow.svg",
-  "logo.png": "/assets/images/logo-alt.png",
-  "logo.svg": "/assets/images/logo-alt.svg",
-  "log.svg": "/assets/images/logo.svg",
-  "menu-close.png": "/assets/images/menu-close-X.png",
-  "menu-close.webp": "/assets/images/menu-close-X.webp",
-  "menu.svg": "/assets/images/menu-icon.svg",
-  "optimal-digital-experience.png": "/assets/images/optimal-digital-experience-icon.png",
-  "optimal-digital-experience.webp": "/assets/images/optimal-digital-experience-icon.webp",
-  "placeholder.png": "/assets/images/placeholder-icon.png",
-  "placeholder.svg": "/assets/images/placeholder-icon.svg",
-  "public-service.png": "/assets/images/public-service-icon.png",
-  "public-service.webp": "/assets/images/public-service-icon.webp",
-  "purple.svg": "/assets/images/purple-US.svg",
-  "science-medicine.png": "/assets/images/science-medicine-icon.png",
-  "science-medicine.webp": "/assets/images/science-medicine-icon.webp",
-  "section2-purple.png": "/assets/images/section2-purple-bg.png",
-  "section2-purple.svg": "/assets/images/section2-purple-bg.svg",
-  "section2-purple.webp": "/assets/images/section2-purple-bg.webp",
-  "security-project.png": "/assets/images/security-project-icon.png",
-  "security-project.webp": "/assets/images/security-project-icon.webp",
-  "sewer": "/assets/images/sewer-spills",
-  "sprit.svg": "/assets/images/sprite.svg",
-  "technology.svg": "/assets/images/technology-services.svg",
-  "tts-inclusive-grid.png": "/assets/images/tts-inclusive-grid-map.png",
-  "tts-inclusive-grid.svg": "/assets/images/tts-inclusive-grid-map.svg",
-  "uswd": "/assets/images/uswds",
   "app.js": "/assets/js/app-EDZES2YK.js",
   "app.map": "/assets/js/app-EDZES2YK.js.map",
-  "index.css": "/assets/styles/index-RAJAX37S.css",
-  "index.map": "/assets/styles/index-RAJAX37S.css.map",
-  "j": "/assets/uswds/js"
+  "index.css": "/assets/styles/index-HR7SNJNM.css",
+  "index.map": "/assets/styles/index-HR7SNJNM.css.map"
 }

_includes/components/gradient-bg-image.html

@@ -0,0 +1,5 @@
+<picture>
+  <source media="(min-width: 40em)" srcset="{{ assetPaths['homepage-gradient-bg.jpg'] }}"/>
+  <img src="{{ assetPaths['homepage-gradient-bg-mobile.jpg'] }}" alt="" width="0" height="0"
+    style="display: none !important;" fetchpriority="high"/>
+</picture>

_includes/components/gradient-hero-banner.html

@@ -1,10 +1,7 @@
 {% assign formatted_category = hero_banner.category | replace: ' ', '-' | downcase %}
 
 <div class="banner-bg-gradient header-banner-component padding-y-2">
-  <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-    style="display: none !important;" />
-  <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-    style="display: none !important;" />
+  {% include "components/gradient-bg-image.html" %}
   <section class="grid-container header-section usa-section" aria-labelledby="{{ formatted_category }}">
     {% if section == 'post' %}
     <span class="page-brow" id="{{ formatted_category}}">

_includes/components/head.html

@@ -25,8 +25,8 @@
   <link href="{{ '/favicon/favicon-32x32.png' | url }}" rel="icon" sizes="32x32" type="image/png">
   <link href="{{ '/favicon/favicon-16x16.png' | url }}" rel="icon" sizes="16x16" type="image/png">
   <link href="{{ '/favicon/favicon.ico' | url }}" rel="shortcut icon">
-    
-  <link rel="preload" as="style" href="{{ assetPaths['index.css'] }}" />
+
+  <link rel="preload" href="{{ assetPaths['Poppins-Bold.woff2'] }}" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="{{ assetPaths['index.css'] }}" type="text/css" />
   {% capture js %}
   {% include "theme/js/inline.js" %}

_includes/components/header.html

@@ -20,7 +20,7 @@
         <div class="grid-row grid-gap-lg">
           <div class="usa-banner__guidance tablet:grid-col-6">
             <img class="usa-banner__icon usa-media-block__img" src="{{ '/assets/images/uswds/icon-dot-gov.svg' | url }}"
-              role="img" alt="" width="40" height="40" aria-hidden="true" />
+              role="img" alt="" width="40" height="40" aria-hidden="true" fetchpriority="low" />
             <div class="usa-media-block__body">
               <p>
                 <strong>Official websites use .gov</strong><br />A
@@ -31,7 +31,7 @@
           </div>
           <div class="usa-banner__guidance tablet:grid-col-6">
             <img class="usa-banner__icon usa-media-block__img" src="{{ '/assets/images/uswds/icon-https.svg' | url }}"
-              role="img" alt="" width="40" height="40" aria-hidden="true" />
+              role="img" alt="" width="40" height="40" aria-hidden="true" fetchpriority="low" />
             <div class="usa-media-block__body">
               <p>
                 <strong>Secure .gov websites use HTTPS</strong><br />A
@@ -68,7 +68,7 @@
     <nav aria-label="Primary navigation" class="usa-nav">
       <button class="usa-nav-close usa-nav__close margin-top-2 margin-right-0" id="usa-nav-close"
         type="button">
-        <img alt="Close" width="24" height="24" src="{{ '/assets/images/close-x.svg' | url }}">
+        <img alt="Close" width="24" height="24" src="{{ '/assets/images/close-x.svg' | url }}" fetchpriority="low">
       </button>
       <ul class="usa-accordion usa-nav__primary">
         {%- for entry in navPages %}

_includes/layouts/about-sub-page.html

@@ -6,10 +6,7 @@
   <div class="TxContent portfolio-blog-single-page about-page-section about-page static-content-page">
     <div class="banner-bg desktop:margin-bottom-2">
       <div class="banner-bg-gradient padding-y-2">
-        <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
+        {% include "components/gradient-bg-image.html" %}
         <section class="grid-container header-section blog-post-header-section usa-section" aria-labelledby="{{ pageBrow }}">
           <span class="page-brow" id="{{ pageBrow }}">{{ pageBrow }}</span>
           <h1>{{ pageTitle }}</h1>

_includes/layouts/home.html

@@ -5,10 +5,7 @@
 <div class="homepage-wrapper list-page-blue-background">
   <div class="usa-home banner-bg">
     <div class="banner-bg-gradient padding-y-2">
-      <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
-      <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
+      {% include "components/gradient-bg-image.html" %}
       <section class="grid-container hero-section usa-section padding-y-8" aria-label="Introduction">
         <h1>{{ hero_banner.title }}</h1>
       </section>

_includes/theme/styles/_templates.scss

@@ -110,8 +110,22 @@ h2,
 }
 
 .usa-identifier__required-links-list {
-    column-count: 5; 
-    -moz-column-count: 5;
+    column-count: 1; 
+    -moz-column-count: 1;
+
+    @include at-media("tablet") {
+        column-count: 5; 
+        -moz-column-count: 5;
+    }
+}
+
+.usa-identifier__required-link, 
+.usa-identifier__required-link.usa-link {
+    padding: units(1) 0;
+
+    @include at-media("tablet") {
+        padding: 0;
+    }
 }
 
 .usa-identifier__container, 
@@ -1428,4 +1442,4 @@ input[type="search"]::-webkit-search-cancel-button {
     background-repeat: no-repeat;
     background-image: url(../images/menu-close-X.webp);
     cursor: pointer;
-}
+}

federalist.json

@@ -36,6 +36,11 @@
         "cache-control": "public, max-age=31536000, immutable"
       }
     },
+    {
+      "/assets/assets/*.woff2": {
+        "cache-control": "public, max-age=31536000, immutable"
+      }
+    },
     {
       "/icons/*": {
         "cache-control": "public, max-age=31536000, immutable"