MediaWiki:Citizen.css: Difference between revisions

← Older edit Newer edit →

@@ Line 707: / Line 707: @@
 	line-height: 1.2;
 	text-align: center;
-	overflow-wrap: anywhere;
+	overflow-wrap: normal;
+	word-break: normal;
+	hyphens: none;
 }
@@ Line 865: / Line 867: @@
 		line-height: 1.2;
 		text-align: center;
-		overflow-wrap: anywhere;
+		overflow-wrap: normal;
+		word-break: normal;
+		hyphens: none;
+	}
+}
+/* Ultra-narrow phones/foldables.
+   Keep the four-across homepage icon rhythm, but give labels just enough room
+   that words do not split into single trailing letters around 344-369px. */
+@media screen and (max-width: 369px) {
+	.skin-citizen .wizlords-mainpage-items {
+		gap: 12px 6px;
+	}
+	.skin-citizen .wizlords-imagetext {
+		flex-basis: calc((100% - 18px) / 4);
+		width: calc((100% - 18px) / 4);
+	}
+	.skin-citizen .wizlords-imagetext-image,
+	.skin-citizen .wizlords-imagetext-image img {
+		width: 58px;
+		height: 58px;
+	}
+	.skin-citizen .wizlords-imagetext-text {
+		font-size: 11px;
+		line-height: 1.15;
+	}
+}
+/* Extremely narrow foldable screens.
+   At 360px and below, four columns become too tight for readable labels.
+   The Main Page square-icon groups contain seven items, so this creates a
+   centred 3 / 2 / 2 rhythm instead of allowing single-letter word breaks. */
+@media screen and (max-width: 360px) {
+	.skin-citizen .wizlords-mainpage-items {
+		gap: 14px 8px;
+	}
+	.skin-citizen .wizlords-imagetext {
+		flex-basis: calc((100% - 16px) / 3);
+		width: calc((100% - 16px) / 3);
+	}
+	.skin-citizen .wizlords-imagetext:nth-child(n+4) {
+		flex-basis: calc((100% - 8px) / 2);
+		width: calc((100% - 8px) / 2);
+	}
+	.skin-citizen .wizlords-imagetext-image,
+	.skin-citizen .wizlords-imagetext-image img {
+		width: 62px;
+		height: 62px;
+	}
+	.skin-citizen .wizlords-imagetext-text {
+		font-size: 12px;
+		line-height: 1.15;
 	}
 }