From 05b6b655b2f93f7f9704b51fe102925b876e3aa4 Mon Sep 17 00:00:00 2001
From: DomWane <dominik.k@develit.io>
Date: Thu, 3 Oct 2024 15:53:44 +0200
Subject: [PATCH] fix: styles

---
 components/CategorySelectBox.vue      |  4 ++--
 components/Footer.vue                 |  9 +++++----
 components/Navigation/Index.vue       |  3 ++-
 components/Project/ProjectGrid.vue    |  1 +
 components/Project/ProjectHeading.vue | 21 ++++++++++-----------
 layouts/default.vue                   |  4 ++--
 pages/project/[id]/index.vue          |  3 +--
 7 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/components/CategorySelectBox.vue b/components/CategorySelectBox.vue
index 7169e1a..bbc6264 100644
--- a/components/CategorySelectBox.vue
+++ b/components/CategorySelectBox.vue
@@ -28,7 +28,7 @@ function onOptionSelected(value: string | number) {
     <div class="relative font-700 font-24px">
       <HeadlessListboxButton
         :id="`headless-listbox-button-${name}`"
-        class="relative cursor-pointer py-6px px-14px text-left border-2px bg-app-white text-app-black text-xs sm:text-sm sm:leading-6"
+        class="w-full relative cursor-pointer py-6px px-14px text-left border-2px bg-app-white text-app-black text-xs sm:text-sm sm:leading-6"
         hover="bg-app-black text-app-white"
         transition="all"
         duration-250
@@ -52,7 +52,7 @@ function onOptionSelected(value: string | number) {
         leave-to-class="opacity-0"
       >
         <HeadlessListboxOptions
-          class="absolute z-100 max-h-60 w-auto border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
+          class="absolute z-100 max-h-60 w-fit border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
         >
           <HeadlessListboxOption
             v-for="option in props.options"
diff --git a/components/Footer.vue b/components/Footer.vue
index b384c4d..b601a7b 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -3,7 +3,7 @@ const isHovered = ref(false)
 </script>
 
 <template>
-  <div app-container>
+  <div w-full>
     <div mt-48px>
       <hr
         border-t-2px
@@ -13,7 +13,8 @@ const isHovered = ref(false)
       >
     </div>
     <div
-      p-24px
+      app-container
+      pt-24px
       pb-8px
       flex
       items-center
@@ -121,8 +122,8 @@ const isHovered = ref(false)
       </div>
     </div>
     <div
+      app-container
       text="14px sm:16px"
-      px-24px
       grid
       grid-cols-2
       sm:grid-cols-3
@@ -196,7 +197,7 @@ const isHovered = ref(false)
       w-full
     >
     <div
-      px-24px
+      app-container
       my-16px
       sm:mt-32px
       flex
diff --git a/components/Navigation/Index.vue b/components/Navigation/Index.vue
index 91eca1d..c880875 100644
--- a/components/Navigation/Index.vue
+++ b/components/Navigation/Index.vue
@@ -19,6 +19,7 @@ const isProjectDetailRoute = computed(() => {
     z-100
     bg-black
     overflow-hidden
+    border="b-1px white/20"
   >
     <div
       relative
@@ -28,7 +29,7 @@ const isProjectDetailRoute = computed(() => {
     >
       <img
         absolute
-        lg="left--30px"
+        lg="left-10px"
         left--30px
         top--25px
         z-101
diff --git a/components/Project/ProjectGrid.vue b/components/Project/ProjectGrid.vue
index e1e5f77..c19ceba 100644
--- a/components/Project/ProjectGrid.vue
+++ b/components/Project/ProjectGrid.vue
@@ -15,6 +15,7 @@ const totalProjectsCount = props.projects.map(g => g.projects.length).reduce((a,
     items-start
   >
     <ProjectGridGroup
+      my-24px lg:my-32px
       v-for="group in projects"
       :key="group.title"
       :group="group"
diff --git a/components/Project/ProjectHeading.vue b/components/Project/ProjectHeading.vue
index 3fda35c..efd3d09 100644
--- a/components/Project/ProjectHeading.vue
+++ b/components/Project/ProjectHeading.vue
@@ -114,10 +114,9 @@ const logo = props.project?.logos?.at(0)?.url
           flex
           justify-center
           lg:grid
-          grid-cols-10
+          grid-cols-8
           w-full
           items-center
-          mt-4px
         >
           <h2
             hidden
@@ -126,10 +125,10 @@ const logo = props.project?.logos?.at(0)?.url
             Usecases:
           </h2>
           <p
-            mt-8px
-            mb-16px
+            mb-8px
+            lg="mb-0 mt-0"
             text-app-white
-            col-span-9
+            col-span-7
           >
             {{ projectUsecases }}
           </p>
@@ -143,15 +142,13 @@ const logo = props.project?.logos?.at(0)?.url
           order-3
           lg:order-2
           w-full
-          md:ml-0px
-          ml-18px
         >
           <div
             flex
             flex-col
             gap-4px
             lg:grid
-            lg:grid-cols-10
+            lg:grid-cols-8
             lg:items-center
             w-full
           >
@@ -160,7 +157,7 @@ const logo = props.project?.logos?.at(0)?.url
             </h2>
             <p
               text-app-white
-              col-span-9
+              col-span-7
             >
               {{ projectCategories }}
             </p>
@@ -170,7 +167,7 @@ const logo = props.project?.logos?.at(0)?.url
             flex-col
             gap-4px
             lg:grid
-            lg:grid-cols-10
+            lg:grid-cols-8
             lg:items-center
             w-full
           >
@@ -179,7 +176,7 @@ const logo = props.project?.logos?.at(0)?.url
             </h2>
             <p
               text-app-white
-              col-span-9
+              col-span-7
             >
               {{ projectEcosystems }}
             </p>
@@ -192,6 +189,8 @@ const logo = props.project?.logos?.at(0)?.url
           items-center
           order-2
           lg:order-3
+          lg:ml-0
+          ml--12px
         >
           <div
             flex
diff --git a/layouts/default.vue b/layouts/default.vue
index cf1c8bf..40249ca 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -81,10 +81,10 @@ watch([scrollY, top, y], (newValues, oldValues) => {
             md:justify-between
             md:items-center
             gap-16px
-            mb="16px md:32px"
           >
             <SearchBox
               flex-1
+              class="w-full lg:max-w-1/3"
               placeholder:text-app-text-grey
               :placeholder="`Search in ${filteredProjectsCount} Projects`"
             />
@@ -98,7 +98,7 @@ watch([scrollY, top, y], (newValues, oldValues) => {
               pb-274px
               mb--250px
               md="overflow-x-visible pb-0 mb-0"
-              class="no-scrollbar"
+              class="no-scrollbar lg:w-full lg:max-w-2/3"
             >
               <CategorySelectBox
                 v-model="selectedCategoryId"
diff --git a/pages/project/[id]/index.vue b/pages/project/[id]/index.vue
index 35b28f1..5d1e631 100644
--- a/pages/project/[id]/index.vue
+++ b/pages/project/[id]/index.vue
@@ -34,13 +34,12 @@ useSeoMeta({
   <div v-if="project">
     <div
       app-container
-      px-16px
     >
       <div
         flex
         flex-col
         gap-48px
-        mt-54px
+        mt-32px
       >
         <div>
           <div>