🔧 .container.is-fluid to tailwind

assets/styles/global.scss

@@ -103,23 +103,6 @@ body {
   }
 }
 
-.container.is-fluid {
-  padding-left: $fluid-container-padding;
-  padding-right: $fluid-container-padding;
-}
-
-@include mobile {
-  .column-padding {
-    padding-left: 10px !important;
-    padding-right: 10px !important;
-    margin: 0 -12px !important;
-  }
-  .container.is-fluid {
-    padding-left: $fluid-container-padding-mobile;
-    padding-right: $fluid-container-padding-mobile;
-  }
-}
-
 /* move to global */
 .is-ellipsis {
   @apply overflow-hidden whitespace-nowrap text-ellipsis;
@@ -238,4 +221,4 @@ table th {
       0px -1px 0 theme('text-color'),
       4px 4px theme('text-color');
   }
-}
+}

components/ExploreLayoutWithSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="container is-fluid"
+    class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5"
     :class="{ '!pl-0': isSidebarOpen }"
   >
     <slot />

components/Navbar.vue

@@ -8,11 +8,11 @@
     }"
   >
     <div
-      class="container items-center max-lg:!px-0"
-      :class="{ 'is-fluid': !isTouch }"
+      class="grow relative mx-auto my-0 max-lg:!px-0 items-stretch flex min-h-[3.25rem] w-full"
+      :class="{ 'w-full max-w-none md:!px-10 !px-5': !isTouch }"
     >
       <!-- BRAND -->
-      <div class="navbar-brand">
+      <div class="navbar-brand ml-[-0.75rem]">
         <nuxt-link
           v-if="!isMobile || !openMobileSearchBar"
           to="/"

components/collection/CollectionHeader.vue

@@ -5,7 +5,7 @@
       :collection="collection"
     />
     <section class="pt-5">
-      <div class="container is-fluid">
+      <div class="grow relative w-full max-w-none mx-auto my-0 !px-10">
         <CollectionInfo
           ref="collectionInfo"
           :collection-id="collectionId"

components/collection/CollectionHeader/CollectionBanner.vue

@@ -9,7 +9,7 @@
 
     <section class="h-full py-8">
       <div
-        class="container is-fluid collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
+        class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
       >
         <div class="lg:flex-1">
           <div class="flex flex-col items-start">

components/landing/HeroBanner.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="!pt-8 md:!pt-[3rem]">
-    <div class="container is-fluid flex max-md:flex-col max-md:gap-8 justify-center md:justify-between items-center">
+    <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 flex max-md:flex-col max-md:gap-8 justify-center md:justify-between items-center">
       <h1
         class="text-3xl md:text-[39px] md:leading-9 font-bold flex max-md:flex-col max-md:text-center md:gap-3 md:flex-wrap"
       >
@@ -24,7 +24,7 @@
 
     <div
       :key="usePrefix().urlPrefix.value"
-      class="container is-fluid !mt-8 md:!mt-[3rem] mb-16"
+      class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 !mt-8 md:!mt-[3rem] mb-16"
     >
       <CarouselTypeDrops />
     </div>

components/landing/LandingPage.vue

@@ -10,20 +10,20 @@
         v-if="showTopCollections"
         class="py-8 instance"
       >
-        <div class="container is-fluid">
+        <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
           <LandingTopCollections class="my-5" />
         </div>
       </section>
 
       <section class="py-8 instance">
-        <div class="container is-fluid">
+        <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
           <!-- generative  -->
           <LazyCarouselTypeGenerative />
         </div>
       </section>
 
       <section class="py-8 instance">
-        <div class="container is-fluid">
+        <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
           <!-- latest sales -->
           <LazyCarouselTypeLatestSales />
 

components/swap/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="container is-fluid flex flex-col">
+  <section class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 flex flex-col">
     <div class="flex my-14 flex-wrap gap-10 justify-between">
       <slot name="title" />
 

components/swap/review.vue

@@ -68,7 +68,7 @@
     <hr class="m-0">
 
     <div
-      class="container is-fluid flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
+      class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
     >
       <div class="w-[300px]">
         <TradeExpirationSelector

layouts/default.vue

@@ -2,7 +2,7 @@
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
     <main class="flex-grow py-8">
-      <div class="container is-fluid">
+      <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
         <Error
           v-if="$nuxt.isOffline"
           :has-img="false"

layouts/explore-layout.vue

@@ -13,7 +13,7 @@
         <div v-else>
           <CollectionHeader v-if="isCollection" />
           <section class="py-7 px-0">
-            <div class="container is-fluid">
+            <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
               <h1
                 v-if="isExplore"
                 class="title"

layouts/gallery-item-layout.vue

@@ -3,8 +3,8 @@
     <Navbar />
     <main class="flex-grow py-8">
       <div
-        class="container"
-        :class="{ 'is-fluid': !isFullHD }"
+        class="grow relative mx-auto my-0 max-lg:!px-0 items-stretch flex min-h-[3.25rem] w-full"
+        :class="{ 'w-full max-w-none md:!px-10 !px-5': !isTouch }"
       >
         <Error
           v-if="$nuxt.isOffline"
@@ -36,6 +36,5 @@ useHead({
   ],
 })
 
-const { width } = useWindowSize()
-const isFullHD = computed(() => width.value >= 1440)
+const { isMobileOrTablet: isTouch } = useDevice()
 </script>

layouts/no-footer.vue

@@ -2,7 +2,7 @@
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
     <main class="flex-grow py-8">
-      <div class="container is-fluid">
+      <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
         <Error
           v-if="$nuxt.isOffline"
           :has-img="false"

layouts/teleport-layout.vue

@@ -2,7 +2,7 @@
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
     <main class="flex-grow">
-      <div class="container is-fluid">
+      <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
         <Error
           v-if="$nuxt.isOffline"
           :has-img="false"

pages/[prefix]/explore/collectibles.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container is-fluid">
+  <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
     <CollectionGridWithBreadcrumbs />
   </div>
 </template>