Refactor: hero section (#121)

_config.yml

@@ -1,7 +1,7 @@
 analytics: "G-VCVX2DGPPN"
 domain: "www.calitp.org"
 description: "A state government initiative, Cal-ITP is making riding by rail and bus simpler and more cost-effective—for California transit providers and riders."
-google_fonts: "https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&family=Raleway:wght@900&display=swap"
+google_fonts: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Raleway:wght@700&display=swap"
 source: ./src
 title: "Cal-ITP: California Integrated Travel Project"
 url: "https://www.calitp.org"

src/index.html

@@ -7,9 +7,9 @@
   <section id="deck">
     <section>
       <h1>A modern and consistent transportation experience throughout California</h1>
-      <p class="big">
-        Learn how the California Integrated Travel Project (Cal-ITP) is making riding by rail and bus simpler and more
-        cost-effective—for providers and riders.
+      <p>
+        Learn how the California Integrated Travel Project (Cal-ITP) is making riding by bus and train simpler and more
+        cost-effective—for providers and customers.
       </p>
     </section>
 
@@ -22,6 +22,21 @@ <h1>A modern and consistent transportation experience throughout California</h1>
     </picture>
   </section>
 
+  <picture class="railway d-none d-md-block">
+    <img
+      id="tracks-0"
+      src="images/tracks-divider-0.png"
+      alt="Decorative element with dots and dashes, meant to resemble a transit map"
+    />
+  </picture>
+  <picture class="railway d-md-none">
+    <img
+      id="tracks-0-sm"
+      src="images/tracks-divider-0-sm.png"
+      alt="Decorative element with dots and dashes, meant to resemble a transit map"
+    />
+  </picture>
+
   <section id="details">
     <section id="enabling-contactless-payment" class="box">
       <section class="callout">

src/stylesheets/main.css

@@ -1,18 +1,21 @@
 article {
   margin-left: auto;
   margin-right: auto;
-  width: 80vw;
+  width: 76vw;
 }
 h1,
 h2,
 h3,
 h4 {
   font-family: "Raleway", sans-serif;
-  color: #323a45;
+  color: #212121;
 }
 
 h1 {
-  font-size: 48.83px;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 120%;
+  margin-bottom: 19px;
 }
 
 h2 {
@@ -27,7 +30,9 @@ p,
 a,
 li {
   font-family: "Poppins", sans-serif;
-  color: #323a45;
+  color: #212121;
+  font-size: 16px;
+  line-height: 140%;
 }
 
 picture.railway img {
@@ -100,27 +105,17 @@ p.important {
 #deck {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: 1.75fr 1fr;
+  grid-template-columns: .85fr 1fr;
   grid-gap: 3em;
   line-height: 1.1;
   align-items: center;
+  justify-items: center;
   padding-bottom: 50px;
 }
 
-@media (max-width: 540px) {
-  #deck h1 {
-    font-size: 24px;
-  }
-}
-
 .big {
   font-size: 24px;
 }
-@media (max-width: 540px) {
-  #deck .big {
-    font-size: 18px;
-  }
-}
 
 #details {
   margin-top: 50px;