Batch 8 CSS3: Kortgrid komponent

Batch 8 CSS3: Kortgrid komponent

Batch 8 CSS3: Kortgrid komponent er et praktisk eksempel for CSS3 layout og frontend med fast ZIP-standard.

Hva scriptet gjør

Scriptet gir et lite, praktisk eksempel som kan brukes i WEBoracle sitt scriptbibliotek. Det er laget for å være lett å lese, lett å teste og enkelt å tilpasse.

Hvordan det bør brukes

Last ned ZIP-pakken, les forklaring og user manual, og test filen i et lukket miljø før den tas videre. Endre stier, klassenavn og tekst slik at det passer prosjektet.

Kontrollpunkter

• Kontroller at hovedfilen finnes.
• Kontroller at credits, forklaring og manual følger med.
• Kontroller at eksempelet virker med egne data.
• Kontroller at det ikke overskriver eksisterende arbeid.

Videre arbeid

Dette er et startpunkt. Når løsningen er testet, kan den bygges ut med flere valg, bedre rapportering eller tettere integrasjon mot WEBoracle sine egne oversikter.

Kode

:root {
  --wo-bg: #0f172a;
  --wo-card: #172033;
  --wo-text: #f8fafc;
  --wo-muted: #bac7d6;
  --wo-accent: #d7a14f;
  --wo-line: rgba(215, 161, 79, .28);
}

.wo-batch8-omponent {
  background: linear-gradient(135deg, var(--wo-bg), #251b10);
  color: var(--wo-text);
  border: 1px solid var(--wo-line);
  border-radius: 22px;
  padding: clamp(1rem, 3vw, 2rem);
}

.wo-batch8-omponent .wo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.wo-batch8-omponent .wo-card {
  background: var(--wo-card);
  border: 1px solid var(--wo-line);
  border-radius: 18px;
  padding: 1rem;
  overflow-wrap: anywhere;
}

.wo-batch8-omponent a:focus-visible,
.wo-batch8-omponent button:focus-visible {
  outline: 3px solid var(--wo-accent);
  outline-offset: 4px;
}

@media (max-width: 44rem) {
  .wo-batch8-omponent {
    border-radius: 16px;
  }
}