🎨
Styleguide
Design-system – ask-service.dk
📝 Reference ← Forside

Styleguide

Skemaet alle sider på ask-service.dk skal bygges efter. Kopiér HTML’en herunder i stedet for at finde på ny styling.

Grundreglen: hver side linker til /site.css og skriver ikke egne farver, afstande eller skriftstørrelser. Skal en side have noget helt særligt, lægges det i en lille <style>-blok på siden — men brug altid variablerne, fx var(--accent).
Sideskelet Farver Typografi Topbar Badges Status Kort Paneler Tabeller Nøgletal Noter Knapper Beskedside

🧩 Sideskelet

Sådan starter enhver ny side. Topbar øverst, indhold i .page, footer nederst.

<!doctype html>
<html lang="da">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Sidens navn – ask-service.dk</title>
  <link rel="stylesheet" href="/site.css">
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
  <div class="topbar"> ... </div>
  <div class="page">
    <div class="page-header">
      <h1>Overskrift</h1>
      <p class="lead">Kort forklaring.</p>
    </div>
    ... indhold ...
  </div>
  <footer class="site-footer">ask-service.dk</footer>
</body>
</html>
Baggrundsbillede: kun forsiden bruger det. Sæt class="has-bg" på <body> og indlæg <div class="bg-overlay"></div> som første element. Indholdssider med tabeller skal ikke have billede — det gør dem svære at læse.

🌈 Farver

Brug altid variabelnavnet, aldrig hex-koden direkte.

Flader

--bg
#0f1117
--surface
#1a1d27
--surface2
#222536
--border
#2e3250

Accent

--accent
#5b6cf9
--accent2
#38bdf8
gradient
accent → accent2

Status

--green
kører / ok
--yellow
LAN / advarsel
--orange
problem
--red
nede / fejl
--purple
info
--muted
slukket / dæmpet

📄 Typografi

H1 — sidens titel

H2 — sektion

H3 — underafsnit

Brødtekst i normal størrelse. Her er et link, noget kode og lidt monospace.

Dæmpet hjælpetekst med class="muted small".

Vis HTML
<h1>Sidens titel</h1>
<h2>Sektion</h2>
<p class="muted small">Dæmpet hjælpetekst</p>
<code>kode</code>  <span class="mono">monospace</span>

📋 Topbar

Samme topbar på alle sider — det er den der binder dem sammen. Ikon + titel til venstre, badges til højre. Forside-badgen skal altid være yderst til højre.

▶️
Semaphore
Ansible UI – ask-service.dk
🔒 LAN only ← Forside
Vis HTML
<div class="topbar">
  <div class="topbar-left">
    <div class="topbar-icon">&#9654;&#65039;</div>
    <div>
      <div class="topbar-title">Semaphore</div>
      <div class="topbar-sub">Ansible UI – ask-service.dk</div>
    </div>
  </div>
  <div class="topbar-right">
    <span class="badge badge-lan">&#128274; LAN only</span>
    <a href="/" class="badge badge-home">&larr; Forside</a>
  </div>
</div>

🏷️ Badges

Små mærkater til status og navigation. Kan være <span> eller <a>.

← Forside Andet link 🔒 LAN only 🔓 Læs kun fra WAN ● Kører ● Advarsel ● Nede 📝 Info Slukket
Vis HTML
<a href="/" class="badge badge-home">&larr; Forside</a>
<a href="#" class="badge badge-link">Andet link</a>
<span class="badge badge-lan">&#128274; LAN only</span>
<span class="badge badge-readonly">&#128275; Læs kun fra WAN</span>
<span class="badge badge-ok">&#9679; Kører</span>
<span class="badge badge-warn">&#9679; Advarsel</span>
<span class="badge badge-err">&#9679; Nede</span>
<span class="badge badge-info">&#128221; Info</span>
<span class="badge badge-neutral">Slukket</span>

🔴 Statusprikker

Til tabeller og lister hvor en badge fylder for meget.

Kører Advarsel Nede Slukket
Vis HTML
<span class="dot dot-ok"></span>Kører
<span class="dot dot-warn"></span>Advarsel
<span class="dot dot-err"></span>Nede
<span class="dot dot-off"></span>Slukket

🃏 Kort

Bruges til forsidens gitter af genveje. På sider med baggrundsbillede bliver de automatisk til glas.

