From ce9dfbe2e0e33c950efe506a0128cbe5fb5b673e Mon Sep 17 00:00:00 2001
From: Daniel Nitsikopoulos <daniel@dnitza.com>
Date: Fri, 3 Mar 2023 20:54:08 +1100
Subject: [PATCH] Stylin'

---
 app/templates/bookmarks/index.html.slim |   2 +-
 app/templates/site/home.html.slim       |   4 +-
 public/assets/index.css                 | 587 +++++++++++++++++++++++-
 3 files changed, 578 insertions(+), 15 deletions(-)

diff --git a/app/templates/bookmarks/index.html.slim b/app/templates/bookmarks/index.html.slim
index f30d5b9..db005bb 100644
--- a/app/templates/bookmarks/index.html.slim
+++ b/app/templates/bookmarks/index.html.slim
@@ -3,7 +3,7 @@ div class="flex justify-between  mb-12 prose dark:prose-invert max-w-prose mx-au
     h1 Bookmarks
 
   form class="basis-2/5" method="GET" action="/bookmarks"
-    input class="w-36 border-blue-400 border-2 rounded mr-2 px-2" id="seach" type="text" name="q" value=q
+    input class="w-36 border-blue-400 border-2 rounded mr-2 px-2 dark:text-gray-800" id="seach" type="text" name="q" value=q
     button class="w-16 border-blue-400 border-2 rounded bg-blue-400 hover:bg-blue-800 hover:border-blue-800 hover:text-blue-100 px-1 text-gray-200" type="submit" Search
 
 div class="mb-12 max-w-prose mx-auto"
diff --git a/app/templates/site/home.html.slim b/app/templates/site/home.html.slim
index da73d82..ac57c25 100644
--- a/app/templates/site/home.html.slim
+++ b/app/templates/site/home.html.slim
@@ -28,8 +28,8 @@ div class="grid grid-cols-3 gap-4 max-w-prose mx-auto"
   - photo_posts.each do |post|
     == render :photo_post, post: post
 
-div class="mb-12 max-w-prose mx-auto text-gray-600 dark:text-gray-200"
-  p
+div class="mb-12 mt-6 max-w-prose mx-auto text-gray-600 dark:text-gray-200 rounded p-2 bg-blue-50 dark:bg-blue-900"
+  div
     = "🗺️ Last seen at "
     a class="text-blue-400 hover:text-blue-600" href=last_location.permalink
       = last_location.display_title
