Template:Home/styles.css: Difference between revisions

← Older edit

@@ Line 12: / Line 12: @@
    display:grid;
    grid-template-columns:1fr;
-   gap:16px;
+   gap:12px;
-   align-items:center;
+   align-items:start;
    margin:12px 0 16px;
-   padding:16px;
+   padding:12px;
    border:1px solid #eaecf0;
-   border-radius:12px;
+   border-radius:8px;
-   background:#f8f9fa;
+   background:#fff;
 }
 .featured-media .mw-file-description{ display:block; }
@@ Line 26: / Line 26: @@
    height:auto;
    aspect-ratio:16 / 10;
-   border-radius:8px;
+   border-radius:6px;
    object-fit:cover;
 }
 .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{
-  margin-top:4px;
+   font-size:1.2rem;
-   font-size:1.5rem;
    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-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){
-   .featured{ grid-template-columns:minmax(220px, 38%) minmax(0, 1fr); }
+   .featured{ grid-template-columns:minmax(180px, 30%) minmax(0, 1fr); }
 }