Template:PortalCurrentEvents/styles.css: Difference between revisions
Template page
More actions
Eloise Zomia (talk | contribs) Created page with "→============================================: →CURRENT EVENTS PORTAL LAYOUT: →============================================: .portal-current-wrapper { max-width: 1100px; margin: 0 auto 1.5rem; padding: 0 0.75rem; } →Header: .portal-current-header { background: #f7faf6; border-radius: 10px; border: 1px solid #c5d2c0; padding: 0.9rem 1rem; margin-bottom: 1rem; } .portal-current-eyebrow { font-size: 0.75rem; text-t..." |
Eloise Zomia (talk | contribs) No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* ============================================ */ | /* ============================================ */ | ||
/* CURRENT EVENTS PORTAL LAYOUT */ | /* CURRENT EVENTS PORTAL LAYOUT (LANDRACE.WIKI) */ | ||
/* ============================================ */ | /* ============================================ */ | ||
. | .p-current-events { | ||
max-width: 1100px; | max-width: 1100px; | ||
margin: 0 auto 1.5rem; | margin: 0 auto 1.5rem; | ||
padding: 0 0.75rem; | padding: 0 0.75rem; | ||
font-size: 0.9rem; | |||
} | } | ||
/* Header */ | /* Header */ | ||
. | .p-current-events-header { | ||
background: #f7faf6; | background: #f7faf6; | ||
border-radius: 10px; | border-radius: 10px; | ||
border: 1px solid #c5d2c0; | border: 1px solid #c5d2c0; | ||
padding: 0.9rem 1rem; | padding: 0.9rem 1rem; | ||
margin-bottom: | margin-bottom: 0.9rem; | ||
} | } | ||
. | .p-current-events-eyebrow { | ||
font-size: 0.75rem; | font-size: 0.75rem; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
| Line 28: | Line 29: | ||
} | } | ||
. | .p-current-events-title { | ||
font-size: 1.5rem; | font-size: 1.5rem; | ||
margin: 0 0 0.25rem; | margin: 0 0 0.25rem; | ||
| Line 34: | Line 35: | ||
} | } | ||
. | .p-current-events-sub { | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
margin: 0 0 0.4rem; | margin: 0 0 0.4rem; | ||
| Line 40: | Line 41: | ||
} | } | ||
. | .p-current-events-nav { | ||
font-size: 0.8rem; | font-size: 0.8rem; | ||
color: #4b5f3c; | color: #4b5f3c; | ||
} | } | ||
. | .p-current-events-nav a { | ||
color: #324625; | color: #324625; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
. | .p-current-events-nav a:hover { | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
/* | /* Headlines strip */ | ||
.p-current-events-headlines { | |||
background: #ffffff; | |||
border-radius: 8px; | |||
border: 1px solid #d2ddce; | |||
padding: 0.6rem 0.9rem 0.65rem; | |||
margin-bottom: 0.9rem; | |||
} | |||
.p-current-events-headlines-title { | |||
font-size: 0.8rem; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
color: #60724f; | |||
margin: 0 0 0.25rem; | |||
font-weight: 600; | |||
} | |||
.p-current-events-headlines-list { | |||
margin: 0; | |||
padding-left: 1.1rem; | |||
font-size: 0.85rem; | |||
color: #243220; | |||
} | |||
.p-current-events-headlines-list li { | |||
margin-bottom: 0.1rem; | |||
} | |||
/* Main two-column layout */ | |||
. | .p-current-events-main { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1.2fr); | ||
gap: 0.9rem; | gap: 0.9rem; | ||
margin-bottom: 1. | margin-bottom: 1.1rem; | ||
align-items: flex-start; | |||
} | } | ||
. | /* Left: event feed */ | ||
.p-current-events-events { | |||
background: #ffffff; | background: #ffffff; | ||
border-radius: 8px; | |||
border: 1px solid #d2ddce; | border: 1px solid #d2ddce; | ||
padding: 0.8rem 0.9rem 0.9rem; | |||
padding: 0.8rem 0.9rem 0. | |||
} | } | ||
. | .p-current-events-section-title { | ||
font-size: 1rem; | font-size: 1rem; | ||
margin: 0 0 0. | margin: 0 0 0.35rem; | ||
color: #26351a; | color: #26351a; | ||
} | } | ||
. | .p-current-events-section-sub { | ||
font-size: 0.8rem; | font-size: 0.8rem; | ||
margin: 0 0 0.5rem; | margin: 0 0 0.5rem; | ||
| Line 83: | Line 116: | ||
} | } | ||
. | .p-current-events-list { | ||
margin: 0; | margin: 0; | ||
padding-left: 1.1rem; | padding-left: 1.1rem; | ||
| Line 90: | Line 123: | ||
} | } | ||
. | .p-current-events-list li { | ||
margin-bottom: 0.25rem; | margin-bottom: 0.25rem; | ||
} | } | ||
. | /* Right: calendar + sidebar */ | ||
display: | |||
font-size: 0. | .p-current-events-calside { | ||
color: # | display: flex; | ||
flex-direction: column; | |||
gap: 0.75rem; | |||
} | |||
.p-current-events-box { | |||
background: #ffffff; | |||
border-radius: 8px; | |||
border: 1px solid #d2ddce; | |||
padding: 0.7rem 0.85rem 0.8rem; | |||
font-size: 0.82rem; | |||
color: #243220; | |||
} | |||
.p-current-events-box h3 { | |||
font-size: 0.9rem; | |||
margin: 0 0 0.3rem; | |||
color: #26351a; | |||
} | |||
.p-current-events-box ul { | |||
margin: 0; | |||
padding-left: 1.1rem; | |||
} | |||
.p-current-events-box li { | |||
margin-bottom: 0.2rem; | |||
} | } | ||
/* | /* Events-by-month index */ | ||
. | .p-current-events-months { | ||
background: #f7faf6; | background: #f7faf6; | ||
border-radius: 8px; | border-radius: 8px; | ||
padding: 0.7rem 0.9rem; | border: 1px solid #c5d2c0; | ||
color: # | padding: 0.7rem 0.9rem 0.8rem; | ||
font-size: 0.82rem; | |||
color: #243220; | |||
} | |||
.p-current-events-months h3 { | |||
font-size: 0.9rem; | |||
margin: 0 0 0.3rem; | |||
color: #26351a; | |||
} | |||
.p-current-events-months-list { | |||
margin: 0; | |||
padding-left: 1.1rem; | |||
} | } | ||
| Line 114: | Line 184: | ||
@media (max-width: 900px) { | @media (max-width: 900px) { | ||
. | .p-current-events-main { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
} | } | ||
Revision as of 14:55, 20 November 2025
/* ============================================ */
/* CURRENT EVENTS PORTAL LAYOUT (LANDRACE.WIKI) */
/* ============================================ */
.p-current-events {
max-width: 1100px;
margin: 0 auto 1.5rem;
padding: 0 0.75rem;
font-size: 0.9rem;
}
/* Header */
.p-current-events-header {
background: #f7faf6;
border-radius: 10px;
border: 1px solid #c5d2c0;
padding: 0.9rem 1rem;
margin-bottom: 0.9rem;
}
.p-current-events-eyebrow {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #60724f;
font-weight: 600;
margin: 0 0 0.15rem;
}
.p-current-events-title {
font-size: 1.5rem;
margin: 0 0 0.25rem;
color: #233017;
}
.p-current-events-sub {
font-size: 0.9rem;
margin: 0 0 0.4rem;
color: #55614b;
}
.p-current-events-nav {
font-size: 0.8rem;
color: #4b5f3c;
}
.p-current-events-nav a {
color: #324625;
text-decoration: none;
}
.p-current-events-nav a:hover {
text-decoration: underline;
}
/* Headlines strip */
.p-current-events-headlines {
background: #ffffff;
border-radius: 8px;
border: 1px solid #d2ddce;
padding: 0.6rem 0.9rem 0.65rem;
margin-bottom: 0.9rem;
}
.p-current-events-headlines-title {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #60724f;
margin: 0 0 0.25rem;
font-weight: 600;
}
.p-current-events-headlines-list {
margin: 0;
padding-left: 1.1rem;
font-size: 0.85rem;
color: #243220;
}
.p-current-events-headlines-list li {
margin-bottom: 0.1rem;
}
/* Main two-column layout */
.p-current-events-main {
display: grid;
grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1.2fr);
gap: 0.9rem;
margin-bottom: 1.1rem;
align-items: flex-start;
}
/* Left: event feed */
.p-current-events-events {
background: #ffffff;
border-radius: 8px;
border: 1px solid #d2ddce;
padding: 0.8rem 0.9rem 0.9rem;
}
.p-current-events-section-title {
font-size: 1rem;
margin: 0 0 0.35rem;
color: #26351a;
}
.p-current-events-section-sub {
font-size: 0.8rem;
margin: 0 0 0.5rem;
color: #606f5a;
}
.p-current-events-list {
margin: 0;
padding-left: 1.1rem;
font-size: 0.85rem;
color: #243220;
}
.p-current-events-list li {
margin-bottom: 0.25rem;
}
/* Right: calendar + sidebar */
.p-current-events-calside {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.p-current-events-box {
background: #ffffff;
border-radius: 8px;
border: 1px solid #d2ddce;
padding: 0.7rem 0.85rem 0.8rem;
font-size: 0.82rem;
color: #243220;
}
.p-current-events-box h3 {
font-size: 0.9rem;
margin: 0 0 0.3rem;
color: #26351a;
}
.p-current-events-box ul {
margin: 0;
padding-left: 1.1rem;
}
.p-current-events-box li {
margin-bottom: 0.2rem;
}
/* Events-by-month index */
.p-current-events-months {
background: #f7faf6;
border-radius: 8px;
border: 1px solid #c5d2c0;
padding: 0.7rem 0.9rem 0.8rem;
font-size: 0.82rem;
color: #243220;
}
.p-current-events-months h3 {
font-size: 0.9rem;
margin: 0 0 0.3rem;
color: #26351a;
}
.p-current-events-months-list {
margin: 0;
padding-left: 1.1rem;
}
/* Responsive */
@media (max-width: 900px) {
.p-current-events-main {
grid-template-columns: 1fr;
}
}