From 40228727233f27af5f9692c65219649791da871f Mon Sep 17 00:00:00 2001
From: Daniel Nitsikopoulos <daniel@dnitza.com>
Date: Wed, 10 May 2023 20:52:52 +1000
Subject: [PATCH] trip styling

---
 app/repos/trip_repo.rb              |   1 +
 app/templates/trips/index.html.slim |   2 +-
 public/assets/index.css             | 313 ++++++++++++++++++++++++----
 3 files changed, 272 insertions(+), 44 deletions(-)

diff --git a/app/repos/trip_repo.rb b/app/repos/trip_repo.rb
index 6192ab6..88c98b6 100644
--- a/app/repos/trip_repo.rb
+++ b/app/repos/trip_repo.rb
@@ -12,6 +12,7 @@ module Adamantium
         trips
           .combine(:posts)
           .order(:start_date)
+          .reverse
           .to_a
       end
     end
diff --git a/app/templates/trips/index.html.slim b/app/templates/trips/index.html.slim
index d2fcf31..2367fce 100644
--- a/app/templates/trips/index.html.slim
+++ b/app/templates/trips/index.html.slim
@@ -16,7 +16,7 @@ div class="mb-4 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:t
               = trip.subtitle
             td
               = "#{trip.posts.count} entries"
-            td class="text-right text-gray-400 dark:text-gray-600"
+            td class="text-right text-gray-400 dark:text-gray-600 break-normal"
               = "#{trip.start_date.strftime("%m %b")}"
               == " &rarr; "
               = "#{trip.end_date.strftime("%m %b")}"
diff --git a/public/assets/index.css b/public/assets/index.css
index 3dc460b..58e23f5 100644
--- a/public/assets/index.css
+++ b/public/assets/index.css
@@ -986,6 +986,10 @@ video {
   top: -1rem;
 }
 
+.-top-2 {
+  top: -0.5rem;
+}
+
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -1048,14 +1052,6 @@ video {
   margin-bottom: 2rem;
 }
 
