Template:PatchHighlights/styles.css: Difference between revisions

Revision as of 03:16, 2 October 2025

/* container */
.sv-highlights-wrap{border:2px solid #372b54;border-radius:10px;padding:.75rem;background:transparent}

/* grid: fixed cols, no wrap */
.sv-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start;width:100%;direction:rtl}

/* empty */
.sv-empty{grid-column:1/-1;opacity:.75;text-align:center;padding:1rem;direction:ltr}

/* 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 */
@media (max-width:640px){
  .sv-highlights{grid-template-columns:1fr;direction:ltr}
  .sv-highlights>.sv-card:nth-of-type(n+2){display:none}
}

@@ Line 1: / Line 1: @@
 /* container */
-.sv-highlights-wrap {
+.sv-highlights-wrap{border:2px solid #372b54;border-radius:10px;padding:.75rem;background:transparent}
-  border: 2px solid #372b54;
-  border-radius: 10px;
-  padding: 0.75rem;
-  background: transparent;
-}
-/* grid */
+/* grid: fixed cols, no wrap */
-.sv-highlights {
+.sv-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start;width:100%;direction:rtl}
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 1rem;
-  grid-auto-rows: auto;
-  align-items: start;
-  width: 100%;
-  direction: rtl;
-}
 /* empty */
-.sv-empty {
+.sv-empty{grid-column:1/-1;opacity:.75;text-align:center;padding:1rem;direction:ltr}
-  grid-column: 1 / -1;
-  opacity: .75;
-  text-align: center;
-  padding: 1rem;
-  direction: ltr;
-}
 /* card */
-.sv-card {
+.sv-card{text-align:left;padding:1rem 1.5rem .75rem;direction:ltr;border-radius:8px;min-width:0;word-wrap:break-word}
-  text-align: left;
-  padding: 1rem 1.5rem 0.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: -0.2em 0 0.3em 0; }
+.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__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__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-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 */
+/* mobile: 1 col, show newest only */
-@media (max-width: 640px) {
+@media (max-width:640px){
-   .sv-highlights { grid-template-columns: 1fr; direction: ltr; }
+   .sv-highlights{grid-template-columns:1fr;direction:ltr}
-   .sv-highlights > div.sv-card:nth-of-type(n+2) { display: none; }
+   .sv-highlights>.sv-card:nth-of-type(n+2){display:none}
 }