Elad style fixes 1

src/lib/components/PreFooter.svelte

@@ -48,7 +48,7 @@
                     <div class="aw-strip-plans-plan">
                         <h4 class="title aw-description">Pro</h4>
                         <div class="aw-title aw-u-color-text-primary">$15</div>
-                        <div class="info aw-caption-500">per org member/month</div>
+                        <div class="info aw-caption-500">per user/month</div>
                     </div>
                     <p class="aw-strip-plans-info aw-caption-500">
                         For pro developers and teams that need to scale their products.

src/lib/components/Select.svelte

@@ -105,7 +105,7 @@
         {#each groups as group}
             {@const isDefault = group.label === DEFAULT_GROUP}
             {#if isDefault}
-                <div class="u-flex u-flex-vertical">
+                <div class="u-flex u-flex-vertical u-gap-2">
                     {#each group.options as option}
                         <button class="aw-select-option" use:melt={$optionEl(option)}>
                             {#if option.icon}

src/lib/layouts/Docs.svelte

@@ -60,114 +60,114 @@
 </script>
 
 <div class="u-position-relative">
-    <div
-        class={variantClass}
-        class:is-open={$layoutState.showSidenav}
-        style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined}
-    >
-        <section class="aw-mobile-header is-transparent">
-            <div class="aw-mobile-header-start">
-                <a href="/" aria-label="homepage">
-                    <img
+    <section class="aw-mobile-header is-transparent">
+        <div class="aw-mobile-header-start">
+            <a href="/" aria-label="homepage">
+                <img
                         class="aw-logo u-only-dark"
                         src="/images/logos/appwrite.svg"
                         alt="appwrite"
                         height="24"
                         width="130"
-                    />
-                    <img
+                />
+                <img
                         class="aw-logo u-only-light"
                         src="/images/logos/appwrite-light.svg"
                         alt="appwrite"
                         height="24"
                         width="130"
-                    />
-                </a>
-            </div>
-            <div class="aw-mobile-header-end">
-                <a href="https://cloud.appwrite.io/console" class="aw-button">
-                    <span class="aw-sub-body-500">Go to console</span>
-                </a>
-                <button
+                />
+            </a>
+        </div>
+        <div class="aw-mobile-header-end">
+            <a href="https://cloud.appwrite.io/console" class="aw-button">
+                <span class="aw-sub-body-500">Go to console</span>
+            </a>
+            <button
                     on:click={toggleSidenav}
                     class="aw-button is-text"
                     aria-label="open navigation"
-                >
-                    <span class="aw-icon-hamburger-menu" />
-                </button>
-            </div>
-        </section>
-        <header class="aw-main-header is-docs" class:is-transparent={variant !== 'expanded'}>
-            <div class="aw-main-header-wrapper">
-                <div class="aw-main-header-start u-stretch">
-                    <a href="/" aria-label="homepage">
-                        <img
+            >
+                 <span class="aw-icon-hamburger-menu" />
+            </button>
+        </div>
+    </section>
+    <header class="aw-main-header is-docs" class:is-transparent={variant !== 'expanded'}>
+        <div class="aw-main-header-wrapper">
+            <div class="aw-main-header-start u-stretch">
+                <a href="/" aria-label="homepage">
+                    <img
                             class="aw-logo u-only-dark"
                             src="/images/logos/appwrite.svg"
                             alt="appwrite"
                             height="24"
                             width="130"
-                        />
-                        <img
+                    />
+                    <img
                             class="aw-logo u-only-light"
                             src="/images/logos/appwrite-light.svg"
                             alt="appwrite"
                             height="24"
                             width="130"
-                        />
-                    </a>
-                    <nav class="aw-main-header-nav">
-                        <ul class="aw-main-header-nav-list">
-                            <li class="aw-main-header-nav-item">
-                                <a class="aw-link" href="/docs">Docs</a>
-                            </li>
-                        </ul>
-                    </nav>
-                    <div class="u-flex u-stretch aw-u-margin-inline-start-48">
-                        <button
+                    />
+                </a>
+                <nav class="aw-main-header-nav">
+                    <ul class="aw-main-header-nav-list">
+                        <li class="aw-main-header-nav-item">
+                            <a class="aw-link" href="/docs">Docs</a>
+                        </li>
+                    </ul>
+                </nav>
+                <div class="u-flex u-stretch aw-u-margin-inline-start-48">
+                    <button
                             class="aw-input-button aw-u-flex-basis-400"
                             on:click={() => ($layoutState.showSearch = true)}
-                        >
-                            <span class="aw-icon-search" aria-hidden="true" />
-                            <span class="text">Search in docs</span>
+                    >
+                        <span class="aw-icon-search" aria-hidden="true" />
+                        <span class="text">Search in docs</span>
 
-                            <div class="u-flex u-gap-4 u-margin-inline-start-auto">
-                                {#if isMac()}
-                                    <span class="aw-kbd" aria-label="command">⌘</span>
-                                {:else}
-                                    <span class="aw-kbd" aria-label="control">Ctrl</span>
-                                {/if}
-                                <span class="aw-kbd">K</span>
-                            </div>
-                        </button>
-                    </div>
+                        <div class="u-flex u-gap-4 u-margin-inline-start-auto">
+                            {#if isMac()}
+                                <span class="aw-kbd" aria-label="command">⌘</span>
+                            {:else}
+                                <span class="aw-kbd" aria-label="control">Ctrl</span>
+                            {/if}
+                            <span class="aw-kbd">K</span>
+                        </div>
+                    </button>
                 </div>
-                <div class="aw-main-header-end">
-                    <div class="u-flex u-gap-8">
-                        <a
+            </div>
+            <div class="aw-main-header-end">
+                <div class="u-flex u-gap-8">
+                    <a
                             href="https://github.com/appwrite/appwrite/stargazers"
                             target="_blank"
                             rel="noopener noreferrer"
                             class="aw-button is-text"
-                        >
-                            <span class="aw-icon-star" aria-hidden="true" />
-                            <span class="text">Star on GitHub</span>
-                            <span class="aw-inline-tag aw-sub-body-400">36.8K</span>
-                        </a>
-                        <a href="https://cloud.appwrite.io/console" class="aw-button">
-                            <span class="aw-sub-body-500">Go to console</span>
-                        </a>
-                        <button
+                    >
+                        <span class="aw-icon-star" aria-hidden="true" />
+                        <span class="text">Star on GitHub</span>
+                        <span class="aw-inline-tag aw-sub-body-400">36.8K</span>
+                    </a>
+                    <a href="https://cloud.appwrite.io/console" class="aw-button">
+                        <span class="aw-sub-body-500">Go to console</span>
+                    </a>
+                    <button
                             on:click={toggleSidenav}
                             class="aw-button is-text aw-is-not-desktop"
                             aria-label="open navigation"
                         >
                             <span class="aw-icon-hamburger-menu" />
                         </button>
-                    </div>
                 </div>
             </div>
-        </header>
+        </div>
+    </header>
+    <div
+        class={variantClass}
+        class:is-open={$layoutState.showSidenav}
+        style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined}
+    >
         <slot />
     </div>
 </div>

src/lib/layouts/Main.svelte

@@ -163,7 +163,7 @@
         </div>
     </section>
     <header
-        class="aw-main-header theme-{resolvedTheme}"
+        class="aw-main-header is-special-padding theme-{resolvedTheme}"
         class:is-transparent={browser}
         class:is-hidden={$isHeaderHidden}
     >

src/scss/1-css-variables/_colors.scss

@@ -12,7 +12,7 @@
     --aw-color-card: var(--aw-color-white) / 0.9;
     --aw-color-smooth: var(--aw-color-greyscale-900) / 0.04;
     --aw-color-subtle: var(--aw-color-greyscale-50);
-    --aw-color-offset: var(--aw-color-black) / 0.06;
+    --aw-color-offset: var(--aw-color-black) / 0.08;
 
     --aw-color-border: var(--aw-color-greyscale-50);
   }

src/scss/6-elements/_select.scss

@@ -114,33 +114,21 @@
 
 
 .#{$p}-select-menu {
-	all: unset;
-	display: flex;
-	flex-direction: column;
-  gap: pxToRem(8);  
-	position: relative;
-	line-height: 1;
-	user-select: none;
-
-	color: hsl(var(--aw-color-primary));
-	font-size: pxToRem(14);
-
-	border-radius: pxToRem(8);
-	line-height: 1.2;
-  padding-inline: pxToRem(4);
-  padding-block: pxToRem(4);
-  box-sizing: border-box;
+	all:unset; position:relative; display:flex; flex-direction:column; gap:pxToRem(8);
+    user-select:none; color:hsl(var(--aw-color-primary)); font-size:pxToRem(14);
+    border-radius:pxToRem(12); line-height:1.2;
+    box-sizing:border-box; padding-inline:pxToRem(4); padding-block: pxToRem(4);
+    max-block-size:pxToRem(300)!important; overflow-y:auto;
+    user-select: none;
 
-  max-height: pxToRem(290) !important;
-  overflow-y: auto;
 
   @mixin light-mode() {
     --p-select-menu-bg-color: var(--aw-color-white);
     --p-select-menu-border-color: var(--aw-color-black) / 0.06;
     --p-select-menu-box-shadow-color: var(--transparent);
   }
   @mixin dark-mode() {
-    --p-select-menu-bg-color: var(--aw-color-greyscale-800);
+    --p-select-menu-bg-color: var(--aw-color-greyscale-850);
     --p-select-menu-border-color: var(--aw-color-white) / 0.10;
     --p-select-menu-box-shadow-color: var(--transparent);
   }
@@ -176,7 +164,7 @@
 
   padding-block: pxToRem(4);
   padding-inline: pxToRem(4);
-  border-radius: pxToRem(6);
+  border-radius: pxToRem(8);
   scroll-margin-block: pxToRem(8);
 
   cursor: pointer;

src/scss/7-components/_main-header.scss

@@ -7,23 +7,22 @@
   --p-main-header-border-color: rgb(0,0,0, 0.1);
 
   position:sticky; z-index:999; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
-  border-block-end: solid 1px var(--p-main-header-border-color);
-  padding-inline: clamp(1.25rem, 4vw, 120rem); 
-
-  &.is-docs {
-    padding-inline: pxToRem(32);
+  padding-inline:pxToRem(32); border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
+  min-block-size:pxToRem(73);
 
+  &.is-special-padding {
+    padding-inline: clamp(1.25rem,4vw,120rem); /* Thomas calculation */
+  }
+  &.is-docs {
+    .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-large);  }
+  }
+  &.is-reference {
+    .#{$p}-main-header-wrapper { max-inline-size:var(--container-size-huge); }
   }
 
   &-wrapper { 
-    display: flex;
-    justify-content: center;
-    margin-inline: auto;
-
-    max-width: pxToRem(1728);
-    padding-block: var(--p-main-header-padding-block);
-    flex-wrap: wrap;
-    gap: 1rem;
+    display:flex; flex-wrap:wrap; justify-content:center; gap:pxToRem(16); margin-inline:auto;
+    max-inline-size:pxToRem(1728); padding-block:var(--p-main-header-padding-block);
   }
   &-start { display:flex; align-items:center; }
   &-end { display:flex; margin-inline-start:auto; align-items:center; gap:pxToRem(8) }

src/scss/7-components/_strip-plans.scss

@@ -3,6 +3,7 @@
 .#{$p}-strip-plans {
   &-header {
     container-name:strip-plans; container-type:inline-size;
+    margin-block-end:pxToRem(32);
     &-wrapper {
       display:flex; justify-content:space-between; align-items:center; gap:pxToRem(16);
     }
@@ -11,18 +12,19 @@
     container-name:strip-plans; container-type:inline-size;
     padding-block:pxToRem(32);
     &:nth-child(n + 2) { border-block-start:solid pxToRem(1) rgba(255, 255, 255, 0.12); }
+    &:last-child { padding-block-end:0; }
     &-wrapper {
       display:flex; justify-content:space-between; align-items:end; gap:pxToRem(48);
     }
   }
   &-plan {
     display:flex; flex-direction:column; gap:pxToRem(4);
-    flex:1; flex-basis:pxToRem(103);
+    flex:1; flex-basis:pxToRem(103); flex-shrink:0;
     .title { color:rgb(255 255 255 / 0.64); }
     .price {  }
-    .info  { color:rgb(255 255 255 / 0.64); }
+    .info  { white-space:nowrap; color:rgb(255 255 255 / 0.64); }
   }
-  &-info { flex:2.5; flex-basis:pxToRem(230); }
+  &-info { flex:2.5; flex-basis:pxToRem(230); color:rgb(255 255 255 / 0.64); }
   .#{$p}-button { flex:1;  white-space:nowrap; }
 
   /* responsive according container size */

src/scss/9-grids/_grid-huge-navs.scss

@@ -10,8 +10,8 @@
   --p-grid-huge-navs-side-nav-width-opened: #{pxToRem(280)};
 
   max-inline-size:var(--container-size-huge); margin-inline:auto;
-  .#{$p}-mobile-header    { grid-area:header; block-size:var(--p-grid-huge-navs-main-header-height); }
-  .#{$p}-main-header      { grid-area:header; block-size:var(--p-grid-huge-navs-main-header-height); /*padding-inline:var(--p-grid-huge-navs-padding-inline);*/ }
+  //.#{$p}-mobile-header    { grid-area:header; block-size:var(--p-grid-huge-navs-main-header-height); }
+  //.#{$p}-main-header      { grid-area:header; block-size:var(--p-grid-huge-navs-main-header-height); /*padding-inline:var(--p-grid-huge-navs-padding-inline);*/ }
   .#{$p}-article-header   { grid-area:a-header; }
   .#{$p}-side-nav         { grid-area:side-a; }
   .#{$p}-article          { grid-area:main;   }
@@ -20,6 +20,8 @@
 
   .#{$p}-icon-button [class*="icon"]{transition:var(--transition); }
 
+  .#{$p}-main-header-wrapper { max-inline-size:none; }
+
   @media #{$break1} {
     --p-grid-huge-navs-padding-inline: #{pxToRem(20)};
     padding-inline:var(--p-grid-huge-navs-padding-inline);
@@ -41,8 +43,7 @@
   @media #{$break2} {
     display: grid;
     grid-template-columns: 1fr auto;
-    grid-template-areas:  "header   header"
-                          "a-header a-header"
+    grid-template-areas:  "a-header a-header"
                           "main     side-b"
                           "footer   footer";
     .#{$p}-side-nav       {
@@ -100,8 +101,7 @@
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto 1fr auto; /* header article-header content footer */
-    grid-template-areas:  "header header header"
-                          "side-a a-header a-header"
+    grid-template-areas:  "side-a a-header a-header"
                           "side-a main side-b"
                           "side-a footer footer";
   }
@@ -131,14 +131,17 @@
         &-button {
           > *:not(:first-child) { opacity:1; }
         }
-        .#{$p}-icon-button [class*="icon"]{ rotate:180deg; }
+        .#{$p}-icon-button { rotate:180deg; }
       }
     }
   }
   @media #{$break5open} {
     .#{$p}-references-menu {
       #refOpen, #refClose { display:none; }
-      &-content { position:sticky; inset-block-start:pxToRem(213); }
+      &-content {
+        @include scroll();
+        position:sticky; inset-block-start:pxToRem(213);  max-block-size:calc(100dvh - #{pxToRem(213)});
+      }
     }
   }
   @media #{$break6open} {