Padding correction on categories nav

mgcodeur · Oct 5, 2024 · 6b9b079 · 6b9b079
1 parent bab1958
commit 6b9b079
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/assets/js/plugins/splide.js b/assets/js/plugins/splide.js
@@ -34,10 +34,12 @@ const initSplide = () => {
                 perPage: 7,
             }
         }
-    }).mount();
+    });
 
     categories_splide.root.removeAttribute('x-cloak');
 
+    categories_splide.mount();
+
     categories_splide.on('moved', () => {
         toggleSplideArrows(categories_prev, categories_next, categories_splide);
     });
@@ -56,9 +58,6 @@ const initSplide = () => {
 function toggleSplideArrows(prevElement, nextElement, splide) {
     const currentIndex = splide.index; 
     const totalSlides = splide.Components.Elements.slides.length; 
-    console.log('Current Index:', currentIndex);
-    console.log('Total Slides:', totalSlides);
-    console.log('Per Page:', splide.options.perPage);
 
     const can_display_prev = currentIndex > 0;
     const can_display_next = currentIndex < totalSlides - splide.options.perPage;

diff --git a/index.html b/index.html
@@ -8,15 +8,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Medium Clone</title>
+    <title>Medium Clone - Home</title>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- application style -->
-    <link rel="stylesheet" href="dist/css/app.min.css?v=010" type="text/css" />
+    <link rel="stylesheet" href="dist/css/app.min.css?v=011" type="text/css" />
 
     <!-- head scripts -->
-    <script src="assets/js/theme-init.js?v=010"></script>
+    <script src="assets/js/theme-init.js?v=011"></script>
 </head>
 <body class="dark:bg-slate-950 dark:text-slate-100">
     <div class="absolute z-30 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
@@ -356,7 +356,7 @@
                 <!-- prev -->
                 <button
                   href="#"
-                  class="mt-1 absolute -left-6 md:-left-9 top-1/2 transform -translate-y-1/2 mt-0 hover:text-stone-900 dark:text-slate-300 dark:hover:text-slate-100 lg:mt-4 hover:cursor-pointer z-40 categories__prev"
+                  class="mt-1 absolute -left-6 md:-left-9 top-1/2 transform -translate-y-1/2 mt-0 hover:text-stone-900 dark:text-slate-300 dark:hover:text-slate-100 hover:cursor-pointer z-40 categories__prev"
                   x-cloak
                 >
                     <svg
@@ -373,7 +373,7 @@
                 <!-- next -->
                 <button
                   href="#"
-                  class="mt-1 absolute -right-3 md:-right-0 top-1/2 transform -translate-y-1/2 mt-0 hover:text-stone-900 dark:text-slate-300 dark:hover:text-slate-100 lg:mt-4 hover:cursor-pointer z-40 categories__next"
+                  class="mt-1 absolute -right-3 md:-right-0 top-1/2 transform -translate-y-1/2 mt-0 hover:text-stone-900 dark:text-slate-300 dark:hover:text-slate-100 hover:cursor-pointer z-40 categories__next"
                 >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -387,7 +387,7 @@
                     </svg>
                 </button>
 
-                <div class="splide categories__splide pt-0 lg:pt-6 w-full z-30" x-cloak>
+                <div class="splide categories__splide w-full z-30" x-cloak>
                     <div class="splide__track pt-6">
                         <ul class="flex items-end splide__list">
                             <!-- <li class="me-6 splide__slide">
@@ -1089,15 +1089,15 @@ <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">
 
         <!-- aside -->
         <aside class="hidden lg:block pe-6 ps-10 border-l border-slate-200 dark:border-slate-800 z-40">
-            <div class="pt-12">
+            <div class="pt-6">
                 <h2 class="fs-sm text-slate-900 dark:text-slate-100 font-medium">Staff Picks</h2>
             </div>
         </aside>
     </section>
 
     <!-- vendors -->
-    <script defer src="assets/vendors/js/alpinejs.min.js?v=010"></script>
+    <script defer src="assets/vendors/js/alpinejs.min.js?v=011"></script>
     <!-- application scripts -->
-    <script src="dist/js/app.min.js?v=010"></script>
+    <script src="dist/js/app.min.js?v=011"></script>
 </body>
 </html>