More tweaks from today's meeting (#87)

Just playing with layout.
- Inverted header
- updated snapshot
- adjusted column widths
- Update J40Footer.spec.tsx.snap
This commit is contained in:
TomNUSDS 2021-06-02 18:34:21 -07:00 committed by GitHub
commit f9ac170c6a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 175 additions and 134 deletions

View file

@ -1,13 +1,12 @@
import * as React from 'react';
import Layout from '../components/layout';
// import {GridContainer, Grid} from '@trussworks/react-uswds';
// this section seems too verbose? must be a more readable way to do this.
// this inlines the svg as data:image/svg+xml For larger images this
// can cause page bloat, but it should be fine here.
// @ts-ignore
import publicIcon from '/node_modules/uswds/dist/img/usa-icons/public.svg';
// @ts-ignore
import chatIcon from '/node_modules/uswds/dist/img/usa-icons/chat.svg';
// @ts-ignore
import githubIcon from '/node_modules/uswds/dist/img/usa-icons/github.svg';
@ -19,18 +18,15 @@ import busIcon from '/node_modules/uswds/dist/img/usa-icons/directions_bus.svg';
import homeIcon from '/node_modules/uswds/dist/img/usa-icons/home.svg';
// @ts-ignore
import groupsIcon from '/node_modules/uswds/dist/img/usa-icons/groups.svg';
// todo: fix svg overlay
import pollutionIcon // @ts-ignore
from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg';
// @ts-ignore
import pollutionIcon from '/node_modules/uswds/dist/img/usa-icons/warning.svg';
// @ts-ignore
// eslint-disable-next-line max-len
import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg';
// markup
const IndexPage = () => {
const readMoreList: (any | string)[][] = [
[publicIcon, 'Climate change'],
[ecoIcon, 'Clean energy and energy efficiency'],
[busIcon, 'Clean transit'],
[homeIcon, 'Affordable and sustainable housing'],
@ -42,15 +38,14 @@ const IndexPage = () => {
return (
<Layout>
<main id="main-content" role="main">
<section className="grid-container">
<div className="grid-row grid-gap">
<section className="grid-container usa-section">
<div className="grid-row grid-gap-2">
<div className="desktop:grid-col">
<div className="grid-row grid-gap">
<div
className="desktop:grid-col-10 \
usa-prose text-asset-container">
<h2>Our Team</h2>
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
@ -75,13 +70,21 @@ const IndexPage = () => {
<p>
Read more about the Justice40 Initiative in President
Bidens Executive Order on Tackling the Climate Crisis at
Home and Abroad.
Bidens <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>
</div>
</div>
<div className="tablet:grid-col-10">
<h4>Areas of Focus</h4>
<ul className="usa-icon-list j40-two-column">
{readMoreList.map((item, index) => {
return (
@ -108,84 +111,53 @@ const IndexPage = () => {
<div
className="desktop:grid-col-10 \
usa-prose text-asset-container">
<h3>A Transparent, Community-First Approach</h3>
<h4>A Transparent, Community-First Approach</h4>
<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.
communities they are serving. CEQ commits to transparency,
inclusivity, and iteration in building this screening tool.
</p>
<p>
Transparent: 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 whos interested can be
involved in the tool-building process.
<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
whos interested can be involved in the tool-building
process.
</p>
<p>
Inclusive: 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.
<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>
Iterative: 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.
<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 className="grid-row grid-gap">
<div
className="desktop:grid-col-10 \
usa-prose text-asset-container">
<h3>Timeline</h3>
<p>
[timeline image here]
</p>
<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>
{/* aside*/}
<aside
aria-labelledby="left-sidebar"
className="desktop:grid-col-2 usa-prose"
className="desktop:grid-col-3 usa-prose grid-gap j40-aside"
id="left-sidebar">
<h2 className={'usa-graphic-list__heading'}>Get Involved</h2>
<h3>
@ -195,8 +167,7 @@ const IndexPage = () => {
<br/>
Send Feedback
</h3>
<p>Have ideas about how to
acknowledge the on-the-ground
<p>Have ideas about how to acknowledge the on-the-ground
experiences of your community?
</p>
Email: <a href="mailto: justice40open@usds.gov">
@ -210,13 +181,17 @@ const IndexPage = () => {
Join the open source community</h3>
<p>
Justice40s code is open source, which means it is available for
the public to view and contribute.
Anyone can view and contribute on GitHub.
the public to view and contribute. Anyone can view and
contribute on GitHub.
</p>
<p>
<a href={'https://github.com/usds/justice40-tool'}>Check it out
on GitHub</a></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>
</div>