Template:ProjectMeta/styles.css - Revision history

Anthony: Removed status & license badge (refactored to its own "Template:ProjectBadges/styles.css")

2026-04-03T00:13:04Z

Removed status & license badge (refactored to its own "Template:ProjectBadges/styles.css")

@@ Line 103: / Line 103: @@
      border-top: 1px solid;
      border-top-color: var(--border-color-base);
+}

Anthony: Anthony moved page Template:ProjectInfobox/styles.css to Template:ProjectMeta/styles.css without leaving a redirect

2026-04-03T00:11:32Z

Anthony moved page Template:ProjectInfobox/styles.css to Template:ProjectMeta/styles.css without leaving a redirect

← Older revision	Revision as of 00:11, 3 April 2026
(No difference)

Anthony at 11:43, 23 March 2026

2026-03-23T11:43:53Z

@@ Line 144: / Line 144: @@
      margin: 0;
      padding: 0;
+}

Anthony: Undo revision 1076 by Anthony (talk)

2026-03-23T11:42:33Z

Undo revision 1076 by Anthony (talk)

@@ Line 17: / Line 17: @@
+}
-/* Mobile: when viewport is narrow the 280px box takes up most of the
+/* ── Image container ──────────────────────────────────────────────────────────
-    screen and squishes text to the left. Switch to full-width centered
+    Fixed at 280×280px to match the infobox width — always a perfect square.
-    block so content flows normally below it. */
+    overflow:hidden clips anything outside the box.
-@media screen and (max-width: 480px) {
+   ───────────────────────────────────────────────────────────────────────────*/
 .project-infobox-image {
      width: 100%;
-     max-height: 200px;
+     height: 280px;
      overflow: hidden;
      display: flex;
@@ Line 42: / Line 33: @@
+}
 .project-infobox-image img {
      width: 100%;
      display: block;
+}
@@ Line 103: / Line 103: @@
      border-top: 1px solid;
      border-top-color: var(--border-color-base);
+}

Anthony: Attempting to fix mobile not pushing text to the left, but instead centering and pushing text below on mobile.

2026-03-23T11:40:04Z

Attempting to fix mobile not pushing text to the left, but instead centering and pushing text below on mobile.

@@ Line 17: / Line 17: @@
+}
-/* ── Image container ──────────────────────────────────────────────────────────
+/* Mobile: when viewport is narrow the 280px box takes up most of the
-    Fixed at 280×280px to match the infobox width — always a perfect square.
+    screen and squishes text to the left. Switch to full-width centered
-   overflow:hidden clips anything outside the box.
+   block so content flows normally below it. */
-   ───────────────────────────────────────────────────────────────────────────*/
+@media screen and (max-width: 480px) {
 .project-infobox-image {
      width: 100%;
-     height: 280px;
+     max-height: 200px;
      overflow: hidden;
      display: flex;
@@ Line 33: / Line 42: @@
+}
 .project-infobox-image img {
      width: 100%;
      display: block;
+}
@@ Line 103: / Line 103: @@
      border-top: 1px solid;
      border-top-color: var(--border-color-base);
+}

Anthony at 09:26, 23 March 2026

2026-03-23T09:26:08Z

@@ Line 133: / Line 133: @@
      border: 1px solid var(--border-color-base);
      color: var(--color-base--subtle);
+}

Anthony: badge colour rules added.

2026-03-23T09:15:07Z

badge colour rules added.

@@ Line 103: / Line 103: @@
      border-top: 1px solid;
      border-top-color: var(--border-color-base);
+}

Anthony: Image upload works for square images to fit nicely without stretch or cut off.

2026-03-23T08:47:18Z

Image upload works for square images to fit nicely without stretch or cut off.

← Older revision		Revision as of 08:47, 23 March 2026
Line 17:		Line 17:
	}		}

			/* ── Image container ──────────────────────────────────────────────────────────
			Fixed at 280×280px to match the infobox width — always a perfect square.
			overflow:hidden clips anything outside the box.
			───────────────────────────────────────────────────────────────────────────*/
	.project-infobox-image {		.project-infobox-image {
	width: 100%;		width: 100%;
	~~max-~~height: ~~200px~~;		height: 280px;
	overflow: hidden;		overflow: hidden;
	display: flex;		display: flex;
Line 29:		Line 33:
	}		}

			/* ── Image element ────────────────────────────────────────────────────────────
			object-fit:cover scales the image to fill the square without stretching.
			object-position:center top anchors to the top of the image so the most
			important part of artwork or portraits is visible.
			width/height:100% ensures the image fills the container fully.
			───────────────────────────────────────────────────────────────────────────*/
	.project-infobox-image img {		.project-infobox-image img {
	width: 100%;		width: 100%;
			height: 100%;
	display: block;		display: block;
			object-fit: cover;
			object-position: center top;
	}		}

Anthony: Undo revision 648 by Anthony (talk)

2026-03-07T12:46:41Z

Undo revision 648 by Anthony (talk)

New page

/* Template:ProjectInfobox/styles.css */
.project-infobox {
float: right;
clear: right;
width: 280px;
background-color: var(--color-surface-1);
border: 1px solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
border-radius: 4px;
overflow: hidden;
margin: 0 0 16px 24px;
font-size: 0.9em;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.project-infobox-image {
width: 100%;
max-height: 200px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-surface-2);
border-bottom: 1px solid;
border-bottom-color: var(--border-color-base);
}

.project-infobox-image img {
width: 100%;
display: block;
}

.project-infobox-image-fallback {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}

.project-infobox-title {
font-weight: bold;
font-size: 1.1em;
padding: 10px 14px 6px;
color: var(--color-base);
text-align: center;
}

.project-infobox-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 0 14px 10px;
justify-content: center;
}

.project-infobox-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92em;
}

.project-infobox-table tr {
border-top: 1px solid;
border-top-color: var(--border-color-base);
}

.project-infobox-table th {
padding: 6px 10px 6px 14px;
font-weight: bold;
color: var(--color-base--subtle);
text-align: left;
white-space: nowrap;
width: 40%;
background-color: var(--color-surface-2);
}

.project-infobox-table td {
padding: 6px 14px 6px 10px;
color: var(--color-base);
}

.project-infobox-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 10px 14px;
border-top: 1px solid;
border-top-color: var(--border-color-base);
}