Template: Blog post/styles.css

No edit summary
No edit summary
Line 17: Line 17:


/* Hero image */
/* Hero image */
.blog-hero {  
/* Hero image container */
   margin: 1rem auto 0.75rem;  
.blog-hero {
   text-align: center;     /* center the image container */
   width: 100%;
   max-width: 100%;
  height: 250px;       /* fixed crop height */
  overflow: hidden;    /* hide content outside the box */
  position: relative;
  margin: 1rem auto 0.75rem;
}
}
.blog-hero-img {  
 
   display: block;  
/* Hero image itself */
   margin: 0 auto;         /* center the image itself */
.blog-hero-img {
   max-width: 100%;  
   width: 100%;         /* take full container width */
   height: auto;  
   height: auto;         /* keep aspect ratio */
   border-radius: 8px;  
   display: block;
   object-fit: cover;   /* ensure it fills without squishing */
   object-position: top; /* anchor crop at the top */
}
}
.blog-hero-cap {  
.blog-hero-cap {  

Revision as of 22:42, 1 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 */
/* Hero image container */
.blog-hero {
  width: 100%;
  max-width: 100%;
  height: 250px;        /* fixed crop height */
  overflow: hidden;     /* hide content outside the box */
  position: relative;
  margin: 1rem auto 0.75rem;
}

/* Hero image itself */
.blog-hero-img {
  width: 100%;          /* take full container width */
  height: auto;         /* keep aspect ratio */
  display: block;
  object-fit: cover;    /* ensure it fills without squishing */
  object-position: top; /* anchor crop at the top */
}
.blog-hero-cap { 
  text-align: center; 
  color: #6f6f6f; 
  font-size: 0.92rem; 
  margin-top: 0.45rem; 
  font-style: italic; 
}
Discuss this page