Refactor: Rhombus CSS classes

src/_includes/clipped-header.html

@@ -0,0 +1,7 @@
+<svg class="position-absolute">
+  <clipPath id="path-header" clipPathUnits="objectBoundingBox">
+    <path
+      d="M0,0.081 C-0.001,0.051,0.007,0.026,0.018,0.026 L0.981,0 C0.992,0,1,0.025,1,0.055 L0.981,0.902 C0.981,0.928,0.973,0.949,0.963,0.95 L0.042,1 C0.033,1,0.025,0.98,0.024,0.953 L0,0.081"
+    ></path>
+  </clipPath>
+</svg>

src/_includes/contact.html

@@ -5,24 +5,24 @@ <h2 class="h1 text-center text-md-start d-block mb-3">The time is now—reach ou
 </section>
 
 <svg class="position-absolute">
-  <clipPath id="my-clip-path-start" clipPathUnits="objectBoundingBox">
+  <clipPath id="path-contact-start" clipPathUnits="objectBoundingBox">
     <path
-      d="M0.004,0.075 C0,0.034,0.029,0,0.066,0.002 L0.947,0.051 C0.979,0.052,1,0.081,1,0.116 V0.936 C1,0.973,0.977,1,0.944,1 H0.147 C0.117,1,0.091,0.977,0.088,0.943 L0.004,0.075"
+      d="M0.041,0.125 C0.043,0.092,0.066,0.066,0.096,0.063 L0.878,0 C0.91,-0.003,0.939,0.024,0.941,0.06 L1,0.929 C1,0.967,0.977,1,0.942,1 H0.061 C0.027,1,0,0.968,0.002,0.931 L0.041,0.125"
     ></path>
   </clipPath>
 </svg>
 
 <svg class="position-absolute">
-  <clipPath id="my-clip-path-end" clipPathUnits="objectBoundingBox">
+  <clipPath id="path-contact-end" clipPathUnits="objectBoundingBox">
     <path
-      d="M0.041,0.125 C0.043,0.092,0.066,0.066,0.096,0.063 L0.878,0 C0.91,-0.003,0.939,0.024,0.941,0.06 L1,0.929 C1,0.967,0.977,1,0.942,1 H0.061 C0.027,1,0,0.968,0.002,0.931 L0.041,0.125"
+      d="M0.004,0.075 C0,0.034,0.029,0,0.066,0.002 L0.947,0.051 C0.979,0.052,1,0.081,1,0.116 V0.936 C1,0.973,0.977,1,0.944,1 H0.147 C0.117,1,0.091,0.977,0.088,0.943 L0.004,0.075"
     ></path>
   </clipPath>
 </svg>
 
 <section class="row justify-content-md-center mt-5 mb-5 pb-5 align-content-stretch">
   <div class="col-12 col-md-4">
-    <div class="background-calitp-blue pt-3 pt-md-5 px-3 text-center clipped-end">
+    <div class="background-calitp-blue pt-3 pt-md-5 px-3 text-center clipped-contact-start">
       <picture
         ><img
           src="/images/connect.png"
@@ -44,7 +44,7 @@ <h3 class="text-white d-block my-4">Connect with Cal-ITP</h3>
   </div>
   <div class="col-md-auto">&nbsp;</div>
   <div class="col-12 col-md-4">
-    <div class="background-calitp-blue pt-3 pt-md-5 px-md-5 px-3 pt-2 text-center clipped-start">
+    <div class="background-calitp-blue pt-3 pt-md-5 px-md-5 px-3 pt-2 text-center clipped-contact-end">
       <picture
         ><img
           src="/images/stay-up-to-date.png"

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-initiative" 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-initiative"
       style=" background-color: var({{ initiative.class }})"
     >
       <div class="row px-2 px-md-0 pt-3 pt-md-5">

src/press.html

@@ -4,10 +4,10 @@
 title: Press
 ---
 
