Editing Template:Main Page Template/styles.css

/* Overall style */
.mainpage {
	max-width: 1040px;
	margin: 0 auto;
}

/* Heading */
.mainpage-heading {
	width: 100%;
	margin: 0 1em 0 0;
	border-collapse: collapse;
	border-spacing: 0;
}
.mainpage-welcome {
	padding: .5em 1.6em 1em;
}
.mainpage-welcome-sitename {
	font-size: 220%;
	color: var(--color-subtle,#484848);
}
.mainpage-welcome-slogan {
	color: var(--color-subtle,#484848);
}
.mainpage-actions {
	white-space: nowrap;
	text-align: right;
}
.mainpage-actions ul {
	margin: 0;
	padding: 0;
}
.mainpage-actions li {
	display: inline-block;
	margin: 0;
	padding: .5em;
	font-weight: bold;
}

@media screen and (max-width: 999px) {
	.mainpage-heading,
	.mainpage-heading tbody,
	.mainpage-heading tr,
	.mainpage-heading td {
		display: block;
	}
	.mainpage-heading td {
		padding-left: 1.6em;
		padding-right: 1.6em;
	}
	.mainpage-actions {
		text-align: center;
		white-space: normal;
	}
}

/* Main table */
.mainpage-maintable {
	width: 100%;
	margin: 1em 0;
	border: none;
	border-spacing: 0;
}
.mainpage-maintable td {
	padding: 0;
	vertical-align: top;
}
.mainpage-maintable td.mainpage-column-left {
	width: 60%;
	padding-right: .5em;
}
.mainpage-maintable td.mainpage-column-right {
	width: 50%;
	padding-left: .5em;
}
@media screen and (max-width: 999px) {
	.mainpage-maintable,
	.mainpage-maintable tbody,
	.mainpage-maintable tr,
	.mainpage-maintable td {
		display: block;
	}
	.mainpage-maintable td.mainpage-column-left {
		width: auto;
		padding: 0 0 .75em;
	}
	.mainpage-maintable td.mainpage-column-right {
		width: auto;
		padding: .75em 0 0;
	}
}

/* Boxes */
.mainpage-box {
	border: 1px solid;
}
.mainpage-box:not(:first-child) {
	margin-top: 1.5em;
}
.mainpage-box .mainpage-box-title {
	padding: .2em .5em;
	font-size: 125%;
	font-weight: bold;
}
.mainpage-box .mainpage-box-content {
	padding: .4em 1em .3em;
}
.mainpage-box .mainpage-box-seealso {
	clear: both;
	border-style: solid;
	border-width: 1px 0 0;
	padding-top: .4em;
	margin-top: .8em;
	text-align: end;
	font-size: 95%;
	font-weight: bold;
}

@media screen {
	.mainpage-box-orange,
	.mainpage-box-orange .mainpage-box-seealso {
		border-color: #fad67d;
	}
	.mainpage-box-orange .mainpage-box-title {
		background-color: #fad67d;
		color: inherit;
	}
	.mainpage-box-green,
	.mainpage-box-green .mainpage-box-seealso {
		border-color: #bbfa7c;
	}
	.mainpage-box-green .mainpage-box-title {
		background-color: #bbfa7c;
		color: inherit;
	}
	.mainpage-box-blue,
	.mainpage-box-blue .mainpage-box-seealso {
		border-color: #abd5f5;
	}
	.mainpage-box-blue .mainpage-box-title {
		background-color: #abd5f5;
		color: inherit;
	}
	
	/* forced night mode */
	html.skin-theme-clientpref-night .mainpage-box-orange,
	.mainpage-box-orange .mainpage-box-seealso {
		border-color: #6F5206;
	}
	html.skin-theme-clientpref-night .mainpage-box-orange .mainpage-box-title {
		background-color: #6F5206;
		color: inherit;
	}
	html.skin-theme-clientpref-night .mainpage-box-green,
	.mainpage-box-green .mainpage-box-seealso {
		border-color: #366506;
	}
	html.skin-theme-clientpref-night .mainpage-box-green .mainpage-box-title {
		background-color: #366506;
		color: inherit;
	}
	html.skin-theme-clientpref-night .mainpage-box-blue,
	.mainpage-box-blue .mainpage-box-seealso {
		border-color: #0D4977;
	}
	html.skin-theme-clientpref-night .mainpage-box-blue .mainpage-box-title {
		background-color: #0D4977;
		color: inherit;
	}
}

@media screen and (prefers-color-scheme: dark) {
	/* automatic night mode */
		html.skin-theme-clientpref-os .mainpage-box-orange,
	.mainpage-box-orange .mainpage-box-seealso {
		border-color: #6F5206;
	}
	html.skin-theme-clientpref-os .mainpage-box-orange .mainpage-box-title {
		background-color: #6F5206;
		color: inherit;
	}
	html.skin-theme-clientpref-os .mainpage-box-green,
	.mainpage-box-green .mainpage-box-seealso {
		border-color: #366506;
	}
	html.skin-theme-clientpref-os .mainpage-box-green .mainpage-box-title {
		background-color: #366506;
		color: inherit;
	}
	html.skin-theme-clientpref-os .mainpage-box-blue,
	.mainpage-box-blue .mainpage-box-seealso {
		border-color: #0D4977;
	}
	html.skin-theme-clientpref-os .mainpage-box-blue .mainpage-box-title {
		background-color: #0D4977;
		color: inherit;
	}
}

/* Languages bar */
.mainpage-languages {
	padding: 2em;
	text-align: center;
}

/* keep wikitext div not exceed room available, it doesn’t have any identifier yet :( */
#mf-vid-vid > div,
/* keep Kaltura not exceed room available */
#mf-vid-vid .mediaContainer,
#mf-vid-vid .mwPlayerContainer,
#mf-vid-vid .PopUpMediaTransform,
/* keep VideoJS not exceed room available */
#mf-vid-vid .video-js,
#mf-vid-vid img {
	max-width: 100%;
}

/* Fixes https://phabricator.wikimedia.org/F55267795 */
/* When both sidebars are open, constrain the element. Ideally this would be done
via a container query

This is limited to resolutions up to 1400px per this feedback:
https://commons.wikimedia.org/w/index.php?title=User_talk:Jon_(WMF)&oldid=883715831#Template:Main_Page_Template/styles.css
*/
@media screen and (max-width: 1400px) {
	html.vector-feature-main-menu-pinned-enabled.vector-feature-appearance-pinned-clientpref-1 body.skin-vector-2022 td,
	html.vector-feature-main-menu-pinned-enabled.vector-feature-page-tools-pinned-enabled body.skin-vector-2022 td {
	    display: block !important;
	    width: auto !important;
	}
}