Merge pull request #1577 from appwrite/new-docs-layout

update breakpoints
appwrite · Dec 27, 2024 · 387a1d5 · 387a1d5
2 parents bd84b56 + 7a85ca5
commit 387a1d5
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 7 deletions.
diff --git a/src/lib/layouts/SidebarNavButton.svelte b/src/lib/layouts/SidebarNavButton.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <a
-    class="web-side-nav-button"
+    class="web-side-nav-button flex size-10 w-full items-center whitespace-nowrap rounded-lg p-2"
     class:is-selected={$page.url?.pathname === groupItem.href}
     href={groupItem.href}
     target={groupItem.openInNewTab ? '_blank' : '_self'}

diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss
@@ -100,7 +100,7 @@
         --p-main-header-border-color: rgb(0, 0, 0, 0.1);
     }
 
-    @media #{$break1}, #{$break2} {
+    @media  #{$break1} {
         display: none;
     }
 

diff --git a/src/scss/7-components/_mobile-header.scss b/src/scss/7-components/_mobile-header.scss
@@ -29,7 +29,7 @@
         -webkit-backdrop-filter: blur(pxToRem(8));
         backdrop-filter: blur(pxToRem(8));
     }
-    @media #{$break3open} {
+    @media #{$break2open} {
         display: none;
     }
 

diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss
@@ -44,7 +44,7 @@
     flex:1;
     display:flex; flex-direction:column; gap:pxToRem(24);
     padding-inline:pxToRem(16); margin-right: pxToRem(-16);
-    margin-left: pxToRem(-8);
+    margin-left: pxToRem(-16);
 
     .#{$p}-is-only-mobile  & {
       border-block-start: 1px solid hsl(var(--web-color-smooth));

diff --git a/src/scss/9-grids/_grid-side-nav.scss b/src/scss/9-grids/_grid-side-nav.scss
@@ -18,7 +18,7 @@
       .#{$p}-side-nav { display:block!important; }
     }
   }
-  @media #{$break2} {
+  @media #{$break0} {
     .#{$p}-side-nav {
       display:none; position:fixed; inset-inline-start:0; inset-block-start:pxToRem(73); inset-block-end:0; background:hsl(var(--web-color-background));
       inline-size:pxToRem(280); block-size:initial; border-inline-end:solid pxToRem(1) hsl(var(--web-color-subtle));
@@ -36,7 +36,7 @@
       > *:not(:first-child):where(:not(.u-position-absolute)) { margin-block-start:pxToRem(160); }
     }
   }
-  @media #{$break3open} {
+  @media #{$break2open} {
     display:grid; grid-template-columns: pxToRem(280) minmax(0, 1fr);
     grid-template-areas:  "header header"
                           "side   main";

diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss
@@ -278,12 +278,16 @@
   @media #{$break1}, #{$break2} { display:none!important; }
 }
 
+.#{$p}-is-only-large-desktop {
+  @media #{$break0} { display:none!important; }
+}
+
 .#{$p}-is-not-mobile {
   @media #{$break1} { display:none!important; }
 }
 
 .#{$p}-is-not-desktop {
-  @media #{$break3open} { display:none!important; }
+  @media #{$break2open} { display:none!important; }
 }
 
 .#{$p}-u-gradient-mobile-align {

diff --git a/src/scss/abstract/variables/_devices.scss b/src/scss/abstract/variables/_devices.scss
@@ -1,4 +1,5 @@
 // Responsive Variables
+$break0:      "(max-width:767.9px)";
 $break1:      "(max-width:1023.9px)";
 $break2:      "(min-width:1024px) and (max-width:1279.9px)";
 $break2open:  "(min-width:1024px)";