Template:PatchHighlights/styles.css: Difference between revisions
Template page
More actions
Created page with "→Container (matches PatchNav border vibe): .sv-highlights-wrap { border: 2px solid #372b54; border-radius: 10px; padding: 0.75rem; background: transparent; } →Grid: 3 columns desktop: .sv-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; grid-auto-rows: auto; align-items: start; width: 100%; direction: rtl; →keeps visual order consistent with your previous layout: } →Empty state inside grid: .sv-empty {..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* Bordered container */ | ||
.sv-highlights-wrap { | .sv-highlights-wrap { | ||
border: 2px solid #372b54; | border: 2px solid #372b54; | ||
| Line 7: | Line 7: | ||
} | } | ||
/* | /* Responsive grid: naturally flows 3 → 2 → 1 as space shrinks */ | ||
.sv-highlights { | .sv-highlights { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | ||
gap: 1rem; | gap: 1rem; | ||
grid-auto-rows: auto; | grid-auto-rows: auto; | ||
align-items: start; | align-items: start; | ||
width: 100%; | width: 100%; | ||
} | } | ||
/* Empty state | /* Empty state */ | ||
.sv-empty { | .sv-empty { | ||
grid-column: 1 / -1; | grid-column: 1 / -1; | ||
| Line 33: | Line 32: | ||
direction: ltr; | direction: ltr; | ||
border-radius: 8px; | border-radius: 8px; | ||
min-width: 0; | |||
word-wrap: break-word; | |||
} | } | ||
/* Card | /* Card pieces */ | ||
.sv-card__title { | .sv-card__title { | ||
font-size: 1.4em; | font-size: 1.4em; | ||
| Line 42: | Line 43: | ||
margin: -0.2em 0 0.3em 0; | margin: -0.2em 0 0.3em 0; | ||
} | } | ||
.sv-card__divider { | .sv-card__divider { | ||
height: 1px; | height: 1px; | ||
| Line 48: | Line 48: | ||
margin: 0.35rem 0 0.5rem 0; | margin: 0.35rem 0 0.5rem 0; | ||
} | } | ||
.sv-card__date { | .sv-card__date { | ||
margin: .1em 0; | margin: .1em 0; | ||
| Line 55: | Line 54: | ||
color: var(--text-color); | color: var(--text-color); | ||
} | } | ||
.sv-card__blurb { | .sv-card__blurb { | ||
font-size: .9em; | font-size: .9em; | ||
| Line 63: | Line 61: | ||
} | } | ||
/* Mobile: | /* Mobile: 1 column and hide all but the newest card. */ | ||
@media (max-width: 640px) { | @media (max-width: 640px) { | ||
.sv-highlights { | .sv-highlights { grid-template-columns: 1fr; } | ||
.sv-highlights > div.sv-card:nth-of-type(n+2) { display: none; } | |||
.sv-highlights > .sv-card: | |||
} | } | ||
Revision as of 03:12, 2 October 2025
/* Bordered container */
.sv-highlights-wrap {
border: 2px solid #372b54;
border-radius: 10px;
padding: 0.75rem;
background: transparent;
}
/* Responsive grid: naturally flows 3 → 2 → 1 as space shrinks */
.sv-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
grid-auto-rows: auto;
align-items: start;
width: 100%;
}
/* Empty state */
.sv-empty {
grid-column: 1 / -1;
opacity: .75;
text-align: center;
padding: 1rem;
direction: ltr;
}
/* Card base */
.sv-card {
text-align: left;
padding: 1rem 1.5rem 0.75rem;
direction: ltr;
border-radius: 8px;
min-width: 0;
word-wrap: break-word;
}
/* Card pieces */
.sv-card__title {
font-size: 1.4em;
font-weight: 700;
line-height: 1.2;
margin: -0.2em 0 0.3em 0;
}
.sv-card__divider {
height: 1px;
background: rgba(55, 43, 84, 0.25);
margin: 0.35rem 0 0.5rem 0;
}
.sv-card__date {
margin: .1em 0;
font-size: .85em;
font-style: italic;
color: var(--text-color);
}
.sv-card__blurb {
font-size: .9em;
line-height: 1.75em;
color: var(--text-color);
margin: .3em 0 0 0;
}
/* Mobile: 1 column and hide all but the newest card. */
@media (max-width: 640px) {
.sv-highlights { grid-template-columns: 1fr; }
.sv-highlights > div.sv-card:nth-of-type(n+2) { display: none; }
}