chore(docs-site): use correct tailwind based breakpoints

now mobile-first as they should be
nubolab-ffwd · Feb 24, 2025 · 8c88043 · 8c88043
1 parent 68156b2
commit 8c88043
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 33 deletions.
diff --git a/docs-site/src/lib/styles/global.postcss b/docs-site/src/lib/styles/global.postcss
@@ -1,8 +1,14 @@
 /* Global definitions of custom media queries and selectors, loaded by @csstools/postcss-global-data */
 
 /* breakpoints based on tailwind v4 */
-@custom-media --viewport-sm (max-width: 40em);
-@custom-media --viewport-md (max-width: 48em);
-@custom-media --viewport-lg (max-width: 64em);
-@custom-media --viewport-xl (max-width: 80em);
-@custom-media --viewport-2xl (max-width: 96em);
+@custom-media --viewport-sm (width >= 40em);
+@custom-media --viewport-md (width >= 48em);
+@custom-media --viewport-lg (width >= 64em);
+@custom-media --viewport-xl (width >= 80em);
+@custom-media --viewport-2xl (width >= 96em);
+
+@custom-media --viewport-max-sm (width < 40em);
+@custom-media --viewport-max-md (width < 48em);
+@custom-media --viewport-max-lg (width < 64em);
+@custom-media --viewport-max-xl (width < 80em);
+@custom-media --viewport-max-2xl (width < 96em);
diff --git a/docs-site/src/routes/docs/+layout.svelte b/docs-site/src/routes/docs/+layout.svelte
@@ -36,13 +36,16 @@
 		justify-content: start;
 		column-gap: var(--s4);
 		row-gap: var(--s3);
-		grid-template-columns: auto minmax(0px, 60rem);
-		padding-inline: var(--s2);
+
+		grid-template-columns: minmax(0px, 100%);
+		& > * {
+			padding-inline: var(--space);
+		}
 		@media (--viewport-sm) {
-			grid-template-columns: minmax(0px, 100%);
-			padding-inline: 0;
+			grid-template-columns: auto minmax(0px, 60rem);
+			padding-inline: var(--s2);
 			& > * {
-				padding-inline: var(--space);
+				padding-inline: 0;
 			}
 		}
 	}
@@ -75,19 +78,22 @@
 		top: 0;
 		align-self: start;
 		background-color: var(--theme-color-background);
-		margin-block-start: calc(-1 * var(--space));
+
+		margin-block-start: calc(-1 * var(--s2));
+		border-block-end: 1px solid var(--theme-separator-color);
 		padding-block-start: var(--space);
 
-		@media (--viewport-sm) {
+		@supports (animation-timeline: scroll()) {
 			--shadow: hsla(0 0% 0% / 0.13) 0 0.5rem 1rem;
-			margin-block-start: calc(-1 * var(--s2));
-			border-block-end: 1px solid var(--theme-separator-color);
+			animation: scroll-shadow linear both;
+			animation-timeline: scroll();
+			animation-range: 0rem 10rem;
+		}
 
-			@supports (animation-timeline: scroll()) {
-				animation: scroll-shadow linear both;
-				animation-timeline: scroll();
-				animation-range: 0rem 10rem;
-			}
+		@media (--viewport-sm) {
+			margin-block-start: calc(-1 * var(--space));
+			border-block-end: none;
+			animation: none;
 		}
 	}
 	@keyframes scroll-shadow {
@@ -99,7 +105,7 @@
 		}
 	}
 	/* compensate for sticky nav on small viewports */
-	@media (--viewport-sm) {
+	@media (--viewport-max-sm) {
 		:global(html, body) {
 			scroll-padding-top: 10rem;
 		}

diff --git a/docs-site/src/routes/docs/Menu.svelte b/docs-site/src/routes/docs/Menu.svelte
@@ -44,7 +44,7 @@
 </div>
 
 <style lang="postcss">
-	@media (--viewport-sm) {
+	@media (--viewport-max-sm) {
 		.menu:is(:not(.toplevel)) {
 			display: none;
 		}
@@ -54,23 +54,31 @@
 		padding: 0;
 		list-style: none;
 
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: calc(0.5 * var(--space));
+
 		@media (--viewport-sm) {
-			display: flex;
-			justify-content: center;
-			flex-wrap: wrap;
-			gap: calc(0.5 * var(--space));
+			display: block;
 		}
 	}
 	.menu.toplevel > ul > li + li {
-		margin-block-start: var(--s1);
+		margin-block-start: 0;
 		@media (--viewport-sm) {
-			margin-block-start: 0;
+			margin-block-start: var(--s1);
 		}
 	}
 	.item {
 		color: var(--theme-color-gray-dark);
+		border-bottom: 1px solid transparent;
 		& a {
 			color: inherit;
+			display: block;
+			padding: calc(0.5 * var(--space)) var(--space);
+		}
+		&.active {
+			border-bottom-color: var(--theme-color-text);
 		}
 		&.active,
 		&.active a {
@@ -89,13 +97,10 @@
 			}
 		}
 		@media (--viewport-sm) {
+			border-bottom: none;
 			& a {
-				display: block;
-				padding: calc(0.5 * var(--space)) var(--space);
-			}
-			border-bottom: 1px solid transparent;
-			&.active {
-				border-bottom-color: var(--theme-color-text);
+				display: inline;
+				padding: 0;
 			}
 		}
 	}