Template:NewsItem/styles.css: Difference between revisions
Template page
More actions
Eloise Zomia (talk | contribs) Created page with ".news-card { border: 1px solid #e5e5e5; border-radius: 14px; padding: 14px 16px; background: #fff; margin: 0 0 14px 0; } .news-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .news-card__date { font-size: 0.95em; color: #444; white-space: nowrap; } .news-card__category-badge { font-size: 0.85em; padding: 3px 10px; border-radius: 999px; border: 1px solid #d9d9d9; bac..." Tag: Recreated |
Eloise Zomia (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
.news-card { | .news-card{ | ||
border: 1px solid # | border:1px solid #e3e3e3; | ||
border-radius: 14px; | border-radius:14px; | ||
padding: | padding:18px; | ||
background: #fff; | background:#fff; | ||
margin: 0 0 | margin:0 0 18px 0; | ||
} | } | ||
.news-card__header { | .news-card__header{ | ||
display: flex; | display:flex; | ||
align-items: center; | align-items:center; | ||
justify-content: space-between; | justify-content:space-between; | ||
gap: | gap:12px; | ||
margin-bottom: | margin-bottom:10px; | ||
} | } | ||
.news-card__date { | .news-card__date{ | ||
font-size: 0.95em; | font-size:0.95em; | ||
color: #444 | color:#444; | ||
} | } | ||
.news-card__category-badge { | .news-card__category-badge{ | ||
font-size: 0.85em; | font-size:0.85em; | ||
padding: | padding:4px 10px; | ||
border-radius: 999px; | border-radius:999px; | ||
border: 1px solid # | border:1px solid #ddd; | ||
background: #f7f7f7 | background:#f7f7f7; | ||
white-space:nowrap; | |||
white-space: nowrap; | |||
} | } | ||
.news-card__title{ | |||
margin:0 0 10px 0; | |||
font-size:1.25em; | |||
line-height:1.25; | |||
.news-card__title { | |||
margin: | |||
font-size: 1. | |||
line-height: 1.25 | |||
} | } | ||
.news-card__meta { | .news-card__meta{ | ||
display:flex; | |||
flex-wrap:wrap; | |||
gap:8px; | |||
margin:0 0 12px 0; | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 8px; | |||
} | } | ||
.news-card__tag { | .news-card__tag{ | ||
display: inline-block; | display:inline-block; | ||
font-size:0.9em; | |||
padding:6px 10px; | |||
border-radius: 999px; | border-radius:999px; | ||
border:1px solid #e1e1e1; | |||
background:#fafafa; | |||
} | } | ||
.news- | .news-card__summary{ | ||
margin:0 0 14px 0; | |||
color:#111; | |||
color: #111; | line-height:1.5; | ||
} | } | ||
.news- | .news-card__footer{ | ||
display:flex; | |||
gap:10px; | |||
align-items:center; | |||
} | } | ||
.news- | .news-card__source{ | ||
display:inline-block; | |||
padding:10px 12px; | |||
border-radius:10px; | |||
border:1px solid #e1e1e1; | |||
background:#f7f7ff; | |||
} | } | ||
Revision as of 13:22, 16 January 2026
.news-card{
border:1px solid #e3e3e3;
border-radius:14px;
padding:18px;
background:#fff;
margin:0 0 18px 0;
}
.news-card__header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.news-card__date{
font-size:0.95em;
color:#444;
}
.news-card__category-badge{
font-size:0.85em;
padding:4px 10px;
border-radius:999px;
border:1px solid #ddd;
background:#f7f7f7;
white-space:nowrap;
}
.news-card__title{
margin:0 0 10px 0;
font-size:1.25em;
line-height:1.25;
}
.news-card__meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0 0 12px 0;
}
.news-card__tag{
display:inline-block;
font-size:0.9em;
padding:6px 10px;
border-radius:999px;
border:1px solid #e1e1e1;
background:#fafafa;
}
.news-card__summary{
margin:0 0 14px 0;
color:#111;
line-height:1.5;
}
.news-card__footer{
display:flex;
gap:10px;
align-items:center;
}
.news-card__source{
display:inline-block;
padding:10px 12px;
border-radius:10px;
border:1px solid #e1e1e1;
background:#f7f7ff;
}