Add timeline to timemachine page

app/assets/builds/tailwind.css

@@ -1028,6 +1028,46 @@ video {
   top: -1rem;
 }
 
+.top-1 {
+  top: 0.25rem;
+}
+
+.-top-10 {
+  top: -2.5rem;
+}
+
+.bottom-10 {
+  bottom: 2.5rem;
+}
+
+.bottom-5 {
+  bottom: 1.25rem;
+}
+
+.bottom-7 {
+  bottom: 1.75rem;
+}
+
+.bottom-4 {
+  bottom: 1rem;
+}
+
+.bottom-2 {
+  bottom: 0.5rem;
+}
+
+.bottom-3 {
+  bottom: 0.75rem;
+}
+
+.bottom-1 {
+  bottom: 0.25rem;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -1068,6 +1108,10 @@ video {
   margin: 0.5rem;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1166,10 +1210,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .block {
   display: block;
 }
@@ -1198,6 +1238,10 @@ video {
   display: none;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -1222,10 +1266,28 @@ video {
   height: 2rem;
 }
 
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
 .max-h-12 {
   max-height: 3rem;
 }
 
+.max-h-fit {
+  max-height: -moz-fit-content;
+  max-height: fit-content;
+}
+
 .max-h-full {
   max-height: 100%;
 }
@@ -1361,6 +1423,10 @@ video {
   grid-auto-flow: column;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1381,10 +1447,6 @@ video {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -1405,6 +1467,10 @@ video {
   align-content: center;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1429,6 +1495,10 @@ video {
   gap: 1rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -1445,6 +1515,12 @@ video {
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1502,6 +1578,10 @@ video {
   border-top-width: 1px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1640,11 +1720,21 @@ video {
   background-color: rgb(253 242 248 / var(--tw-bg-opacity));
 }
 
+.bg-pink-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(157 23 77 / var(--tw-bg-opacity));
+}
+
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
 
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1655,11 +1745,6 @@ video {
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
-.bg-red-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1767,6 +1852,10 @@ video {
   padding-top: 1rem;
 }
 
+.pt-0 {
+  padding-top: 0px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2167,6 +2256,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\:block:hover {
+  display: block;
+}
+
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -2236,6 +2329,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   background-color: rgb(251 207 232 / 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-red-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -2335,6 +2433,15 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   outline-offset: 2px;
 }
 
+.group:hover .group-hover\:block {
+  display: block;
+}
+
+.group:hover .group-hover\:bg-pink-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 114 182 / var(--tw-bg-opacity));
+}
+
 .prose-p\:m-1 :is(:where(p):not(:where([class~="not-prose"] *))) {
   margin: 0.25rem;
 }
@@ -2481,6 +2588,31 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     border-color: rgb(30 41 59 / var(--tw-border-opacity));
   }
 
+  .dark\:border-indigo-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(79 70 229 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-indigo-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(199 210 254 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-indigo-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(55 48 163 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-indigo-100 {
+    --tw-border-opacity: 1;
+    border-color: rgb(224 231 255 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-indigo-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(165 180 252 / var(--tw-border-opacity));
+  }
+
   .dark\:bg-amber-400 {
     --tw-bg-opacity: 1;
     background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -2525,11 +2657,21 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     background-color: rgb(17 24 39 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-indigo-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-indigo-400 {
     --tw-bg-opacity: 1;
     background-color: rgb(129 140 248 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-indigo-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(55 48 163 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-indigo-950 {
     --tw-bg-opacity: 1;
     background-color: rgb(30 27 75 / var(--tw-bg-opacity));
@@ -2675,6 +2817,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     color: rgb(250 204 21 / var(--tw-text-opacity));
   }
 
+  .dark\:text-indigo-200 {
+    --tw-text-opacity: 1;
+    color: rgb(199 210 254 / var(--tw-text-opacity));
+  }
+
   .dark\:shadow-pink-200 {
     --tw-shadow-color: #fbcfe8;
     --tw-shadow: var(--tw-shadow-colored);
@@ -2775,6 +2922,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     background-color: rgb(162 28 175 / var(--tw-bg-opacity));
   }
 
+  .dark\:hover\:bg-indigo-400:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(129 140 248 / var(--tw-bg-opacity));
+  }
+
   .dark\:hover\:bg-orange-800:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(154 52 18 / var(--tw-bg-opacity));
@@ -2830,6 +2982,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     color: rgb(71 85 105 / var(--tw-text-opacity));
   }
 
+  .group:hover .dark\:group-hover\:bg-indigo-400 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(129 140 248 / var(--tw-bg-opacity));
+  }
+
   .dark\:prose-a\:text-blue-600 :is(:where(a):not(:where([class~="not-prose"] *))) {
     --tw-text-opacity: 1;
     color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -2857,6 +3014,30 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 }
 
 @media (min-width: 768px) {
+  .md\:col-span-14 {
+    grid-column: span 14 / span 14;
+  }
+
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .md\:col-span-15 {
+    grid-column: span 15 / span 15;
+  }
+
+  .md\:col-span-13 {
+    grid-column: span 13 / span 13;
+  }
+
+  .md\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
   .md\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
@@ -2890,6 +3071,10 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     flex: 1 1 auto;
   }
 
+  .md\:grid-cols-16 {
+    grid-template-columns: repeat(16, minmax(0, 1fr));
+  }
+
   .md\:pt-8 {
     padding-top: 2rem;
   }

app/repos/post_repo.rb

@@ -154,6 +154,14 @@ module Adamantium
           .to_a
       end
 
+      def all_posts
+        posts
+          .where(post_type: ["post", "bookmark"])
+          .published
+          .order(Sequel.desc(:published_at))
+          .to_a
+      end
+
       def for_rss
         posts
           .where(post_type: "post", location: nil)

app/templates/timemachine/show.html.slim

@@ -1,6 +1,6 @@
-div class="prose dark:prose-invert w-full max-w-6xl mx-auto px-4 m-4"
+div class="max-w-screen-md mx-auto px-4 m-4 h-max"
-  div class="grid md:grid-cols-12 gap-5 p-4 m-2"
+  div class="grid md:grid-cols-16 gap-5 p-4 m-2"
-    div class="md:col-span-8 p-4"
+    div class="prose dark:prose-invert md:col-span-13 p-4"
       h2 class="mt-0" = display_date
 
       a href="/timemachine/#{prev_date}" ← #{prev_date}
@@ -13,26 +13,24 @@ div class="prose dark:prose-invert w-full max-w-6xl mx-auto px-4 m-4"
       - if posts.count > 0
         div class="mt-4"
           - posts.each_with_index do |post, index|
-            div class="#{"border-t-2" if index == 0} border-b-2 border-gray-200"
+            div class="#{"border-t-2" if index == 0} border-b-2 border-gray-200 dark:border-indigo-300"
               - if post.photos.count == 0
                 a href="/post/#{post.slug}"
                   h3= post.name
                 == post.excerpt
               - else
-                div class="grid grid-cols-3 gap-2"
+                div class="grid grid-cols-3 gap-2 pb-4"
                   - posts.each do |post|
                     - if post.photos.count > 0
                       - post.photos.each do |photo|
                         a href="/post/#{post.slug}"
                           img class="mb-0 rounded" src="#{photo["value"]}"
-                      a href="/post/#{post.slug}"
+                          = post.name
-                        = post.name
       - else
         p No posts
 
-    aside class="md:col-span-4 md:pt-0 p-2"
       - if bookmarks.count > 0
-        h3 class="mt-0" Bookmarks
+        h3 class="" Bookmarks
 
         div
           ul
@@ -42,7 +40,7 @@ div class="prose dark:prose-invert w-full max-w-6xl mx-auto px-4 m-4"
                   = bookmark.name
 
       - if podcasts.count > 0
-        h3 class="mt-0" Podcasts
+        h3 class="" Podcasts
 
         div
           ul
@@ -53,4 +51,17 @@ div class="prose dark:prose-invert w-full max-w-6xl mx-auto px-4 m-4"
                   div
                     small = podcast.podcast_name
       / h3 class="mt-0" Music
-      / h3 class="mt-0" Reading
+      / h3 class="mt-0" Reading
+    aside class="md:col-span-3 p-2 md:block hidden"
+      div class="flex flex-col items-start space-y-1 max-h-fit w-full"
+        - total = posts_by_month.count
+        - posts_by_month.each_with_index do |(post_month, count), index|
+          -if index == 0
+            p class="text-pink-800 dark:text-indigo-300"
+              = post_month
+          a class="group block h-3 w-full relative" href="/timemachine/#{post_month}"
+            div style="width: #{4 * (count * 3)}px" class="float-left rounded-full h-3 #{"bg-pink-800 dark:bg-indigo-800" if current_path == "/timemachine/#{post_month}"} bg-pink-100 group-hover:bg-pink-400 dark:bg-indigo-200 dark:group-hover:bg-indigo-400 inline-block"
+            span style="margin-left: #{5 + (4 * (count * 3))}px" class="hidden group-hover:block text-pink-400 dark:text-indigo-200 text-sm absolute h-3 p-0 block bottom-1" = post_month
+          - if index == total - 1
+            p class="text-pink-800 dark:text-indigo-300"
+              = post_month

app/views/timemachine/show.rb

@@ -45,11 +45,28 @@ module Adamantium
               .strftime("%Y/%m/%d")
         end
 
+        expose :current_date do |year:, month:, day:|
+          "#{year}/#{month}/#{day}"
+        end
+
         expose :prev_date do |date|
           TimeMath.day.advance(date.value, -1)
             .strftime("%Y/%m/%d")
         end
 
+        expose :posts_by_month do
+          post_tally = Hash.new(0)
+          posts = post_repo.all_posts.each_with_object(post_tally) do |post, memo|
+            memo[post.published_at.strftime("%Y/%m/%d")] += 1
+          end
+
+          podcast_scrobble_repo.listing.each do |scrobble|
+            posts[scrobble.listened_at.strftime("%Y/%m/%d")] += 1
+          end
+
+          posts
+        end
+
         private_expose :date do |year:, month:, day:|
           DateTime.parse("#{year}-#{month}-#{day}")
         end

public/assets/admin/app.css

@@ -735,6 +735,36 @@ video {
 .-top-4 {
   top: -1rem;
 }
+.top-1 {
+  top: 0.25rem;
+}
+.-top-10 {
+  top: -2.5rem;
+}
+.bottom-10 {
+  bottom: 2.5rem;
+}
+.bottom-5 {
+  bottom: 1.25rem;
+}
+.bottom-7 {
+  bottom: 1.75rem;
+}
+.bottom-4 {
+  bottom: 1rem;
+}
+.bottom-2 {
+  bottom: 0.5rem;
+}
+.bottom-3 {
+  bottom: 0.75rem;
+}
+.bottom-1 {
+  bottom: 0.25rem;
+}
+.bottom-0 {
+  bottom: 0px;
+}
 .z-40 {
   z-index: 40;
 }
@@ -765,6 +795,9 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
+.m-4 {
+  margin: 1rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -839,9 +872,6 @@ video {
 .mt-6 {
   margin-top: 1.5rem;
 }
-.mt-1 {
-  margin-top: 0.25rem;
-}
 .block {
   display: block;
 }
@@ -863,6 +893,9 @@ video {
 .hidden {
   display: none;
 }
+.h-1 {
+  height: 0.25rem;
+}
 .h-16 {
   height: 4rem;
 }
@@ -881,9 +914,23 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
+.h-4 {
+  height: 1rem;
+}
+.h-3 {
+  height: 0.75rem;
+}
 .max-h-12 {
   max-height: 3rem;
 }
+.max-h-fit {
+  max-height: -moz-fit-content;
+  max-height: fit-content;
+}
 .max-h-full {
   max-height: 100%;
 }
@@ -986,6 +1033,9 @@ video {
 .grid-flow-col {
   grid-auto-flow: column;
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1001,9 +1051,6 @@ video {
 .grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -1019,6 +1066,9 @@ video {
 .content-center {
   align-content: center;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -1037,6 +1087,9 @@ video {
 .gap-4 {
   gap: 1rem;
 }
+.gap-5 {
+  gap: 1.25rem;
+}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
   column-gap: 0.25rem;
@@ -1050,6 +1103,11 @@ video {
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
 .overflow-auto {
   overflow: auto;
 }
@@ -1093,6 +1151,9 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.border-t-2 {
+  border-top-width: 2px;
+}
 .border-solid {
   border-style: solid;
 }
@@ -1203,10 +1264,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(253 242 248 / var(--tw-bg-opacity));
 }
+.bg-pink-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(157 23 77 / var(--tw-bg-opacity));
+}
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1215,10 +1284,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
-.bg-red-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1301,6 +1366,9 @@ video {
 .pt-4 {
   padding-top: 1rem;
 }
+.pt-0 {
+  padding-top: 0px;
+}
 .text-left {
   text-align: left;
 }
@@ -1681,6 +1749,9 @@ h6 a {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
+.hover\:block:hover {
+  display: block;
+}
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -1736,6 +1807,10 @@ h6 a {
   --tw-bg-opacity: 1;
   background-color: rgb(251 207 232 / 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-red-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1814,6 +1889,13 @@ h6 a {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.group:hover .group-hover\:block {
+  display: block;
+}
+.group:hover .group-hover\:bg-pink-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 114 182 / var(--tw-bg-opacity));
+}
 .prose-p\:m-1 :is(:where(p):not(:where([class~=not-prose] *))) {
   margin: 0.25rem;
 }
@@ -1927,6 +2009,26 @@ h6 a {
     --tw-border-opacity: 1;
     border-color: rgb(30 41 59 / var(--tw-border-opacity));
   }
+  .dark\:border-indigo-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(79 70 229 / var(--tw-border-opacity));
+  }
+  .dark\:border-indigo-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(199 210 254 / var(--tw-border-opacity));
+  }
+  .dark\:border-indigo-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(55 48 163 / var(--tw-border-opacity));
+  }
+  .dark\:border-indigo-100 {
+    --tw-border-opacity: 1;
+    border-color: rgb(224 231 255 / var(--tw-border-opacity));
+  }
+  .dark\:border-indigo-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(165 180 252 / var(--tw-border-opacity));
+  }
   .dark\:bg-amber-400 {
     --tw-bg-opacity: 1;
     background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -1962,10 +2064,18 @@ h6 a {
     --tw-bg-opacity: 1;
     background-color: rgb(17 24 39 / var(--tw-bg-opacity));
   }
+  .dark\:bg-indigo-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+  }
   .dark\:bg-indigo-400 {
     --tw-bg-opacity: 1;
     background-color: rgb(129 140 248 / var(--tw-bg-opacity));
   }
+  .dark\:bg-indigo-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(55 48 163 / var(--tw-bg-opacity));
+  }
   .dark\:bg-indigo-950 {
     --tw-bg-opacity: 1;
     background-color: rgb(30 27 75 / var(--tw-bg-opacity));
@@ -2082,6 +2192,10 @@ h6 a {
     --tw-text-opacity: 1;
     color: rgb(250 204 21 / var(--tw-text-opacity));
   }
+  .dark\:text-indigo-200 {
+    --tw-text-opacity: 1;
+    color: rgb(199 210 254 / var(--tw-text-opacity));
+  }
   .dark\:shadow-pink-200 {
     --tw-shadow-color: #fbcfe8;
     --tw-shadow: var(--tw-shadow-colored);
@@ -2162,6 +2276,10 @@ h6 a {
     --tw-bg-opacity: 1;
     background-color: rgb(162 28 175 / var(--tw-bg-opacity));
   }
+  .dark\:hover\:bg-indigo-400:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(129 140 248 / var(--tw-bg-opacity));
+  }
   .dark\:hover\:bg-orange-800:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(154 52 18 / var(--tw-bg-opacity));
@@ -2206,6 +2324,10 @@ h6 a {
     --tw-text-opacity: 1;
     color: rgb(71 85 105 / var(--tw-text-opacity));
   }
+  .group:hover .dark\:group-hover\:bg-indigo-400 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(129 140 248 / var(--tw-bg-opacity));
+  }
   .dark\:prose-a\:text-blue-600 :is(:where(a):not(:where([class~=not-prose] *))) {
     --tw-text-opacity: 1;
     color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -2228,6 +2350,24 @@ h6 a {
   }
 }
 @media (min-width: 768px) {
+  .md\:col-span-14 {
+    grid-column: span 14 / span 14;
+  }
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .md\:col-span-15 {
+    grid-column: span 15 / span 15;
+  }
+  .md\:col-span-13 {
+    grid-column: span 13 / span 13;
+  }
+  .md\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
   .md\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
@@ -2253,6 +2393,9 @@ h6 a {
   .md\:flex-auto {
     flex: 1 1 auto;
   }
+  .md\:grid-cols-16 {
+    grid-template-columns: repeat(16, minmax(0, 1fr));
+  }
   .md\:pt-8 {
     padding-top: 2rem;
   }

tailwind.config.js

@@ -16,6 +16,15 @@ module.exports = {
       '5xl': '3.052rem',
     },
     extend: {
+      gridTemplateColumns: {
+        '16': 'repeat(16, minmax(0, 1fr))',
+      },
+      gridColumn: {
+        'span-13': 'span 13 / span 13',
+        'span-14': 'span 14 / span 14',
+        'span-15': 'span 15 / span 15',
+        'span-16': 'span 16 / span 16',
+      },
       boxShadow: {
         'solid': `10px 10px 1px 2px`
       },