to remove temp version and header color, squash (#674)

.changeset/famous-falcons-scream.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-site': minor
+---
+
+Update doc site to use a view transition when changing between layout examples.

.changeset/lazy-peaches-bathe.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': patch
+---
+
+Refactor all layouts to use minmax(0 Xfr), where prior they were Xfr.

css/src/components/layout.scss

@@ -72,7 +72,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 .layout,
 .layout.layout-single {
 	.layout-body {
-		grid-template: auto auto auto 1fr auto auto / 1fr;
+		grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
 	}
 }
@@ -83,7 +83,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto auto / 1fr 2fr;
+			grid-template: auto auto 1fr auto auto / minmax(0, 1fr) minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -93,7 +93,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / 1fr 2fr 1fr;
+			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header header'
 				'hero hero hero'
@@ -118,11 +118,11 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 	}
 
 	.layout-body {
-		grid-template: auto auto auto 1fr auto / 1fr;
+		grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto / 1fr 2fr;
+			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -131,7 +131,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / 1fr 3fr;
+			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 3fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -156,11 +156,11 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 	}
 
 	.layout-body {
-		grid-template: auto auto auto 1fr auto / 1fr;
+		grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto / 2fr 1fr;
+			grid-template: auto auto 1fr auto / minmax(0, 2fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -169,7 +169,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / 3fr 1fr;
+			grid-template: auto auto 1fr auto / minmax(0, 3fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'

site/src/scaffold/scripts/layout-page.ts

@@ -26,14 +26,16 @@ export function initLayoutPageControls() {
 				'Attempting to set a layout class that does not match current list of available layouts'
 			);
 		}
-		setLayoutClass(layoutToSet);
-		scrollTo({ behavior: 'smooth', top: target.getBoundingClientRect().top - 200 });
 
-		const setThemeButtons = Array.from(document.querySelectorAll('[data-set-layout]'));
-		for (const button of setThemeButtons) {
-			button.setAttribute('aria-pressed', 'false');
-		}
-		target.setAttribute('aria-pressed', 'true');
+		safeViewTransition(() => {
+			setLayoutClass(layoutToSet);
+			scrollTo({ behavior: 'instant', top: target.getBoundingClientRect().top - 200 });
+			const setThemeButtons = Array.from(document.querySelectorAll('[data-set-layout]'));
+			for (const button of setThemeButtons) {
+				button.setAttribute('aria-pressed', 'false');
+			}
+			target.setAttribute('aria-pressed', 'true');
+		});
 	});
 
 	window.addEventListener('click', (e: MouseEvent) => {
@@ -47,3 +49,17 @@ export function initLayoutPageControls() {
 		target.setAttribute('aria-pressed', target.classList.contains('button-filled').toString());
 	});
 }
+
+declare global {
+	interface Document {
+		startViewTransition(callback: () => void): void;
+	}
+}
+
+function safeViewTransition(cb: () => void) {
+	if (!document.startViewTransition) {
+		cb();
+	} else {
+		document.startViewTransition(() => cb());
+	}
+}