From 3837538e517e7ac4b47a066ac8acfab04f11c034 Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Mon, 14 Jun 2021 11:06:23 -0700
Subject: [PATCH] Tomn usds/template8 (#118)

* Fix issues from #120
* Include USWDS scss into build.
  Allows us to do theme things. Compile time slower... Not sure if it's worth it since most items can be overridden in css and we can't theme the Navbar (e.g. invert colors).
* Update J40Footer.spec.tsx.snap
* Update gatsby-config.js
---
 client/gatsby-config.js                       |   7 +-
 client/src/components/J40Aside.tsx            |  71 +++---
 client/src/components/J40Footer.tsx           |   4 +-
 client/src/components/J40Header.tsx           |  89 +++++---
 .../__snapshots__/J40Footer.spec.tsx.snap     |   6 +-
 client/src/components/layout.tsx              |  22 +-
 client/src/pages/index.tsx                    | 208 ++++++++----------
 client/src/pages/timeline.tsx                 | 120 +++++-----
 client/src/styles/global.scss                 | 155 +++++++++++--
 9 files changed, 403 insertions(+), 279 deletions(-)

diff --git a/client/gatsby-config.js b/client/gatsby-config.js
index cae5a4d5..e6cea388 100644
--- a/client/gatsby-config.js
+++ b/client/gatsby-config.js
@@ -7,6 +7,11 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-sass',
       options: {
+        sassOptions: {
+          includePaths: [
+            './node_modules/uswds',
+          ],
+        },
         cssLoaderOptions: {
           modules: {
             exportLocalsConvention: 'camelCaseOnly',
@@ -15,7 +20,7 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-intl`,
+      resolve: 'gatsby-plugin-intl',
       options: {
         // language JSON resource path
         path: `${__dirname}/src/intl`,
diff --git a/client/src/components/J40Aside.tsx b/client/src/components/J40Aside.tsx
index 8f97a2d1..b73b9930 100644
--- a/client/src/components/J40Aside.tsx
+++ b/client/src/components/J40Aside.tsx
@@ -9,45 +9,38 @@ const J40Aside = () => {
   return (
     <>
       <aside
-        aria-labelledby="left-sidebar"
-        className={'j40-aside desktop:grid-col-3'}
-        id="left-sidebar">
-        <section
-          className={'usa-prose grid-gap grid-container usa-section'}>
-          <h3 className={'j40-aside-title'}>Get Involved</h3>
-          <h5>
-            <img
-              className={'flex-align-self-center width-4'} src={chatIcon}
-              alt={'chat icon'}/>
-            <br/>
-          Send Feedback
-          </h5>
-          <p>Have ideas about how to acknowledge the on-the-ground
-          experiences of your community?
-          </p>
-        Email: <a href="mailto: justice40open@usds.gov">
-        justice40open@usds.gov</a>
-          <p>&nbsp;</p>
-          <h5>
-            <img
-              className={'flex-align-self-center width-4'}
-              src={githubIcon} alt={'github icon'}/>
-            <br/>
-          Join the open source community</h5>
-          <p>
-          Justice40’s code is open source, which means it is available for
-          the public to view and contribute. Anyone can view and
-          contribute on GitHub.
-          </p>
-          <p>
-            <a
-              href={'https://github.com/usds/justice40-tool/' +
-            'crisis-at-home-and-abroad/'}
-              target={'_blank'}
-              rel={'noreferrer'}
-              key={'github3'}>Check it out on GitHub</a>
-          </p>
-        </section>
+        aria-labelledby="right-sidebar"
+        className={'j40-aside desktop:grid-col-3 usa-prose usa-section'}
+        id="right-sidebar">
+        <h1>Get Involved</h1>
+        <h2><img
+          className={'flex-align-self-center width-4 j40-aside-icon'}
+          src={chatIcon} alt={'chat icon'}/>
+        Send Feedback</h2>
+        <p className={'usa-prose site-prose'}>Have ideas about how to
+        acknowledge the on-the-ground experiences of your community?
+        </p>
+      Email: <a href="mailto: justice40open@usds.gov">
+      justice40open@usds.gov</a>
+        <p>&nbsp;</p>
+        <h2>
+          <img
+            className={'flex-align-self-center width-4 j40-aside-icon'}
+            src={githubIcon} alt={'github icon'}/>
+        Join the open source community</h2>
+        <p>
+        Justice40’s code is open source, which means it is available for
+        the public to view and contribute. Anyone can view and
+        contribute on GitHub.
+        </p>
+        <p>
+          <a
+            href={'https://github.com/usds/justice40-tool/' +
+          'crisis-at-home-and-abroad/'}
+            target={'_blank'}
+            rel={'noreferrer'}
+            key={'github3'}>Check it out on GitHub</a>
+        </p>
       </aside>
     </>
   );
diff --git a/client/src/components/J40Footer.tsx b/client/src/components/J40Footer.tsx
index 6210597c..5029375b 100644
--- a/client/src/components/J40Footer.tsx
+++ b/client/src/components/J40Footer.tsx
@@ -8,6 +8,7 @@ const J40Footer = () => {
     <>
       <Footer
         size="big"
+        className={'j40-footer'}
         primary={<></>}
         secondary={<FooterNav
           aria-label="Footer navigation"
@@ -66,13 +67,12 @@ const J40Footer = () => {
                       alt={'Whitehouse logo'}/>
                   }
                   heading={<p
-                    className={' j40-footer-logo-heading'}>
+                    className={'j40-footer-logo-heading'}>
                     Council on Environmental Quality</p>}
                 />
               </>,
               <>
                 <Address
-                  className={'j40-address-readability'}
                   key={'footeraddress'}
                   items={[
                     '730 Jackson Pl NW',
diff --git a/client/src/components/J40Header.tsx b/client/src/components/J40Header.tsx
index e7456aa6..1fbd0f36 100644
--- a/client/src/components/J40Header.tsx
+++ b/client/src/components/J40Header.tsx
@@ -1,22 +1,15 @@
-import React from 'react';
-import {GovBanner,
+import React, {useState} from 'react';
+import {Link, useIntl} from 'gatsby-plugin-intl';
+import {
   Header,
-  Title,
+  NavMenuButton,
   PrimaryNav,
-  SiteAlert} from '@trussworks/react-uswds';
-import {useIntl, Link} from 'gatsby-plugin-intl';
+  SiteAlert,
+  Title,
+} from '@trussworks/react-uswds';
 import {Helmet} from 'react-helmet';
 import {useFlags} from '../contexts/FlagContext';
 
-const headerLinks = (flags: string[] | undefined) => {
-  const timelineLink = <Link key="/timeline" to="/timeline"> Timeline </Link>;
-  const links = [];
-  if (flags && flags.includes('timeline')) {
-    links.push(timelineLink);
-  }
-  return links;
-};
-
 const J40Header = () => {
   const flags = useFlags();
   const intl = useIntl();
@@ -25,29 +18,75 @@ const J40Header = () => {
     defaultMessage: 'Justice40',
     description: 'Title of the project',
   });
+
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+
+  const toggleMobileNav = (): void =>
+    setMobileNavOpen((prevOpen) => !prevOpen);
+
+  const headerLinks = (flags: string[] | undefined) => {
+    // static map of all possible menu items. Originally, it was all strings,
+    // but we need to handle both onsite and offsite links.
+    const menuData = new Map<string, JSX.Element>([
+      ['about',
+        <Link
+          key={'about'} className={'j40-header'}
+          to={'/'}>About</Link>],
+      ['timeline',
+        <Link
+          to={'/timeline'}
+          key={'timline'}
+          className={'j40-header'}>Timeline</Link>],
+      ['cejst',
+        <Link
+          to={'/#cejst'}
+          key={'cejst'}
+          target={'_blank'}
+          className={'j40-header'}>CEJST</Link>],
+    ]);
+
+    // select which items from the above map to show, right now it's only two
+    // possibilities so it's simple. Note: strings are used as react keys
+    const menu =
+      flags?.includes('timeline') ?
+        ['about', 'timeline', 'cejst'] :
+        ['about', 'timeline', 'cejst']; // ['about', 'cejst'];
+    // TODO: make feature flags flags work.
+    return menu.map((key) => menuData.get(key));
+  };
+
   return (
     <>
       <Helmet>
         <meta charSet="utf-8"/>
         <title>{title}</title>
       </Helmet>
+      {/* <GovBanner/> */}
       <SiteAlert
         variant="info"
-        heading="Welcome to Justice40's Temporary Home">
-        <p>
-        While Justice40 gets up and running,
-        we are using GitHub Pages as a temporary website host. <br/>
-        To learn more about GitHub Pages, click &nbsp;
-          <a href="https://pages.github.com/">here</a>.
-        </p>
+        className={'j40-sitealert'}>
+        <b>Welcome to Justice40&apos;s Temporary Home</b> While Justice40 gets
+        up and running, we are using GitHub Pages as a temporary website
+        host. To learn more about GitHub Pages, click <a href="https://pages.github.com/">here</a>.
       </SiteAlert>
-      <GovBanner/>
-      <Header className={'j40-header'} basic={true} role={'banner'}>
+      <Header
+        basic={true} role={'banner'}
+        className={'usa-header j40-header'}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
-            <Title className={'j40-title'}>{title}</Title>
+            <Title>{title}</Title>
+            <NavMenuButton
+              key={'mobileMenuButton'}
+              onClick={toggleMobileNav}
+              label="Menu"/>
           </div>
-          <PrimaryNav items={headerLinks(flags)} />
+          <PrimaryNav
+            items={headerLinks(flags)}
+            mobileExpanded={mobileNavOpen}
+            onToggleMobileNav={toggleMobileNav}
+            className={'j40-header'}
+          >
+          </PrimaryNav>
         </div>
       </Header>
     </>
diff --git a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
index 0fe22eb8..81fedc54 100644
--- a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
+++ b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`J40Footer renders correctly 1`] = `
 <DocumentFragment>
   <footer
-    class="usa-footer usa-footer--big"
+    class="usa-footer usa-footer--big j40-footer"
   >
     <div
       class="usa-footer__primary-section"
@@ -180,7 +180,7 @@ exports[`J40Footer renders correctly 1`] = `
                       class="grid-col-auto"
                     >
                       <p
-                        class=" j40-footer-logo-heading"
+                        class="j40-footer-logo-heading"
                       >
                         Council on Environmental Quality
                       </p>
@@ -194,7 +194,7 @@ exports[`J40Footer renders correctly 1`] = `
                     class="usa-footer__secondary-link"
                   >
                     <address
-                      class="usa-footer__address j40-address-readability"
+                      class="usa-footer__address"
                     >
                       <div
                         class="usa-footer__contact-info grid-row grid-gap"
diff --git a/client/src/components/layout.tsx b/client/src/components/layout.tsx
index ba83a965..8d058ff9 100644
--- a/client/src/components/layout.tsx
+++ b/client/src/components/layout.tsx
@@ -1,7 +1,8 @@
 import React, {ReactNode} from 'react';
-import * as styles from './layout.module.scss';
+import {GridContainer, Grid} from '@trussworks/react-uswds';
 import J40Header from './J40Header';
 import J40Footer from './J40Footer';
+import J40Aside from '../components/J40Aside';
 import {URLFlagProvider} from '../contexts/FlagContext';
 
 interface ILayoutProps {
@@ -12,11 +13,20 @@ interface ILayoutProps {
 const Layout = ({children, location}: ILayoutProps) => {
   return (
     <URLFlagProvider location={location}>
-      <div className={styles.site}>
-        <J40Header />
-        <div className={styles.siteContent}>{children}</div>
-        <J40Footer />
-      </div>
+      <J40Header/>
+      <GridContainer containerSize={'desktop-lg'}
+        className={'j40-grid-container'}>
+        <Grid row>
+          <main id={'main-content'}
+            className={'usa-layout-docs desktop:grid-col-9 j40-main-content'}>
+            <section className={'usa-prose'}>
+              {children}
+            </section>
+          </main>
+          <J40Aside/>
+        </Grid>
+      </GridContainer>
+      <J40Footer/>
     </URLFlagProvider>
   );
 };
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index acc4981d..79ff5f90 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -18,11 +18,10 @@ import pollutionIcon // @ts-ignore
   from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg';
 // @ts-ignore
 import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg';
-import J40Aside from '../components/J40Aside';
 
 interface IndexPageProps {
   location: Location;
-};
+}
 
 // markup
 const IndexPage = ({location}: IndexPageProps) => {
@@ -35,126 +34,109 @@ const IndexPage = ({location}: IndexPageProps) => {
     [washIcon, 'Clean water infrastructure'],
   ];
 
-  return (
-    <Layout location={location}>
-      <main id="main-content" role="main">
-        <div className={'grid-row grid-gap-2'}>
-          <section className={'grid-container usa-section'}>
-            <div className={'desktop:grid-col'}>
-              <div className={'grid-row grid-gap'}>
-                <div className={'usa-prose text-asset-container'}>
-                  <h2>About Justice40</h2>
-                  <p>
-                    In an effort to address historical environmental injustices,
-                    President Biden created the Justice40 Initiative on January
-                    27, 2021. The Justice40 Initiative directs 40% of the
-                    benefits from federal investments in seven key areas to
-                    overburdened and underserved communities.
-                  </p>
+  return (<Layout location={location}>
+    <h2>About Justice40</h2>
+    <p>
+        In an effort to address historical environmental injustices,
+        President Biden created the Justice40 Initiative on January
+        27, 2021. The Justice40 Initiative directs 40% of the
+        benefits from federal investments in seven key areas to
+        overburdened and underserved communities.
+    </p>
 
-                  <p>
-                    Federal agencies will prioritize benefits using a new
-                    climate and economic justice screening tool. This screening
-                    tool will be a map that visualizes data to compare the
-                    cumulative impacts of environmental, climate, and economic
-                    factors. It is being developed by the Council on
-                    Environmental Quality (CEQ) with guidance from environmental
-                    justice leaders and communities affected by environmental
-                    injustices. The first version of the screening tool will be
-                    released in July 2021. However, the screening tool and data
-                    being used will be continuously updated to better reflect
-                    the lived experiences of community members.
-                  </p>
+    <p>
+        Federal agencies will prioritize benefits using a new
+        climate and economic justice screening tool. This screening
+        tool will be a map that visualizes data to compare the
+        cumulative impacts of environmental, climate, and economic
+        factors. It is being developed by the Council on
+        Environmental Quality (CEQ) with guidance from environmental
+        justice leaders and communities affected by environmental
+        injustices. The first version of the screening tool will be
+        released in July 2021. However, the screening tool and data
+        being used will be continuously updated to better reflect
+        the lived experiences of community members.
+    </p>
 
-                  <p>
-                    Read more about the Justice40 Initiative in President
-                    Biden’s <a
-                      href={'https://www.whitehouse.gov/briefing-room/' +
-                    'presidential-actions/2021/01/27/' +
-                    'executive-order-on-tackling-the-climate-' +
-                    'crisis-at-home-and-abroad/'}
-                      target={'_blank'}
-                      rel={'noreferrer'}>
-                    Executive Order on Tackling the Climate Crisis at Home and
-                    Abroad.</a>
-                  </p>
+    <p>
+        Read more about the Justice40 Initiative in President
+        Biden’s <a
+        href={'https://www.whitehouse.gov/briefing-room/' +
+        'presidential-actions/2021/01/27/' +
+        'executive-order-on-tackling-the-climate-' +
+        'crisis-at-home-and-abroad/'}
+        target={'_blank'}
+        rel={'noreferrer'}>
+        Executive Order on Tackling the Climate Crisis at Home and
+        Abroad.</a>
+    </p>
+
+    <h3>Areas of Focus</h3>
+    <div className={'grid-row grid-gap'}>
+      <div className={'j40-two-column-confine'}>
+        <ul className={'usa-icon-list j40-two-column'}>
+          {readMoreList.map((item, index) => {
+            return (
+              <li
+                key={`readmore_li_${index}`}
+                className={'usa-icon-list__item'}>
+                <div className={'usa-icon-list__icon'}>
+                  <img
+                    className={'j40-two-column-icons-spacing'}
+                    key={`readmore_img_${index}`}
+                    src={item[0]} alt={item[1] + ' icon'}/>
                 </div>
-              </div>
-
-              <div className={'grid-gap j40-two-column-confine'}>
-                <h4>Areas of Focus</h4>
-                <ul className={'usa-icon-list j40-two-column'}>
-                  {readMoreList.map((item, index) => {
-                    return (
-                      <li
-                        key={`readmore_li_${index}`}
-                        className={'usa-icon-list__item'}>
-                        <div className={'usa-icon-list__icon'}>
-                          <img
-                            className={'j40-two-column-icons-spacing'}
-                            key={`readmore_img_${index}`}
-                            src={item[0]} alt={item[1] + ' icon'}/>
-                        </div>
-                        <div
-                          className={'usa-icon-list__content'}> {item[1]} </div>
-                      </li>
-                    );
-                  })
-                  }
-                </ul>
-              </div>
-
-              <div className={'grid-row grid-gap'}>
                 <div
-                  className={'usa-prose text-asset-container'}>
-                  <h4>A Transparent, Community-First Approach</h4>
+                  className={'usa-icon-list__content'}> {item[1]} </div>
+              </li>
+            );
+          })
+          }
+        </ul>
+      </div>
+    </div>
 
-                  <p>
-                    Successful initiatives are guided by direct input from the
-                    communities they are serving. CEQ commits to transparency,
-                    inclusivity, and iteration in building this screening tool.
-                  </p>
 
-                  <p>
-                    <i>Transparent:</i> The code and data behind the screening
-                    tool are open source, meaning it is available for the public
-                    to review and contribute to. This tool is being developed
-                    publicly so that communities, academic experts, and anyone
-                    who’s interested can be involved in the tool-building
-                    process.
-                  </p>
+    <h3>A Transparent, Community-First Approach</h3>
 
-                  <p>
-                    <i>Inclusive:</i> Many areas which lack investments also
-                    lack environmental data and would be overlooked using
-                    available environmental data. CEQ is actively reaching out
-                    to groups that have historically been excluded from
-                    decision-making, such as groups in rural and tribal areas,
-                    to understand their needs and ask for their input.
-                  </p>
+    <p>
+    Successful initiatives are guided by direct input from the
+    communities they are serving. CEQ commits to transparency,
+    inclusivity, and iteration in building this screening tool.
+    </p>
 
-                  <p>
-                    <i>Iterative:</i> The initial community prioritization list
-                    provided by the screening tool is the beginning of a
-                    collaborative process in score refinement, rather than a
-                    final answer. CEQ has received recommendations on data sets
-                    from community interviews, the White House Environmental
-                    Justice Advisory Council, and through public comment, but
-                    establishing a score that is truly representative will be a
-                    long-term, ongoing process. As communities submit feedback
-                    and recommendations, CEQ will continue to improve the tools
-                    being built and the processes for stakeholder and public
-                    engagement.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </section>
-          <J40Aside/>
-        </div>
+    <p>
+      <i>Transparent:</i> The code and data behind the screening
+    tool are open source, meaning it is available for the public
+    to review and contribute to. This tool is being developed
+    publicly so that communities, academic experts, and anyone
+    who’s interested can be involved in the tool-building
+    process.
+    </p>
 
-      </main>
-    </Layout>
+    <p>
+      <i>Inclusive:</i> Many areas which lack investments also
+    lack environmental data and would be overlooked using
+    available environmental data. CEQ is actively reaching out
+    to groups that have historically been excluded from
+    decision-making, such as groups in rural and tribal areas,
+    to understand their needs and ask for their input.
+    </p>
+
+    <p>
+      <i>Iterative:</i> The initial community prioritization list
+    provided by the screening tool is the beginning of a
+    collaborative process in score refinement, rather than a
+    final answer. CEQ has received recommendations on data sets
+    from community interviews, the White House Environmental
+    Justice Advisory Council, and through public comment, but
+    establishing a score that is truly representative will be a
+    long-term, ongoing process. As communities submit feedback
+    and recommendations, CEQ will continue to improve the tools
+    being built and the processes for stakeholder and public
+    engagement.
+    </p>
+  </Layout>
   );
 };
 
diff --git a/client/src/pages/timeline.tsx b/client/src/pages/timeline.tsx
index 564e8f62..d7d751b1 100644
--- a/client/src/pages/timeline.tsx
+++ b/client/src/pages/timeline.tsx
@@ -1,81 +1,67 @@
 import * as React from 'react';
 import Layout from '../components/layout';
-import J40Aside from '../components/J40Aside';
 
 // @ts-ignore
 import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
 
 interface TimelinePageProps {
-  location: URL;
-};
+  location: Location;
+}
 
 const TimelinePage = ({location}: TimelinePageProps) => {
   return (<Layout location={location}>
-    <main id="main-content" role="main">
-      <div className={'grid-row grid-gap-2'}>
-        <section className={'grid-container usa-section'}>
-          <div className={'desktop:grid-col'}>
-            <div className={'grid-row grid-gap-lg'}>
-              <div className={'grid-gap-lg'}>
-                <h1>Timeline</h1>
-                <h2>Throughout the Process</h2>
-                <div className="grid-col">
-                  <div className="grid-row grid-gap-lg">
-                    <div className="grid-col-1">
-                      <img
-                        className={'flex-align-self-center width-4'}
-                        src={renewIcon} alt={'renew icon'}/>
-                    </div>
-                    <div className={'usa-prose text-asset-container ' +
-                    'grid-col-fill'}>
-                      <p>Continuously engage with stakeholders and community
-                        members to get feedback on the screening tool, scoring,
-                        and overall process.</p>
-                      <p>Continuously source data that meets data principles as
-                        defined through community input.</p>
-                    </div>
-                  </div>
-                </div>
-
-                <h2>Milestones</h2>
-                <ol className={'usa-process-list'}>
-                  <li
-                    className={'j40-usa-process-list__item--complete ' +
-                      'usa-process-list__item padding-bottom-4 '}
-                    aria-details={'milestone 1 done'}>
-                    <h4
-                      className={'usa-process-list__heading'}
-                    >Milestone 1</h4>
-                    <p className={'margin-top-05'}>
-                        Publish data principles on this site by June 2021.</p>
-                  </li>
-                  <li
-                    className={'usa-process-list__item padding-bottom-4'}
-                    aria-details={'milestone 2 next'}>
-                    <h4
-                      className={'usa-process-list__heading'}
-                    >Milestone 2</h4>
-                    <p>Make the first version of a screening tool available
-                        by
-                        July 2021.</p>
-                  </li>
-                  <li
-                    className={'usa-process-list__item padding-bottom-4'}
-                    aria-details={'milestone 3'}>
-                    <h4
-                      className={'usa-process-list__heading'}
-                    >Milestone 3</h4>
-                    <p>Create a public scorecard to ensure accountability of
-                        investments by February 2022.</p>
-                  </li>
-                </ol>
-              </div>
-            </div>
-          </div>
-        </section>
-        <J40Aside/>
+    <h2>Timeline</h2>
+    <h3>Throughout the Process</h3>
+    <div className="grid-col">
+      <div className="grid-row grid-gap-lg">
+        <div className="grid-col-1">
+          <img
+            className={'flex-align-self-center width-4'}
+            src={renewIcon} alt={'renew icon'}/>
+        </div>
+        <div className={'usa-prose text-asset-container ' +
+        'grid-col-fill'}>
+          <p>Continuously engage with stakeholders and community
+            members to get feedback on the screening tool, scoring,
+            and overall process.</p>
+          <p>Continuously source data that meets data principles as
+            defined through community input.</p>
+        </div>
       </div>
-    </main>
+    </div>
+
+    <h3>Milestones</h3>
+    <ol className={'usa-process-list'}>
+      <li
+        className={'j40-usa-process-list__item--complete ' +
+          'usa-process-list__item padding-bottom-4 '}
+        aria-details={'milestone 1 done'}>
+        <h4
+          className={'usa-process-list__heading'}
+        >Milestone 1</h4>
+        <p className={'margin-top-05'}>
+            Publish data principles on this site by June 2021.</p>
+      </li>
+      <li
+        className={'usa-process-list__item padding-bottom-4'}
+        aria-details={'milestone 2 next'}>
+        <h4
+          className={'usa-process-list__heading'}
+        >Milestone 2</h4>
+        <p>Make the first version of a screening tool available
+            by
+            July 2021.</p>
+      </li>
+      <li
+        className={'usa-process-list__item padding-bottom-4'}
+        aria-details={'milestone 3'}>
+        <h4
+          className={'usa-process-list__heading'}
+        >Milestone 3</h4>
+        <p>Create a public scorecard to ensure accountability of
+            investments by February 2022.</p>
+      </li>
+    </ol>
   </Layout>
   );
 };
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index b729b300..f9e21409 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -1,15 +1,42 @@
+/*
+  These are necessary for the image and font urls referenced in the source
+  files to resolve correctly.
+*/
+$theme-image-path: '../../node_modules/uswds/src/img';
+$theme-font-path: '../../node_modules/uswds/src/fonts';
+
+/*
+  Example:
+
+  The url for the hero image in the source file is not currently prefixed by
+  the $theme-image-path above.
+
+  $theme-hero-image: '#{$theme-image-path}/hero.png';
+*/
+
+// Custom USWDS changes to variables go here
+// see https://designsystem.digital.gov/documentation/settings/
+$theme-show-compile-warnings: false;
+$theme-show-notifications: false;
+
+$theme-font-role-heading: "sans";
+
+@import '../../node_modules/uswds';
+
 @import "~@trussworks/react-uswds/lib/index.css";
-@import "~@trussworks/react-uswds/lib/uswds.css";
+
+// Custom SASS/CSS goes here
+$j40-max-width: 80ex;
 
 .j40-two-column {
   overflow: hidden;
   padding: 0;
 
-  @media (min-width: 768px) {
+  @media (min-width: 40em) {
     column-count: 2;
     column-gap: 1em;
   }
-  @media (max-width: 768px) {
+  @media (max-width: 40em) {
     column-count: 1;
     column-gap: 0;
   }
@@ -29,47 +56,129 @@
 }
 
 .j40-two-column-confine {
+  display: inline-flex;
   max-width: fit-content;
 }
 
-.j40-header {
-  background-color: #112f4e; /* todo: move color to theme */
-  color: white;
+@include at-media("mobile-lg") {
+  .j40-grid-container {
+    padding-right: 0;
+  }
 }
 
-.j40-title {
-  font-size: xx-large;
+.j40-header, .j40-primary-nav, .j40-header > li > a{
+  background-color: #112f4e; /* todo: move color to theme */
+  color: white !important;
+  z-index: 5;
+
+  .usa-nav-container {
+    max-width: ($j40-max-width*2);
+  }
+
+  span {
+    // make sure the open close cheveron is colored correctly
+    color: white;
+  }
+
+  // this is the title
+  .usa-logo__text {
+    font-size: 1.8em;
+    font-family: "serif";
+  }
+
+  .usa-current::after, :hover::after {
+    background-color: #2491ff !important;
+  }
+
+  // menu item font
+  .usa-nav__primary {
+    font-size: 1.2em;
+  }
+
+  //media (max-width: 63.99em)
+  //.usa-nav__primary a:not(.usa-button):hover {}
 }
 
 .j40-aside {
   background-color: #eff6fb;
+  padding-right: 1em;
+  padding-left: 1em;
+
+  h1 {
+    font-weight: 100;
+    font-size: 2em;
+  }
+
+  h2 {
+    font-weight: 100;
+    font-size: 1.4em;
+  }
+
+  h3 {
+    font-weight: 100;
+    font-size: 1.3em;
+  }
+
+  .j40-aside-icon {
+    display: flex;
+    margin-top: 3px;
+    margin-bottom: 12px;
+  }
 }
 
-.j40-aside-title {
-  padding-bottom: 1em;
+.j40-footer {
+  .usa-footer__contact-info {
+    justify-content: center;
+    line-height: 1.5;
+    text-align: center;
+  }
+
+  .j40-footer-logo {
+    display: inline-block;
+    text-align: center;
+  }
 }
 
-.j40-footer-logo {
-  display: inline-block;
-  text-align: center;
-}
-
-.j40-footer-logo-heading {
-}
-
-.j40-address-readability {
-  display: inline-block;
-  line-height: 1.5 !important; // trussworks issue
-  text-align: center;
+// spacing top & bottom around main content
+@include at-media("mobile-lg") {
+  .j40-main-content {
+    margin-bottom: 2rem;
+    margin-top: 2.5rem;
+  }
 }
 
 // This should really be part of uswds and use $theme-step-indicator-segment-color-complete
+// The Progress element doesn't really support color changing the line connecting progress
+// (like the Steps element does) and the checkbox.
+// The border-left-color required an !important to make work. Maybe add a feature request
+// to have the process list officially support a more Steps-like behavior
 .j40-usa-process-list__item--complete {
   &::before {
     color: white;
     background-color: #00a91c;
-    content: "✓";
   }
 
   border-left-color: #005ea2 !important; // todo: fix
 }
+
+// NOTE: uswds `.usa-prose` defines these all as Merriweather Web via $theme-font-role-heading
+.usa-prose {
+  h1, h2, h3, h4 {
+    font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  }
+  p, div {
+    max-width: $j40-max-width;
+  }
+}
+
+.j40-sitealert {
+  p {
+    margin: 0;
+  }
+  padding-top: 0;
+  padding-bottom: 0;
+  .usa-alert:before {
+    margin-top: 12px !important;
+  }
+}
+