Template:Mainpage/responsive.css - Revision history

WikiHarold: Balance four floated Main Page columns

2026-05-24T15:17:07Z

Balance four floated Main Page columns

← Older revision		Revision as of 15:17, 24 May 2026
Line 105:		Line 105:
	float: left;		float: left;
	clear: none;		clear: none;
	width: 32%;		width: 25%;
	max-width: 32%;		max-width: 25%;
	margin: 0 2% 1em 0;		margin: 0 2% 1em 0;
	}		}
Line 112:		Line 112:
	.sw-mainpage-intro-col {		.sw-mainpage-intro-col {
	float: left;		float: left;
	width: 16%;		width: 20%;
	max-width: 16%;		max-width: 20%;
	margin: 0 2% 1em 0;		margin: 0 2% 1em 0;
	}		}
Line 120:		Line 120:
	float: left;		float: left;
	clear: none;		clear: none;
	width: 30%;		width: 29%;
	max-width: 30%;		max-width: 29%;
	margin: 0;		margin: 0;
	}		}

WikiHarold: Use four floated columns on Main Page top

2026-05-24T15:16:16Z

Use four floated columns on Main Page top

← Older revision		Revision as of 15:16, 24 May 2026
Line 2:		Line 2:
	color: #006b45;		color: #006b45;
	line-height: 1.45;		line-height: 1.45;
			overflow: hidden;
			}

			.sw-mainpage-top-col {
			float: left;
			box-sizing: border-box;
	}		}

	.sw-mainpage-toc {		.sw-mainpage-toc {
	float: left;		float: left;
	clear: ~~left~~;		clear: none;
	width: ~~285px~~;		width: 25%;
	max-width: ~~100~~%;		max-width: 25%;
	margin: 0 ~~1.5em~~ 1em 0;		margin: 0 2% 1em 0;
	}		}

	.sw-mainpage-feature-image {		.sw-mainpage-feature-image {
	float: ~~right~~;		float: left;
	clear: ~~right~~;		clear: none;
	width: ~~430px~~;		width: 29%;
	max-width: 46%;		max-width: 29%;
	margin: 0 0 1em ~~1.5em~~;		margin: 0 0 1em 0;
	}		}

Line 23:		Line 29:
	float: none;		float: none;
	width: 100%;		width: 100%;
	max-width: ~~430px~~;		max-width: none;
	margin: 0;		margin: 0;
	text-align: center;		text-align: center;
Line 40:		Line 46:
	}		}

	.sw-mainpage-intro {		.sw-mainpage-intro-col {
	~~max-~~width: ~~920px~~;		width: 20%;
	~~column~~-~~count~~: 2;		max-width: 20%;
	~~column-gap~~: ~~32px;~~		margin: 0 2% 1em 0;
	~~column-rule: 1px solid #b8d8c8~~;
	}		}

Line 99:		Line 104:
	.sw-mainpage-toc {		.sw-mainpage-toc {
	float: left;		float: left;
	clear: ~~left~~;		clear: none;
	width: 32%;		width: 32%;
	max-width: 32%;		max-width: 32%;
	margin: 0 0 1em 0;		margin: 0 2% 1em 0;
			}

			.sw-mainpage-intro-col {
			float: left;
			width: 16%;
			max-width: 16%;
			margin: 0 2% 1em 0;
	}		}

	.sw-mainpage-feature-image {		.sw-mainpage-feature-image {
	float: ~~right~~;		float: left;
	clear: ~~right~~;		clear: none;
	width: 62%;		width: 30%;
	max-width: 62%;		max-width: 30%;
	margin: 0;		margin: 0;
	}		}
Line 115:		Line 127:
	.sw-mainpage-feature-image .mainpage-daily-quantum-image {		.sw-mainpage-feature-image .mainpage-daily-quantum-image {
	max-width: none;		max-width: none;
	}

	~~.sw-mainpage-intro {~~
	~~clear: both;~~
	~~display: block;~~
	~~max-width: none;~~
	~~column-count: 2;~~
	~~column-gap: 24px;~~
	}		}

