Updates branch

_data/nav.yml

@@ -62,28 +62,42 @@ mobile:
     href: get-involved/
 
 footer:
-  - text: About
-    href: about/
-  # - text: Get Involved
-  #   href: get-involved/
-  - text: Process
-    href: our-process/
-  - text: Products
-    href: showcase/
-  - text: Datasets
-    href: data/
-  - text: TOPx Toolkit
-    href: topx-toolkit/
-  - text: Product Toolkit
-    href: product-development/toolkit/
-  # - text: data.census.gov
-  #   href: "https://data.census.gov"
-    # isExternal: true
-  - text: Our Team
-    href: https://coil.census.gov/
-    isExternal: true
-  - text: Press
-    href: press/
+  - subsection:
+      title: About
+      links:
+        - text: About TOP
+          href: about/
+        - text: Sprint Process
+          href: our-process/
+        - text: FAQs
+          href: faqs/
+        - text: Press
+          href: press/
+  - subsection:
+      title: Sprints
+      href: sprints/
+  - subsection:
+      title: Products
+      href: products/
+  - subsection:
+      title: Resources
+      links:
+        - text: Datasets
+          href: data/
+        - text: TOPx Toolkit
+          href: topx-toolkit/
+        - text: Product Toolkit
+          href: product-development/toolkit
+  - subsection:
+      title: More
+      links:
+        - text: Prize Challenge
+          href: prize-challenge/
+        - text: Annual Summit
+          href: summit/
+
+
+
 
 footer-bottom:
   # - text: Census Open Innovation Labs

_includes/footer.html

@@ -1,74 +1,69 @@
 <footer class="usa-footer site-footer bg-base-darkest" role="contentinfo">
   <div class="usa-footer__secondary-section bg-base-darkest">
-    <div class="grid-container footer-content">
-
-      <div class="grid-row footer-contact-links margin-top-0">
-        <div class="grid-col-6 tablet:grid-col-3">
-          <div class="usa-media-block__body usa-media-block__footer">
-            <p class="font-sans-2xs">
-              <a href="{{ site.baseurl }}" id="return-to-top">
-                Back to top&nbsp;&uarr;
-              </a>
-            </p>
-            <p class="font-sans-sm">The Opportunity Project</p>
-          </div>
+    <div class="grid-container footer-content padding-left-4 padding-right-3">
+
+
+      <div class="grid-row">
+        {% for section in site.data.nav.footer %}
+        <div class="usa-media-block__footer text-white tablet:grid-col-2">
+          <h3 class="padding-top-4 tablet:padding-y-4 desktop:padding-y-5 text-uppercase">
+            {% if section.subsection.href %}
+            <a href="{{ section.subsection.href }}" class="text-underline">{{ section.subsection.title }}</a>
+            {% else %}
+            {{ section.subsection.title }}
+            {% endif %}
+          </h3>
+          {% if section.subsection.links %}
+          <ul class="add-list-reset">
+            {% for link in section.subsection.links %}
+            <li>
+              <a href="{{site.baseurl}}/{{ link.href }}" class="text-underline">{{ link.text }}</a>
+            </li>
+            {% endfor %}
+          </ul>
+          {% endif %}
         </div>
+          {% endfor %}
 
-        <div class="grid-col-6 tablet:grid-col-3 tablet:order-last tablet:padding-left-3">
+        <div class="usa-media-block__footer display-none tablet:display-block tablet:grid-col-2 subsection-subscribe">
+          <h3 class=" text-bold text-white padding-top-4 text-uppercase">Subscribe</h3>
+          <p class=" text-white margin-0">
+          Sign up to our email list to be notified of<br> news and opportunities.
+          </p>
+          <a href="{{ site.contacts.mailing-list }}" class="usa-button usa-button--secondary  site-button site-cta width-full">
+            SIGN UP
+          </a>
+          <!-- check mobile button -->
+        </div>
+      </div>
+
+
+      <div class="grid-row margin-top-2 tablet:display-none">
+        <div class="tablet:order-last tablet:padding-left-3">
           <div class="usa-media-block__footer">
-            <p class="font-sans-2xs text-bold text-white">Stay in the Loop</p>
-            <p class="font-sans-2xs text-white">
-              Subscribe to an email list to be notified of news and
-              opportunities.
+            <p class="text-white">
+              Sign up to our email list <br> to be notified of news<br> and opportunities.
             </p>
             <a href="{{ site.contacts.mailing-list }}"
-               class="usa-button usa-button--outline usa-button--inverse site-button site-cta">
-              Get Updates
+              class="usa-button usa-button--secondary  site-button site-cta">
+              SUBSCRIBE
             </a>
-            </button>
           </div>
+          <!-- check tablet/desktop button -->
         </div>
+      </div>
 
-        {% assign perCol = 4 %}
-        {% for link in site.data.nav.footer %}
-          {% assign remainder = forloop.index0 | modulo: perCol %}
-          {% if remainder == 0 %}
-            {% if forloop.first == false %}
-                </div>
-              </div>
-            {% endif %}
-
-            <div class="grid-col-4 tablet:grid-col-2">
-              <div class="usa-media-block__footer">
-          {% endif %}
+    </div>
+  </div>
 
