Nov 2019

_sass/main.scss

@@ -44,7 +44,7 @@ body {
 // Make .page-content extend content-width
 .page-content { @extend %content-width; }
 
-.btn {
+.btn-primary {
   display: inline-block;
   text-align: center;
   text-decoration: none;
@@ -54,13 +54,38 @@ body {
   font-size: 24px;
   border-radius: 9px;
   margin: 0 auto;
-
+  &:hover {
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    transform: translateY(-1px);
+  }
   &.-spaced-top {
     margin-top: 30px;
   }
 }
 
-.btn:hover { background-color: #888; }
+.btn-secondary {
+  background-color: #FCFCFC;
+  width: 210px;
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  padding: 10px 20px;
+  color: #464646;
+  font-size: 24px;
+  border-radius: 9px;
+  margin: 0 auto;
+  border: 3px solid #464646;
+  box-sizing: border-box;
+  border-radius: 9px;
+  &.-spaced-top {
+    margin-top: 30px;
+  }
+  &:hover {
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    transform: translateY(-1px);
+
+  }
+}
 
 .logo-large { height: 130px; }
 .logo-med { height: 90px; }
@@ -71,18 +96,23 @@ body {
 }
 
 .hero-banner {
+  width: 81%;
+  margin: auto;
   padding-top: 30px;
   padding-bottom: 30px;
+  border-bottom: 10px solid $blue;
+  margin-bottom: 8px;
+}
 
-  h1 {
-    font-weight: normal;
-    font-size: 48px;
-    text-align: center;
-  }
+h1 {
+  font-weight: normal;
+  font-size: 48px;
+  text-align: center;
+}
 
-  h2 {
-    font-weight: normal;
-    font-size: 38px;
-    text-align: center;
-  }
+h2 {
+  font-weight: normal;
+  font-size: 38px;
+  text-align: center;
 }
+

_sass/pages/_index.scss

@@ -4,7 +4,7 @@
 
   .three-buttons {
     position: absolute;
-    top: calc(100% - 80px);
+    top: calc(100% - 47px);
     width: 100%;
     text-align: center;
 

_sass/partials/_backgrounds.scss

@@ -1,20 +1,40 @@
-[class^="bkgd"] {
-  background-size: cover;
-  background-repeat: no-repeat;
-}
+// [class^="bkgd"] {
+//   background-size: cover;
+//   background-repeat: no-repeat;
+// }
 
 .bkgd-1 {
-  background-image: url(/assets/images/mobile-partition-left.png);
+  background: linear-gradient(292.39deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%);
+  border-top: 10px solid $yellow;
+  border-bottom: 10px solid $pink;
+  border-left: 20px solid $red;
+  border-right: 20px solid $green;
+  width: 70%;
+  margin: auto;
+  margin-bottom: 6px;
+}
 
-  @media (min-width: $desktop-min-width) {
-    background-image: url(/assets/images/partition-left.png);
-  }
+.bkgd-1b {
+  border-top: 10px solid $purple;
+  border-bottom: 10px solid $orange;
+  width: 73%;
+  margin: auto;
+  margin-bottom: 6px;
 }
 
 .bkgd-2 {
-  background-image: url(/assets/images/mobile-partition-right.png);
-
-  @media (min-width: $desktop-min-width) {
-    background-image: url(/assets/images/partition-right.png);
-  }
+  background: linear-gradient(57.07deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%);
+  border-top: 10px solid $green;
+  border-bottom: 10px solid $brown;
+  border-left: 20px solid $blue;
+  border-right: 20px solid $purple;
+  width: 70%;
+  margin: auto;
+  margin-bottom: 6px;
 }
+
+.bkgd-2b {
+  border-top: 10px solid #1BA4E3;
+  width: 73%;
+  margin: auto;
+}

_sass/partials/_layout.scss

@@ -4,8 +4,9 @@
 .simple-cols {
   display: flex;
 
+
   &.-standard {
-    padding: 120px 60px;
+    padding: 60px 60px;
     align-items: center;
     justify-content: space-evenly;
   }
@@ -50,6 +51,16 @@
   font-size: 20px;
 }
 
+.index-mission {
+  border-top: 10px solid #493390;
+  margin-top: -34px;
+  margin-bottom: 6px;
+  padding: 130px 60px 60px 60px !important;
+}
+
+.three-buttons {
+  z-index: 1
+}
 /**
  * Desktop Only -  A class for elements that should only show up on desktop
  * devices.

_sass/variables/_colors.scss

@@ -14,3 +14,5 @@ $yellow:        #FEF035;
 $orange:        #F59331;
 $green:         #16A050;
 $pink:          #F18DB9;
+$red:           #DE1D41;
+$brown:         #74420B;;

in-your-city.html

@@ -18,8 +18,8 @@ <h1>In Your City</h1>
   </p>
 </div>
 
-<div class="simple-cols -vertical -standard">
-    <a href="https://github.com/TransitTalk/Transit-Talk" class="btn">Visit our Github</a>
+<div class="bkgd-1b simple-cols -vertical -standard">
+    <a href="https://github.com/TransitTalk/Transit-Talk" class="btn-secondary">Visit our Github</a>
     <p class="hero-p">
       You don’t need to know what much about GTFS to create a version of <strong>Transit Talk</strong> for your city. Simply head over to out GitHub repository, create a fork of the app, and follow the instructions to build and install an instance of your own!
     </p>

index.html

@@ -15,7 +15,7 @@ <h2> Our Tool </h2>
   <div class="center-btn">
     <div class="vertical-cols -center">
       <img src="/assets/images/logo.png" alt="TransitTalk Logo" class="logo-large">
-      <a href="tool.html" class="btn -spaced-top">Learn More</a>
+      <a href="tool.html" class="btn-primary -spaced-top">Learn More</a>
     </div>
   </div>
   <p class="basic-p">
@@ -28,22 +28,22 @@ <h2> Our Tool </h2>
   </div>
 </div>
 
-<div class="simple-cols -standard">
+<div class="index-mission bkgd-1b simple-cols -standard">
   <div>
     <p class="basic-p">
       <strong>Transit Talk</strong> aims to create a transparent record of issues riders encounter, helping riders avoid problems on their commutes in real time while also helping transit agencies become more responsive to the needs of their customers.
     </p>
   </div>
   <div class="center-text">
     <h2> Our Mission </h2>
-    <a href="mission.html" class="btn">More Info</a>
+    <a href="mission.html" class="btn-secondary">More Info</a>
   </div>
 </div>
 
 <div class="bkgd-2 simple-cols -standard">
   <div class="center-text">
     <h2> Our Team </h2>
-    <a href="team.html" class="btn">Meet Us</a>
+    <a href="team.html" class="btn-secondary">Meet Us</a>
   </div>
   <p class="basic-p">
     <strong>Transit Talk</strong> is a volunteer-run project that was created at Chi Hack Night, a weekly community event where people of all backgrounds come together to work on civic tech projects.
@@ -52,7 +52,7 @@ <h2> Our Team </h2>
 
 <div class="vertical-cols -center">
   <h2> Application to Other Cities </h2>
-  <a href="https://github.com/TransitTalk/Transit-Talk" class="btn">Visit our Github</a>
+  <a href="https://github.com/TransitTalk/Transit-Talk" class="btn-primary">Visit our Github</a>
   <p class="hero-p">
     <strong>Transit Talk</strong> is built for more than just Chicago. Through the use of GTFS, a universal data standard used by transit agencies around the world, Transit Talk can be implemented elsewhere easily. Visit our “In Your City” tab to learn more.
   </p>

mission.html

@@ -16,7 +16,7 @@ <h2>Making Transit Better</h2>
   </p>
 </div>
 
-<div class="simple-cols -standard">
+<div class="bkgd-1b simple-cols -standard">
   <p class="hero-p">
     As a team of volunteers of varying transit-riding backgrounds, we understand the problems commuters face when using public transit. We aim to make everyone’s commute simpler, and to allow them to make educated choices on each trip.
   </p>

tool.html

@@ -15,7 +15,7 @@ <h2>Rider-Powered Transit Information</h2>
   </p>
 </div>
 
-<div class="simple-cols -standard">
+<div class="bkgd-1b simple-cols -standard">
   <p class="basic-p">
     <strong>Transit Talk</strong> allows users to quickly submit issue reports, generating a real time, crowd-sourced map of issues that can ultimately be used by transit advocates, transit agencies, and transit riders.
   </p>
@@ -29,7 +29,7 @@ <h2>Rider-Powered Transit Information</h2>
     alt="TransitTalk Mobile Screenshot">
 </div>
 
-<div class="simple-cols -standard">
+<div class="bkgd-2b simple-cols -standard">
   <p class="basic-p">
     Users can save stops they frequent and check what’s going on before they head out for the day, understanding which routes (or even specific vehicles) to avoid to make their commute better and simpler.
   </p>