Line 147:		Line 151:
	width: 100% !important;		width: 100% !important;
	height: 100% !important;		height: 100% !important;
			}
			}

			@media screen and (max-width: 760px) {
			.sw-mainpage-toc,
			.sw-mainpage-feature-image,
			.sw-mainpage-intro-col {
			width: 48%;
			max-width: 48%;
			margin: 0 2% 1em 0;
			}

			.sw-mainpage-intro-b,
			.sw-mainpage-feature-image {
			margin-right: 0;
	}		}
	}		}
Line 152:		Line 171:
	@media screen and (max-width: 520px) {		@media screen and (max-width: 520px) {
	.sw-mainpage-toc,		.sw-mainpage-toc,
	.sw-mainpage-feature-image {		.sw-mainpage-feature-image,
			.sw-mainpage-intro-col {
	float: none;		float: none;
	clear: none;		clear: none;
Line 158:		Line 178:
	max-width: 100%;		max-width: 100%;
	margin: 0 0 1em 0;		margin: 0 0 1em 0;
	}

	~~.sw-mainpage-intro {~~
	~~column-count: 1;~~
	~~column-rule: 0;~~
	}		}

WikiHarold: Create responsive Main Page stylesheet

2026-05-24T15:12:52Z

Create responsive Main Page stylesheet

New page

.sw-mainpage-top {
color: #006b45;
line-height: 1.45;
}

.sw-mainpage-toc {
float: left;
clear: left;
width: 285px;
max-width: 100%;
margin: 0 1.5em 1em 0;
}

.sw-mainpage-feature-image {
float: right;
clear: right;
width: 430px;
max-width: 46%;
margin: 0 0 1em 1.5em;
}

.sw-mainpage-feature-image .mainpage-daily-quantum-image {
float: none;
width: 100%;
max-width: 430px;
margin: 0;
text-align: center;
}

.sw-mainpage-feature-image .mainpage-daily-quantum-image p {
margin: 0;
}

.sw-mainpage-feature-image img,
.mainpage-daily-quantum-image img,
.sw-mainpage-stage-grid img {
width: 100%;
max-width: 100%;
height: auto;
}

.sw-mainpage-intro {
max-width: 920px;
column-count: 2;
column-gap: 32px;
column-rule: 1px solid #b8d8c8;
}

.sw-mainpage-clear {
clear: both;
}

.sw-mainpage-books-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin: 1em 0;
}

.sw-mainpage-stage {
border: 1px solid #e0d890;
background: #fff8cc;
padding: 10px 12px;
margin: 1em 0;
border-radius: 6px;
overflow: hidden;
}

.sw-mainpage-stage-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
align-items: start;
}

.sw-mainpage-quick-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 1em 0;
}

.sw-mainpage-card-blue,
.sw-mainpage-card-yellow {
padding: 10px;
}

.sw-mainpage-card-blue {
border: 1px solid #ccd6e0;
background: #f8fbff;
}

.sw-mainpage-card-yellow {
border: 1px solid #e0d890;
background: #fff8cc;
}

@media screen and (max-width: 1120px) {
.sw-mainpage-toc {
float: left;
clear: left;
width: 32%;
max-width: 32%;
margin: 0 0 1em 0;
}

.sw-mainpage-feature-image {
float: right;
clear: right;
width: 62%;
max-width: 62%;
margin: 0;
}

.sw-mainpage-feature-image .mainpage-daily-quantum-image {
max-width: none;
}

.sw-mainpage-intro {
clear: both;
display: block;
max-width: none;
column-count: 2;
column-gap: 24px;
}

.sw-mainpage-stage-grid,
.sw-mainpage-quick-grid {
grid-template-columns: 1fr;
}

.mainpage-external-quantum-image-box {
float: right;
width: 42%;
max-width: 360px;
margin: 0 0 1em 1em;
}

.mainpage-external-quantum-image,
.mainpage-external-quantum-image-click {
width: 100%;
height: auto;
aspect-ratio: 10 / 7;
}

.mainpage-external-quantum-image-click a.external.text {
width: 100% !important;
height: 100% !important;
}
}

@media screen and (max-width: 520px) {
.sw-mainpage-toc,
.sw-mainpage-feature-image {
float: none;
clear: none;
width: auto;
max-width: 100%;
margin: 0 0 1em 0;
}

.sw-mainpage-intro {
column-count: 1;
column-rule: 0;
}

.mainpage-external-quantum-image-box {
float: none;
width: auto;
max-width: 100%;
margin: 0 0 1em 0;
}
}