📁
Filer
Download-side med filer fra kDrive. Søgefunktion og direkte download.
Åbn →
⚡
Komponenter 🔒 LAN
Svagstrømslaboratorium. Browse og søg fra WAN.
Åbn →
Vis HTML
<div class="card-grid">
  <a href="/filer" class="card">
    <div class="card-icon">&#128193;</div>
    <div class="card-title">Filer</div>
    <div class="card-desc">Kort forklaring.</div>
    <div class="card-arrow">&Aring;bn &rarr;</div>
  </a>
</div>

🗃️ Paneler

Til at gruppere indhold i sektioner. Den farvede venstrekant angiver hvad sektionen handler om.

Standard

Blå kant — almindeligt indhold.

OK

Grøn kant — alt kører som det skal.

Advarsel

Gul kant — noget kræver opmærksomhed.

Fejl

Rød kant — noget er nede eller virker ikke.

Vis HTML
<div class="panel">...</div>
<div class="panel panel-ok">...</div>
<div class="panel panel-warn">...</div>
<div class="panel panel-err">...</div>
<div class="panel panel-info">...</div>

📊 Tabeller

Pak altid tabellen i .table-wrap — så kan den scrolles vandret på mobil i stedet for at sprænge siden.

NodeIPPVEStatus
pve1192.168.1.29.2.9Kører
pve2192.168.1.59.2.9Kører
pve-ibm192.168.1.223–Slukket
Vis HTML
<div class="table-wrap">
  <table class="table">
    <thead>
      <tr><th>Node</th><th>IP</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>pve1</strong></td>
        <td class="mono">192.168.1.2</td>
        <td class="nowrap"><span class="dot dot-ok"></span>Kører</td>
      </tr>
    </tbody>
  </table>
</div>

📈 Nøgletal

Til korte tal øverst på en side — antal VMs, diskforbrug, oppetid.

Noder
3
Gæster i alt
14
Disk pve1
61%
Nede
0
Vis HTML
<div class="stat-grid">
  <div class="stat">
    <div class="stat-label">Noder</div>
    <div class="stat-value">3</div>
  </div>
  <div class="stat">
    <div class="stat-label">Disk pve1</div>
    <div class="stat-value ok">61%</div>
  </div>
</div>
<!-- .stat-value kan have .ok / .warn / .err -->

💡 Noteboks

Til at fremhæve noget vigtigt i løbende tekst.

Info: generel oplysning der er værd at vide.
OK: noget der er bekræftet og virker.
Bemærk: noget der kræver opmærksomhed.
Fejl: noget der er gået galt eller ikke virker.
Vis HTML
<div class="note note-info"><strong>Info:</strong> ...</div>
<div class="note note-ok"><strong>OK:</strong> ...</div>
<div class="note note-warn"><strong>Bemærk:</strong> ...</div>
<div class="note note-err"><strong>Fejl:</strong> ...</div>

🔈 Knapper

⬇️ Primær knap Sekundær knap
Vis HTML
<a href="#" class="btn">Primær knap</a>
<a href="#" class="btn btn-ghost">Sekundær knap</a>

📩 Beskedside

Et centreret kort midt på skærmen — til „kun LAN“, „skrivebeskyttet“, 404 og lignende. Siden har ingen topbar; kortet står alene. Brugt af /lan-only.html og /readonly.html.

🔒
⚠️ Begrænset adgang

Kun intern adgang

Denne tjeneste er kun tilgængelig fra det lokale netværk.

Semaphore – Ansible UI
Tilgængelig på LAN: 192.168.1.228:3000
← Tilbage til forsiden
Vis HTML
<body>
  <div class="msg-wrap">
    <div class="msg-card">
      <div class="msg-icon">&#128274;</div>
      <span class="badge badge-lan">&#9888;&#65039; Begrænset adgang</span>
      <h1>Kun intern adgang</h1>
      <p>Kort forklaring til brugeren.</p>
      <div class="msg-box">
        <strong>Detaljer</strong><br>
        Fx hvor tjenesten så kan nås.
      </div>
      <div class="msg-links">
        <a href="https://ask-service.dk" class="badge badge-home">&larr; Tilbage til forsiden</a>
      </div>
    </div>
  </div>
</body>

📝 Huskeliste når du bygger en ny side