Template: Blog post row/styles.css

No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 2: Line 2:
.blogpost-row {
.blogpost-row {
   display: grid;
   display: grid;
   grid-template-columns: 120px 1fr;
   grid-template-columns: 200px 1fr;
   gap: 0.75rem;
   gap: 0.75rem;
   padding: 0.9rem 0;
   padding: 0.9rem 0;
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.05rem; margin-bottom: 0.25rem; }
.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; }
Discuss this page