diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index aa6eeff55..61d0bf6f3 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -196,13 +196,6 @@ a { row-gap: #{map.get($desktopGrid, rowGap)}; grid-template-areas: #{map.get($desktopGrid, templateAreas)}; - @media all and ($tablet) { - grid-template-columns: #{map.get($tabletGrid, templateColumns)}; - grid-template-rows: #{map.get($tabletGrid, templateRows)}; - column-gap: #{map.get($tabletGrid, columnGap)}; - row-gap: #{map.get($tabletGrid, rowGap)}; - grid-template-areas: #{map.get($tabletGrid, templateAreas)}; - } @media all and ($mobile) { grid-template-columns: #{map.get($mobileGrid, templateColumns)}; grid-template-rows: #{map.get($mobileGrid, templateRows)}; @@ -211,7 +204,7 @@ a { grid-template-areas: #{map.get($mobileGrid, templateAreas)}; } - @media all and not ($desktop) { + @media all and ($mobile) { padding: 0 1rem; } @media all and ($mobile) { @@ -253,7 +246,7 @@ a { margin-left: inherit; margin-right: inherit; } - @media all and not ($desktop) { + @media all and ($mobile) { position: initial; height: unset; width: 100%; @@ -296,9 +289,6 @@ a { min-width: 100%; margin-left: auto; margin-right: auto; - @media all and ($tablet) { - margin-right: 0; - } @media all and ($mobile) { margin-right: 0; margin-left: 0; diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index 4e6ffff72..f016f02fa 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -4,53 +4,33 @@ @media (max-width: 800px) { .right.sidebar { text-align: center; - + h3 { text-align: center; } - + ul { list-style: none; padding-left: 0; text-align: center; } - + li { text-align: center; } } } -// Hide right sidebar on tablet view (801px to 1199px) -@media (min-width: 801px) and (max-width: 1199px) { - #quartz-body { - .sidebar.right { - display: none !important; - } - } - - // Also hide if it appears as a direct child - .right.sidebar { - display: none !important; - } - - // Target any element with grid-area set to grid-sidebar-right - [style*="grid-area: grid-sidebar-right"], - *[class*="right"] { - display: none !important; - } -} - // Keep everything left-aligned on desktop -@media (min-width: 1200px) { +@media (min-width: 801px) { .right.sidebar { text-align: left; display: flex !important; - + h3 { text-align: left; } - + ul { text-align: left; list-style: none; @@ -58,4 +38,3 @@ } } } - diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss index dd2fd1f08..20282b10e 100644 --- a/quartz/styles/variables.scss +++ b/quartz/styles/variables.scss @@ -4,8 +4,6 @@ * Layout breakpoints * $mobile: screen width below this value will use mobile styles * $desktop: screen width above this value will use desktop styles - * Screen width between $mobile and $desktop width will use the tablet layout. - * assuming mobile < desktop */ $breakpoints: ( mobile: 800px, @@ -13,8 +11,7 @@ $breakpoints: ( ); $mobile: "(max-width: #{map.get($breakpoints, mobile)})"; -$tablet: "(min-width: #{map.get($breakpoints, mobile)}) and (max-width: #{map.get($breakpoints, desktop)})"; -$desktop: "(min-width: #{map.get($breakpoints, desktop)})"; +$desktop: "(min-width: #{map.get($breakpoints, mobile) + 1px})"; $pageWidth: #{map.get($breakpoints, mobile)}; $sidePanelWidth: 320px; //380px; @@ -35,17 +32,6 @@ $mobileGrid: ( "grid-sidebar-right"\ "grid-footer"', ); -$tabletGrid: ( - templateRows: "auto auto auto auto", - templateColumns: "#{$sidePanelWidth} auto", - rowGap: "5px", - columnGap: "5px", - templateAreas: - '"grid-sidebar-left grid-header"\ - "grid-sidebar-left grid-center"\ - "grid-sidebar-left grid-sidebar-right"\ - "grid-sidebar-left grid-footer"', -); $desktopGrid: ( templateRows: "auto auto auto", templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",