MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 22: | Line 22: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 1em; | gap: 1.5em; | ||
margin-top: 1em; | |||
justify-content: flex-start; /* ← important change */ | |||
} | |||
.pm-wide-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 1.5em; | |||
justify-content: space-between; | justify-content: space-between; | ||
margin-top: 2em; | |||
} | |||
.pm-wide-grid .pm-box { | |||
flex: 1 1 calc(33.333% - 1em); /* 3 in a row */ | |||
max-width: 100%; | |||
} | |||
@media (max-width: 800px) { | |||
.pm-wide-grid .pm-box { | |||
flex: 1 1 100%; /* stack on narrow screens */ | |||
} | |||
} | } | ||
| Line 29: | Line 49: | ||
flex: 1 1 300px; | flex: 1 1 300px; | ||
max-width: 400px; | max-width: 400px; | ||
background: # | background: #f9f7f3; | ||
padding: | padding: 1.2em 1.5em; | ||
border: 1px solid # | border: 1px solid #e0e0e0; | ||
border-radius: 8px; | border-radius: 8px; | ||
box-shadow: 0 0 4px rgba(0,0,0,0. | box-shadow: 0 2px 6px rgba(0,0,0,0.04); | ||
transition: box-shadow 0.3s ease; | |||
} | |||
.pm-full { | |||
flex-basis: 100%; | |||
max-width: none; | |||
} | |||
.pm-emphasis { | |||
background-color: #fef6e9; | |||
border-left: 5px solid #d88c3d; | |||
} | |||
.pm-blue { | |||
background-color: #eef4f9; | |||
border-left: 5px solid #4a6fa5; /* Slate Blue accent */ | |||
} | |||
.pm-gold { | |||
background-color: #fdf5e6; | |||
border-left: 5px solid #b48a52; | |||
} | |||
.pm-box:hover { | |||
box-shadow: 0 4px 10px rgba(0,0,0,0.08); | |||
} | } | ||
.pm-box-label { | .pm-box-label { | ||
font-weight: | font-weight: 600; | ||
font-size: 1. | font-size: 1.2em; | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
color: # | color: #2c3e50; | ||
border-bottom: 1px solid #ccc; | border-bottom: 1px solid #ccc; | ||
padding-bottom: 0.25em; | padding-bottom: 0.25em; | ||
} | } | ||
.pm-highlight { | |||
.pm-box { | border-color: #4a6fa5; | ||
background-color: #eef2f7; | |||
} | } | ||
.pm-news-list { | |||
list-style: none; | |||
padding-left: 0; | |||
margin-top: 1em; | |||
} | |||
.pm-news-list li { | |||
margin-bottom: 1em; | |||
padding-left: 1em; | |||
border-left: 3px solid #4a6fa5; | |||
position: relative; | |||
} | |||
.pm-news-date { | |||
font-weight: bold; | |||
color: #4a6fa5; | |||
display: block; | |||
margin-bottom: 0.25em; | |||
} | |||
.pm-site-intro { | |||
text-align: center; | |||
margin-bottom: 2em; | |||
} | |||
.pm-site-intro h2 { | |||
font-size: 1.8em; | |||
color: #2c3e50; | |||
margin-bottom: 0.25em; | |||
} | |||
/* Works & Days Ad */ | |||
.works-days-callout { | |||
background-color: #eef4f9; /* same pale blue */ | |||
border-left: 5px solid #4a6fa5; | |||
margin-top: 3em; | |||
} | |||
.works-days-callout .pm-box-label { | |||
font-size: 1.3em; | |||
color: #2c3e50; | |||
} | |||
.works-days-callout em { | |||
font-style: italic; | |||
font-weight: bold; | |||
} | } | ||