Template:Home/styles.css: Difference between revisions

Add featured-article styling to the homepage
Match homepage feature to the existing Spike Wiki card style
 
(3 intermediate revisions by the same user not shown)
Line 12: Line 12:
   display:grid;
   display:grid;
   grid-template-columns:1fr;
   grid-template-columns:1fr;
   gap:16px;
   gap:12px;
   align-items:center;
   align-items:start;
   margin:12px 0 16px;
   margin:12px 0 16px;
   padding:16px;
   padding:12px;
   border:1px solid #eaecf0;
   border:1px solid #eaecf0;
   border-radius:12px;
   border-radius:8px;
   background:#f8f9fa;
   background:#fff;
}
}
.featured-media .mw-file-description{ display:block; }
.featured-media .mw-file-description{ display:block; }
Line 26: Line 26:
   height:auto;
   height:auto;
   aspect-ratio:16 / 10;
   aspect-ratio:16 / 10;
   border-radius:8px;
   border-radius:6px;
   object-fit:cover;
   object-fit:cover;
}
}
.featured-kicker{
.featured-kicker{
   color:#54595d;
  margin-bottom:4px;
   font-size:0.78rem;
   color:#202122;
   font-weight:700;
   font-size:1rem;
   letter-spacing:0.08em;
   font-weight:600;
  text-transform:uppercase;
   line-height:1.4;
}
}
.featured-title{
.featured-title{
  margin-top:4px;
   font-size:1.2rem;
   font-size:1.5rem;
   font-weight:700;
   font-weight:700;
   line-height:1.2;
   line-height:1.3;
}
}
.featured-title a{ color:inherit; text-decoration:none; }
.featured-title a{ color:#36c; text-decoration:none; }
.featured-title a:hover{ text-decoration:underline; }
.featured-title a:hover{ text-decoration:underline; }
.featured-text{ margin-top:8px; color:#54595d; line-height:1.5; }
.featured-text{ margin-top:6px; color:#54595d; line-height:1.5; }
.featured-link{ margin-top:12px; font-weight:600; }
@media (min-width:720px){
@media (min-width:720px){
   .featured{ grid-template-columns:minmax(220px, 38%) minmax(0, 1fr); }
   .featured{ grid-template-columns:minmax(180px, 30%) minmax(0, 1fr); }
}
}