refactor: tighten hero section and use single ruby polygon

Author: paulacianelli

_layouts/meetup.html

@@ -54,34 +54,12 @@ <h1 class="hero__title">
 
             <div class="hero__right" aria-hidden="true">
               <div class="hero__illustration">
-                <svg viewBox="0 0 320 220" xmlns="http://www.w3.org/2000/svg">
-                  <g fill="#3967D1" opacity="0.16">
-                    {% for row in (0..7) %}
-                      {% for col in (0..8) %}
-                        <circle cx="{{ col | times: 20 | plus: 145 }}" cy="{{ row | times: 20 | plus: 15 }}" r="2"/>
-                      {% endfor %}
-                    {% endfor %}
-                  </g>
-                  <g transform="translate(160, 110)">
-                    <polygon points="-140,-20 -90,-90 90,-90 140,-20 0,90"
-                             fill="#E63946"
-                             stroke="#9B1F2D"
-                             stroke-width="1.6"
-                             stroke-linejoin="round"/>
-                    <polygon points="-80,-20 -45,-90 45,-90 80,-20"
-                             fill="#FF6B7A"
-                             fill-opacity="0.55"/>
-                    <polygon points="-140,-20 140,-20 0,90"
-                             fill="#9B1F2D"
-                             fill-opacity="0.2"/>
-                    <g stroke="#9B1F2D" stroke-width="0.9" fill="none" opacity="0.42">
-                      <line x1="-80" y1="-20" x2="-45" y2="-90"/>
-                      <line x1="80" y1="-20" x2="45" y2="-90"/>
-                      <line x1="-80" y1="-20" x2="0" y2="90"/>
-                      <line x1="80" y1="-20" x2="0" y2="90"/>
-                      <line x1="-140" y1="-20" x2="140" y2="-20"/>
-                    </g>
-                  </g>
+                <svg viewBox="0 0 280 185" xmlns="http://www.w3.org/2000/svg">
+                  <polygon points="0,70 50,0 230,0 280,70 140,185"
+                           fill="#E63946"
+                           stroke="#9B1F2D"
+                           stroke-width="2"
+                           stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>

_sass/view_meetup.scss

@@ -34,7 +34,7 @@ $vm-pad-x: 4rem;
     align-items: center;
     display: flex;
     gap: 1rem;
-    height: 88px;
+    height: 48px;
     justify-content: space-between;
     margin: 0 auto;
     max-width: $vm-container;
@@ -99,7 +99,7 @@ $vm-pad-x: 4rem;
     grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
     margin: 0 auto;
     max-width: $vm-container;
-    padding: 2.25rem $vm-pad-x 2rem;
+    padding: 0.75rem $vm-pad-x 0.75rem;
     width: 100%;
   }
 
@@ -128,16 +128,16 @@ $vm-pad-x: 4rem;
     flex: 0 0 auto;
     flex-direction: column;
     font-weight: 700;
-    height: 152px;
+    height: 120px;
     justify-content: center;
-    min-width: 104px;
+    min-width: 90px;
     padding: 0.75rem;
     text-align: center;
-    width: 104px;
+    width: 90px;
   }
 
   .date-badge__day {
-    font-size: 2.5rem;
+    font-size: 2rem;
     line-height: 1;
   }
 
@@ -202,19 +202,19 @@ $vm-pad-x: 4rem;
   }
 
   .hero__right {
-    align-items: center;
+    align-items: flex-start;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     min-width: 0;
     position: relative;
   }
 
   .hero__illustration {
     align-items: center;
     display: flex;
-    height: 196px;
+    height: 110px;
     justify-content: center;
-    max-width: 280px;
+    max-width: 160px;
     width: 100%;
   }
 
@@ -229,7 +229,7 @@ $vm-pad-x: 4rem;
     .hero__inner {
       grid-template-columns: 1fr;
       gap: 2rem;
-      padding: 1.75rem 2rem 1.75rem;
+      padding: 1rem 2rem 1rem;
     }
 
     .hero__left {
@@ -248,13 +248,13 @@ $vm-pad-x: 4rem;
     }
 
     .date-badge {
-      height: 128px;
-      min-width: 96px;
-      width: 96px;
+      height: 104px;
+      min-width: 84px;
+      width: 84px;
     }
 
     .date-badge__day {
-      font-size: 2.125rem;
+      font-size: 1.75rem;
     }
   }
 }