fix: styles

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"

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

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

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"

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-8px
-            mb-16px
+            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

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"

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>