fix menu dead zone (#679)

sveltejs · Oct 28, 2024 · 1fcac45 · 1fcac45
1 parent ce1ba82
commit 1fcac45
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 40 deletions.
diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
@@ -99,7 +99,7 @@
 		display: initial;
 	}
 
-	@media (min-width: 800px) {
+	@media (min-width: 832px) {
 		.banner {
 			top: initial;
 			bottom: 0;

diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
@@ -51,15 +51,15 @@ The main shell of the application. It provides a slot for the top navigation, th
 	main {
 		position: relative;
 		margin: 0 auto;
-		padding-top: var(--sk-nav-height);
-		padding-bottom: var(--sk-banner-height);
+		padding-top: var(--sk-banner-height);
+		padding-bottom: 0;
 		height: 100%;
 	}
 
-	@media (max-width: 799px) {
+	@media (min-width: 832px) {
 		main {
-			padding-top: var(--sk-banner-height);
-			padding-bottom: 0;
+			padding-top: var(--sk-nav-height);
+			padding-bottom: var(--sk-banner-height);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -109,32 +109,6 @@
 		margin: 0;
 	}
 
-	@media (max-width: 831px) {
-		.sidebar {
-			padding: 1rem;
-			padding-top: 1rem;
-		}
-
-		li {
-			margin-bottom: 2.5rem;
-		}
-
-		a {
-			border-radius: var(--sk-border-radius);
-			line-height: 1;
-			vertical-align: center;
-			padding: 0.9rem 0.75rem !important;
-			transition: 0.1s ease;
-			transition-property: background-color, color;
-		}
-
-		a:hover {
-			text-decoration: none;
-
-			background-color: var(--sk-back-4);
-		}
-	}
-
 	@media (min-width: 832px) {
 		.sidebar {
 			columns: 1;
@@ -163,8 +137,6 @@
 			z-index: 2;
 			position: absolute;
 			rotate: 45deg;
-			/** needed to synchronise with transition on `*` in `base.css` */
-			transition: background-color 0.5s var(--quint-out);
 			box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
 		}
 	}

diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -217,7 +217,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		font: var(--sk-font-ui-medium);
 	}
 
-	@media (max-width: 799px) {
+	@media (max-width: 831px) {
 		nav {
 			transition: transform 0.2s;
 		}
@@ -305,7 +305,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		display: block;
 	}
 
-	@media (max-width: 799px) {
+	@media (max-width: 831px) {
 		nav {
 			top: unset;
 			bottom: 0;
@@ -337,7 +337,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
-	@media (min-width: 800px) {
+	@media (min-width: 832px) {
 		.home-link {
 			--padding-right: 2rem;
 			width: 13.2rem;

diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -108,10 +108,7 @@
 	a {
 		display: flex;
 		align-items: center;
-		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
-		transition: 0.1s ease;
-		transition-property: background-color, color;
 
 		&[aria-current='page'] {
 			color: var(--sk-theme-1) !important;