MediaWiki:Common.css/src/interface/layout.scss

@use "../lib";
/**** Main Layout START ***********************************************************/
/**
 * Note: wiki.gg topbar is position:fixed. So we don't need to consider it in grid layout
 */

html, body{
	min-height: 100%;
}
html{
	height: 100%;
	scroll-padding-top: 100px;/*<< scroll offset */
}
body{
	height: auto;
}

/*** main grid container ***/
body{
	/* grid */
	display: grid;
	grid-template-columns: [body-left] var(--layout-sidespace) [aside-left] var(--layout-sidebar-width) [aside-right nav-left content-left footer-left] var(--layout-content-width) [nav-right content-right footer-right] var(--layout-sidespace) [body-right];
	grid-template-rows: [body-start topbar-start] auto [topbar-end page-start] var(--layout-box-gap-y) [logo-start] var(--layout-logo-height) [logo-end] var(--layout-box-gap-y) [nav-start aside-start] auto [nav-end content-start] auto [content-end footer-start] auto [footer-end] minmax(0, 1fr) [aside-end] var(--layout-box-gap-y) [page-end footerbar-start] auto [footerbar-end body-end];
	gap: 0 var(--layout-box-gap-x);
}
/*** grid items ***/
/* Flatten DOM structure. Therefore we have following grid items under body grid container:
 * div#mw-page-base, div#mw-head-base, #mw-navigation>h2, div#mw-head, div#mw-panel, div#content.mw-body, div#footer, footer.
 */
body > .content-wrapper,
#mw-navigation{
	display: contents;
}
/** unused, hide them **/
#mw-navigation>h2{
	display: none;
}

/** wiki.gg header **/
header#wikigg-header{
	position: sticky;
	grid-column: body-left / body-right;
	grid-row: topbar-start / topbar-end;
}

/** side nav bar **/
#mw-panel{
	grid-column: aside-left / aside-right;
	grid-row: aside-start / aside-end;
	float: none;
	width: unset;
	padding: 0;
}
/** nav **/
#mw-head, #mw-head-base{
	grid-column: nav-left / nav-right;
	grid-row: nav-start / nav-end;
}
/** content **/
.mw-body{
	grid-column: content-left / content-right;
	grid-row: content-start / content-end;
}
/* For some pages such as api.php, .mw-body is the only child, so take up all space. */
.mw-body:first-child{
	grid-column: body-left / body-right;
	grid-row: page-start / page-end;
}
/** #footer: content footer **/
#footer{
	grid-column: footer-left / footer-right;
	grid-row: footer-start / footer-end;
	margin: 0;
	z-index: 0;
}
/** used to gen box shadow for main box (nav + content + #footer) **/
#mw-page-base{
	grid-column: content-left / content-right;
	grid-row: nav-start / footer-end;
	height: 100%;
}
/** wiki.gg footer bar **/
body > footer{
	grid-column: body-left / body-right;
	grid-row: footerbar-start / footerbar-end;
}

/*** logo block. It is absolute position ***/
#p-logo{
	position: absolute;
	width: 100%;
	height:  var(--layout-logo-height);
	left: 0;
	top: calc( var(--layout-topbar-height) + var(--layout-box-gap-y) );
	background: var(--theme-site-logo-image) center center / var(--layout-logo-width) auto no-repeat;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: var(--theme-site-logo-filter);
	.mw-wiki-logo{
		width: var(--theme-site-logo-width);
		height: var(--theme-site-logo-height);
		margin: auto;
		/* use logo image as <a>'s background will sometime flicker when hovered on Firefox,
		 * I still don't know why, but move background to #p-logo can avoid this issue.
		 */
		background: none; /*<< logo flicker fix */
	}
}

/**** Main Layout END ***********************************************************/