publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 10:04:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tomn usds/template8 (#118)

Browse source 
* 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
This commit is contained in:
TomNUSDS 2021-06-14 11:06:23 -07:00 • committed by GitHub
parent 96fb0e8805
commit 3837538e51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 403 additions and 279 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/gatsby-config.js
View file

@ -7,6 +7,11 @@ module.exports = {
{ {
resolve: 'gatsby-plugin-sass', resolve: 'gatsby-plugin-sass',
options: { options: {
sassOptions: {
includePaths: [
'./node_modules/uswds',
],
},
cssLoaderOptions: { cssLoaderOptions: {
modules: { modules: {
exportLocalsConvention: 'camelCaseOnly', exportLocalsConvention: 'camelCaseOnly',
@ -15,7 +20,7 @@ module.exports = {
}, },
}, },
{ {
resolve: `gatsby-plugin-intl`, resolve: 'gatsby-plugin-intl',
options: { options: {
// language JSON resource path // language JSON resource path
path: `${__dirname}/src/intl`, path: `${__dirname}/src/intl`,

71
client/src/components/J40Aside.tsx
View file

@ -9,45 +9,38 @@ const J40Aside = () => {
return ( return (
<> <>
<aside <aside
aria-labelledby="left-sidebar" aria-labelledby="right-sidebar"
className={'j40-aside desktop:grid-col-3'} className={'j40-aside desktop:grid-col-3 usa-prose usa-section'}
id="left-sidebar"> id="right-sidebar">
<section <h1>Get Involved</h1>
className={'usa-prose grid-gap grid-container usa-section'}> <h2><img
<h3 className={'j40-aside-title'}>Get Involved</h3> className={'flex-align-self-center width-4 j40-aside-icon'}
<h5> src={chatIcon} alt={'chat icon'}/>
<img Send Feedback</h2>
className={'flex-align-self-center width-4'} src={chatIcon} <p className={'usa-prose site-prose'}>Have ideas about how to
alt={'chat icon'}/> acknowledge the on-the-ground experiences of your community?
<br/> </p>
Send Feedback Email: <a href="mailto: justice40open@usds.gov">
</h5> justice40open@usds.gov</a>
<p>Have ideas about how to acknowledge the on-the-ground <p>&nbsp;</p>
experiences of your community? <h2>
</p> <img
Email: <a href="mailto: justice40open@usds.gov"> className={'flex-align-self-center width-4 j40-aside-icon'}
justice40open@usds.gov</a> src={githubIcon} alt={'github icon'}/>
<p>&nbsp;</p> Join the open source community</h2>
<h5> <p>
<img Justice40’s code is open source, which means it is available for
className={'flex-align-self-center width-4'} the public to view and contribute. Anyone can view and
src={githubIcon} alt={'github icon'}/> contribute on GitHub.
<br/> </p>
Join the open source community</h5> <p>
<p> <a
Justice40’s code is open source, which means it is available for href={'https://github.com/usds/justice40-tool/' +
the public to view and contribute. Anyone can view and 'crisis-at-home-and-abroad/'}
contribute on GitHub. target={'_blank'}
</p> rel={'noreferrer'}
<p> key={'github3'}>Check it out on GitHub</a>
<a </p>
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>
</aside> </aside>
</> </>
); );

4
client/src/components/J40Footer.tsx
View file

@ -8,6 +8,7 @@ const J40Footer = () => {
<> <>
<Footer <Footer
size="big" size="big"
className={'j40-footer'}
primary={<></>} primary={<></>}
secondary={<FooterNav secondary={<FooterNav
aria-label="Footer navigation" aria-label="Footer navigation"
@ -66,13 +67,12 @@ const J40Footer = () => {
alt={'Whitehouse logo'}/> alt={'Whitehouse logo'}/>
} }
heading={<p heading={<p
className={' j40-footer-logo-heading'}> className={'j40-footer-logo-heading'}>
Council on Environmental Quality</p>} Council on Environmental Quality</p>}
/> />
</>, </>,
<> <>
<Address <Address
className={'j40-address-readability'}
key={'footeraddress'} key={'footeraddress'}
items={[ items={[
'730 Jackson Pl NW', '730 Jackson Pl NW',

89
client/src/components/J40Header.tsx
View file

@ -1,22 +1,15 @@
import React from 'react'; import React, {useState} from 'react';
import {GovBanner, import {Link, useIntl} from 'gatsby-plugin-intl';
import {
Header, Header,
Title, NavMenuButton,
PrimaryNav, PrimaryNav,
SiteAlert} from '@trussworks/react-uswds'; SiteAlert,
import {useIntl, Link} from 'gatsby-plugin-intl'; Title,
} from '@trussworks/react-uswds';
import {Helmet} from 'react-helmet'; import {Helmet} from 'react-helmet';
import {useFlags} from '../contexts/FlagContext'; 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 J40Header = () => {
const flags = useFlags(); const flags = useFlags();
const intl = useIntl(); const intl = useIntl();
@ -25,29 +18,75 @@ const J40Header = () => {
defaultMessage: 'Justice40', defaultMessage: 'Justice40',
description: 'Title of the project', 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 ( return (
<> <>
<Helmet> <Helmet>
<meta charSet="utf-8"/> <meta charSet="utf-8"/>
<title>{title}</title> <title>{title}</title>
</Helmet> </Helmet>
{/* <GovBanner/> */}
<SiteAlert <SiteAlert
variant="info" variant="info"
heading="Welcome to Justice40's Temporary Home"> className={'j40-sitealert'}>
<p> <b>Welcome to Justice40&apos;s Temporary Home</b> While Justice40 gets
While Justice40 gets up and running, up and running, we are using GitHub Pages as a temporary website
we are using GitHub Pages as a temporary website host. <br/> host. To learn more about GitHub Pages, click <a href="https://pages.github.com/">here</a>.
To learn more about GitHub Pages, click &nbsp;
<a href="https://pages.github.com/">here</a>.
</p>
</SiteAlert> </SiteAlert>
<GovBanner/> <Header
<Header className={'j40-header'} basic={true} role={'banner'}> basic={true} role={'banner'}
className={'usa-header j40-header'}>
<div className="usa-nav-container"> <div className="usa-nav-container">
<div className="usa-navbar"> <div className="usa-navbar">
<Title className={'j40-title'}>{title}</Title> <Title>{title}</Title>
<NavMenuButton
key={'mobileMenuButton'}
onClick={toggleMobileNav}
label="Menu"/>
</div> </div>
<PrimaryNav items={headerLinks(flags)} /> <PrimaryNav
items={headerLinks(flags)}
mobileExpanded={mobileNavOpen}
onToggleMobileNav={toggleMobileNav}
className={'j40-header'}
>
</PrimaryNav>
</div> </div>
</Header> </Header>
</> </>

6
client/src/components/__snapshots__/J40Footer.spec.tsx.snap
View file

@ -3,7 +3,7 @@
exports[`J40Footer renders correctly 1`] = ` exports[`J40Footer renders correctly 1`] = `
<DocumentFragment> <DocumentFragment>
<footer <footer
class="usa-footer usa-footer--big" class="usa-footer usa-footer--big j40-footer"
> >
<div <div
class="usa-footer__primary-section" class="usa-footer__primary-section"
@ -180,7 +180,7 @@ exports[`J40Footer renders correctly 1`] = `
class="grid-col-auto" class="grid-col-auto"
> >
<p <p
class=" j40-footer-logo-heading" class="j40-footer-logo-heading"
> >
Council on Environmental Quality Council on Environmental Quality
</p> </p>
@ -194,7 +194,7 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<address <address
class="usa-footer__address j40-address-readability" class="usa-footer__address"
> >
<div <div
class="usa-footer__contact-info grid-row grid-gap" class="usa-footer__contact-info grid-row grid-gap"

22
client/src/components/layout.tsx
View file

@ -1,7 +1,8 @@
import React, {ReactNode} from 'react'; import React, {ReactNode} from 'react';
import * as styles from './layout.module.scss'; import {GridContainer, Grid} from '@trussworks/react-uswds';
import J40Header from './J40Header'; import J40Header from './J40Header';
import J40Footer from './J40Footer'; import J40Footer from './J40Footer';
import J40Aside from '../components/J40Aside';
import {URLFlagProvider} from '../contexts/FlagContext'; import {URLFlagProvider} from '../contexts/FlagContext';
interface ILayoutProps { interface ILayoutProps {
@ -12,11 +13,20 @@ interface ILayoutProps {
const Layout = ({children, location}: ILayoutProps) => { const Layout = ({children, location}: ILayoutProps) => {
return ( return (
<URLFlagProvider location={location}> <URLFlagProvider location={location}>
<div className={styles.site}> <J40Header/>
<J40Header /> <GridContainer containerSize={'desktop-lg'}
<div className={styles.siteContent}>{children}</div> className={'j40-grid-container'}>
<J40Footer /> <Grid row>
</div> <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> </URLFlagProvider>
); );
}; };

208
client/src/pages/index.tsx
View file

@ -18,11 +18,10 @@ import pollutionIcon // @ts-ignore
from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg'; from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg';
// @ts-ignore // @ts-ignore
import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg'; import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg';
import J40Aside from '../components/J40Aside';
interface IndexPageProps { interface IndexPageProps {
location: Location; location: Location;
}; }
// markup // markup
const IndexPage = ({location}: IndexPageProps) => { const IndexPage = ({location}: IndexPageProps) => {
@ -35,126 +34,109 @@ const IndexPage = ({location}: IndexPageProps) => {
[washIcon, 'Clean water infrastructure'], [washIcon, 'Clean water infrastructure'],
]; ];
return ( return (<Layout location={location}>
<Layout location={location}> <h2>About Justice40</h2>
<main id="main-content" role="main"> <p>
<div className={'grid-row grid-gap-2'}> In an effort to address historical environmental injustices,
<section className={'grid-container usa-section'}> President Biden created the Justice40 Initiative on January
<div className={'desktop:grid-col'}> 27, 2021. The Justice40 Initiative directs 40% of the
<div className={'grid-row grid-gap'}> benefits from federal investments in seven key areas to
<div className={'usa-prose text-asset-container'}> overburdened and underserved communities.
<h2>About Justice40</h2> </p>
<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> <p>
Federal agencies will prioritize benefits using a new Federal agencies will prioritize benefits using a new
climate and economic justice screening tool. This screening climate and economic justice screening tool. This screening
tool will be a map that visualizes data to compare the tool will be a map that visualizes data to compare the
cumulative impacts of environmental, climate, and economic cumulative impacts of environmental, climate, and economic
factors. It is being developed by the Council on factors. It is being developed by the Council on
Environmental Quality (CEQ) with guidance from environmental Environmental Quality (CEQ) with guidance from environmental
justice leaders and communities affected by environmental justice leaders and communities affected by environmental
injustices. The first version of the screening tool will be injustices. The first version of the screening tool will be
released in July 2021. However, the screening tool and data released in July 2021. However, the screening tool and data
being used will be continuously updated to better reflect being used will be continuously updated to better reflect
the lived experiences of community members. the lived experiences of community members.
</p> </p>
<p> <p>
Read more about the Justice40 Initiative in President Read more about the Justice40 Initiative in President
Biden’s <a Biden’s <a
href={'https://www.whitehouse.gov/briefing-room/' + href={'https://www.whitehouse.gov/briefing-room/' +
'presidential-actions/2021/01/27/' + 'presidential-actions/2021/01/27/' +
'executive-order-on-tackling-the-climate-' + 'executive-order-on-tackling-the-climate-' +
'crisis-at-home-and-abroad/'} 'crisis-at-home-and-abroad/'}
target={'_blank'} target={'_blank'}
rel={'noreferrer'}> rel={'noreferrer'}>
Executive Order on Tackling the Climate Crisis at Home and Executive Order on Tackling the Climate Crisis at Home and
Abroad.</a> Abroad.</a>
</p> </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>
<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 <div
className={'usa-prose text-asset-container'}> className={'usa-icon-list__content'}> {item[1]} </div>
<h4>A Transparent, Community-First Approach</h4> </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> <h3>A Transparent, Community-First Approach</h3>
<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>
<p> <p>
<i>Inclusive:</i> Many areas which lack investments also Successful initiatives are guided by direct input from the
lack environmental data and would be overlooked using communities they are serving. CEQ commits to transparency,
available environmental data. CEQ is actively reaching out inclusivity, and iteration in building this screening tool.
to groups that have historically been excluded from </p>
decision-making, such as groups in rural and tribal areas,
to understand their needs and ask for their input.
</p>
<p> <p>
<i>Iterative:</i> The initial community prioritization list <i>Transparent:</i> The code and data behind the screening
provided by the screening tool is the beginning of a tool are open source, meaning it is available for the public
collaborative process in score refinement, rather than a to review and contribute to. This tool is being developed
final answer. CEQ has received recommendations on data sets publicly so that communities, academic experts, and anyone
from community interviews, the White House Environmental who’s interested can be involved in the tool-building
Justice Advisory Council, and through public comment, but process.
establishing a score that is truly representative will be a </p>
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>
</main> <p>
</Layout> <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>
); );
}; };

120
client/src/pages/timeline.tsx
View file

@ -1,81 +1,67 @@
import * as React from 'react'; import * as React from 'react';
import Layout from '../components/layout'; import Layout from '../components/layout';
import J40Aside from '../components/J40Aside';
// @ts-ignore // @ts-ignore
import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg'; import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
interface TimelinePageProps { interface TimelinePageProps {
location: URL; location: Location;
}; }
const TimelinePage = ({location}: TimelinePageProps) => { const TimelinePage = ({location}: TimelinePageProps) => {
return (<Layout location={location}> return (<Layout location={location}>
<main id="main-content" role="main"> <h2>Timeline</h2>
<div className={'grid-row grid-gap-2'}> <h3>Throughout the Process</h3>
<section className={'grid-container usa-section'}> <div className="grid-col">
<div className={'desktop:grid-col'}> <div className="grid-row grid-gap-lg">
<div className={'grid-row grid-gap-lg'}> <div className="grid-col-1">
<div className={'grid-gap-lg'}> <img
<h1>Timeline</h1> className={'flex-align-self-center width-4'}
<h2>Throughout the Process</h2> src={renewIcon} alt={'renew icon'}/>
<div className="grid-col"> </div>
<div className="grid-row grid-gap-lg"> <div className={'usa-prose text-asset-container ' +
<div className="grid-col-1"> 'grid-col-fill'}>
<img <p>Continuously engage with stakeholders and community
className={'flex-align-self-center width-4'} members to get feedback on the screening tool, scoring,
src={renewIcon} alt={'renew icon'}/> and overall process.</p>
</div> <p>Continuously source data that meets data principles as
<div className={'usa-prose text-asset-container ' + defined through community input.</p>
'grid-col-fill'}> </div>
<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/>
</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> </Layout>
); );
}; };

155
client/src/styles/global.scss
View file

@ -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/index.css";
@import "~@trussworks/react-uswds/lib/uswds.css";
// Custom SASS/CSS goes here
$j40-max-width: 80ex;
.j40-two-column { .j40-two-column {
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
@media (min-width: 768px) { @media (min-width: 40em) {
column-count: 2; column-count: 2;
column-gap: 1em; column-gap: 1em;
} }
@media (max-width: 768px) { @media (max-width: 40em) {
column-count: 1; column-count: 1;
column-gap: 0; column-gap: 0;
} }
@ -29,47 +56,129 @@
} }
.j40-two-column-confine { .j40-two-column-confine {
display: inline-flex;
max-width: fit-content; max-width: fit-content;
} }
.j40-header { @include at-media("mobile-lg") {
background-color: #112f4e; /* todo: move color to theme */ .j40-grid-container {
color: white; padding-right: 0;
}
} }
.j40-title { .j40-header, .j40-primary-nav, .j40-header > li > a{
font-size: xx-large; 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 { .j40-aside {
background-color: #eff6fb; 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 { .j40-footer {
padding-bottom: 1em; .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 { // spacing top & bottom around main content
display: inline-block; @include at-media("mobile-lg") {
text-align: center; .j40-main-content {
} margin-bottom: 2rem;
margin-top: 2.5rem;
.j40-footer-logo-heading { }
}
.j40-address-readability {
display: inline-block;
line-height: 1.5 !important; // trussworks issue
text-align: center;
} }
// This should really be part of uswds and use $theme-step-indicator-segment-color-complete // 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 { .j40-usa-process-list__item--complete {
&::before { &::before {
color: white; color: white;
background-color: #00a91c; background-color: #00a91c;
content: "✓";
} }
border-left-color: #005ea2 !important; // todo: fix 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;
}
}