diff --git a/app/templates/site/home.html.slim b/app/templates/site/home.html.slim
index 59cd273..7c5627c 100644
--- a/app/templates/site/home.html.slim
+++ b/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"
- 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 →
+div class="flex justify-between max-w-prose mx-auto mb-2"
+ h2 class="text-l text-gray-600 dark:text-gray-200" 📯 Posts
+ 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"
- 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 →
+div class="flex justify-between max-w-prose mx-auto mb-2"
+ h2 class="text-l text-gray-600 dark:text-gray-200" 📸 Photos
+ 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|
diff --git a/public/assets/index.css b/public/assets/index.css
index 4eadbf3..4ec6780 100644
--- a/public/assets/index.css
+++ b/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));