fix mobile nav

src/lib/components/MobileNav.svelte

@@ -1,14 +1,6 @@
 <script lang="ts">
 	import type { NavLink } from '$lib/layouts/Main.svelte';
 
-	const handleMenuClick = () => {
-		const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
-		const referencesMenu = document.querySelector('.aw-references-menu');
-
-		gridHugeNavs?.classList.toggle('is-open');
-		referencesMenu?.classList.remove('is-open');
-	};
-
 	export let open = false;
 	export let links: NavLink[];
 </script>
@@ -17,6 +9,11 @@
 
 <nav class="aw-side-nav aw-is-only-mobile" class:u-hide={!open}>
 	<div class="aw-side-nav-wrapper aw-u-padding-inline-16">
+		<div class="u-flex items-center u-gap-8">
+			<button class="aw-button is-secondary u-width-full-line">Sign Up</button>
+
+			<button class="aw-button u-width-full-line">Get Started</button>
+		</div>
 		<div class="aw-side-nav-scroll">
 			<section>
 				<ul>

src/lib/layouts/Main.svelte

@@ -120,9 +120,11 @@
 			</a>
 		</div>
 		<div class="aw-mobile-header-end">
-			<button class="aw-button">
-				<span class="text">Get Started</span>
-			</button>
+			{#if !isMobileNavOpen}
+				<button class="aw-button">
+					<span class="text">Get Started</span>
+				</button>
+			{/if}
 			<button
 				class="aw-button is-text"
 				aria-label="open navigation"
@@ -140,10 +142,10 @@
 		<div class="aw-top-banner">
 			<div class="aw-top-banner-content aw-u-color-text-primary">
 				<span class="aw-caption-500">We are having lots of fun on</span>
-				<span class="aw-icon-discord" aria-hidden="true"></span>
+				<span class="aw-icon-discord" aria-hidden="true" />
 				<span class="aw-caption-500">Discord. Come and join us!</span>
 				<button class="aw-top-banner-button" aria-label="close discord message">
-					<span class="aw-icon-close" aria-hidden="true"></span>
+					<span class="aw-icon-close" aria-hidden="true" />
 				</button>
 			</div>
 		</div>
@@ -176,17 +178,15 @@
 						</nav>
 					</div>
 					<div class="aw-main-header-end">
-						<div class="u-flex u-gap-8">
-							<button class="aw-button is-text">
-								<span aria-hidden="true" class="aw-icon-star" />
-								<span class="text">Star on GitHub</span>
-								<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
-							</button>
-							<button class="aw-button is-secondary">Sign Up</button>
-							<button class="aw-button">
-								<span class="text">Get Started</span>
-							</button>
-						</div>
+						<button class="aw-button is-text">
+							<span aria-hidden="true" class="aw-icon-star" />
+							<span class="text">Star on GitHub</span>
+							<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
+						</button>
+						<button class="aw-button is-secondary">Sign Up</button>
+						<button class="aw-button">
+							<span class="text">Get Started</span>
+						</button>
 					</div>
 				</div>
 			</div>

src/routes/+page.svelte

@@ -37,11 +37,11 @@
 			<div class="aw-big-padding-section-level-2">
 				<section class="aw-container aw-u-padding-block-end-0">
 					<button class="aw-hero-banner-button aw-u-margin-block-end-24">
-						<span class="aw-icon-star" aria-hidden="true"></span>
+						<span class="aw-icon-star" aria-hidden="true" />
 						<span class="aw-caption-500">New</span>
-						<div class="aw-hero-banner-button-sep"></div>
+						<div class="aw-hero-banner-button-sep" />
 						<span class="aw-caption-400">Pricing Plans announced</span>
-						<span class="aw-icon-arrow-right" aria-hidden="true"></span>
+						<span class="aw-icon-arrow-right" aria-hidden="true" />
 					</button>
 					<div class="aw-hero is-horizontal">
 						<h1 class="aw-headline">
@@ -68,6 +68,7 @@
 							class="u-block"
 							src="/images/pages/homepage/dashboard.svg"
 							alt="console dashboard"
+							style="aspect-ratio: 16 / 9"
 						/>
 					</div>
 				</section>

src/scss/6-elements/_button.scss

@@ -6,7 +6,7 @@
 
   background: linear-gradient(135deg, hsl(var(--aw-color-pink-500)) 0%, hsl(var(--aw-color-pink-500)) 61%, hsl(var(--aw-color-secondary-100)) 100%);
   background-origin: border-box;
-  display:flex; justify-content:center; align-items:center; align-self:start; gap:pxToRem(8);
+  display:flex; justify-content:center; align-items:center; gap:pxToRem(8);
   padding-inline:pxToRem(14); padding-block:pxToRem(7); min-block-size:pxToRem(40);
   border-radius:var(--m-border-radius); border:solid var(--m-border-size) transparent;
   text-align:center; transition:var(--transition); user-select:none; color:hsl(var(--aw-color-white)); font-weight: 500;

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

@@ -11,7 +11,7 @@
   &-wrapper { display:flex; flex-direction:column; gap:pxToRem(14); }
   &-row { display:flex; }
   &-start { display:flex; align-items:center; }
-  &-end { display:flex; margin-inline-start:auto; }
+  &-end { display:flex; margin-inline-start:auto; align-items: center; gap: pxToRem(8) }
 
   .aw-logo { margin-inline-end:pxToRem(32); }
   .#{$p}-top-banner { position:relative; inset-block-start: calc(var(--p-main-header-padding-block) * -1); }

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

@@ -7,9 +7,9 @@
   position:sticky; z-index:20; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
   display:flex; justify-content:space-between; align-items:center; gap:pxToRem(16);
   border-block-end: solid 1px var(--p-mobile-header-border-color);
-  padding:pxToRem(20); padding-inline-end:0; 
-  &-start { display:flex; }
-  &-end   { display:flex; }
+  padding:pxToRem(20); 
+  &-start { display:flex; align-items: center; }
+  &-end   { display:flex; align-items: center; gap: pxToRem(8) }
   &.is-transparent { background-color:transparent; backdrop-filter:blur(7.5px); }
   @media #{$break3open} { display:none; }
 

src/scss/7-components/_side-nav.scss

@@ -19,15 +19,24 @@
   position:sticky; z-index:25; inset-block-start:pxToRem(80); inset-block-end:0;
   block-size:calc(100vh - pxToRem(80));
   .#{$p}-icon-button { transition:var(--transition); margin-block-end:pxToRem(-4); margin-inline-end:pxToRem(6); }
+
+
+
   &-wrapper {
     display:flex; flex-direction:column; block-size:100%; gap:pxToRem(16);
     padding:pxToRem(16); padding-block-end:pxToRem(32);
     background-color:hsl(var(--p-side-nav-bg-color)); transition:var(--transition);
+    
+    
   }
   &-scroll {
     flex:1; overflow-y:scroll; overflow-x:hidden;
     display:flex; flex-direction:column; gap:pxToRem(24);
-    padding-inline:pxToRem(16); margin-inline:pxToRem(-16);
+    padding-inline:pxToRem(16); margin-inline:pxToRem(-16); padding-block-start: pxToRem(32);
+
+    .#{$p}-is-only-mobile  & {
+      border-block-start: 1px solid hsl(var(--aw-color-smooth));
+    }
   }
   &-header { margin-block-end:pxToRem(8); }
   &-button {