Jump to content

Template:Home/styles.css: Difference between revisions

From Spike Wiki
← Older edit
Kyle (talk | contribs)
Bureaucrats, Interface administrators, Administrators
81 edits
Style homepage feature actions with MediaWiki design tokens
Match homepage feature to the existing Spike Wiki card style
 
(2 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-actions{
  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); }
}
}


Latest revision as of 03:44, 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 #eaecf0;
  border-radius:8px;
  background:#fff;
}
.featured-media .mw-file-description{ display:block; }
.featured-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  border-radius:6px;
  object-fit:cover;
}
.featured-kicker{
  margin-bottom:4px;
  color:#202122;
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
}
.featured-title{
  font-size:1.2rem;
  font-weight:700;
  line-height:1.3;
}
.featured-title a{ color:#36c; text-decoration:none; }
.featured-title a:hover{ text-decoration:underline; }
.featured-text{ margin-top:6px; color:#54595d; line-height:1.5; }
@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=7056"