diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 81a0c5d..a9689e4 100644 --- a/assets/css/v2/style.css +++ b/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; }