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 |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* outer padding inside the table cell */ | ||
.sv-highlights- | .sv-highlights-pad{padding:.75rem} | ||
} | |||
/* | /* grid: fixed cols; rtl so newest appears leftmost while preserving source order */ | ||
.sv- | .sv-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start;width:100%;direction:rtl} | ||
} | |||
/* | /* empty state */ | ||
.sv- | .sv-empty{grid-column:1/-1;opacity:.75;text-align:center;padding:1rem;direction:ltr} | ||
} | |||
/* | /* remove duplicate chrome; table provides border/radius/shadow */ | ||
.sv- | .sv-highlights-wrap{border:0;border-radius:0;padding:0;background:transparent} | ||
} | |||
.sv- | /* card */ | ||
.sv-card{text-align:left;padding:1rem 1.5rem .75rem;direction:ltr;border-radius:8px;min-width:0;word-wrap:break-word} | |||
} | |||
.sv-card__date { | /* bits */ | ||
.sv-card__title{font-size:1.4em;font-weight:700;line-height:1.2;margin:-.2em 0 .3em 0} | |||
.sv-card__divider{height:1px;background:rgba(55,43,84,.25);margin:.35rem 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} | |||
} | |||
.sv- | /* tablet: 2 cols, hide 3rd+ */ | ||
@media (max-width:1024px){ | |||
.sv-highlights{grid-template-columns:repeat(2,1fr)} | |||
.sv-highlights>.sv-card:nth-of-type(n+3){display:none} | |||
} | } | ||
/* | /* mobile: 1 col, show newest only and restore LTR */ | ||
@media (max-width: 640px) { | @media (max-width:640px){ | ||
.sv-highlights { | .sv-highlights{grid-template-columns:1fr;direction:ltr} | ||
.sv-highlights>.sv-card:nth-of-type(n+2){display:none} | |||
.sv-highlights > .sv-card: | |||
} | } | ||
Latest revision as of 13:26, 3 October 2025
/* outer padding inside the table cell */
.sv-highlights-pad{padding:.75rem}
/* grid: fixed cols; rtl so newest appears leftmost while preserving source order */
.sv-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start;width:100%;direction:rtl}
/* empty state */
.sv-empty{grid-column:1/-1;opacity:.75;text-align:center;padding:1rem;direction:ltr}
/* remove duplicate chrome; table provides border/radius/shadow */
.sv-highlights-wrap{border:0;border-radius:0;padding:0;background:transparent}
/* card */
.sv-card{text-align:left;padding:1rem 1.5rem .75rem;direction:ltr;border-radius:8px;min-width:0;word-wrap:break-word}
/* bits */
.sv-card__title{font-size:1.4em;font-weight:700;line-height:1.2;margin:-.2em 0 .3em 0}
.sv-card__divider{height:1px;background:rgba(55,43,84,.25);margin:.35rem 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}
/* tablet: 2 cols, hide 3rd+ */
@media (max-width:1024px){
.sv-highlights{grid-template-columns:repeat(2,1fr)}
.sv-highlights>.sv-card:nth-of-type(n+3){display:none}
}
/* mobile: 1 col, show newest only and restore LTR */
@media (max-width:640px){
.sv-highlights{grid-template-columns:1fr;direction:ltr}
.sv-highlights>.sv-card:nth-of-type(n+2){display:none}
}