diff --git a/public/assets/index.css b/public/assets/index.css
index a9fddf3..0d5aba2 100644
--- a/public/assets/index.css
+++ b/public/assets/index.css
@@ -971,6 +971,30 @@ video {
   margin-bottom: 0;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.-left-10 {
+  left: -2.5rem;
+}
+
+.-left-5 {
+  left: -1.25rem;
+}
+
+.-top-5 {
+  top: -1.25rem;
+}
+
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -983,10 +1007,26 @@ video {
   grid-column: span 5 / span 5;
 }
 
+.col-span-7 {
+  grid-column: span 7 / span 7;
+}
+
+.col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
 
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -997,6 +1037,11 @@ video {
   margin-bottom: auto;
 }
 
+.mx-9 {
+  margin-left: 2.25rem;
+  margin-right: 2.25rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -1033,6 +1078,94 @@ video {
   margin-top: 0px;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mt-2\.5 {
+  margin-top: 0.625rem;
+}
+
+.mt-\[1\.75\] {
+  margin-top: 1.75;
+}
+
+.mt-\[1\.95\] {
+  margin-top: 1.95;
+}
+
+.mt-\[5\.95\] {
+  margin-top: 5.95;
+}
+
+.mt-\[9\.95\] {
+  margin-top: 9.95;
+}
+
+.mt-\[7\.95\] {
+  margin-top: 7.95;
+}
+
+.mt-\[8\.95\] {
+  margin-top: 8.95;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.-ml-0\.5 {
+  margin-left: -0.125rem;
+}
+
+.-ml-0 {
+  margin-left: -0px;
+}
+
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
+
+.ml-0 {
+  margin-left: 0px;
+}
+
+.mt-\[6\.95\] {
+  margin-top: 6.95;
+}
+
 .block {
   display: block;
 }
@@ -1049,10 +1182,22 @@ video {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
+.flow-root {
+  display: flow-root;
+}
+
 .grid {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -1061,10 +1206,77 @@ video {
   height: 12rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-24 {
+  height: 6rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.max-h-24 {
+  max-height: 6rem;
+}
+
+.max-h-36 {
+  max-height: 9rem;
+}
+
+.max-h-4 {
+  max-height: 1rem;
+}
+
+.max-h-8 {
+  max-height: 2rem;
+}
+
 .max-h-12 {
   max-height: 3rem;
 }
 
+.min-h-max {
+  min-height: -moz-max-content;
+  min-height: max-content;
+}
+
 .w-36 {
   width: 9rem;
 }
@@ -1089,6 +1301,71 @@ video {
   width: 1rem;
 }
 
+.w-64 {
+  width: 16rem;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-\[35rem\] {
+  width: 35rem;
+}
+
+.w-5\/6 {
+  width: 83.333333%;
+}
+
+.w-1\/6 {
+  width: 16.666667%;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
+.w-12 {
+  width: 3rem;
+}
+
+.w-96 {
+  width: 24rem;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-1\/5 {
+  width: 20%;
+}
+
+.w-3\/5 {
+  width: 60%;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
 .max-w-prose {
   max-width: 65ch;
 }
@@ -1109,6 +1386,18 @@ video {
   flex: none;
 }
 
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
 .basis-1\/5 {
   flex-basis: 20%;
 }
@@ -1122,6 +1411,30 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-6 {
+  --tw-rotate: 6deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+.auto-cols-max {
+  grid-auto-columns: max-content;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 .grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
@@ -1130,10 +1443,18 @@ video {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
 .grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
 .content-center {
   align-content: center;
 }
@@ -1142,10 +1463,26 @@ video {
   align-items: center;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
 
+.justify-items-start {
+  justify-items: start;
+}
+
+.justify-items-end {
+  justify-items: end;
+}
+
+.justify-items-stretch {
+  justify-items: stretch;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1160,6 +1497,20 @@ video {
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1168,10 +1519,19 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
 .border-2 {
   border-width: 2px;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-t-4 {
   border-top-width: 4px;
 }
@@ -1180,6 +1540,10 @@ video {
   border-bottom-width: 2px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1198,6 +1562,26 @@ video {
   border-color: transparent;
 }
 
+.border-red-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 226 226 / var(--tw-border-opacity));
+}
+
+.border-red-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(220 38 38 / var(--tw-border-opacity));
+}
+
+.border-green-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(20 83 45 / var(--tw-border-opacity));
+}
+
+.border-green-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+}
+
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
@@ -1212,9 +1596,24 @@ video {
   background-color: rgb(254 249 195 / 0.6);
 }
 
-.bg-fuchsia-100 {
+.bg-blue-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 232 255 / var(--tw-bg-opacity));
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.bg-pink-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.bg-pink-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 242 248 / var(--tw-bg-opacity));
 }
 
 .bg-fuchsia-50 {
@@ -1222,8 +1621,39 @@ video {
   background-color: rgb(253 244 255 / var(--tw-bg-opacity));
 }
 
-.fill-purple-100 {
-  fill: #f3e8ff;
+.bg-fuchsia-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 232 255 / var(--tw-bg-opacity));
+}
+
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+
+.bg-sky-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
+}
+
+.bg-sky-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
+}
+
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 }
 
 .fill-blue-100 {
@@ -1234,6 +1664,10 @@ video {
   fill: #fce7f3;
 }
 
+.fill-purple-100 {
+  fill: #f3e8ff;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1243,10 +1677,18 @@ video {
   padding: 0.25rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1286,6 +1728,14 @@ video {
   text-align: right;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
 .text-xl {
   font-size: 1.25rem;
 }
@@ -1314,12 +1764,20 @@ video {
   text-transform: uppercase;
 }
 
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.leading-4 {
+  line-height: 1rem;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
 
-.leading-relaxed {
-  line-height: 1.625;
+.leading-8 {
+  line-height: 2rem;
 }
 
 .leading-10 {
@@ -1361,6 +1819,10 @@ video {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .no-underline {
   text-decoration-line: none;
 }
@@ -1369,6 +1831,10 @@ video {
   text-decoration-style: wavy;
 }
 
+.opacity-75 {
+  opacity: 0.75;
+}
+
 .shadow-solid {
   --tw-shadow: 10px 10px 1px 2px;
   --tw-shadow-colored: 10px 10px 1px 2px var(--tw-shadow-color);
@@ -1380,12 +1846,26 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
+.delay-300 {
+  transition-delay: 300ms;
+}
+
+.delay-700 {
+  transition-delay: 700ms;
+}
+
 @tailwind typography;
 
 @font-face {
@@ -1477,6 +1957,10 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
 
+.hover\:visible:hover {
+  visibility: visible;
+}
+
 .hover\:border-b-2:hover {
   border-bottom-width: 2px;
 }
@@ -1516,15 +2000,21 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-pink-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 114 182 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-pink-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-fuchsia-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 208 254 / var(--tw-bg-opacity));
 }
 
-.hover\:fill-purple-400:hover {
-  fill: #c084fc;
-}
-
 .hover\:fill-blue-400:hover {
   fill: #60a5fa;
 }
@@ -1533,6 +2023,10 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   fill: #f472b6;
 }
 
+.hover\:fill-purple-400:hover {
+  fill: #c084fc;
+}
+
 .hover\:text-blue-100:hover {
   --tw-text-opacity: 1;
   color: rgb(219 234 254 / var(--tw-text-opacity));
@@ -1646,16 +2140,41 @@ 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-pink-400 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(244 114 182 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-fuchsia-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(240 171 252 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-fuchsia-800 {
     --tw-bg-opacity: 1;
     background-color: rgb(134 25 143 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-fuchsia-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(162 28 175 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-fuchsia-900 {
     --tw-bg-opacity: 1;
     background-color: rgb(112 26 117 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-green-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(20 83 45 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-blue-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+  }
+
   .dark\:prose-invert {
     --tw-prose-body: var(--tw-prose-invert-body);
     --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -1705,6 +2224,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     color: rgb(191 219 254 / var(--tw-text-opacity));
   }
 
+  .dark\:text-gray-800 {
+    --tw-text-opacity: 1;
+    color: rgb(31 41 55 / var(--tw-text-opacity));
+  }
+
   .dark\:shadow-pink-200 {
     --tw-shadow-color: #fbcfe8;
     --tw-shadow: var(--tw-shadow-colored);
@@ -1769,6 +2293,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     background-color: rgb(250 204 21 / 0.8);
   }
 
+  .dark\:hover\:bg-fuchsia-900:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(112 26 117 / var(--tw-bg-opacity));
+  }
+
   .dark\:hover\:bg-fuchsia-700:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(162 28 175 / var(--tw-bg-opacity));
@@ -1786,16 +2315,32 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 }
 
 @media (min-width: 640px) {
-  .sm\:col-span-6 {
-    grid-column: span 6 / span 6;
+  .sm\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
+  .sm\:col-span-3 {
+    grid-column: span 3 / span 3;
   }
 
   .sm\:col-span-1 {
     grid-column: span 1 / span 1;
   }
+
+  .sm\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
 }
 
 @media (min-width: 768px) {
+  .md\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
   .md\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
@@ -1825,6 +2370,14 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     width: 1rem;
   }
 
+  .md\:w-\[24rem\] {
+    width: 24rem;
+  }
+
+  .md\:w-12 {
+    width: 3rem;
+  }
+
   .md\:flex-auto {
     flex: 1 1 auto;
   }
@@ -1842,3 +2395,13 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:w-\[35rem\] {
+    width: 35rem;
+  }
+
+  .lg\:w-24 {
+    width: 6rem;
+  }
+}
+