From e153bb077cef9e6f753b2d7e9e9073db230aa88c Mon Sep 17 00:00:00 2001
From: Clayton J Barnette <clayton.barnette@gsa.gov>
Date: Thu, 24 Aug 2023 18:07:44 -0400
Subject: [PATCH 1/2] GSA Carousel adjustments for mobile

---
 _includes/hero.html   | 12 ++++++------
 assets/css/index.scss | 23 +++++++++++++----------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/_includes/hero.html b/_includes/hero.html
index c879dcb3d..2d3ee2bce 100644
--- a/_includes/hero.html
+++ b/_includes/hero.html
@@ -35,13 +35,13 @@
 
       <!-- Splide is initialized on this element so we can use our custom controls above -->
       <div class="splide flex-auto">
-        <div class="splide__track">
-          <div class="splide__list">
+        <div class="splide__track" style="height:auto;">
+          <div class="splide__list" style="height:auto;">
             {% for slide in site.data.gsacarousel %}
-            <div class="splide__slide splide_fix" role="group" aria-label="Slide about {{slide.heroHeading}}">
-                  <h2 class="hero-heading">{{ slide.heroHeading }}</h2>
-                  <p class="hero-text gsa-text-width">{{ slide.heroText }}</p>
-                  <a class="usa-button" href="{{ slide.actionLocation }}" target="{{ slide.actionTarget }}" rel="noopener noreferrer" title="{{ slide.actionButtonText }} {{slide.heroHeading}}" aria-label="{{ slide.actionButtonText }} {{slide.heroHeading}}">{{ slide.actionButtonText }} {{ slide.heroHeading }}</a>            
+            <div class="splide__slide splide_fix" style="width:auto;padding-right:50px;" role="group" aria-label="Slide about {{slide.heroHeading}}">
+                  <h2 class="hero-heading" style="width:auto;height:auto;overflow-wrap: break-word;" >{{ slide.heroHeading }}</h2>
+                  <p class="hero-text gsa-text-width" style="width:auto;" >{{ slide.heroText }}</p>
+                  <a class="usa-button" style="width: auto;"  href="{{ slide.actionLocation }}" target="{{ slide.actionTarget }}" rel="noopener noreferrer" title="{{ slide.actionButtonText }} {{slide.heroHeading}}" aria-label="{{ slide.actionButtonText }} {{slide.heroHeading}}">{{ slide.actionButtonText }} {{ slide.heroHeading }}</a>            
             </div>
             {% endfor %}
 
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 068c432eb..c32a42daf 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -93,13 +93,18 @@
 .usa-hero {
   //background-image: asset_url("new-header-graphic.png");
   background-image: url("{{site.baseurl}}/assets/images/new-background-30-fade.png");
-  //background-image: asset_url("hero-image2-blur.png");
   background-position: 50%;
   background-size: cover;
-  height: 380px;
+  // height: 380px;
+  height: auto;
   margin: 0px;
 }
 
+// To make both sides of a slide the same. see: _include/hero.html for element styles
+.splide__slide {
+  padding-left: 50px;
+}
+
 // Back to top button, displays in lower right corner after 500px of scroll.
 .gsa-back-to-top {
   display: none;
@@ -132,8 +137,8 @@
 
 // Responsive Hero for IDManagement
 .gsa-responsive-hero {
-  height: auto;
-  min-width: 300px; 
+  height:auto;
+  min-width: 220px; 
 }
 
 // Hero text length shortener-er 
@@ -142,13 +147,11 @@
   width: auto;
 }
 
-// .gsa-no-dec {
-//   text-decoration: none;
-// }
-
+// GSA Slide positions and height: also see: gsa-responsive-hero
 .gsa-slide {
   position: relative;
-  height: 380px;
+  // height: 380px;
+  height:auto;
   display: flex;
   align-items: center;
 }
@@ -188,7 +191,7 @@
 }
 // Fix problem with carousel's first slide not displaying at same width as proceeding slides and added tinting to cover busy images that are being selected as headers. 
 .gsa-carousel-fix {
-  width: 100%;
+  width: auto;
   padding: 20px;
  //background-color: rgba(#000000, 0.7);
 }

From e4c00fbdfd19e63bc49b51e3a5c664a983405286 Mon Sep 17 00:00:00 2001
From: Clayton J Barnette <clayton.barnette@gsa.gov>
Date: Fri, 25 Aug 2023 14:06:46 -0400
Subject: [PATCH 2/2] Added media query below 640 for mobile

---
 _includes/hero.html   |  2 +-
 assets/css/index.scss | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/_includes/hero.html b/_includes/hero.html
index 2d3ee2bce..19e21ae9c 100644
--- a/_includes/hero.html
+++ b/_includes/hero.html
@@ -39,7 +39,7 @@
           <div class="splide__list" style="height:auto;">
             {% for slide in site.data.gsacarousel %}
             <div class="splide__slide splide_fix" style="width:auto;padding-right:50px;" role="group" aria-label="Slide about {{slide.heroHeading}}">
-                  <h2 class="hero-heading" style="width:auto;height:auto;overflow-wrap: break-word;" >{{ slide.heroHeading }}</h2>
+                  <h2 class="hero-heading" style="width:auto;height:auto;" >{{ slide.heroHeading }}</h2>
                   <p class="hero-text gsa-text-width" style="width:auto;" >{{ slide.heroText }}</p>
                   <a class="usa-button" style="width: auto;"  href="{{ slide.actionLocation }}" target="{{ slide.actionTarget }}" rel="noopener noreferrer" title="{{ slide.actionButtonText }} {{slide.heroHeading}}" aria-label="{{ slide.actionButtonText }} {{slide.heroHeading}}">{{ slide.actionButtonText }} {{ slide.heroHeading }}</a>            
             </div>
diff --git a/assets/css/index.scss b/assets/css/index.scss
index c32a42daf..021f48d6e 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -328,3 +328,24 @@
     display: block;
   }
 }
+
+@media (max-width: 640px) {
+  .paginate-link {
+    display: none;
+  }
+  .paginate-button {
+    display: block;
+  }
+  // Mobile Carousel adjustments
+  .hero-heading {
+    font-size: 2rem;
+  }
+  
+  .hero-text {
+    font-size: 1rem;
+  }
+  
+  .usa-button {
+    font-size: 0.9rem;
+  }
+}