Clean up slide show

upmaru · Nov 19, 2024 · dc27454 · dc27454
1 parent 4bfcea0
commit dc27454
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/lib/opsmaru/content/navigation/manager.ex b/lib/opsmaru/content/navigation/manager.ex
@@ -9,7 +9,7 @@ defmodule Opsmaru.Content.Navigation.Manager do
   @base_query ~S"""
   *[_type == "navigation"]{
     ...,
-    "links": *[ _type == "link" && references(^._id) ]{
+    "links": *[ _type == "link" && references(^._id) ] | order(index asc) {
       ...
     }
   }

diff --git a/lib/opsmaru_web/components/home_components.ex b/lib/opsmaru_web/components/home_components.ex
@@ -59,31 +59,31 @@ defmodule OpsmaruWeb.HomeComponents do
       </div>
       <div
         id="slides"
-        class="bg-gradient-to-b from-slate-950 from-50% to-slate-900 relative overflow-hidden"
+        class="relative"
       >
         <div id="slides-container" class="relative">
           <div
             :for={slide <- @slides}
-            class="slide-item flex items-center justify-center my-96"
+            class="slide-item flex items-center justify-center mb-32"
           >
             <div>
-              <h2 class="slide-title text-center bg-gradient-to-r from-cyan-300 from-[28%] via-purple-400 via-[70%] to-violet-600 font-semibold text-transparent bg-clip-text text-3xl md:text-4xl lg:text-6xl p-2">
-                <%= slide.title %>
-              </h2>
-              <div class="slide-description rounded-full mb-12 md:mb-16 lg:mb-24">
-                <p class="text-white font-light text-center text-lg md:text-xl lg:text-4xl font-light">
-                  <%= slide.subtitle %>
-                </p>
-              </div>
               <div class="slide-image w-96 h-64 sm:w-[576px] sm:h-[384px] md:w-[704px] md:h-[469px] lg:w-[960px] lg:h-[640px] xl:w-[1216px] xl:h-[811px] 2xl:w-[1472px] 2xl:h-[981px] relative aspect-[var(--width)/var(--height)] [--radius:theme(borderRadius.xl)]">
-                <div class="absolute -inset-[var(--padding)] shadow-[inset_0_0_20px_5px_#1e293b] rounded-[calc(var(--radius)+var(--padding))] ring-1 ring-slate-700 [--padding:theme(spacing.2)] md:[--padding:theme(spacing.4)]">
+                <div class="absolute -inset-[var(--padding)] rounded-[calc(var(--radius)+var(--padding))] shadow-[inset_0_0_5px_5px_#ffffffff] ring-1 ring-black/5 [--padding:theme(spacing.2)]">
                 </div>
                 <img
                   src={Image.url(slide.image, w: 2560)}
                   alt={slide.image.alt}
                   class="h-full aspect-[3/2] rounded-[var(--radius)] shadow-2xl"
                 />
               </div>
+              <div class="slide-caption mt-12 mx-auto text-center bg-slate-100 w-fit px-8 py-4 rounded-full">
+                <h2 class="slide-title bg-gradient-to-br from-blue-400 from-[28%] via-purple-400 via-[70%] to-violet-600 font-semibold text-transparent bg-clip-text text-2xl">
+                  <%= slide.title %>
+                </h2>
+                <p class="text-slate-950 font-light text-md font-semibold">
+                  <%= slide.subtitle %>
+                </p>
+              </div>
             </div>
           </div>
         </div>

diff --git a/lib/opsmaru_web/live/lesson_live.ex b/lib/opsmaru_web/live/lesson_live.ex
diff --git a/lib/opsmaru_web/live/lesson_live/index.ex b/lib/opsmaru_web/live/lesson_live/index.ex