-{% include clipped.html %}
+{% include clipped-header.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped background-calitp-blue rhombus-1 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

@@ -4,18 +4,17 @@
 title: Resources
 ---
 
-{% include clipped.html %}
+{% include clipped-header.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped background-purple-4 rhombus-1 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">Below you’ll find information about Cal-ITP and our initiatives, including fact sheets, case studies, and more. Don’t see what you’re looking for? Reach out to us at
-        <a
-          rel="noreferrer"
-          target="_blank"
-          class="fw-bolder text-white"
-          href="mailto:[email protected]">[email protected]</a>.</p>
+      <p class="text-white mb-3 pb-3">
+        Below you’ll find information about Cal-ITP and our initiatives, including fact sheets, case studies, and more. Don’t see
+        what you’re looking for? Reach out to us at
+        <a rel="noreferrer" target="_blank" class="fw-bolder text-white" href="mailto:[email protected]">[email protected]</a>.
+      </p>
       {% include pills.html tags=site.data.resource_tags %}
     </div>
   </div>
@@ -24,44 +23,27 @@ <h1 class="text-white mb-2">Resources</h1>
 <section class="row justify-content-center" id="resources">
   <div class="col-10">
     <div class="offset-md-2 col-md-8 mb-5 pb-5">
-      {% comment %} Jekyll sorts by the date field in ascending order by default {% endcomment %}
-      {% assign all_resources = site.resources | reverse %}
-      {% comment %} one more reverse when creating the groups to order ascending by name {% endcomment %}
-      {% assign groups = all_resources | group_by: "category" | reverse %}
+      {% comment %} Jekyll sorts by the date field in ascending order by default {% endcomment %} {% assign all_resources =
+      site.resources | reverse %} {% comment %} one more reverse when creating the groups to order ascending by name {% endcomment
+      %} {% assign groups = all_resources | group_by: "category" | reverse %}
 
       <div class="tab-content" id="pills-tabContent">
-        <div
-          class="tab-pane fade active show"
-          id="pills-all"
-          role="tabpanel"
-          tabindex="0">
+        <div class="tab-pane fade active show" id="pills-all" role="tabpanel" tabindex="0">
           {% for group in groups %}
-            <h2 class="mb-4 mt-5">{{ group.name }}</h2>
-            {% assign items = group.items %}
-            {% include articles.html items=items %}
-            {% unless forloop.last %}
-              <hr/>
-            {% endunless %}
-          {% endfor %}
+          <h2 class="mb-4 mt-5">{{ group.name }}</h2>
+          {% assign items = group.items %} {% include articles.html items=items %} {% unless forloop.last %}
+          <hr />
+          {% endunless %} {% endfor %}
         </div>
         {% for tag in site.data.resource_tags %}
-          <div
-            class="tab-pane fade"
-            id="pills-{{ tag.id }}"
-            role="tabpanel"
-            aria-labelledby="pills-{{ tag.id }}-tab"
-            tabindex="0">
-            {% for group in groups %}
-              {% assign items = group.items | where_exp: "item", "item.tags contains tag.name" %}
-              {% unless items.size == 0 %}
-                <h2 class="mb-4 mt-5">{{ group.name }}</h2>
-                {% include articles.html items=items %}
-                {% unless forloop.last %}
-                  <hr/>
-                {% endunless %}
-              {% endunless %}
-            {% endfor %}
-          </div>
+        <div class="tab-pane fade" id="pills-{{ tag.id }}" role="tabpanel" aria-labelledby="pills-{{ tag.id }}-tab" tabindex="0">
+          {% for group in groups %} {% assign items = group.items | where_exp: "item", "item.tags contains tag.name" %} {% unless
+          items.size == 0 %}
+          <h2 class="mb-4 mt-5">{{ group.name }}</h2>
+          {% include articles.html items=items %} {% unless forloop.last %}
+          <hr />
+          {% endunless %} {% endunless %} {% endfor %}
+        </div>
         {% endfor %}
       </div>
     </div>

src/stylesheets/main.css

@@ -328,16 +328,17 @@ footer a:hover {
   border-color: rgba(var(--bs-white-rgb), 0.8);
 }
 
-.clipped,
-.clipped-start,
-.clipped-end {
+.clipped-initiative,
+.clipped-header,
+.clipped-contact-start,
+.clipped-contact-end {
   -webkit-clip-path: none;
   clip-path: none;
   border-radius: 1.25rem;
 }
 
-.clipped-start,
-.clipped-end {
+.clipped-contact-start,
+.clipped-contact-end {
   min-height: 100%;
 }
 
@@ -371,25 +372,31 @@ footer a:hover {
     line-height: var(--footer-nav-height);
   }
 
-  .clipped,
-  .clipped-start,
-  .clipped-end {
+  .clipped-initiative,
+  .clipped-header,
+  .clipped-contact-start,
+  .clipped-contact-end {
     border-radius: 0;
   }
 
-  .clipped {
-    -webkit-clip-path: url(#my-clip-path);
-    clip-path: url(#my-clip-path);
+  .clipped-initiative {
+    -webkit-clip-path: url(#path-initiative);
+    clip-path: url(#path-initiative);
   }
 
-  .clipped-start {
-    -webkit-clip-path: url(#my-clip-path-start);
-    clip-path: url(#my-clip-path-start);
+  .clipped-header {
+    -webkit-clip-path: url(#path-header);
+    clip-path: url(#path-header);
   }
 
-  .clipped-end {
-    -webkit-clip-path: url(#my-clip-path-end);
-    clip-path: url(#my-clip-path-end);
+  .clipped-contact-start {
+    -webkit-clip-path: url(#path-contact-start);
+    clip-path: url(#path-contact-start);
+  }
+
+  .clipped-contact-end {
+    -webkit-clip-path: url(#path-contact-end);
+    clip-path: url(#path-contact-end);
   }
 }