Home styling

app/templates/site/home.html.slim

@@ -16,17 +16,17 @@ div class="mb-8 max-w-screen-md mx-auto border-t-4 border-solid border-gray-400
     a class="col-span-7 sm:col-span-1 px-2 text-center transition-colors rounded bg-fuchsia-50 hover:bg-fuchsia-200 dark:bg-fuchsia-900 dark:hover:bg-fuchsia-700 inline-block grid content-center max-h-12 my-auto" href="/statuses"
         p See all
 
-div class="mb-4 flex max-w-prose mx-auto"
+div class="flex justify-between max-w-prose mx-auto mb-2"
-  h2 class="text-l text-gray-600 dark:text-gray-200" Posts
+  h2 class="text-l text-gray-600 dark:text-gray-200" 📯 Posts
-  a class="text-right flex-1 text-blue-400 dark:text-blue-200 hover:text-blue-600" href="/posts" See all →
+  a class="rounded px-2 text-blue-600 bg-blue-100 dark:bg-blue-900/60 hover:dark:bg-blue-800 hover:dark:text-blue-100 dark:text-blue-200 hover:text-blue-600 hover:bg-blue-200" href="/posts" See all →
 
 div class="mb-12 max-w-prose mx-auto"
   - posts.each do |post|
     == render "shared/post", post: post
 
-div class="flex max-w-prose mx-auto"
+div class="flex justify-between max-w-prose mx-auto mb-2"
-  h2 class="text-l text-gray-600 dark:text-gray-200" Photos
+  h2 class="text-l text-gray-600 dark:text-gray-200" 📸 Photos
-  a class="text-right flex-1 text-blue-400 dark:text-blue-200 hover:text-blue-600" href="/photos" See all →
+  a class="rounded px-2 text-blue-600 bg-blue-100 dark:bg-blue-900/60 hover:dark:bg-blue-800 hover:dark:text-blue-100 dark:text-blue-200 hover:text-blue-600 hover:bg-blue-200" href="/photos" See all →
 
 div class="grid grid-cols-3 gap-4 max-w-prose mx-auto"
   - photo_posts.each do |post|

public/assets/index.css

@@ -1030,10 +1030,19 @@ video {
   inset: 0px;
 }
 
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
 .-top-4 {
   top: -1rem;
 }
 
+.right-0 {
+  right: 0px;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -1392,6 +1401,10 @@ video {
   border-top-width: 4px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1542,6 +1555,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -1582,6 +1600,10 @@ video {
   text-align: right;
 }
 
+.align-baseline {
+  vertical-align: baseline;
+}
+
 .text-4xl {
   font-size: 2.441rem;
 }
@@ -1888,6 +1910,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   background-color: rgb(190 242 100 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
 .hover\:fill-blue-400:hover {
   fill: #60a5fa;
 }
@@ -2110,6 +2137,14 @@ 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\:bg-blue-900\/80 {
+    background-color: rgb(30 58 138 / 0.8);
+  }
+
+  .dark\:bg-blue-900\/30 {
+    background-color: rgb(30 58 138 / 0.3);
+  }
+
   .dark\:text-blue-200 {
     --tw-text-opacity: 1;
     color: rgb(191 219 254 / var(--tw-text-opacity));
@@ -2244,11 +2279,31 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     background-color: rgb(131 24 67 / var(--tw-bg-opacity));
   }
 
+  .hover\:dark\:bg-blue-800:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  }
+
   .dark\:hover\:text-yellow-100:hover {
     --tw-text-opacity: 1;
     color: rgb(254 249 195 / var(--tw-text-opacity));
   }
 
+  .hover\:dark\:text-blue-600:hover {
+    --tw-text-opacity: 1;
+    color: rgb(37 99 235 / var(--tw-text-opacity));
+  }
+
+  .hover\:dark\:text-blue-200:hover {
+    --tw-text-opacity: 1;
+    color: rgb(191 219 254 / var(--tw-text-opacity));
+  }
+
+  .hover\:dark\:text-blue-100:hover {
+    --tw-text-opacity: 1;
+    color: rgb(219 234 254 / var(--tw-text-opacity));
+  }
+
   .prose-a\:dark\:text-gray-100 :is(:where(a):not(:where([class~="not-prose"] *))) {
     --tw-text-opacity: 1;
     color: rgb(243 244 246 / var(--tw-text-opacity));