Template: Blog post/styles.css

Root changed the content model of the page Template:Blog post/styles.css from "wikitext" to "Sanitized CSS"
No edit summary
Tag: Manual revert
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Page container */
/* Title area (skin heading is the H1) */
.blog-article { max-width: 920px; margin: 0 auto; padding: 0 1rem 2rem; }
.firstHeading {
  font-size: 2.4rem;
  line-height: 1.15;  
  font-weight: 800;  
  margin-bottom: 0.2rem;   /* smaller gap below title */
}


/* Title */
/* Byline */
.blog-h1 { font-size: 2.25rem; line-height: 1.2; margin: 0.5rem 0 0.25rem; font-weight: 700; }
.blog-byline {  
  color: #616161;
  font-size: 0.98rem;  
  margin-top: 0;           /* remove extra space above */
  margin-bottom: 1rem;
}
.blog-byline a { color: inherit; text-decoration: underline; }


/* Byline (date • author • optional translate link) */
/* Hero image viewport (fixed 250px high, crop anything below) */
.blog-byline { color: #616161; font-size: 0.95rem; margin-bottom: 1rem; }
.blog-hero {
.blog-byline a { color: inherit; text-decoration: underline; }
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 1rem auto 0.75rem;
}


/* Standfirst */
/* MediaWiki wraps images; make the wrapper fill the viewport */
.blog-standfirst { font-size: 1.1rem; margin: 0.75rem 0 1.25rem; }
.blog-hero a.image,
.blog-hero span.image {           /* some skins use span when link= is empty */
  display: block;
  width: 100%;
  height: 100%;
}


/* Hero image + caption */
/* Target the real <img> MediaWiki renders */
.blog-hero { margin: 1rem 0 1rem; }
.blog-hero img.mw-file-element {
.blog-hero-img { width: 100%; height: auto; border-radius: 8px; }
  display: block;
.blog-hero-cap { text-align: center; color: #6f6f6f; font-size: 0.9rem; margin-top: 0.35rem; }
  width: 100% !important;         /* override any inline width */
  height: 100% !important;       /* force it to fill the 250px box */
  object-fit: cover;             /* crop while preserving aspect ratio */
  object-position: top;           /* show from the top down */
  border-radius: 8px;
  margin: 0;
  padding: 0;
}


/* List rows */
/* Caption stays below the cropped area */
.blogpost-row { display: grid; grid-template-columns: 120px 1fr; gap: 0.75rem; padding: 0.9rem 0; border-bottom: 1px solid #eee; }
.blog-hero-cap {
.blogpost-thumb { border-radius: 6px; overflow: hidden; }
  text-align: center;
.blogpost-row-title { font-weight: 600; font-size: 1.05rem; }
  color: #6f6f6f;
.blogpost-row-meta { color: #666; margin: 0.25rem 0 0.5rem; font-size: 0.92rem; }
  font-size: 0.92rem;
.blogpost-row-desc { color: #2f2f2f; }
  margin-top: 0.45rem;
  font-style: italic;
}

Latest revision as of 16:29, 3 October 2025

/* Title area (skin heading is the H1) */
.firstHeading { 
  font-size: 2.4rem; 
  line-height: 1.15; 
  font-weight: 800; 
  margin-bottom: 0.2rem;   /* smaller gap below title */
}

/* Byline */
.blog-byline { 
  color: #616161; 
  font-size: 0.98rem; 
  margin-top: 0;           /* remove extra space above */
  margin-bottom: 1rem; 
}
.blog-byline a { color: inherit; text-decoration: underline; }

/* Hero image viewport (fixed 250px high, crop anything below) */
.blog-hero {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 1rem auto 0.75rem;
}

/* MediaWiki wraps images; make the wrapper fill the viewport */
.blog-hero a.image,
.blog-hero span.image {            /* some skins use span when link= is empty */
  display: block;
  width: 100%;
  height: 100%;
}

/* Target the real <img> MediaWiki renders */
.blog-hero img.mw-file-element {
  display: block;
  width: 100% !important;         /* override any inline width */
  height: 100% !important;        /* force it to fill the 250px box */
  object-fit: cover;              /* crop while preserving aspect ratio */
  object-position: top;           /* show from the top down */
  border-radius: 8px;
  margin: 0;
  padding: 0;
}

/* Caption stays below the cropped area */
.blog-hero-cap {
  text-align: center;
  color: #6f6f6f;
  font-size: 0.92rem;
  margin-top: 0.45rem;
  font-style: italic;
}
Discuss this page