-                <p class="border-bottom border-base-dark padding-bottom-05">
-
-                  <a href="{% unless link.isExternal %}{{ site.baseurl }}/{% endunless %}{{ link.href }}">
-                    {{ link.text }}
-                  </a>
-                </p>
-          {% if forloop.index0 | modulo: perCol != 0 and forloop.last %}
-              </div>
-            </div>
-          {% endif %}
-        {% endfor %}
-
-
-      </div>
-
-      <div
-        class="footer-section-bottom usa-media-block__footer grid-row display-flex flex-align-center padding-top-4"
-      >
-        {% for bottomLink in site.data.nav.footer-bottom %}
-          <a href="{% unless bottomLink.isExternal %}{{ site.baseurl }}/{% endunless %}{{ bottomLink.href }}"
-            class="border-base-dark
+  <div class="footer-section-bottom usa-media-block__footer grid-row display-flex flex-align-center text-white opacity-80 margin-top-5 tablet:margin-top-1 padding-bottom-5">
+    {% for bottomLink in site.data.nav.footer-bottom %}
+    <a href="{% unless bottomLink.isExternal %}{{ site.baseurl }}/{% endunless %}{{ bottomLink.href }}" class="border-base-dark
              {% unless forloop.first %} border-left padding-left-2 {% endunless %}
              {% unless forloop.last %} padding-right-2 {% endunless %}
-            "
-          >{{ bottomLink.text }}</a>
-        {% endfor %}
-      </div>
-    </div>
+            ">{{ bottomLink.text }}</a>
+    {% endfor %}
+  </div>
+  </div>
   </div>
 </footer>

_includes/toolkit-hero-refresh.html

@@ -21,7 +21,7 @@ <h2 class=" padding-1 margin-bottom-5 margin-right-3 bg-red-warm-50v text-center
           </h2>
           {% endfor %}
         </div>
-        <div class="grid-row grid-gap-lg">
+        <div class="grid-row grid-gap-lg flex-justify-center">
           {% assign blurbs = page.intro %}
           {% for content in blurbs %}
           <div class="bg-white margin-3 grid-col-8 tablet:grid-col ">

css/_uswds-theme-custom-styles.scss

@@ -1686,7 +1686,9 @@ main {
       min-width: 300px;
       padding: 35px;
       .defined-width {
+        @include at-media('tablet') {
         width: 44ch;
+        }
       }
       @media screen and (min-width: 1024px) {
           background-color: white;
@@ -2009,14 +2011,79 @@ div.toolkit-todo__resources {
 }
 
 .footer-content {
-  margin-bottom: units(5);
-
+  // margin-bottom: units(5);
+  .top-logo {
+    width: 140px;
+  }
   h3 {
-    @include typeset("lang", "lg", 2);
+    font-size: 14px;
     margin: 0;
+    @include at-media('tablet') {
+        font-size: 12px;
+        line-height: 14.4px;
+      }
+      @include at-media('desktop') {
+        font-size: 16px;
+        line-height: 19.2px;
+        padding-block-end: 24px;
+      }
   }
   p {
-    max-width: measure($site-measure);
+    font-size: 14px;
+    @include at-media('tablet') {
+      margin-inline-start: 8px;
+      font-size: 12px;
+      line-height: 14.4px;
+    }
+    @include at-media('desktop') {
+      font-size: 16px;
+      line-height: 19.2px;
+    }
+  }
+
+  ul li {
+
+    @include at-media ('tablet') {
+        margin-block-end: 8px;
+      }
+
+      @include at-media('desktop') {
+        margin-block-end: 13px;
+      }
+  }
+
+  ul li a {
+    font-size: 14px;
+    @include at-media ('tablet') {
+    font-size: 12px;
+    line-height: 14.4px;
+    }
+    @include at-media('desktop') {
+      font-size: 16px;
+      line-height: 19.2px;
+    }
+  }
+
+  .subsection-subscribe {
+    p {
+      padding-block-start:37px;
+      padding-block-end: 24px;
+      @include at-media('desktop') {
+          padding-block-start: 23px;
+          padding-block-end: 22px;
+        }
+    }
+  }
+
+  .site-button {
+    font-size: 14px;
+    @include at-media('tablet') {
+      font-size: 12px;
+    }
+    @include at-media('desktop') {
+      font-size: 16px;
+      line-height: 19.2px;
+    }
   }
 }
 
@@ -2054,12 +2121,17 @@ div.toolkit-todo__resources {
 }
 
 .footer-section-bottom {
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.8);
-
+  font-size: 10px;
   width: 90%;
   margin: 0 auto;
   justify-content: center;
+  @include at-media('tablet') {
+    font-size: 12px;
+  }
+
+  @include at-media('desktop') {
+    font-size: 16px;
+  }
 }
 
 // Pattern Preview Boxes -------- //

pages/topx/intro.md

@@ -20,7 +20,7 @@ video-one:
   class: padding-bottom-9 padding-top-8 padding-x-9
   title:
     text: "Why Should I Facilitate a TOP Sprint at My Agency?"
-    class: text-blue-warm-60v padding-left-6
+    class: text-blue-warm-60v tablet:padding-left-6
   video:
     src: https://www.youtube.com/embed/hH5NwCca_5o
     alt-text: "Why Should I Facilitate a TOP Sprint at My Agency?"
@@ -42,7 +42,7 @@ video-two:
   class: padding-bottom-9 padding-top-0 padding-x-9
   title:
     text: "How Do I Facilitate a TOP Sprint?"
-    class: text-blue-warm-60v padding-left-6
+    class: text-blue-warm-60v tablet:padding-left-6
   video:
     src: https://www.youtube.com/embed/z6zl7kSo_GY
     alt-text: "How Do I Facilitate a TOP Sprint?"