squash

Author: wibjorn

.changeset/busy-files-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': major
+---
+
+Site header no longer applies extra padding on wide screens. This change matches the changes to layouts.

.changeset/cute-rabbits-sleep.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': major
+---
+
+Both the `.layout-body-menu` and `.layout-body-aside` have a narrower maximum width applied, circa 275px wide. These containers still scale down as required on narrower widths.

.changeset/fancy-candies-stay.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': major
+---
+
+Layouts no longer apply a maximum site width, instead elements are anchored to the sides of the screen regardless of scaling.

.changeset/good-canyons-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': major
+---
+
+The `.banner`, `.hero`, and `.site-header` components no longer have a maximum width applied on wide screen sizes. Pairs with changes made to the .layout class.

.changeset/mighty-flies-sink.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': patch
+---
+
+Narrow the `.layout-body-menu`'s collapsed width significantly.

.changeset/olive-bobcats-stare.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-site': patch
+---
+
+Update the full screen button behavior to remove reading width from the main column element. This allows for the continued testing of full width elements like hero and site header.

.changeset/sour-canyons-dress.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': major
+---
+
+To match layout changes that remove the site's max width, `.layout-margin` and `.layout-padding` classes have been updated, removing their larger, `calc`ed values that applied to widescreen.

.vscode/settings.json

@@ -18,6 +18,6 @@
 	},
 	"typescript.tsc.autoDetect": "off",
 	"github.copilot.enable": {
-		"*": false
+		"*": true
 	}
 }

css/src/components/banner.scss

@@ -43,10 +43,6 @@ $banner-dismiss-margin: tokens.$spacer-2 !default;
 			inset-block-start: $banner-padding;
 			inset-inline-start: tokens.$layout-gap;
 			border-color: transparent transparent $banner-color $banner-color;
-
-			@include mixins.widescreen {
-				inset-inline-start: tokens.$layout-widescreen-gap;
-			}
 		}
 	}
 

css/src/components/hero.scss

@@ -17,7 +17,6 @@ $hero-details-content-fluid-width: 35% !default;
 $hero-content-width: tokens.$reading-max-width !default;
 
 $hero-image-width: calc((100% - 2 * tokens.$layout-gap) * 0.55) !default;
-$hero-image-width-widescreen: calc((100% - 2 * tokens.$layout-widescreen-gap) * 0.55) !default;
 
 .hero {
 	@extend %layout-gap;
@@ -159,11 +158,6 @@ $hero-image-width-widescreen: calc((100% - 2 * tokens.$layout-widescreen-gap) *
 			display: block;
 		}
 
-		@include mixins.widescreen {
-			width: $hero-image-width-widescreen;
-			inset-inline-end: tokens.$layout-widescreen-gap;
-		}
-
 		@media (forced-colors: active) {
 			background-image: none !important;
 		}