introduce jagged edge

Author: denten

_includes/section-break.html

@@ -1,6 +1,7 @@
 <div class="my-4 sm:my-0">
     <div class="flex text-xl justify-end">
-        <span class="bg-sky-600 px-2 text-white font-ibmsans pr-8 text-base lg:text-xl">
+        <span class="bg-sky-600 px-2 text-white font-ibmsans pr-8 text-base lg:text-xl
+            jagged-right">
             {{ include.section }}
         </span>
     </div>

_pages/team.html

@@ -38,11 +38,11 @@ <h2 class="font-ibmserif text-base font-semibold text-left">
           {% endif %}
 
           <!-- Title -->
-          <div class="flex items-center bg-gray-100">
-            <small class="leading-none text-gray-900 text-left leading-tight">
-              {{ member.title }}
-            </small>
-          </div>
+        <div class="flex items-center bg-yellow-100 jagged-right pr-2">
+          <small class="leading-none text-left leading-tight">
+            {{ member.title }}
+          </small>
+        </div>
 
           <!-- Years active -->
           {% if member.year %}

assets/css/main.css

@@ -17,3 +17,16 @@
     @apply text-sky-700;
   }
 }
+
+.jagged-right {
+  clip-path: polygon(
+    0 0,
+    93% 0,
+    100% 20%,
+    93% 40%,
+    100% 60%,
+    93% 80%,
+    100% 100%,
+    0 100%
+  );
+}