Merge pull request #910 from sadiejay/develops-impact-page

Develops impact page
uscensusbureau · Feb 5, 2025 · ba5c6c8 · ba5c6c8
2 parents 86be1ee + 060445b
commit ba5c6c8
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 16 deletions.
diff --git a/_includes/hero.html b/_includes/hero.html
@@ -105,7 +105,7 @@ <h1 class="usa-hero__title">{{ page.hero.text}}</h1>
       {{ page.hero.subtext | markdownify }}
     </div>
   </div>
-{% elsif page.class == "sprint-process" or page.class == "about" %}
+{% elsif page.class == "sprint-process" or page.class == "about" or page.class == "impact" %}
 <section class="interior-hero bg-base-darkest usa-dark-background {{page.background}}">
   <div class="grid-container usa-hero__bg display-flex flex-column flex-align-center">
     <h1 class="usa-hero__title text-center">{{ page.hero.text}}</h1>

diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss
@@ -1951,6 +1951,144 @@ main {
 
 // Impact page ----------------- //
 .page-impact {
+  scroll-behavior: smooth;
+
+  h2 {
+      font-size: 14px;
+
+      @include at-media('tablet') {
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      @include at-media('desktop') {
+        font-size: 32px;
+        line-height: 32px;
+      }
+    }
+
+    h3 {
+      font-size: 12px;
+
+      @include at-media('tablet') {
+        font-size: 14px;
+        line-height: 14px;
+      }
+
+      @include at-media('desktop') {
+        font-size: 24px;
+        line-height: 24px;
+      }
+    }
+
+    .info-content h3 {
+      font-size: 14px;
+
+      @include at-media('tablet') {
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      @include at-media('desktop') {
+        font-size: 32px;
+        line-height: 32px;
+      }
+    }
+
+    p,
+    .content-container a.usa-button {
+      font-size: 12px;
+      line-height: 17px;
+
+      @include at-media('tablet') {
+        font-size: 14px;
+        line-height: 17px;
+      }
+
+      @include at-media('desktop') {
+        font-size: 24px;
+        line-height: 30px;
+      }
+    }
+
+    .nav-content-container a {
+      font-size: 7px;
+      line-height: 9px;
+
+    @include at-media('tablet') {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+
+  .interior-hero {
+    padding-bottom: 60px;
+    background-size: cover;
+
+    @include at-media("desktop") {
+      background-size: cover;
+      padding: 117px 0 124px;
+    }
+  }
+
+  .usa-hero__bg {
+    width: 200px;
+    min-height: 114px;
+    background-color: #121923;
+
+    @include at-media('tablet') {
+      width: 343px;
+    }
+
+    @include at-media('desktop') {
+      width: 571px;
+    }
+
+    h1.usa-hero__title {
+      font-size: 14px;
+      margin: 0;
+      padding: 0;
+      padding-top: 25px;
+
+      @include at-media('tablet') {
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      @include at-media('desktop') {
+        font-size: 32px;
+        line-height: 32px;
+        padding-top: 30px;
+      }
+    }
+
+    div.usa-hero__subtitle {
+      font-size: 12px;
+      line-height: 17px;
+      margin-bottom: 0;
+      padding-bottom: 16px;
+
+      @include at-media('tablet') {
+        font-size: 14px;
+        line-height: 17px;
+      }
+
+      @include at-media('desktop') {
+        font-size: 32px;
+        line-height: 32px;
+        padding-bottom: 30px;
+      }
+
+      p {
+        margin: 8px 0 0px;
+
+        @include at-media('desktop') {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+
   div.content-container, .shadow-box {
       padding: 52.64px 30.08px;
 
@@ -1965,13 +2103,16 @@ main {
   .grid-background {
     background: url("../img/impact-page/backgrounds/desktop_broader-impact_background.png") no-repeat 0 0;
       background-size: cover;
-      background-color: #FAF3E9;
+      background-color: #fff9eaff;
+      .nav-content-container {
+        background-color: #fff9eaff;
+      }
 
       h2 {
         color: white;
-        background: orangered;
+        background: #DE4317;
         width: fit-content;
-        padding: 4px 24px;
+        padding: 24px 20px;
         box-shadow: -4px 4px 2px 1px #7A1B00;
       }
   }
@@ -1990,6 +2131,9 @@ main {
 
     a {
       color: black;
+      :active {
+        font-weight: bold;
+      }
     }
   }
 
@@ -2003,6 +2147,7 @@ main {
 
   .individual-info {
     // background-color: red;
+
     .info-img-container {
         width: fit-content;
       }
@@ -2028,12 +2173,19 @@ main {
           color: white;
         }
       }
+      .individual-info {
+        padding-top: 112px;
+      }
+      .blurb-container {
+        border: 1px white solid;
+        padding: 26px;
+      }
   }
 
   .years {
     color: white;
     .year-counter-container{
-      background: color('blue-warm-60v');
+      background: #014280;
       .nav-content-container {
         border-color: white;
         a {
@@ -2044,10 +2196,19 @@ main {
     .year-timeline-container {
       background: color('base-darkest');
     }
+    .individual-info {
+      padding-top: 112px;
+    }
+  }
+
+  .broader-impact {
+    .individual-info {
+        padding-top: 112px;
+      }
   }
 
   .report-download {
-    background: color('blue-warm-60v');
+    background: #014280;
     color: white;
     .nav-content-container {
         border-color: white;
@@ -2056,6 +2217,11 @@ main {
           color: white;
         }
       }
+
+    .individual-info-container p {
+      border: 1px white solid;
+      padding: 30px;
+    }
   }
 }
 

diff --git a/pages/impact.md b/pages/impact.md
@@ -100,19 +100,58 @@ companies:
   - title: company
     blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
     img:
-      src: /assets/img/impact-page/headshots/desktop-broader-community-headshot.png
-      alt: smiling headshot
+      src: /assets/img/impact-page/logos/desktop-success-logo-1.png
+      alt: company logo
   - title: Company
     blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
     class: inverted
     img:
-      src: /assets/img/impact-page/headshots/desktop-broader-data-headshot.png
-      alt: smiling headshot
+      src: /assets/img/impact-page/logos/desktop-success-logo-2.png
+      alt: company logo
   - title: Company
     blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
     img:
-      src: /assets/img/impact-page/headshots/desktop-broader-federal-headshot.png
-      alt: smiling headshot
+      src: /assets/img/impact-page/logos/desktop-success-logo-3.png
+      alt: company logo
+  - title: Company
+    blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
+    class: inverted
+    img:
+      src: /assets/img/impact-page/logos/desktop-success-logo-4.png
+      alt: company logo
+  - title: Company
+    blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
+    img:
+      src: /assets/img/impact-page/logos/desktop-success-logo-5.png
+      alt: company logo
+  - title: Company
+    blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
+    class: inverted
+    img:
+      src: /assets/img/impact-page/logos/desktop-success-logo-6.png
+      alt: company logo
+  - title: Company
+    blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
+    img:
+      src: /assets/img/impact-page/logos/desktop-success-logo-7.png
+      alt: company logo
+  - title: Company
+    blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
+    class: inverted
+    img:
+      src: /assets/img/impact-page/logos/desktop-success-logo-8.png
+      alt: company logo
+  - title: Company
+    blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
+    img:
+      src: /assets/img/impact-page/logos/desktop-success-logo-9.png
+      alt: company logo
+  - title: Company
+    blurb: Dui sapien eget mi proin sed libero enim. Proin sagittis nisl
+    class: inverted
+    img:
+      src: /assets/img/impact-page/logos/desktop-success-logo-10.png
+      alt: company logo
 
 #profile section
 profiles:
@@ -198,7 +237,7 @@ profiles:
   <div class="content-container grid-container">
   {% include impact/subnav.html %}
     <h2>Success Stories</h2>
-    <div>
+    <div class="blurb-container">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim.</p>
     </div>
   <div class="profiles-container">
@@ -228,15 +267,19 @@ profiles:
   <div class="content-container grid-container">
   {% include impact/subnav.html %}
   <h2>Report Download</h2>
-  <div>
+  <div class="individual-info">
+  <div class="individual-info-container">
   <p>Placeholder text</p>
-  <p>Placeholder img</p>
-    <div class="display-flex flex-justify-center margin-top-4">
+  <div class="display-flex flex-justify-center margin-top-4">
     <a href="https://opportunity.census.gov/our-process/" target="_blank"
       class="usa-button text-ink margin-top-2 tablet:padding-y-2 padding-x-205 usa-button--outline  .outline-1px.outline-black  tablet:margin-top-4 site-button bg-white text-underline">
       Learn more about the TOP Sprint Process
     </a>
   </div>
   </div>
+  <div class="info-img-container">
+  <img src="/assets/img/impact-page/desktop_report download_report.png" alt="" />
+  </div>
+  </div>
   </div>
 </section>