fix(home): rename clipped to clipped-initiatives

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">

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">

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

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">

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);
   }