Toggle search
Toggle menu
110
215
16
2.1K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

Template:PatchHighlights/styles.css: Difference between revisions

Template page
More actions
Newer edit →
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:
/* Container (matches PatchNav border vibe) */
/* Bordered container */
.sv-highlights-wrap {
.sv-highlights-wrap {
   border: 2px solid #372b54;
   border: 2px solid #372b54;
Line 7: Line 7:
}
}


/* Grid: 3 columns desktop */
/* Responsive grid: naturally flows 3 → 2 → 1 as space shrinks */
.sv-highlights {
.sv-highlights {
   display: grid;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   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%;
  direction: rtl; /* keeps visual order consistent with your previous layout */
}
}


/* Empty state inside grid */
/* 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 title + divider + date + blurb */
/* 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: show only the newest card, 1 column, normal LTR */
/* 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; }
    grid-template-columns: 1fr;
   .sv-highlights > div.sv-card:nth-of-type(n+2) { display: none; }
    direction: ltr;
  }
   .sv-highlights > .sv-card:not(:first-child) {
    display: none;
  }
}
}
Retrieved from "https://spiritvale.info/wiki/Template:PatchHighlights/styles.css"