applied bg to whole body and updated pos of swiper buttons

Barabasbalazs · Jul 26, 2024 · b509acd · b509acd
1 parent b7aab50
commit b509acd
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 37 deletions.
diff --git a/components/LeftSideWrapper.vue b/components/LeftSideWrapper.vue
@@ -4,10 +4,6 @@
 
     <CardsMarqueeWrapper />
 
-    <!-- <NuxtLayout name="cardwrapper" cols>
-      <CardsContact />
-      <CardsTimeline />
-    </NuxtLayout> -->
     <CardsTimeline />
   </NuxtLayout>
 </template>
diff --git a/components/swiper/Container.vue b/components/swiper/Container.vue
@@ -1,37 +1,36 @@
 <template>
   <div class="relative w-full wrapper-height">
-    <div class="absolute z-10 bottom-0 right-0 flex gap-3">
-      <button
-        class="bg-black rounded-2xl"
-        :class="[
-          { 'brightness-75 grow': currentIndex > 0 },
-          { 'brightness-50': currentIndex === 0 },
-        ]"
-        @click="slideToIndex(currentIndex - 1)"
-      >
-        <img
-          src="assets/app/icons/chevron-left.svg"
-          alt="chevron-left-icon"
-          class="w-10 h-10 md:w-16 md:h-16"
-        />
-      </button>
-      <button
-        class="bg-black rounded-2xl"
-        :class="[
-          {
-            'grow brightness-75': currentIndex < projectItems.length - 1,
-          },
-          { 'brightness-50': currentIndex === projectItems.length - 1 },
-        ]"
-        @click="slideToIndex(currentIndex + 1)"
-      >
-        <img
-          src="assets/app/icons/chevron-right.svg"
-          alt="chevron-right-icon"
-          class="w-10 h-10 md:w-16 md:h-16"
-        />
-      </button>
-    </div>
+    <button
+      class="bg-black rounded-2xl absolute left-0 top-1/2 z-10"
+      :class="[
+        { 'brightness-75 grow': currentIndex > 0 },
+        { 'brightness-50': currentIndex === 0 },
+      ]"
+      @click="slideToIndex(currentIndex - 1)"
+    >
+      <img
+        src="assets/app/icons/chevron-left.svg"
+        alt="chevron-left-icon"
+        class="w-10 h-10 md:w-16 md:h-16"
+      />
+    </button>
+    <button
+      class="bg-black rounded-2xl absolute right-0 top-1/2 z-10"
+      :class="[
+        {
+          'grow brightness-75': currentIndex < projectItems.length - 1,
+        },
+        { 'brightness-50': currentIndex === projectItems.length - 1 },
+      ]"
+      @click="slideToIndex(currentIndex + 1)"
+    >
+      <img
+        src="assets/app/icons/chevron-right.svg"
+        alt="chevron-right-icon"
+        class="w-10 h-10 md:w-16 md:h-16"
+      />
+    </button>
+
     <swiper
       class="w-full h-full"
       @swiper="onSwiper"

diff --git a/constants/head-items.ts b/constants/head-items.ts
@@ -30,4 +30,5 @@ export const defaultHeadItems = {
   ],
   link: linkItems,
   title: "Barabás Balázs - Full Stack Developer",
+  bodyAttrs: { class: "bg-black" },
 } as MetaObject;
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-5 bg-black text-white md:h-screen">
+  <div class="p-5 text-white md:h-screen">
     <NuxtLayout name="cardwrapper" class="w-full h-full" cols>
       <slot
     /></NuxtLayout>