Wikipedia:Main page 2020.01 technical update/styles.css

.MainPage__banner {
	clear: both;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 1.2em 0 6px;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	color: #000;
}


.MainPage__banner__welcome {
	width: 100%;
	margin: 0.4em;
	text-align: center;
}

table.MainPage__table *{
	box-sizing: border-box;
}
/** with box-sizing of above and padding:0 on the cells, this might not be needed any longer */
.content table.MainPage__table {
	overflow: hidden;
}

.MainPage__table ul {
	list-style-type: disc;
}

.MainPage__table {
	border-spacing: 0;
}

.MainPage__table tr {
	margin-top: 4px;
	border-spacing: 0;
}

/*
Note these styles are currently limited to Minerva and Timeless based on rejection of previous changes to the Main page.
In a future of the main page these rules should be applied to all skins, but that change in itself will require an additional conversation on
Village Pump announcing this change and making it.
*/
body.skin-timeless .MainPageBG--featured-picture td,
body.skin-timeless .MainPageBG--featured-picture tr,
body.skin-timeless .MainPage__table tr,
body.skin-timeless .MainPage__column--left,
body.skin-timeless .MainPage__column--right,
body.skin-minerva .MainPageBG--featured-picture td,
body.skin-minerva .MainPageBG--featured-picture tr,
body.skin-minerva .MainPage__table tr,
body.skin-minerva .MainPage__column--left,
body.skin-minerva .MainPage__column--right {
	display: block;
	padding: 0; /* override td cell padding of UA */
	width: 100%;
}

/* support different one line three word header in mobile*/

@media all and ( max-width: 720px ) {
	.MainPage__heading--featured-article span { 
		display: inline-block;
	}
	.MainPage__heading--featured-article span.MainPage__heading--shorten {
		display: none;
	}
	.MainPage__heading--featured-article span:first-letter {
		text-transform: uppercase;
	}
}

@media all and ( max-width: 1200px ) {
	.MainPage__banner__links {
	  display: inline-block;
	  width: 100%;
	  text-align: center;
	  margin: 0;
	}
	.MainPage__banner__links li {
	  display: inline-block;
	  padding: 0 5px;
	}
}

/**
 * The original colored layout that we want everywhere except on minerva
 * This is only 'theme', the column/box layout is defined later on
 */
body:not(.skin-minerva) .MainPageBG--featured-list {
	border: 1px solid #f2cedd;
	background: #fff5fa;
	margin-top: 4px;
}

