Rolig infoboks for fagtekst

Rolig infoboks for fagtekst

Rolig infoboks for fagtekst er et praktisk CSS3-eksempel for WEBoracle med ZIP-pakke, manual og forklaring.

Hva scriptet gjør

Dette scriptet er laget som et lite, avgrenset eksempel for WEBoracle-biblioteket. Det viser en konkret teknikk som kan testes lokalt før den eventuelt bygges inn i en større arbeidsflyt.

Typisk bruk

Bruk scriptet når du trenger et startpunkt som er lett å lese, lett å forklare og lett å kontrollere. Det er ikke ment som en ferdig produksjonsmodul uten lokal tilpasning.

Før publisering

• Les forklaring og user manual i ZIP-pakken.
• Tilpass filstier, tekst og eventuelle selektorer.
• Test i et lukket miljø.
• Dokumenter endringer før videre distribusjon.

Kode

/* Rolig infoboks for fagtekst */
:root {
  --wo-surface: #111827;
  --wo-panel: #1f2937;
  --wo-text: #f8fafc;
  --wo-muted: #cbd5e1;
  --wo-accent: #d7a14f;
  --wo-border: rgba(215, 161, 79, .28);
}

.wo-batch6-box {
  color: var(--wo-text);
  background: linear-gradient(135deg, var(--wo-surface), #251c12);
  border: 1px solid var(--wo-border);
  border-radius: 20px;
  padding: clamp(1rem, 3vw, 2rem);
}

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

.wo-batch6-card {
  background: var(--wo-panel);
  border: 1px solid var(--wo-border);
  border-radius: 16px;
  padding: 1rem;
  overflow-wrap: anywhere;
}

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

.wo-batch6-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.wo-batch6-muted {
  color: var(--wo-muted);
}

Eksempelet bør sees sammen med tutorialen i samme kategori, slik at kode, forklaring og testpunkter henger sammen.