MediaWiki:Citizen.css: Difference between revisions

← Older edit Newer edit →

@@ Line 211: / Line 211: @@
 }
-/* Tablet and wider Citizen layouts use larger icons while retaining the same
+/* Small-desktop and wider Citizen layouts retain the existing larger,
-    predictable four-column arrangement. The 600px boundary is the standard
+    four-column icon treatment. Tablet has its own denser layout below. */
-   start of the tablet range. */
+@media screen and (min-width: 900px) {
-@media screen and (min-width: 600px) {
 	.skin-citizen .wizlords-mainpage-items,
 	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
@@ Line 234: / Line 233: @@
 	.skin-citizen .wizlords-imagetext-text {
 		font-size: 13px;
+	}
+}
+/* Phone-only wide-card fallback. Tablet receives the four-slot treatment in
+   the dedicated tablet section below. */
+@media screen and (max-width: 599px) {
+	.skin-citizen .wizlords-wideimagetext {
+		max-width: 100%;
+	}
+	.skin-citizen .wizlords-wideimagetext-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 10px 16px;
+	}
+}
+/* ==========================================================================
+   Citizen Tablet Homepage
+   --------------------------------------------------------------------------
+   At 600-899px the homepage uses the available width as one broad content
+   column. Eight compact icon slots allow eight-item groups to occupy one row
+   and naturally centre shorter groups such as the seven-item Rules section.
+   ========================================================================== */
+@media screen and (min-width: 600px) and (max-width: 899px) {
+	.skin-citizen .wizlords-mainpage-left,
+	.skin-citizen .wizlords-mainpage-right {
+		max-width: 760px;
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.skin-citizen .wizlords-mainpage-left > h2.center,
+	.skin-citizen .wizlords-mainpage-right > h2.center {
+		margin-top: 14px;
+		margin-bottom: 6px;
+	}
+	.skin-citizen .wizlords-mainpage-left > p,
+	.skin-citizen .wizlords-mainpage-right > p {
+		margin-top: 6px;
+		margin-bottom: 8px;
+	}
+	.skin-citizen .wizlords-mainpage-items,
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
+		gap: 8px 6px;
+	}
+	.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
+	.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
+		margin-bottom: 4px;
+	}
+	.skin-citizen .wizlords-imagetext {
+		flex-basis: calc((100% - 42px) / 8);
+		width: calc((100% - 42px) / 8);
+	}
+	.skin-citizen .wizlords-imagetext-image,
+	.skin-citizen .wizlords-imagetext-image img {
+		width: clamp(52px, 7.5vw, 64px);
+		height: clamp(52px, 7.5vw, 64px);
+	}
+	.skin-citizen .wizlords-imagetext-text {
+		min-height: 30px;
+		margin-top: 3px;
+		font-size: 12px;
+		line-height: 1.15;
+	}
+	/* Wide homepage cards use four equal touch-friendly slots on tablet. */
+	.skin-citizen .wizlords-wideimagetext-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 10px 12px;
+		width: 100%;
+	}
+	.skin-citizen .wizlords-wideimagetext-grid .wizlords-wideimagetext {
+		flex: 0 0 calc((100% - 36px) / 4);
+		box-sizing: border-box;
+		width: calc((100% - 36px) / 4);
+		max-width: none;
+		margin: 0;
+		text-align: center;
+	}
+	.skin-citizen .wizlords-wideimagetext-image,
+	.skin-citizen .wizlords-wideimagetext-image img {
+		display: block;
+		width: 100%;
+		height: auto;
+		aspect-ratio: 2 / 1;
+		object-fit: cover;
+		border: 0;
+		background: transparent;
+	}
+	.skin-citizen .wizlords-wideimagetext-text {
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		width: 100%;
+		min-height: 34px;
+		height: auto;
+		margin-top: 4px;
+		font-size: 12px;
+		line-height: 1.2;
+		text-align: center;
+		overflow-wrap: anywhere;
 	}
 }
@@ Line 272: / Line 386: @@
 	.skin-citizen .wizlords-mainpage-clear {
 		clear: both;
-	}
-	.skin-citizen .wizlords-wideimagetext {
-		max-width: 100%;
-	}
-	.skin-citizen .wizlords-wideimagetext-grid {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		gap: 10px 16px;
 	}