feat(core): ✨ rewrite body layout into flex and grid

resources/skins.citizen.styles/ContentFooter.less

@@ -1,8 +1,8 @@
 .mw-body-footer {
 	display: flex;
 	flex-direction: column;
-	padding: var( --space-lg ) 0;
 	gap: var( --space-lg );
+	grid-area: footer;
 }
 
 .page-info {

resources/skins.citizen.styles/Stickyheader.less

@@ -76,13 +76,3 @@
 		}
 	}
 }
-
-@media ( min-width: @width-breakpoint-desktop-wide ) {
-	.citizen-body-header--sticky {
-		.citizen-toc-enabled {
-			.page-actions {
-				transform: translateX( var( --width-toc ) );
-			}
-		}
-	}
-}

resources/skins.citizen.styles/TableOfContents.less

@@ -0,0 +1,3 @@
+.citizen-toc {
+	grid-area: toc;
+}

resources/skins.citizen.styles/common/cssvariables.less

@@ -74,6 +74,7 @@ html {
 	--header-size: @header-size;
 	--width-layout: @width-layout;
 	--width-layout--extended: ~'calc( var( --width-layout ) * 1.5 )';
+	--width-toc: @width-toc;
 	--line-height: @line-height;
 
 	/* Spacing */
@@ -89,7 +90,6 @@ html {
 
 	/* Padding */
 	--padding-page: @padding-page;
-	--padding-page--negative: ~'calc( var( --padding-page) * -1 )';
 }
 
 /**

resources/skins.citizen.styles/layout.less

@@ -1,4 +1,6 @@
-@width-breakpoint-desktop-wider: @width-breakpoint-desktop + @width-toc * 2;
+.citizen-toc-enabled {
+	--width-layout--toc: ~'calc( var( --width-layout ) + var( --width-toc ) + var( --space-lg ) )';
+}
 
 .citizen-page-container {
 	// Reserve space for header
@@ -10,19 +12,15 @@
 	min-height: 80vh; // avoid footer being in the middle of the page
 }
 
-.mw-body,
-.parsoid-body,
-.citizen-footer {
-	padding-right: var( --padding-page );
-	padding-left: var( --padding-page );
-}
-
-.mw-body-header,
-.citizen-body,
-.mw-body-footer {
+.citizen-body-container {
+	display: flex;
 	max-width: var( --width-layout );
+	flex-direction: column;
+	justify-content: center;
+	padding: var( --space-lg ) var( --padding-page );
 	margin-right: auto;
 	margin-left: auto;
+	gap: var( --space-lg );
 }
 
 .mw-body-header {
@@ -32,9 +30,8 @@
 	flex-wrap: wrap;
 	align-items: flex-start;
 	padding-top: var( --space-md );
-	margin-top: var( --space-xl );
-	margin-bottom: @content-margin-top * 2;
 	gap: var( --space-lg );
+	grid-area: header;
 }
 
 .page-heading {
@@ -47,6 +44,7 @@
 }
 
 .citizen-body {
+	grid-area: content;
 	.mixin-clearfix();
 }
 
@@ -85,18 +83,27 @@ a.image {
 }
 
 @media ( min-width: @width-breakpoint-desktop ) {
-	.mw-body,
-	.parsoid-body,
-	.citizen-footer {
-		padding-right: ~'calc( var( --padding-page ) * 2 )';
-		padding-left: ~'calc( var( --padding-page ) * 2 )';
-	}
-
 	.citizen-page-container {
 		margin-bottom: 0;
 		// Reserve space for header
 		margin-left: var( --header-size );
 	}
+
+	.citizen-body-container {
+		padding-right: ~'calc( var( --padding-page ) * 2 )';
+		padding-left: ~'calc( var( --padding-page ) * 2 )';
+	}
+
+	.citizen-toc-enabled {
+		.citizen-body-container {
+			display: grid;
+			max-width: none;
+			grid-template-areas: 'header header'
+				'content toc'
+				'footer footer';
+			grid-template-columns: minmax( min-content, var( --width-layout ) ) var( --width-toc );
+		}
+	}
 }
 
 /* Wider page width for certain namespaces */

resources/variables.less

@@ -26,9 +26,6 @@
 /* Wider desktop breakpoint */
 @width-breakpoint-desktop-wide: 1300px;
 
-/* Width when content center on pages with ToC */
-@width-breakpoint-desktop-wider: @width-breakpoint-desktop + @width-toc * 2;
-
 /* Extra wide desktop breakpoint */
 @width-breakpoint-desktop-extrawide: 2000px;
 
@@ -203,7 +200,8 @@
 // Not in the header section it is also used outside of header
 @header-size:	3.5rem;
 @width-layout:	@width-breakpoint-desktop - 2 * @padding-page;
-@width-toc: @width-breakpoint-desktop-wide - @width-breakpoint-desktop;
+// TODO: Revise this number, fixed value isn't great but we need it for b
+@width-toc: 240px;
 
 /* Paddings */
 @padding-page:	20px;

skinStyles/extensions/VisualEditor/ext.visualEditor.less

@@ -18,7 +18,6 @@
 
 	.mw-body-header {
 		z-index: 0; // Reset z-index so toolbar won't clip
-		margin-top: ~'calc( 46px - var( --space-xl ) )'; // Trim extra spacing
 		// Reset VE disabled style to allow page action buttons to work
 		opacity: 1;
 		pointer-events: auto;
@@ -216,13 +215,10 @@
 	&-mw {
 		&-desktopArticleTarget {
 			&-toolbar {
-				margin-right: var( --padding-page--negative );
-				margin-left: var( --padding-page--negative );
-
 				&Placeholder {
 					height: 46px; // Correspond to VE toolbar height in Citizen
 					border-bottom: 1px solid var( --border-color-base );
-					margin: 0 var( --padding-page--negative );
+					margin: 0;
 
 					&-bar {
 						border: 0;

templates/TableOfContents.mustache

@@ -1,10 +1,12 @@
 {{#data-toc}}
-<nav id="mw-panel-toc" class="citizen-toc" role="navigation" aria-labelledby="mw-panel-toc-label">
-	<div id="mw-panel-toc-label" class="citizen-toc__header">{{msg-toc}}</div>
-	<ul class="citizen-toc__contents" id="mw-panel-toc-list">
-		{{#array-sections}}
-		{{>TableOfContents__line}}
-		{{/array-sections}}
-	</ul>
-</nav>
+<div class="citizen-toc">
+	<nav id="mw-panel-toc" class="citizen-toc__card" role="navigation" aria-labelledby="mw-panel-toc-label">
+		<div id="mw-panel-toc-label" class="citizen-toc__header">{{msg-toc}}</div>
+		<ul class="citizen-toc__contents" id="mw-panel-toc-list">
+			{{#array-sections}}
+			{{>TableOfContents__line}}
+			{{/array-sections}}
+		</ul>
+	</nav>
+</div>
 {{/data-toc}}

templates/skin.mustache

@@ -14,6 +14,7 @@
 <div class="citizen-page-container">
 	<div id="siteNotice">{{{html-site-notice}}}</div>
 	<main class="mw-body {{#toc-enabled}}citizen-toc-enabled{{/toc-enabled}}" id="content">
+		<div class="citizen-body-container">
 		{{>ContentHeader}}
 		<div id="bodyContent" class="citizen-body" aria-labelledby="firstHeading">
 			<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
@@ -23,6 +24,7 @@
 		</div>
 		{{#toc-enabled}}{{>TableOfContents}}{{/toc-enabled}}
 		{{>ContentFooter}}
+		</div>
 	</main>
 	{{{html-after-content}}}
 	{{#data-footer}}{{>Footer}}{{/data-footer}}