responsiveness

Author: katiegoines

src/styles/footer.scss

@@ -47,7 +47,7 @@
   }
 }
 
-@media (min-width: $toc-min) {
+@media (min-width: $mq-mobile) {
   .footer {
     &--toc {
       margin-inline-end: var(--layout-toc-width);

src/styles/search.scss

@@ -14,7 +14,7 @@
   }
 }
 
-@media (min-width: $toc-min) {
+@media (min-width: $mq-mobile) {
   .layout-search__search {
     &--toc {
       margin-inline-end: calc(

src/styles/toc.scss

@@ -5,7 +5,7 @@
   border-top: 1px solid var(--amplify-colors-neutral-20);
 
   &.desktop-toc {
-    @media (max-width: $mq-mobile) {
+    @media (max-width > $mq-mobile) {
       display: none;
     }
   }
@@ -59,7 +59,7 @@
   }
 }
 
-@media (min-width: $toc-min) {
+@media (min-width: $mq-mobile) {
   .toc {
     width: var(--layout-toc-width);
     background: var(--amplify-colors-background-primary);

src/styles/variables.scss

@@ -3,12 +3,6 @@
 /* $mq-mobile is the min-width we flip to 'desktop' layout */
 $mq-mobile: 1000px;
 
-/** 
- * $toc-min is the min-width we show the table of 
- * contents on the right 
-*/
-$toc-min: 1360px;
-
 :root {
   --content-max-width: 1000px;
   --docs-dev-center-nav: 4rem;