Demo: ease responsive layout (#121)

AmadeusITGroup · Sep 6, 2023 · b6866f0 · b6866f0
1 parent e457bae
commit b6866f0
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 100 deletions.
diff --git a/common/_variables.scss b/common/_variables.scss
@@ -0,0 +1,3 @@
+@import '../node_modules/bootstrap/scss/functions';
+@import '../node_modules/bootstrap/scss/variables';
+@import '../node_modules/bootstrap/scss/mixins/breakpoints';
diff --git a/common/demo.scss b/common/demo.scss
@@ -1,3 +1,5 @@
+@import 'variables';
+
 body {
 	min-height: 100vh;
 }
@@ -10,16 +12,16 @@ main {
 .sample-links {
 	column-count: 1;
 
-	@media (min-width: 576px) {
+	@include media-breakpoint-up(sm) {
 		column-count: 2;
 	}
-	@media (min-width: 768px) {
+	@include media-breakpoint-up(md) {
 		column-count: 3;
 	}
-	@media (min-width: 992px) {
+	@include media-breakpoint-up(lg) {
 		column-count: 5;
 	}
-	@media (min-width: 1200px) {
+	@include media-breakpoint-up(xl) {
 		column-count: 6;
 	}
 }

diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
@@ -55,13 +55,15 @@
 </section>
 
 <style lang="scss">
+	@import '../../../common/variables';
+
 	.note {
 		font-size: 1.25rem;
 		font-weight: 300;
 	}
 	.links {
 		padding: 1rem 0rem;
-		@media (min-width: 768px) {
+		@include media-breakpoint-up(md) {
 			padding: 3rem;
 		}
 

diff --git a/demo/src/routes/[framework]/+layout.svelte b/demo/src/routes/[framework]/+layout.svelte
@@ -30,8 +30,8 @@
 	}
 </script>
 
-<div class="demo-layout">
-	<aside class="demo-sidebar">
+<div class="demo-layout row">
+	<aside class="demo-sidebar col-12 col-md-auto">
 		<nav class="w-100">
 			<ul class="list-unstyled mb-0 pb-0 pb-md-2 pe-lg-2 main-nav-list">
 				{#each menu as { title, submenu }}
@@ -57,10 +57,10 @@
 			</ul>
 		</nav>
 	</aside>
-	<div class="pb-4">
+	<div class="pb-4 col">
 		<slot />
 	</div>
-	<div class="demo-toc d-none d-lg-block">
+	<div class="demo-toc col-auto d-none d-lg-flex">
 		{#if $elements$.length}
 			<div class="toc-content ms-2 border-start-1">
 				<div class="toc-title fw-bold pb-2 mb-1">On this page</div>
@@ -81,11 +81,58 @@
 </div>
 
 <style lang="scss">
+	@import '../../../../common/variables';
+
 	.main-nav-list {
-		@media (max-width: 992px) {
+		@include media-breakpoint-down(md) {
 			display: flex;
 			flex-direction: row;
 			justify-content: space-evenly;
 		}
 	}
+
+	@include media-breakpoint-up(md) {
+		.demo-sidebar {
+			position: sticky;
+			top: 0;
+			height: calc(100vh - 6rem);
+			overflow-y: auto;
+		}
+
+		.demo-toc {
+			position: sticky;
+			top: 0;
+			display: block !important;
+			height: calc(100vh - 6rem);
+			overflow-y: auto;
+		}
+	}
+
+	.toc {
+		&-link:hover,
+		&-link:focus {
+			color: var(--bs-emphasis-color);
+			background-color: var(--demo-sidebar-link-bg);
+		}
+		&-link {
+			padding: 0.1875rem 0.5rem;
+			color: var(--bs-body-color);
+			text-decoration: none;
+			border-left: 3px solid transparent;
+			transition: border-color 0.25s;
+
+			&.active {
+				color: var(--bs-emphasis-color);
+				border-left-color: var(--bs-primary);
+				transition: none;
+			}
+		}
+
+		&-h2 {
+			padding-left: 0.5rem;
+		}
+		&-h3 {
+			padding-left: 1rem;
+		}
+	}
 </style>
diff --git a/demo/src/routes/styles.scss b/demo/src/routes/styles.scss
@@ -1,3 +1,5 @@
+@import '../../../common/variables';
+
 body {
 	min-height: 100vh;
 	--bs-light-rgb: 237, 238, 247;
@@ -32,7 +34,7 @@ h2,
 	font-size: calc(1.325rem + 0.6vw);
 }
 
-@media (min-width: 1200px) {
+@include media-breakpoint-up(xl) {
 	h2,
 	.h2 {
 		font-size: 1.5rem;
@@ -44,7 +46,7 @@ h3,
 	font-size: calc(1.3rem + 0.4vw);
 }
 
-@media (min-width: 1200px) {
+@include media-breakpoint-up(xl) {
 	h3,
 	.h3 {
 		font-size: 1.5rem;
@@ -143,94 +145,6 @@ header {
 	}
 }
 
-@media (min-width: 992px) {
-	.demo-layout {
-		display: grid;
-		grid-template-areas: 'sidebar main toc';
-		grid-template-columns: max-content 1fr max-content;
-		gap: 1.5rem;
-	}
-
-	.demo-sidebar {
-		position: -webkit-sticky;
-		position: sticky;
-		top: 0;
-		display: block !important;
-		height: calc(100vh - 6rem);
-		padding-left: 0.25rem;
-		margin-left: -0.25rem;
-		overflow-y: auto;
-	}
-
-	.demo-toc {
-		position: -webkit-sticky;
-		position: sticky;
-		top: 0;
-		display: block !important;
-		height: calc(100vh - 6rem);
-		padding-left: 0.25rem;
-		margin-left: -0.25rem;
-		overflow-y: auto;
-	}
-}
-
-.demo-sidebar {
-	grid-area: sidebar;
-}
-
-@media (min-width: 992px) {
-	.demo-main {
-		grid-template-areas:
-			'intro   toc'
-			'content toc';
-		grid-template-rows: auto 1fr;
-		grid-template-columns: 5fr 1fr;
-	}
-}
-@media (min-width: 768px) {
-	.demo-main {
-		display: grid;
-		grid-template-areas:
-			'intro  '
-			'toc  '
-			'content';
-		grid-template-rows: auto auto 1fr;
-		gap: inherit;
-	}
-}
-
-.demo-main {
-	grid-area: main;
-}
-
-.toc {
-	&-link:hover,
-	&-link:focus {
-		color: var(--bs-emphasis-color);
-		background-color: var(--demo-sidebar-link-bg);
-	}
-	&-link {
-		padding: 0.1875rem 0.5rem;
-		color: var(--bs-body-color);
-		text-decoration: none;
-		border-left: 3px solid transparent;
-		transition: border-color 0.25s;
-
-		&.active {
-			color: var(--bs-emphasis-color);
-			border-left-color: var(--bs-primary);
-			transition: none;
-		}
-	}
-
-	&-h2 {
-		padding-left: 0.5rem;
-	}
-	&-h3 {
-		padding-left: 1rem;
-	}
-}
-
 .svg {
 	display: inline-flex;
 	align-items: center;