fix(responsiveness): Main content takes 50% space, menu are shrinked …

…accordingly.
AmadeusITGroup · Jan 22, 2024 · dce178c · dce178c
1 parent 7886804
commit dce178c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/demo/src/lib/markdown/renderers/MdImage.svelte b/demo/src/lib/markdown/renderers/MdImage.svelte
@@ -10,4 +10,4 @@
 	$: void getSrc(href);
 </script>
 
-<img {src} {title} alt={text} />
+<img class="w-100" {src} {title} alt={text} />
diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
@@ -92,15 +92,15 @@
 		{:else}
 			<div class="container-xxl">
 				<div class="row flex-wrap flex-sm-nowrap align-content-between">
-					<aside class="demo-sidebar d-none d-md-flex col-auto flex-column flex-shrink-0 align-items-center align-items-sm-start">
+					<aside class="demo-sidebar d-none d-md-flex align-items-center align-items-sm-start col-auto side-menu">
 						<SideMenu />
 					</aside>
 					<div class="pb-4 col">
 						<MainSection>
 							<slot />
 						</MainSection>
 					</div>
-					<div class="demo-toc col-auto d-none d-md-flex">
+					<div class="demo-toc d-none d-md-flex col-auto side-menu">
 						<TOC />
 					</div>
 				</div>

diff --git a/demo/src/routes/menu/menu.scss b/demo/src/routes/menu/menu.scss
@@ -62,3 +62,7 @@ $mobileMargin: 16px;
 .toc-h3 {
 	padding-left: 1.5rem;
 }
+
+.side-menu {
+	flex-basis: 10%;
+}