Merge branch 'main' of https://github.com/GSA-TTS/10x-website into 15…

…9-og-image-updates # Conflicts: # _data/assetPaths.json
GSA-TTS · Jun 27, 2024 · 477fa95 · 477fa95
2 parents d0d4869 + 0a63141
commit 477fa95
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 22 deletions.
diff --git a/404.html b/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>

diff --git a/_includes/components/gradient-bg-image.html b/_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>
diff --git a/_includes/components/gradient-hero-banner.html b/_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}}">

diff --git a/_includes/components/head.html b/_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" %}

diff --git a/_includes/components/header.html b/_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 %}

diff --git a/_includes/layouts/about-sub-page.html b/_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>

diff --git a/_includes/layouts/home.html b/_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>

diff --git a/_includes/theme/styles/_templates.scss b/_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;
-}
+}
diff --git a/federalist.json b/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"