Template: Blog post/styles.css

No edit summary
No edit summary
Tag: Manual revert
 
(2 intermediate revisions by the same user not shown)
Line 16: Line 16:
.blog-byline a { color: inherit; text-decoration: underline; }
.blog-byline a { color: inherit; text-decoration: underline; }


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


/* Hero image itself */
/* MediaWiki wraps images; make the wrapper fill the viewport */
.blog-hero-img {
.blog-hero a.image,
  width: 100%;          /* take full container width */
.blog-hero span.image {           /* some skins use span when link= is empty */
  height: auto;        /* keep aspect ratio */
   display: block;
   display: block;
   object-fit: cover;   /* ensure it fills without squishing */
   width: 100%;
   object-position: top; /* anchor crop at the top */
   height: 100%;
}
}
.blog-hero-cap {  
 
   text-align: center;  
/* Target the real <img> MediaWiki renders */
   color: #6f6f6f;  
.blog-hero img.mw-file-element {
   font-size: 0.92rem;  
  display: block;
   margin-top: 0.45rem;  
  width: 100% !important;        /* override any inline width */
   font-style: italic;  
  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;
}
}

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