Sticky innholdsmeny for tutorials

Sticky innholdsmeny for tutorials

Sticky innholdsmeny for tutorials er et praktisk CSS3-eksempel for WEBoracle med fast ZIP-nedlasting og tilhørende forklaring.

Hva scriptet gjør

Scriptet er laget som et praktisk eksempel for WEBoracle-biblioteket. Det viser en avgrenset løsning som kan kopieres, testes lokalt og bygges videre på.

Når det passer

Bruk eksempelet når du trenger en liten, tydelig startfil og ønsker å se hvordan struktur, kommentarer og testpunkter kan settes opp før produksjon.

Før bruk

• Les forklaring og user manual i ZIP-pakken.
• Tilpass stier, navn og tekst til ditt prosjekt.
• Test i et lukket testmiljø før publisering.

Kode

/* Sticky innholdsmeny for tutorials */
:root {
  --wo-bg: #101827;
  --wo-surface: #172033;
  --wo-text: #f8fafc;
  --wo-muted: #b6c2d1;
  --wo-accent: #d7a14f;
  --wo-line: rgba(215, 161, 79, .28);
}

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

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

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

.wo-demo-card:focus-within,
.wo-demo-card:hover {
  outline: 3px solid color-mix(in srgb, var(--wo-accent), white 20%);
  outline-offset: 3px;
}

.wo-demo-code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #0b1020;
  border-radius: 14px;
  padding: 1rem;
}

@media print {
  .wo-demo {
    background: white;
    color: black;
    border-color: #777;
  }
}