Template:Mainpage/styles.css - Revision history

WikiHarold: Use grid for Main Page top on mobile viewport

2026-05-24T15:10:21Z

Use grid for Main Page top on mobile viewport

← Older revision		Revision as of 15:10, 24 May 2026
Line 97:		Line 97:

	@media screen and (max-width: 1120px) {		@media screen and (max-width: 1120px) {
			.sw-mainpage-top {
			display: grid;
			grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.4fr);
			gap: 18px 24px;
			align-items: start;
			}

	.sw-mainpage-toc {		.sw-mainpage-toc {
	float: ~~left~~;		float: none;
	clear: ~~left~~;		clear: none;
	width: ~~285px~~;		width: auto;
	max-width: ~~46%~~;		max-width: none;
	margin: ~~0 1em 1em~~ 0;		margin: 0;
	}		}

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

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

	.sw-mainpage-intro {		.sw-mainpage-intro {
			grid-column: 1 / -1;
	clear: both;		clear: both;
	display: block;		display: block;
Line 147:		Line 159:

	@media screen and (max-width: 520px) {		@media screen and (max-width: 520px) {
			.sw-mainpage-top {
			display: block;
			}

	.sw-mainpage-toc,		.sw-mainpage-toc,
	.sw-mainpage-feature-image {		.sw-mainpage-feature-image {

WikiHarold: Fix Main Page layout for mobile browser viewport

2026-05-24T15:06:49Z

Fix Main Page layout for mobile browser viewport

← Older revision		Revision as of 15:06, 24 May 2026
Line 96:		Line 96:
	}		}

	@media screen and (max-width: ~~720px~~) {		@media screen and (max-width: 1120px) {
	.sw-mainpage-toc {		.sw-mainpage-toc {
	float: ~~none~~;		float: left;
	clear: ~~none~~;		clear: left;
	width: ~~auto~~;		width: 285px;
	max-width: ~~100~~%;		max-width: 46%;
	margin: 0 0 1em 0;		margin: 0 1em 1em 0;
	}		}

	.sw-mainpage-feature-image {		.sw-mainpage-feature-image {
	float: right;		float: right;
	clear: ~~none~~;		clear: right;
	width: ~~42%~~;		width: 430px;
	max-width: 42%;		max-width: 46%;
	margin: 0~~.15em 0 0.6em~~ 0~~.75em~~;		margin: 0 0 1em 1em;
	}		}

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

Line 123:		Line 124:
	.sw-mainpage-quick-grid {		.sw-mainpage-quick-grid {
	grid-template-columns: 1fr;		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;
	}		}
	}		}

WikiHarold: Let mobile intro text flow around Main Page float

2026-05-24T15:02:19Z

Let mobile intro text flow around Main Page float

← Older revision		Revision as of 15:02, 24 May 2026
Line 114:		Line 114:

	.sw-mainpage-intro {		.sw-mainpage-intro {
			display: contents;
	max-width: none;		max-width: none;
	column-count: 1;		column-count: 1;

WikiHarold: Adjust Main Page mobile float width

2026-05-24T15:01:24Z

Adjust Main Page mobile float width

← Older revision		Revision as of 15:01, 24 May 2026
Line 108:		Line 108:
	float: right;		float: right;
	clear: none;		clear: none;
	width: 52%;		width: 42%;
	max-width: 52%;		max-width: 42%;
	margin: 0 0 0.~~7em~~ 0.~~9em~~;		margin: 0.15em 0 0.6em 0.75em;
	}		}

WikiHarold: Tune Main Page mobile text flow around image

2026-05-24T14:59:31Z

Tune Main Page mobile text flow around image

← Older revision		Revision as of 14:59, 24 May 2026
Line 97:		Line 97:

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

			.sw-mainpage-feature-image {
			float: right;
			clear: none;
			width: 52%;
			max-width: 52%;
			margin: 0 0 0.7em 0.9em;
	}		}

WikiHarold: Override fixed daily image on mobile Main Page

2026-05-24T14:55:47Z

Override fixed daily image on mobile Main Page

← Older revision		Revision as of 14:55, 24 May 2026
Line 18:		Line 18:
	max-width: 46%;		max-width: 46%;
	margin: 0 0 1em 1.5em;		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;
	}		}

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

WikiHarold: Add responsive Main Page TemplateStyles

2026-05-24T14:53:28Z

Add responsive Main Page TemplateStyles

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 img,
.mainpage-daily-quantum-image img,
.sw-mainpage-stage-grid img {
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: 720px) {
.sw-mainpage-toc,
.sw-mainpage-feature-image {
float: none;
clear: none;
width: auto;
max-width: 100%;
margin: 0 0 1em 0;
}

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

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