MediaWiki:Citizen.css: Difference between revisions

← Older edit Newer edit →

@@ Line 289: / Line 289: @@
 :is(.wizlords-mainpage-left, .wizlords-mainpage-right)
 > .center
-> p:has(> .wizlords-imagetext) {
+> p:has(.wizlords-imagetext) {
 	display: contents;
 }
@@ Line 357: / Line 357: @@
 }
-/* Small-desktop and wider Citizen layouts retain the existing larger,
+/* Small-desktop / landscape-tablet Citizen keeps the desktop-style four-slot
-   four-column icon treatment. Tablet has its own denser layout below. */
+   rhythm, but uses larger icons so the wider mobile/tablet skin does not feel
-@media screen and (min-width: 900px) {
+   sparse before the full desktop Vector layout takes over. */
+@media screen and (min-width: 900px) and (max-width: 1199px) {
+	.skin-citizen .wizlords-mainpage-items,
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
+		gap: 20px 16px;
+	}
+	.skin-citizen .wizlords-imagetext {
+		flex-basis: calc((100% - 48px) / 4);
+		width: calc((100% - 48px) / 4);
+	}
+	.skin-citizen .wizlords-imagetext-image,
+	.skin-citizen .wizlords-imagetext-image img {
+		width: clamp(92px, 10vw, 108px);
+		height: clamp(92px, 10vw, 108px);
+	}
+	.skin-citizen .wizlords-imagetext-text {
+		font-size: 13px;
+	}
+}
+/* Full-width Citizen fallback. Normal desktop visitors use Vector, but this
+   keeps Citizen tidy if it is tested manually on a wide screen. */
+@media screen and (min-width: 1200px) {
 	.skin-citizen .wizlords-mainpage-items,
 	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
@@ Line 536: / Line 562: @@
 	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
 	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
+		display: grid;
+		grid-template-columns: repeat(8, minmax(0, 1fr));
 		gap: 8px 6px;
+		justify-items: center;
 	}
 	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
 	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
+		grid-column: 1 / -1;
 		margin-bottom: 4px;
 	}
 	.skin-citizen .wizlords-imagetext {
-		flex-basis: calc((100% - 42px) / 8);
+		width: 100%;
-		width: calc((100% - 42px) / 8);
+		max-width: 78px;
 	}