Template: Blog post row/styles.css
Created page with "→Container: .blogpost-row { display: grid; grid-template-columns: 120px 1fr; gap: 0.75rem; padding: 0.9rem 0; border-bottom: 1px solid #eee; } →Thumbnail area: .blogpost-row-thumb { width: 120px; height: 120px; overflow: hidden; border-radius: 6px; } →MediaWiki wraps the image; make wrappers fill and crop nicely: .blogpost-row-thumb a.image, .blogpost-row-thumb span.image { display: block; width: 120px; height: 120px; } .blogpost-row-thumb..." |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
.blogpost-row { | .blogpost-row { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: 200px 1fr; | ||
gap: 0.75rem; | gap: 0.75rem; | ||
padding: 0.9rem 0; | padding: 0.9rem 0; | ||
| Line 9: | Line 9: | ||
/* Thumbnail area */ | /* Thumbnail area */ | ||
.blogpost-row-thumb { width: | .blogpost-row-thumb { width: 200px; height: 200px; overflow: hidden; border-radius: 6px; } | ||
/* MediaWiki wraps the image; make wrappers fill and crop nicely */ | /* MediaWiki wraps the image; make wrappers fill and crop nicely */ | ||
| Line 15: | Line 15: | ||
.blogpost-row-thumb span.image { | .blogpost-row-thumb span.image { | ||
display: block; | display: block; | ||
width: | width: 200px; | ||
height: | height: 200px; | ||
} | } | ||
| Line 32: | Line 32: | ||
/* Body */ | /* Body */ | ||
.blogpost-row-body { min-width: 0; } | .blogpost-row-body { min-width: 0; } | ||
.blogpost-row-title { font-weight: 600; font-size: 1. | .blogpost-row-title { font-weight: 600; font-size: 1.5rem; margin-bottom: 0.25rem; } | ||
.blogpost-row-meta { color: #666; margin: 0.15rem 0 0.45rem; font-size: 0.92rem; } | .blogpost-row-meta { color: #666; margin: 0.15rem 0 0.45rem; font-size: 0.92rem; } | ||
.blogpost-row-desc { color: #2f2f2f; } | .blogpost-row-desc { color: #2f2f2f; font-size: 1.05rem; font-style: italic; } | ||
Latest revision as of 16:40, 3 October 2025
/* Container */
.blogpost-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0.75rem;
padding: 0.9rem 0;
border-bottom: 1px solid #eee;
}
/* Thumbnail area */
.blogpost-row-thumb { width: 200px; height: 200px; overflow: hidden; border-radius: 6px; }
/* MediaWiki wraps the image; make wrappers fill and crop nicely */
.blogpost-row-thumb a.image,
.blogpost-row-thumb span.image {
display: block;
width: 200px;
height: 200px;
}
.blogpost-row-thumb img.mw-file-element {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover; /* crop while preserving aspect */
object-position: center;
border-radius: 6px;
margin: 0;
padding: 0;
}
/* Body */
.blogpost-row-body { min-width: 0; }
.blogpost-row-title { font-weight: 600; font-size: 1.5rem; margin-bottom: 0.25rem; }
.blogpost-row-meta { color: #666; margin: 0.15rem 0 0.45rem; font-size: 0.92rem; }
.blogpost-row-desc { color: #2f2f2f; font-size: 1.05rem; font-style: italic; }