From c57377610c7c7f05ce93d4fcbada056b33c798fa Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 13 Mar 2023 17:06:52 -0500
Subject: [PATCH] define new breakpoints for code tabs

---
 source/assets/sass/components/_sass-syntax-switcher.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/source/assets/sass/components/_sass-syntax-switcher.scss b/source/assets/sass/components/_sass-syntax-switcher.scss
index bf2a99e..3f3114d 100644
--- a/source/assets/sass/components/_sass-syntax-switcher.scss
+++ b/source/assets/sass/components/_sass-syntax-switcher.scss
@@ -1,4 +1,3 @@
-@use '../functions';
 @use '../visual-design/theme';
 @use '../visual-design/typography';
 
@@ -110,7 +109,7 @@
   // syntax switcher is exactly equal to two lines, so there's no visual jitter
   // when switching between syntaxes.
   pre + pre {
-    margin-top: 1rem;
+    margin-top: var(--sl-gutter);
   }
 }
 
@@ -233,13 +232,15 @@ html .ui-button.ui-state-disabled:active {
   }
 }
 
-@media screen and (min-width: functions.sl-px-to-rem(1500px)) {
+// custom breakpoint to make the split tabs work with a double nav column
+@media screen and (min-width: 93.75rem) {
   body.documentation {
     @include -split-css-tabs;
   }
 }
 
-@media screen and (min-width: functions.sl-px-to-rem(1000px)) {
+// custom breakpoint to make the split tabs work with a single nav column
+@media screen and (min-width: 76rem) {
   body.guide {
     @include -split-css-tabs;
   }