Jump to content

Template:Home/styles.css: Difference between revisions

From Spike Wiki
← Older editNewer edit →
Kyle (talk | contribs)
Bureaucrats, Interface administrators, Administrators
81 edits
Style homepage feature actions with MediaWiki design tokens
Restyle homepage feature to match classic MediaWiki
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 #a2a9b1;
  border-radius:12px;
   background:#fff;
   background:#f8f9fa;
}
}
.featured-media .mw-file-description{ display:block; }
.featured-media .mw-file-description{ display:block; }
Line 26: Line 25:
   height:auto;
   height:auto;
   aspect-ratio:16 / 10;
   aspect-ratio:16 / 10;
   border-radius:8px;
   border:1px solid #c8ccd1;
   object-fit:cover;
   object-fit:cover;
}
}
.featured-kicker{
.featured-kicker{
   color:#54595d;
  padding-bottom:2px;
   font-size:0.78rem;
  border-bottom:1px solid #a2a9b1;
   font-weight:700;
   color:#202122;
   letter-spacing:0.08em;
   font-family:'Linux Libertine','Georgia','Times',serif;
   text-transform:uppercase;
   font-size:1.2rem;
   font-weight:400;
   line-height:1.3;
}
}
.featured-title{
.featured-title{
   margin-top:4px;
   margin-top:8px;
   font-size:1.5rem;
   font-size:1.1rem;
   font-weight:700;
   font-weight:700;
   line-height:1.2;
   line-height:1.4;
}
}
.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:#202122; line-height:1.5; }
.featured-actions{
.featured-links{ margin-top:8px; font-size:0.875rem; text-align:right; }
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.featured-action{ display:inline-flex; }
.featured-action a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  box-sizing:border-box;
  padding:5px 12px;
  border:1px solid #a2a9b1;
  border-radius:2px;
  background:#fff;
  color:#36c;
  font-size:0.875rem;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
  transition:background-color 100ms ease, border-color 100ms ease, color 100ms ease, transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}
.featured-action-primary a{
  border-color:#36c;
  background:#36c;
  color:#fff;
}
.featured-action a:focus{
  outline:2px solid #36c;
  outline-offset:2px;
}
.featured-action a:active{ transform:scale(0.98); }
@media (hover:hover) and (pointer:fine){
  .featured-action a:hover{
    border-color:#36c;
    background:#f8f9fa;
    color:#2a4b8d;
  }
  .featured-action-primary a:hover{
    border-color:#2a4b8d;
    background:#2a4b8d;
    color:#fff;
  }
}
@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); }
}
}


Revision as of 03:38, 20 July 2026

/* Layout */
.grid2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:900px){ .grid2{ grid-template-columns:1fr 1fr; } }

/* Hero */
.hero{ padding:8px 0 4px; border-bottom:1px solid #eaecf0; margin-bottom:8px; }
.hero-title{ font-size:28px; font-weight:700; }
.hero-sub{ color:#54595d; margin-top:4px; }

/* Featured article */
.featured{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:start;
  margin:12px 0 16px;
  padding:12px;
  border:1px solid #a2a9b1;
  background:#fff;
}
.featured-media .mw-file-description{ display:block; }
.featured-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  border:1px solid #c8ccd1;
  object-fit:cover;
}
.featured-kicker{
  padding-bottom:2px;
  border-bottom:1px solid #a2a9b1;
  color:#202122;
  font-family:'Linux Libertine','Georgia','Times',serif;
  font-size:1.2rem;
  font-weight:400;
  line-height:1.3;
}
.featured-title{
  margin-top:8px;
  font-size:1.1rem;
  font-weight:700;
  line-height:1.4;
}
.featured-title a{ color:#36c; text-decoration:none; }
.featured-title a:hover{ text-decoration:underline; }
.featured-text{ margin-top:6px; color:#202122; line-height:1.5; }
.featured-links{ margin-top:8px; font-size:0.875rem; text-align:right; }
@media (min-width:720px){
  .featured{ grid-template-columns:minmax(180px, 30%) minmax(0, 1fr); }
}

/* Cards & lists */
.card{ border:1px solid #eaecf0; border-radius:8px; padding:12px; background:#fff; }
.card-h{ font-weight:600; margin-bottom:8px; }
.list{ margin:0; padding-left:18px; }

/* Buttons */
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
.btn-row input[type="submit"]{
  appearance:none; border:1px solid #d0d7de; background:#f8f9fa;
  padding:6px 10px; border-radius:6px; cursor:pointer;
}
.btn-row input[type="submit"]:hover{ background:#fff; }

/* Tables */
.wikitable{ width:100%; }
Retrieved from "https://spikewiki.com/index.php?title=Template:Home/styles.css&oldid=7053"