body:not(.skin-minerva) .MainPageBG--featured-picture {
	border: 1px solid #ddcef2;
	background: #faf5ff;
	margin-top: 4px;
}
body:not(.skin-minerva) .MainPage__heading--otd {
	background: #cedff2;
	font-family: inherit;
	font-size: 120%;
	font-weight: bold;
	border: 1px solid #a3b0bf;
	color: #000;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}
body:not(.skin-minerva) .MainPage__heading-dyk {
	background: #cef2e0;
	font-family: inherit;
	font-size: 120%;
	font-weight: bold;
	border: 1px solid #a3bfb1;
	color: #000;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}
body:not(.skin-minerva) .MainPage__heading--featured-list {
	background: #f2cedd;
	font-family: inherit;
	font-size: 120%;
	font-weight: bold;
	border: 1px solid #bfa3af;
	color: #000;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}
body:not(.skin-minerva) .MainPage__heading--other {
	background: #eeeeee;
	border: 1px solid #ddd;
	color: #222;
	font-size: 120%;
	font-weight: bold;
	font-family: inherit;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}
body:not(.skin-minerva) .MainPage__heading--languages {
	background: #efefef;
	border: 1px solid #ddd;
	color: #222;
	font-size: 120%;
	font-weight: bold;
	font-family: inherit;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}
body:not(.skin-minerva) .MainPage__heading--sister {
	background: #eeeeee;
	border: 1px solid #ddd;
	color: #222;
	font-size: 120%;
	font-weight: bold;
	font-family: inherit;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}
body:not(.skin-minerva) .MainPage__heading--featured-picture {
	background: #ddcef2;
	font-family: inherit;
	font-size: 120%;
	font-weight: bold;
	border: 1px solid #afa3bf;
	color: #000;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}
body:not(.skin-minerva) .MainPage__heading--featured-article {
	background: #cef2e0;
	font-family: inherit;
	font-size: 120%;
	font-weight: bold;
	border: 1px solid #a3bfb1;
	color: #000;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}
body:not(.skin-minerva) .MainPage__heading--itn {
	background: #cedff2;
	font-family: inherit;
	font-size: 120%;
	font-weight: bold;
	border: 1px solid #a3b0bf;
	color: #000;
	margin: 0.5em;
	padding: 0.2em 0.4em;
}

body:not(.skin-minerva) .MainPage__column--left {
	border: 1px solid #cef2e0;
	vertical-align: top;
	color: #000;
	background-color: #f5fffa;
}
body:not(.skin-minerva) .MainPage__column--right {
	border: 1px solid #cedff2;
	background: #f5faff;
	vertical-align: top;
}
body:not(.skin-minerva) .MainPage__other-areas {
	border: 1px solid #e2e2e2;
	margin-top: 4px;
	overflow: auto;
}

/* Apply two column layout */
@media all and ( min-width: 721px ) {
	.MainPageBG--featured-list {
		overflow: auto;
	} 
	.MainPageBG--featured-picture {
		overflow: auto;
	}
	.MainPage__heading--otd {
		clear: both;
	}
	.MainPage__heading-dyk {
		clear: both;
	}

	body.skin-minerva .MainPage__column--center {
		display: none;
	}

	body.skin-minerva .MainPageBG--featured-picture tr,
	body.skin-minerva .MainPage__table tr {
		display: table-row;
	}

	body.skin-timeless .MainPageBG--featured-picture td,
	body.skin-timeless .MainPage__column--left,
	body.skin-minerva .MainPageBG--featured-picture td,
	body.skin-minerva .MainPage__column--left {
		display: table-cell;
	}

	body.skin-timeless .MainPage__column--left,
	body.skin-minerva .MainPage__column--left,
	.MainPage__column--left {
		width: 55%;
		padding: 0;
		vertical-align: top;
	}
	
	body.skin-timeless .MainPage__column--right,
	body.skin-minerva .MainPage__column--right,
	.MainPage__column--right {
		display: table-cell;
		width: 45%;
		padding: 0;
		vertical-align: top;
	}
	.MainPage__other-areas {
		padding-bottom: 2px;
		overflow: auto;
		margin-top: 4px;
	}
}

/*Temporary workaround for monobook and timeless desktop users on mobile devices */
body.skin-monobook .nomobile,
body.skin-timeless .nomobile { display: block; }

/* iteration 2 - let's make the welcome box responsive
@media all and ( min-width: 1200px ) {*/
	.MainPage__banner__links {
		position: absolute;
		right: -1em;
		top: 50%;
		margin-top: -2.4em;
		width: 38%;
		min-width: 25em;
		font-size: 95%;
	}
	.MainPage__banner {
		min-width: 47em;
		white-space: nowrap;
	}
	body:not(.skin-minerva) .MainPage__banner__welcome {
		width: 22em;
	}
	body.skin-minerva .MainPage__banner__links {
		display: none;
	}
	.MainPage__banner__links__1 {
		position: absolute;
		left: 0;
		top: 0;
	}
	.MainPage__banner__links__2 {
		position: absolute;
		left: 0;
		top: 1.6em;
	}
	.MainPage__banner__links__3 {
		position: absolute;
		left: 0;
		top: 3.2em;
	}
	.MainPage__banner__links__4 {
		position: absolute;
		left: 33%;
		top: 0;
	}
	.MainPage__banner__links__5 {
		position: absolute;
		left: 33%;
		top: 1.6em;
	}
	.MainPage__banner__links__6 {
		position: absolute;
		left: 33%;
		top: 3.2em;
	}
	.MainPage__banner__links__7 {
		position: absolute;
		left: 66%;
		top: 0;
	}
	.MainPage__banner__links__8 {
		position: absolute;
		left: 66%;
		top: 1.6em;
	}
	.MainPage__banner__links__9 {
		position: absolute;
		left: 66%;
		top: 3.2em;
	}
/* END iteration 2 - let's make the welcome box responsive }
*/