Adds hero image, minor color adjustments

Author: cmpadden

components/MoreLink.vue

@@ -15,7 +15,7 @@ const props = defineProps({
       :to="props.to"
       class="flex items-center text-sm font-bold text-gray-700 dark:text-white hover:text-orange-500"
     >
-      <span class="translate-y-0.5">See More</span>
+      <span class="translate-y-0.5">More</span>
       <CursorArrowRaysIcon class="ml-1 h-5 w-5" aria-hidden="true" />
     </NuxtLink>
   </div>

components/section/BlogPosts.vue

@@ -6,30 +6,34 @@ const props = defineProps({
 </script>
 
 <template>
-  <section class="bg-gradient-to-b from-background dark:from-background-dark to-transparent py-2">
+  <section class="py-2">
     <div class="container mx-auto space-y-4">
 
-      <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-3">
         <div v-for="(article, ix) of articles" :key="ix">
           <NuxtLink :to="article.path">
             <div
-              class="h-full space-y-4 rounded-lg bg-white/80 dark:bg-white/20 p-4 text-gray-700 dark:text-white drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
+              class="h-full space-y-4 dark:bg-orange-400/50 p-4 text-gray-700 dark:text-white drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
             >
               <div>
-                <div class="flex-1 text-lg font-bold md:text-xl">
-                  {{ article.title }}
+                <div class="line-clamp-2 flex-1 text-lg font-bold md:text-xl">
+                    {{ article.title }}
+                </div>
+                <div class="space-x-2">
+                  <NuxtTime
+                    v-if="show_dates"
+                    :datetime="article.date" 
+                    class="text-sm text-gray-600 dark:text-gray-200"
+                    year="numeric"
+                    month="short"
+                    day="2-digit"
+                  />
+                  <span v-if="ix === 0" class="bg-orange-400 text-sm px-2">Latest!</span>
                 </div>
-                <NuxtTime
-                  v-if="show_dates"
-                  :datetime="article.date" 
-                  class="text-sm font-light text-gray-600 dark:text-gray-400"
-                  year="numeric"
-                  month="short"
-                  day="2-digit"
-                />
               </div>
-              <div class="line-clamp-3 text-sm text-gray-700 dark:text-gray-300">
+              <div class="line-clamp-3 text-sm text-gray-700 dark:text-gray-100">
                 {{ article.description }}
+
               </div>
             </div>
           </NuxtLink>

components/section/Playground.vue

@@ -101,27 +101,26 @@ const filtered_links = computed(() => {
 <template>
   <section class="bg-gradient-to-b from-transparent to-background dark:to-background-dark text-gray-700 dark:text-white">
     <div class="container mx-auto space-y-4 py-8 text-gray-700 dark:text-white">
-
-      <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <nuxt-link
-          class="relative rounded-lg drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
+          class="relative drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
           v-for="link in filtered_links"
           :key="link.title"
           :to="link.link"
         >
           <img
-            class="grayscale-1 h-64 w-full rounded-lg bg-gray-800 object-cover"
+            class="grayscale-1 h-64 w-full bg-gray-800 object-cover"
             :src="link.img || 'images/placeholder.png'"
           />
           <div
             class="absolute bottom-0 flex w-full items-center justify-center"
           >
-            <div class="min-h-24 w-full rounded-b-lg bg-white/90 dark:bg-gray-800/80 px-6 py-2">
+            <div class="w-full bg-white/90 dark:bg-black/80 px-6 py-2">
               <h3 class="text-xl font-bold text-gray-700 dark:text-white">
                 {{ link.title }}
               </h3>
               <div
-                class="line-clamp-2 text-sm text-gray-700 dark:text-gray-300"
+                class="line-clamp-1 text-sm text-gray-700 dark:text-gray-300"
                 v-html="link.description"
               ></div>
             </div>

pages/index.vue

@@ -1,15 +1,20 @@
 <script setup>
 const data = await queryCollection("content")
   .order("date", "DESC")
-  .limit(4)
+  .limit(6)
   .all();
 </script>
 
 <template>
   <div>
     <div class="bg-orange-400 dark:bg-emerald-950 bg-[url('/images/noise.svg')]">
+      <section class="bg-gradient-to-b from-background dark:from-background-dark to-transparent py-2">
+        <div class="container mx-auto my-12">
+          <img src="/images/blog_and_experiments.svg" class="max-h-24 mx-auto"/>
+        </div>
+      </section>
       <SectionBlogPosts :articles="data" :show_dates="true" />
-      <SectionPlayground :limit="9" showImages linkToPlayground />
+      <SectionPlayground :limit="8" showImages linkToPlayground />
     </div>
   </div>
 </template>