Main can't go past viewport

EternityForest · Jun 14, 2024 · 9ab500d · 9ab500d
1 parent 9ede68b
commit 9ab500d
Showing 1 changed file with 28 additions and 10 deletions.
diff --git a/css/barrel.css b/css/barrel.css
@@ -312,7 +312,7 @@ main {
     margin: auto;
     width: calc(min(45em, 100vw, 100%));
     max-width: 100%;
-    min-width: min-content
+    min-width: calc(min(min-content, 100vw));
 }
 
 html {
@@ -1343,9 +1343,6 @@ A little smaller in flex to allow for expansion or fitting lots on a row*/
 .w-sm-full {
     width: min(min(430px, 100%), 100vw);
     max-width: calc(min(430px, 100vw));
-    flex-basis: 300px;
-    flex-shrink: 1;
-    flex-grow: 1;
 
     &:is(.margin) {
         max-width: calc(calc(min(430px, 100vw)) - calc(var(--gap) * 2));
@@ -1355,7 +1352,6 @@ A little smaller in flex to allow for expansion or fitting lots on a row*/
 .w-sm-quarter {
     width: 80px;
     max-width: calc(min(160px, 25vw));
-    flex-basis: 70px;
 
     &:is(.margin) {
         max-width: calc(calc(min(160, 25vw)) - calc(var(--gap) * 2));
@@ -1365,7 +1361,6 @@ A little smaller in flex to allow for expansion or fitting lots on a row*/
 .w-sm-half {
     width: 175px;
     max-width: calc(min(215px, 50vw));
-    flex-basis: 160px;
     flex-grow: 1;
 
     &:is(.margin) {
@@ -1376,9 +1371,6 @@ A little smaller in flex to allow for expansion or fitting lots on a row*/
 .w-sm-double {
     width: min(min(28cm, 96vw), 100%);
     max-width: min(28cm, 96vw);
-    flex-basis: 16cm;
-    flex-shrink: 1;
-    flex-grow: 1;
 
     &:is(.margin) {
         max-width: calc(calc(min(28cm, 100vw)) - calc(var(--gap) * 2));
@@ -1396,7 +1388,6 @@ A little smaller in flex to allow for expansion or fitting lots on a row*/
 .w-full {
     width: 100%;
     max-width: 100%;
-    flex-basis: 100%;
 }
 
 .h-full {
@@ -1796,6 +1787,33 @@ A little smaller in flex to allow for expansion or fitting lots on a row*/
     &>.w-min-content {
         flex-basis: min-content;
     }
+
+    &>.w-full {
+        flex-basis: 100%;
+    }
+
+    .w-sm-full {
+        flex-basis: 300px;
+        flex-shrink: 1;
+        flex-grow: 1;
+    }
+
+    .w-sm-quarter {
+        flex-basis: 70px;
+    }
+
+    .w-sm-half {
+        flex-basis: 160px;
+        flex-grow: 1;
+
+    }
+
+    .w-sm-double {
+        flex-basis: 16cm;
+        flex-shrink: 1;
+        flex-grow: 1;
+    }
+
 }