fix: change container/main with & breakpoints

gitsindonesia · Jun 15, 2023 · e569323 · e569323
1 parent 7785ea4
commit e569323
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 9 deletions.
diff --git a/packages/themes/src/morpheme/_app-shell.scss b/packages/themes/src/morpheme/_app-shell.scss
@@ -40,15 +40,53 @@
     margin-left: auto;
     margin-right: auto;
     width: 100%;
-    
+
     @media (min-width: 360px) {
-      max-width: var(--screen-mobile);
+      .container {
+        max-width: 360px;
+      }
+    }
+
+    @media (min-width: 640px) {
+      .container {
+        max-width: 640px;
+      }
     }
+
+    @media (min-width: 768px) {
+      .container {
+        max-width: 768px;
+      }
+    }
+
     @media (min-width: 834px) {
-      max-width: var(--screen-tablet);
+      .container {
+        max-width: 834px;
+      }
     }
+
+    @media (min-width: 1024px) {
+      .container {
+        max-width: 1024px;
+      }
+    }
+
+    @media (min-width: 1280px) {
+      .container {
+        max-width: 1280px;
+      }
+    }
+
     @media (min-width: 1440px) {
-      max-width: var(--screen-desktop);
+      .container {
+        max-width: 1440px;
+      }
+    }
+
+    @media (min-width: 1536px) {
+      .container {
+        max-width: 1536px;
+      }
     }
 
     &--padded {

diff --git a/packages/themes/src/morpheme/_container.scss b/packages/themes/src/morpheme/_container.scss
@@ -1,22 +1,57 @@
 :root {
-  --v-main-width: 100%;
   --v-main-padding-x: var(--size-spacing-4);
   --v-main-padding-y: var(--size-spacing-4);
 }
 
 .v-main {
-  width: var(--v-main-width);
+  width: 100%;
 
   @media (min-width: 360px) {
-    max-width: var(--screen-mobile);
+    .container {
+      max-width: 360px;
+    }
+  }
+
+  @media (min-width: 640px) {
+    .container {
+      max-width: 640px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .container {
+      max-width: 768px;
+    }
   }
 
   @media (min-width: 834px) {
-    max-width: var(--screen-tablet);
+    .container {
+      max-width: 834px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .container {
+      max-width: 1024px;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .container {
+      max-width: 1280px;
+    }
   }
 
   @media (min-width: 1440px) {
-    max-width: var(--screen-desktop);
+    .container {
+      max-width: 1440px;
+    }
+  }
+
+  @media (min-width: 1536px) {
+    .container {
+      max-width: 1536px;
+    }
   }
 
   &--padded {