-.mb-\[20\] {
-  margin-bottom: 20;
-}
-
-.ml-\[5\] {
-  margin-left: 5;
-}
-
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -1080,10 +1076,6 @@ video {
   margin-top: 0.125rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1092,6 +1084,118 @@ video {
   margin-top: 1.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-8 {
+  margin-left: 2rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
+
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+
+.ml-\[2\.15\] {
+  margin-left: 2.15;
+}
+
+.ml-\[2\.25\] {
+  margin-left: 2.25;
+}
+
+.ml-\[2\.5\] {
+  margin-left: 2.5;
+}
+
+.ml-\[3\.5\] {
+  margin-left: 3.5;
+}
+
+.ml-\[4\.5\] {
+  margin-left: 4.5;
+}
+
+.ml-\[6\.5\] {
+  margin-left: 6.5;
+}
+
+.ml-\[6\] {
+  margin-left: 6;
+}
+
+.ml-\[6\.25\] {
+  margin-left: 6.25;
+}
+
+.ml-\[6\.75\] {
+  margin-left: 6.75;
+}
+
+.ml-\[7\] {
+  margin-left: 7;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.ml-\[8\] {
+  margin-left: 8;
+}
+
+.ml-\[4\] {
+  margin-left: 4;
+}
+
+.ml-\[5\] {
+  margin-left: 5;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mb-\[8\] {
+  margin-bottom: 8;
+}
+
+.mb-\[12\] {
+  margin-bottom: 12;
+}
+
+.mb-\[22\] {
+  margin-bottom: 22;
+}
+
+.mb-\[20\] {
+  margin-bottom: 20;
+}
+
 .block {
   display: block;
 }
@@ -1124,10 +1228,6 @@ video {
   height: 4rem;
 }
 
-.h-2 {
-  height: 0.5rem;
-}
-
 .h-44 {
   height: 11rem;
 }
@@ -1136,12 +1236,24 @@ video {
   height: 12rem;
 }
 
-.max-h-12 {
-  max-height: 3rem;
+.h-2 {
+  height: 0.5rem;
 }
 
-.w-1 {
-  width: 0.25rem;
+.h-4 {
+  height: 1rem;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.max-h-12 {
+  max-height: 3rem;
 }
 
 .w-16 {
@@ -1172,6 +1284,18 @@ video {
   width: 1.5rem;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-1 {
+  width: 0.25rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
 .max-w-prose {
   max-width: 65ch;
 }
@@ -1267,6 +1391,11 @@ video {
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1291,12 +1420,16 @@ video {
   border-bottom-width: 2px;
 }
 
+.border-t-4 {
+  border-top-width: 4px;
+}
+
 .border-l-2 {
   border-left-width: 2px;
 }
 
-.border-t-4 {
-  border-top-width: 4px;
+.border-l-4 {
+  border-left-width: 4px;
 }
 
 .border-solid {
@@ -1318,15 +1451,25 @@ video {
   border-color: rgb(217 249 157 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 234 254 / var(--tw-border-opacity));
+}
+
+.border-orange-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 237 213 / var(--tw-border-opacity));
+}
+
 .border-orange-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 215 170 / var(--tw-border-opacity));
 }
 
-.border-transparent {
-  border-color: transparent;
-}
-
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -1357,11 +1500,6 @@ video {
   background-color: rgb(190 242 100 / var(--tw-bg-opacity));
 }
 
-.bg-orange-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
-}
-
 .bg-pink-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(252 231 243 / var(--tw-bg-opacity));
@@ -1376,6 +1514,16 @@ video {
   background-color: rgb(254 249 195 / 0.6);
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
+.bg-orange-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+}
+
 .fill-blue-100 {
   fill: #dbeafe;
 }
@@ -1401,6 +1549,26 @@ video {
   padding: 0.5rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
+.p-\[1\.5\] {
+  padding: 1.5;
+}
+
+.p-\[2\.5\] {
+  padding: 2.5;
+}
+
+.p-\[3\.5\] {
+  padding: 3.5;
+}
+
+.p-\[6\.5\] {
+  padding: 6.5;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1429,12 +1597,20 @@ video {
   padding-bottom: 2rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
+.pl-4 {
+  padding-left: 1rem;
 }
 
 .text-left {
@@ -1473,6 +1649,10 @@ video {
   font-size: 0.75rem;
 }
 
+.text-2xl {
+  font-size: 1.563rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1696,6 +1876,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   border-color: rgb(30 64 175 / var(--tw-border-opacity));
 }
 
+.hover\:border-orange-600:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(234 88 12 / var(--tw-border-opacity));
+}
+
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -1872,16 +2057,43 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     display: none;
   }
 
+  .dark\:border-0 {
+    border-width: 0px;
+  }
+
+  .dark\:border-2 {
+    border-width: 2px;
+  }
+
+  .dark\:border-none {
+    border-style: none;
+  }
+
   .dark\:border-gray-600 {
     --tw-border-opacity: 1;
     border-color: rgb(75 85 99 / var(--tw-border-opacity));
   }
 
+  .dark\:border-orange-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(234 88 12 / var(--tw-border-opacity));
+  }
+
   .dark\:border-orange-400 {
     --tw-border-opacity: 1;
     border-color: rgb(251 146 60 / var(--tw-border-opacity));
   }
 
+  .dark\:border-orange-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(254 215 170 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-orange-900 {
+    --tw-border-opacity: 1;
+    border-color: rgb(124 45 18 / var(--tw-border-opacity));
+  }
+
   .dark\:bg-black {
     --tw-bg-opacity: 1;
     background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1911,16 +2123,6 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     background-color: rgb(112 26 117 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-orange-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(251 146 60 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-orange-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(234 88 12 / var(--tw-bg-opacity));
-  }
-
   .dark\:bg-pink-600 {
     --tw-bg-opacity: 1;
     background-color: rgb(219 39 119 / var(--tw-bg-opacity));
@@ -1931,6 +2133,31 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     background-color: rgb(250 204 21 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-green-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-orange-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(234 88 12 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-orange-400 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-orange-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 215 170 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-orange-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 186 116 / var(--tw-bg-opacity));
+  }
+
   .dark\:text-blue-200 {
     --tw-text-opacity: 1;
     color: rgb(191 219 254 / var(--tw-text-opacity));