Remove tablet-specific layout

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;

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 @@
     }
   }
 }
-

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}",