Fix Event detail page grid layout

Links and body text were being spread out vertically too much.

Author: jhh

website/static/css/main.css

@@ -1692,6 +1692,11 @@ select {
   margin-bottom: -0.5rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1707,16 +1712,6 @@ select {
   margin-bottom: 3px;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 .-ml-4 {
   margin-left: -1rem;
 }
@@ -2094,10 +2089,6 @@ select {
   justify-content: space-between;
 }
 
-.justify-around {
-  justify-content: space-around;
-}
-
 .justify-evenly {
   justify-content: space-evenly;
 }
@@ -3226,13 +3217,12 @@ input#id_phone_number, label[for='id_phone_number'] {
     grid-column: span 5 / span 5;
   }
 
-  .md\:row-span-3 {
-    grid-row: span 3 / span 3;
+  .md\:row-span-4 {
+    grid-row: span 4 / span 4;
   }
 
-  .md\:mx-2 {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
+  .md\:row-span-5 {
+    grid-row: span 5 / span 5;
   }
 
   .md\:mx-0 {
@@ -3288,8 +3278,12 @@ input#id_phone_number, label[for='id_phone_number'] {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .md\:grid-rows-3 {
-    grid-template-rows: repeat(3, minmax(0, 1fr));
+  .md\:grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+
+  .md\:grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
   }
 
   .md\:place-items-center {
@@ -3314,10 +3308,6 @@ input#id_phone_number, label[for='id_phone_number'] {
     margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .md\:p-2 {
-    padding: 0.5rem;
-  }
-
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -3342,11 +3332,6 @@ input#id_phone_number, label[for='id_phone_number'] {
     grid-column: span 1 / span 1;
   }
 
-  .lg\:mx-2 {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-
   .lg\:ml-0 {
     margin-left: 0px;
   }

website/templates/events/event_page.html

@@ -4,7 +4,7 @@
 {% block nav_classes %}border-b-2 border-gray-100{% endblock %}
 
 {% block content %}
-  <div class="px-4 md:px-6 lg:px-8 mx-auto grid grid-cols-1 md:grid-cols-5 md:grid-rows-3 grid-flow-row gap-4">
+  <div class="px-4 md:px-6 lg:px-8 mx-auto grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 grid-flow-row gap-4">
 
     <div class="pt-4 lg:pt-6 md:col-span-4">
       <span class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ event.name }}</span>
@@ -21,7 +21,7 @@
     </div>
   </div>
 
-  <div class="order-last md:order-none mx-auto md:ml-auto md:col-span-1 md:row-span-3">
+  <div class="order-last md:order-none mx-auto md:ml-auto md:col-span-1 md:row-span-5">
     {% include 'events/_years.html' %}
   </div>