homepage, content, etc

content/preview.yml

@@ -0,0 +1,12 @@
+- title: Estimated crime data
+  description: |
+    Crime trends at the state and national level for violent crime and
+    property crime since 1995.
+- title: NIBRS data
+  description: |
+    Incident-based data for crimes known to law enforcement for states
+    reporting NIBRS.
+- title: Other datasets
+  description: |
+    Hate crime, assaults on law enforcement, police employee data, agency
+    participation, cargo theft, and human trafficking.

src/components/About.js

@@ -65,10 +65,10 @@ const About = ({ dispatch }) =>
     <Helmet title="CDE :: About" />
     <section className="bg-white">
       <div className="px2 py7 container mx-auto">
-        <h1 className="mt0 mb4 pb1 fs-28 sm-fs-40 border-bottom border-blue-lighter">
+        <h1 className="mt0 mb4 pb1 fs-28 sm-fs-40 border-bottom border-blue-light">
           About the Crime Data Explorer
         </h1>
-        <div className="mb7 clearfix">
+        <div className="clearfix">
           <div className="md-col md-col-9 md-pr7 fs-16 sm-fs-20 serif">
             <p className="mb2 md-m0">
               The Crime Data Explorer is part of the FBI’s broader effort to
@@ -114,7 +114,7 @@ const About = ({ dispatch }) =>
     <section className="bg-blue-whiter">
       <div className="px2 py6 bg-lighten-1">
         <div className="container mx-auto">
-          <h2 className="mt0 mb4 pb1 fs-22 sm-fs-32 border-bottom border-blue-lighter">
+          <h2 className="mt0 mb4 pb1 fs-22 sm-fs-32 border-bottom border-blue-light">
             How states participate
           </h2>
           <h3 className="mt0 mb3 fs-22 sans-serif">
@@ -153,10 +153,9 @@ const About = ({ dispatch }) =>
                     </div>,
                   )}
               </div>
-              <div className="border-top bottom-0 fs-14 pt1 mt2">
+              <div className="mt6 pt2 fs-14 border-top border-blue-light">
                 To see which agencies submit NIBRS data to the FBI, download
                 <DownloadDataBtn
-                  className="fs-14"
                   data={[{ url: agenciesParticiaptionDownloadUrl }]}
                   text="Agency participation data"
                 />
@@ -173,7 +172,7 @@ const About = ({ dispatch }) =>
     </section>
     <section className="bg-white">
       <div className="px2 py7 container mx-auto">
-        <h2 className="mt0 mb4 pb1 fs-22 sm-fs-32 border-bottom border-blue-lighter">
+        <h2 className="mt0 mb4 pb1 fs-22 sm-fs-32 border-bottom border-blue-light">
           Crime data
         </h2>
         <div className="clearfix">
@@ -253,7 +252,7 @@ const About = ({ dispatch }) =>
     </section>
     <section className="bg-blue-whiter">
       <div className="px2 py7 container mx-auto">
-        <h2 className="mt0 mb4 pb1 fs-22 sm-fs-32 border-bottom border-blue-lighter">
+        <h2 className="mt0 mb4 pb1 fs-22 sm-fs-32 border-bottom border-blue-light">
           More to come
         </h2>
         <div className="mb3 md-pr7 border-box serif">

src/components/AboutTheData.js

