From f2c6f252360b4aeb3e3a0367ca9b4b462b44ef7a Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 17 Jul 2024 22:42:37 +0000
Subject: [PATCH] fix(home): rename clipped to clipped-initiatives

---
 src/_includes/initiatives.html |  4 ++--
 src/partners.html              |  2 +-
 src/press.html                 |  2 +-
 src/resources.html             |  2 +-
 src/stylesheets/main.css       | 13 ++++++++++---
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/_includes/initiatives.html b/src/_includes/initiatives.html
index 2bf72022..663de3f8 100644
--- a/src/_includes/initiatives.html
+++ b/src/_includes/initiatives.html
@@ -1,5 +1,5 @@
 <svg class="position-absolute d-none d-lg-block">
-  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
+  <clipPath id="path-initiatives" clipPathUnits="objectBoundingBox">
     <path
       d="M0,0.048 C0,0.036,0.008,0.025,0.018,0.025 L0.982,0 C0.992,0,1,0.011,1,0.023 L0.979,0.931 C0.979,0.942,0.972,0.952,0.962,0.953 L0.048,1 C0.038,1,0.029,0.991,0.029,0.979 L0,0.048"
     ></path>
@@ -43,7 +43,7 @@ <h2 class="h1 text-center text-lg-start">Explore our initiatives</h2>
   >
     <div
       id="{{ initiative.id }}"
-      class="px-4 px-md-3 py-3 py-md-5 my-4 clipped"
+      class="px-4 px-md-3 py-3 py-md-5 my-4 clipped-initiatives"
       style=" background-color: var({{ initiative.class }})"
     >
       <div class="row px-2 px-md-0 pt-3 pt-md-5">
diff --git a/src/partners.html b/src/partners.html
index 76ed319c..43dc96cd 100644
--- a/src/partners.html
+++ b/src/partners.html
@@ -7,7 +7,7 @@
 {% include clipped-header.html %} {% include clipped-stats.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped background-purple-4 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
+  <div class="clipped-header background-purple-4 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 py-3 py-md-5 px-2 px-md-2">
       <h1 class="text-white mb-3">Partners</h1>
       <p class="text-white mb-3">
diff --git a/src/press.html b/src/press.html
index 1749bf06..44ced465 100644
--- a/src/press.html
+++ b/src/press.html
@@ -7,7 +7,7 @@
 {% include clipped-header.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped background-calitp-blue col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
+  <div class="clipped-header background-calitp-blue col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 py-3 py-md-5 px-2 px-md-2">
       <h1 class="text-white mb-2">Press</h1>
       <p class="text-white mb-3 pb-3">Below you’ll find news about Cal-ITP and our initiatives, including press releases and media coverage about new launches and project milestones. Interested in getting in touch? Reach out to us at <a
diff --git a/src/resources.html b/src/resources.html
index 1ba9e5af..89d3bfe8 100644
--- a/src/resources.html
+++ b/src/resources.html
@@ -7,7 +7,7 @@
 {% include clipped-header.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped background-purple-4 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
+  <div class="clipped-header background-purple-4 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 py-3 py-md-5 px-2 px-md-2">
       <h1 class="text-white mb-2">Resources</h1>
       <p class="text-white mb-3 pb-3">
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 89d4f961..ba029495 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -379,7 +379,8 @@ footer a:hover {
   border-color: rgba(var(--bs-white-rgb), 0.8);
 }
 
-.clipped,
+.clipped-header,
+.clipped-initiatives,
 .clipped-contact-start,
 .clipped-contact-end,
 .clipped-stat-start,
@@ -434,7 +435,8 @@ footer a:hover {
     line-height: var(--footer-nav-height);
   }
 
-  .clipped,
+  .clipped-header,
+  .clipped-initatives,
   .clipped-contact-start,
   .clipped-contact-end,
   .clipped-stat-start,
@@ -444,7 +446,12 @@ footer a:hover {
     border-radius: 0;
   }
 
-  .clipped {
+  .clipped-initiatives {
+    -webkit-clip-path: url(#path-initiatives);
+    clip-path: url(#path-initiatives);
+  }
+
+  .clipped-header {
     -webkit-clip-path: url(#path-header);
     clip-path: url(#path-header);
   }