refactor(initiatives): use variable to set background, use css vars

cal-itp · Jun 5, 2023 · 1041650 · 1041650
1 parent beb258e
commit 1041650
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 26 deletions.
diff --git a/src/_data/initiatives.yml b/src/_data/initiatives.yml
@@ -19,7 +19,7 @@
   button:
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
-  class: primary-blue
+  class: --calitp-primary-blue
 - tag: Benefits
   slug: benefits
   id: automating-customer-discounts
@@ -45,7 +45,7 @@
   button:
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
-  class: red-5
+  class: --calitp-red-5
 - tag: GTFS
   slug: gtfs
   id: standardizing-trip-quality
@@ -67,4 +67,4 @@
   button:
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
-  class: purple-4
+  class: --calitp-purple-4
diff --git a/src/_includes/initiatives.html b/src/_includes/initiatives.html
@@ -27,10 +27,11 @@ <h2 class="text-center text-lg-start">Explore our initiatives</h2>
 <div class="tab-content" id="pills-tabContent">
   {% for initiative in site.data.initiatives %}
     <div
-      class="tab-pane fade {{ initiative.active }}"
+      class="tab-pane fade {{ initiative.active }} rounded rounded-4"
       id="pills-{{ initiative.slug }}"
       role="tabpanel"
       aria-labelledby="pills-{{ initiative.slug }}-tab"
+      style="background-color: var({{ initiative.class }})"
       tabindex="0">
       <div id="{{ initiative.id }}" class="rounded px-3 py-5">
         <div class="row">
@@ -48,7 +49,7 @@ <h3 class="text-white text-center text-md-start pb-2 pb-md-0">{{ initiative.head
               </p>
             {% endfor %}
             <div class="d-grid d-md-block border-bottom border-white border-2">
-              <a href="{{ initiative.button.url }}" class="btn btn-outline-light fw-bolder mt-2 mb-4 text-{{ initiative.class }}">{{ initiative.button.text }}</a>
+              <a href="{{ initiative.button.url }}" class="btn btn-outline-light fw-bolder mt-2 mb-4">{{ initiative.button.text }}</a>
             </div>
           </div>
         </div>

diff --git a/src/index.html b/src/index.html
@@ -103,7 +103,7 @@ <h2 class="text-center text-md-start">Helping California achieve critical goals
     alt="Decorative element with dots and dashes, meant to resemble a transit map" />
 </picture>
 
-<section id="details">
+<section id="initiatives">
   {% include initiatives.html %}
 </section>
 

diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
@@ -158,22 +158,6 @@ p.important {
   color: var(--bs-white);
 }
 
-#initiatives #enabling-contactless-payment {
-  background-color: #c64e5a;
-}
-
-#initiatives #automating-customer-discounts {
-  background-color: #046b99;
-}
-
-#initiatives #standardizing-trip-quality {
-  background-color: #5b559c;
-}
-
-#initiatives .tab-content .tab-list article:nth-child(n + 3) {
-  display: none;
-}
-
 .red-link {
   background-color: var(--calitp-red-5);
   color: var(--bs-white);
@@ -250,16 +234,20 @@ p.important {
   color: #212121;
 }
 
+#initiatives .tab-content .tab-list article:nth-child(n + 3) {
+  display: none;
+}
+
 .nav-pills {
   --bs-nav-pills-border-radius: 19px;
-  --bs-nav-pills-link-active-color: #fff;
-  --bs-nav-pills-link-active-bg: #212121;
+  --bs-nav-pills-link-active-color: var(--bs-white);
+  --bs-nav-pills-link-active-bg: var(--bs-body-color);
 }
 
 .nav-pills .nav-link {
   padding: 0.23rem;
-  border: 2px solid #212121;
-  color: #212121;
+  border: 2px solid var(--bs-body-color);
+  color: var(--bs-body-color);
 }
 
 #lastminute {