Merge pull request #334 from appwrite/elad-style-fixes-3

Elad style fixes 3

src/lib/components/MobileNav.svelte

@@ -39,7 +39,7 @@
                 href="https://github.com/appwrite/appwrite/stargazers"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="aw-button is-text u-width-full-line"
+                class="aw-button is-text aw-u-inline-width-100-percent-mobile"
             >
                 <span class="aw-icon-star" aria-hidden="true" />
                 <span class="text">Star on GitHub</span>

src/lib/components/Select.svelte

@@ -136,7 +136,7 @@
 {/if}
 
 <div
-    class="aw-select is-colored aw-is-only-mobile"
+    class="aw-select is-colored aw-is-only-mobile aw-u-inline-width-100-percent-mobile-break1"
     style:display={nativeMobile ? undefined : 'none'}
 >
     {#if selectedOption?.icon}

src/lib/layouts/Docs.svelte

@@ -81,7 +81,7 @@
             </a>
         </div>
         <div class="aw-mobile-header-end">
-            <a href="https://cloud.appwrite.io/console" class="aw-button is-not-mobile">
+            <a href="https://cloud.appwrite.io/console" class="aw-button aw-is-only-desktop">
                 <span class="aw-sub-body-500">Go to console</span>
             </a>
             <button on:click={toggleSidenav} class="aw-button is-text" aria-label="open navigation">

src/lib/layouts/DocsArticle.svelte

@@ -113,7 +113,7 @@
                             use:scrollToTop
                         >
                             <span class="aw-icon-arrow-up" aria-hidden="true" />
-                            <span class="aw-sub-body-500">Back to top</span>
+                            <span class="aw-caption-400">Back to top</span>
                         </button>
                     </div>
                 {/if}

src/lib/layouts/DocsTutorial.svelte

@@ -147,7 +147,7 @@
                 <div class="u-sep-block-start u-padding-block-start-20">
                     <button class="aw-link u-inline-flex u-cross-center u-gap-8" use:scrollToTop>
                         <span class="aw-icon-arrow-up" aria-hidden="true" />
-                        <span class="aw-sub-body-500">Back to top</span>
+                        <span class="aw-caption-400">Back to top</span>
                     </button>
                 </div>
             </div>

src/lib/layouts/Sidebar.svelte

@@ -95,7 +95,7 @@
 			</button>
 		{/if}
 		<div class="aw-side-nav-mobile-footer-buttons">
-			<button class="aw-button u-width-full-line">
+			<button class="aw-button aw-u-inline-width-100-percent-mobile">
 				<span class="text">Go to console</span>
 			</button>
 
@@ -103,7 +103,7 @@
 				href="https://github.com/appwrite/appwrite/stargazers"
 				target="_blank"
 				rel="noopener noreferrer"
-				class="aw-button is-text u-width-full-line"
+				class="aw-button is-text aw-u-inline-width-100-percent-mobile"
 			>
 				<span class="aw-icon-star" aria-hidden="true" />
 				<span class="text">Star on GitHub</span>

src/routes/community/+page.svelte

@@ -711,8 +711,8 @@
                 </div>
             </div>
         </div>
-        <div class="aw-big-padding-section">
         <div class="aw-big-padding-section-level-1">
+
             <div class="aw-big-padding-section-level-2">
                     <div class="aw-container">
                         <div class="aw-grid-1-1-opt-2 u-gap-32">
@@ -812,7 +812,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
+
 
             <div
                 class="aw-big-padding-section-level-2 is-margin-replace-padding u-position-relative"

src/routes/docs/references/[version]/[platform]/[service]/+page.svelte

@@ -98,9 +98,9 @@
                 <div class="aw-inline-code">{platformType}</div>
             </div>
             <div class="aw-article-header-end">
-                <div class="u-flex u-gap-24 aw-u-color-text-primary">
+                <div class="u-flex u-gap-24 aw-u-flex-vertical-mobile aw-u-color-text-primary">
                     <div class="u-flex u-cross-center u-gap-8">
-                        <label class="u-small is-not-mobile" for="platform">Platform</label>
+                        <label class="u-small aw-is-not-mobile" for="platform">Platform</label>
                         <Select
                             --min-width="10rem"
                             id="platform"
@@ -126,7 +126,7 @@
                         />
                     </div>
                     <div class="u-flex u-cross-center u-gap-8">
-                        <label class="u-small is-not-mobile" for="version">Version</label>
+                        <label class="u-small aw-is-not-mobile" for="version">Version</label>
 
                         <Select
                             nativeMobile
@@ -340,7 +340,7 @@
                             use:scrollToTop
                         >
                             <span class="aw-icon-arrow-up" aria-hidden="true" />
-                            <span class="aw-sub-body-500">Back to top</span>
+                            <span class="aw-caption-400">Back to top</span>
                         </button>
                     </div>
                 </div>

src/scss/9-grids/_grid-two-side-navs.scss

@@ -21,6 +21,10 @@
 
   .#{$p}-icon-button [class*="icon"]{transition:var(--transition); }
 
+  .#{$p}-article {
+    &-header { margin-block-start: var(--p-grid-huge-navs--margin-top-content-side-b); }
+  }
+
   @media #{$break1} {
     //--p-grid-huge-navs-padding-inline: #{pxToRem(20)};
     padding-inline:var(--p-grid-huge-navs-padding-inline);
@@ -56,7 +60,6 @@
       &-header  {
         position: static;
         margin-inline: var(--p-grid-huge-navs-padding-inline);
-        margin-block-start: var(--p-grid-huge-navs--margin-top-content-side-b);
         inset-block-start: var(--p-grid-huge-navs-main-header-height);
       }
       &-header,