Template:ProjectMeta/styles.css: Difference between revisions
Template page
More actions
Tag: Undo |
Image upload works for square images to fit nicely without stretch or cut off. |
||
| 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%; | ||
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; | |||
} | } | ||
Revision as of 08:47, 23 March 2026
/* 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);
}
/* ── 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 {
width: 100%;
height: 280px;
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);
}
/* ── 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 {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center top;
}
.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);
}