Changed mainframe breakpoints (#165)

* fix: Changed mainframe breakpoints

* fix: Changed layout to handle tablet sizes more cleanly

Author: lamATnginx

assets/css/v2/style.css

@@ -204,10 +204,7 @@ nav {
 
 .content-layout {
   display: grid;
-  grid-template-columns: var(--text-content-width-iphone-13) var(
-      --side-gutter-width
-    );
-  column-gap: var(--component-gap);
+  grid-template-columns: var(--text-content-width-iphone-13) 1fr;
 }
 
 .docs-container {
@@ -219,12 +216,6 @@ nav {
   flex-direction: column;
 }
 
-@media (max-width: 1528px) {
-  .sidebar-layout {
-    display: none;
-  }
-}
-
 #searchbox {
   width: 24rem;
   display: none;
@@ -255,12 +246,13 @@ nav {
 }
 
 .text-content {
-  grid-column-start: 1;
+  grid-column: 1 / -1;
   display: grid;
+  grid-template-columns: var(--text-content-width-iphone-13) 1fr;
 }
 
 .text-content > :not(.wide) {
-  grid-column: 1;
+  grid-column: 1 / -1;
 }
 
 .text-content .wide {
@@ -271,13 +263,11 @@ nav {
   width: 100%;
 }
 
-@media (min-width: 1512px) {
-  /* Macbook Pro 14 */
-  .base-layout {
+@media (min-width: 1185px) {
+  .main-layout {
     display: grid;
-    grid-template-rows: repeat(2, auto);
+    grid-template-columns: var(--sidebar-width) 1fr;
     column-gap: var(--component-gap);
-    max-width: 100%;
   }
 
   .breadcrumb-layout {
@@ -286,6 +276,21 @@ nav {
     column-gap: var(--component-gap);
     align-items: center;
   }
+}
+@media (max-width: 1184px) {
+  .sidebar-layout {
+    display: none;
+  }
+}
+
+@media (min-width: 1512px) {
+  /* Macbook Pro 14 */
+  .base-layout {
+    display: grid;
+    grid-template-rows: repeat(2, auto);
+    column-gap: var(--component-gap);
+    max-width: 100%;
+  }
 
   .text-content {
     grid-template-columns: var(--text-content-width-mbp-14) var(
@@ -294,6 +299,10 @@ nav {
     column-gap: var(--component-gap);
   }
 
+  .text-content > :not(.wide) {
+    grid-column: 1;
+  }
+
   .main-layout {
     display: grid;
     grid-template-columns: var(--sidebar-width) 1fr;
@@ -727,8 +736,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
 /* content */
 main {
   flex: 1;
-  max-width: 50rem;
-  min-width: 40rem;
+  min-width: 30rem;
   margin: 2rem 2rem;
 }