@@ -60,7 +60,7 @@ class AboutTheData extends React.Component {
           </div>
           <div className="flex-none mb2 col-12 lg-block lg-col-4 lg-ml3 lg-mb0">
             <div className="p2 sm-px4 sm-py3 bg-blue white">
-              <h4 className="mt0 mb1 fs-18">Further reading</h4>
+              <h4 className="mt0 mb1 fs-18 sm-fs-22">Further reading</h4>
               <ul className="m0 p0 fs-14 left-bars">
                 {links.map((l, i) =>
                   <li key={i} className="mb1">

src/components/CrimeTypeFilter.js

@@ -9,7 +9,9 @@ const { violentCrime, propertyCrime } = crimeTypes
 
 const CrimeTypeFilter = ({ onChange, selected }) =>
   <div id="type-of-crime" className="mb4">
-    <div className="mb3 fs-22 bold border-bottom">Type of crime</div>
+    <div className="mb3 fs-22 bold border-bottom border-blue-light">
+      Type of crime
+    </div>
     <FilterGroup
       name="crime"
       title="Violent Crime"

src/components/DownloadsAndDocs.js

@@ -7,7 +7,8 @@ import Term from './Term'
 import otherDatasets from '../../content/datasets.yml'
 import markdown from '../util/md'
 
-const border = 'border-bottom border-blue-lighter'
+const border = 'border-bottom border-blue-light'
+const borderLight = 'border-bottom border-blue-lighter'
 const nibrsTerm = (
   <Term id="national incident-based reporting system (nibrs)" size="lg">
     incident-based (NIBRS)
@@ -60,12 +61,14 @@ const DownloadsAndDocs = () =>
         <h2 className={`mt0 mb5 pb1 fs-22 sm-fs-32 ${border}`}>
           Additional datasets
         </h2>
-        <div className={`clearfix xs-hide pb1 fs-14 bold caps serif ${border}`}>
+        <div
+          className={`clearfix xs-hide pb1 fs-14 bold caps serif ${borderLight}`}
+        >
           <div className="sm-col sm-col-4 sm-pl2">Dataset</div>
           <div className="sm-col sm-col-8">Description</div>
         </div>
         {otherDatasets.map((d, i) =>
-          <div key={i} className={`clearfix pt2 pb4 ${border}`}>
+          <div key={i} className={`clearfix pt2 pb4 ${borderLight}`}>
             <div className="sm-col sm-col-4 mb1 sm-px2 fs-16 sm-fs-20 bold">
               {d.title}
             </div>

src/components/Home.js

@@ -11,7 +11,7 @@ import { updateFilters } from '../actions/filters'
 import { oriToState } from '../util/ori'
 import { slugify } from '../util/text'
 import stateLookup from '../util/usa'
-import otherDataSets from '../../content/datasets.yml'
+import dataPreview from '../../content/preview.yml'
 
 const Home = ({ appState, dispatch, router }) => {
   const { crime, place, placeType } = appState.filters
@@ -44,22 +44,24 @@ const Home = ({ appState, dispatch, router }) => {
       <Helmet title="CDE :: Home" />
       <section className="px2 bg-blue-white">
         <div className="py7 container mx-auto relative">
-          <h1 className="mt0 pb1 fs-28 sm-fs-40 border-bottom border-blue-lighter">
-            National, state, and local crime data
+          <h1 className="mt0 mb4 pb1 fs-28 sm-fs-40 border-bottom border-blue-light">
+            Improving access to crime data
           </h1>
           <p className="mb1 md-col-9 fs-16 sm-fs-20 serif">
-            The FBI collects and publishes{' '}
-            <Term id="uniform crime reporting (ucr) program" size="lg">
-              Uniform Crime Reporting (UCR)
-            </Term>{' '}
-            data on an annual basis.
-          </p>
-          <p className="m0 md-col-9 fs-16 sm-fs-20 serif">
-            Over 18,000 law enforcement agencies across the country voluntarily
-            participate in the program by submitting data through a state
-            UCR program or directly to the FBI. This open data project is
-            part of our ongoing efforts to improve the accuracy and timeliness
-            of the nation’s crime statistics.
+            The Crime Data Explorer makes nationwide crime data accessible to a
+            wide range of users.{' '}
+            <Link to="/explorer/violent-crime" className="underline">
+              View trends
+            </Link>,{' '}
+            <Link to="/downloads-and-docs" className="underline">
+              download bulk datasets
+            </Link>, and access
+            the{' '}
+            <a href="/api" className="underline">
+              Crime Data API
+            </a>{' '}
+            for reported crime at the national, state, and
+            agency levels.
           </p>
         </div>
       </section>
@@ -136,15 +138,17 @@ const Home = ({ appState, dispatch, router }) => {
               View results
             </button>
           </div>
-          <h2 className="mt0 mb3 fs-22 sm-fs-32">Data downloads</h2>
+          <h2 className="mt0 mb3 fs-22 sm-fs-32">
+            Use our data in your project
+          </h2>
           <div className="flex flex-wrap mxn2">
-            {otherDataSets.slice(0, 3).map((d, i) =>
+            {dataPreview.map((d, i) =>
               <div
                 key={i}
                 className="flex col col-12 sm-col-6 md-col-4 px2 mb2 sm-mb4"
               >
                 <div className="col-12 px3 py2 bg-blue-white">
-                  <div className="mb1 pb1 fs-ch2 bold border-bottom border-blue-lighter">
+                  <div className="mb1 pb-tiny bold border-bottom border-blue-light">
                     {d.title}
                   </div>
                   <p className="mb2">{d.description}</p>
@@ -164,21 +168,16 @@ const Home = ({ appState, dispatch, router }) => {
       </section>
       <section className="px2 bg-blue-white">
         <div className="py7 container mx-auto">
-          <h2 className="mt0 mb1 fs-28 sm-fs-40">Crime data API</h2>
-          <h3 className="mt0 mb3 pb1 fs-18 sm-fs-28 border-bottom border-blue-lighter">
-            Use our data in your project
-          </h3>
-          <p className="mb3 sm-mb6 md-col-9 fs-16 sm-fs-20 serif">
+          <h2 className="mt0 mb4 pb1 fs-22 sm-fs-32 border-bottom border-blue-light">
+            Open data
+          </h2>
+          <p className="p0 md-col-9 fs-16 sm-fs-20 serif">
             We recently released the FBI’s first crime data{' '}
             <Term id="application programming interface (api)" size="lg">
               application programming interface (API)
-            </Term>
-            {' '}
+            </Term>{' '}
             so you can use this data in your own research and investigations.
           </p>
-          <a className="btn btn-primary" href="/api">
-            See API documentation
-          </a>
         </div>
       </section>
     </div>

src/components/LocationFilter.js

@@ -20,7 +20,9 @@ class LocationFilter extends React.Component {
 
     return (
       <div id="location" className="mb4">
-        <div className="mb3 fs-22 bold border-bottom">Location</div>
+        <div className="mb3 fs-22 bold border-bottom border-blue-light">
+          Location
+        </div>
         <LocationSelect
           onChange={onChange}
           onFocus={this.handleLocationFocus}

src/components/TimePeriodFilter.js

@@ -33,7 +33,9 @@ class TimePeriodFilter extends React.Component {
 
     return (
       <div id="time-period" className="mb5">
-        <div className="mb3 fs-22 bold border-bottom">Time period</div>
+        <div className="mb3 fs-22 bold border-bottom border-blue-light">
+          Time period
+        </div>
         <div className="clearfix">
           <div className="col col-5">
             <label htmlFor="since" className="hide">Time from</label>

src/components/UcrResourcesList.js

@@ -44,7 +44,7 @@ const UcrResourcesList = ({ crime, place, placeType }) => {
 
   return (
     <div>
-      <h3 className="mt4 mb1 fs-18">Resources</h3>
+      <h3 className="mt4 mb1 fs-18 sm-fs-22">Resources</h3>
       <ul className="m0 p0 fs-14 left-bars">
         {links.map((l, i) =>
           <li className="mb1" key={i}>

src/containers/ExplorerHeaderContainer.js

@@ -29,7 +29,7 @@ const ExplorerHeaderContainer = ({
   return (
     <div>
       <div className="items-baseline mt2 mb4">
-        <h1 className="flex-auto m0 pb-tiny fs-22 sm-fs-32 border-bottom border-blue-lighter">
+        <h1 className="flex-auto m0 pb-tiny fs-22 sm-fs-32 border-bottom border-blue-light">
           {isAgency
             ? isLoading ? 'Loading agency...' : placeDisplay
             : startCase(usState)}