CSS mynstur og typografi

Hönnunarkerfi Átaks byggir á Tailwind v4, tailwind-variants og sérsniðnum litabreytum. Hvernig allt tengist saman.

Litakort

Lita-aðskilnaður á milli hluta

Síður nota víxlandi bakgrunnsliti til aðgreiningu milli hluta. Ekkert <hr> — litir aðskilja.

bg-bg  →  bg-primary/10  →  bg-bg  →  bg-muted  →  bg-bg

Gilt mynstur: bg-bg, bg-muted, bg-primary/10, bg-bg-alt. Aldrei tveir samliggjandi hlutar með sama lit.

Contrast-reglur

• text-muted-fg (#888) má aðeins nota á ljósum bakgrunni (bg-bg, bg-muted, bg-overlay).
• Á lituðum bakgrunni eins og bg-primary/10 skal nota text-fg/70 í staðinn. Þetta gefur ~4.5:1 contrast ratio vs ~2.5:1 með text-muted-fg.

Typografi — textStyles

Einn tv() (tailwind-variants) hlutur stýrir öllum texta. Skilgreint í components/ui/text-styles.ts.

import { textStyles } from "@/components/ui/text-styles";

<h1 className={textStyles({ variant: "xxl", className: "text-primary" })}>

Stærðir

Stigveldið frá stærstu til minnstu:

Litir í textStyles

Hvar á að nota hverja

Síðutitill (h1):

// Hero á litaðri bakgrunni
<h1 className={textStyles({ variant: "xxl", className: "mb-4 text-primary" })}>

// Einfaldur titill
<h1 className={textStyles({ variant: "xxl", className: "mb-4" })}>

Hlutafyrirsögn (h2):

// Rauður/secondary accent
<h2 className={textStyles({ variant: "xl", className: "mb-8 text-secondary" })}>

// Venjulegur
<h2 className={textStyles({ variant: "xl", className: "mb-6" })}>

Meginmál:

<p className={textStyles()}>Texti hér...</p>
// Eða beint:
<p className="text-xl/relaxed text-fg sm:text-2xl/relaxed">

Inngangstexti (lead):

<p className={textStyles({ variant: "lead" })}>
<p className="text-xl text-fg/70 sm:text-2xl">

Listar:

<ul className="space-y-4 text-xl/relaxed text-fg sm:text-2xl/relaxed">
  <li>...</li>
</ul>

Síðuuppbygging

Hero-hluti (Pattern B — litaður)

Flest síður nota þetta mynstur:

<section className="bg-primary/10 px-8 py-12 lg:py-16">
  <div className="mx-auto max-w-3xl text-center">
    <h1 className={textStyles({ variant: "xxl", className: "mb-4 text-primary" })}>
      Titill
    </h1>
    <p className="text-xl text-fg/70 sm:text-2xl">
      Inngangur að efni síðunnar.
    </p>
  </div>
</section>

Efnishluti

<section className="px-8 py-12 lg:py-16">
  <div className="mx-auto max-w-4xl">
    <h2 className={textStyles({ variant: "xl", className: "mb-8 text-secondary" })}>
      Fyrirsögn
    </h2>
    <div className="space-y-6 text-xl/relaxed text-fg sm:text-2xl/relaxed">
      <p>Meginmál...</p>
    </div>
  </div>
</section>

Víxlandi hlutar

{/* bg-primary/10 */}
<section className="bg-primary/10 px-8 py-12 lg:py-16">...</section>

{/* default (bg-bg) */}
<section className="px-8 py-12 lg:py-16">...</section>

{/* bg-bg-alt eða bg-muted */}
<section className="bg-bg-alt px-8 py-12 lg:py-16">...</section>

{/* default aftur */}
<section className="px-8 py-12 lg:py-16">...</section>

Spjöld

Fréttaspjald (ArticleCard)

<div className="grid overflow-hidden rounded-xl bg-overlay shadow-sm md:grid-cols-3">
  <div className="relative aspect-video bg-muted md:aspect-auto">
    <Image ... className="object-cover" />
  </div>
  <div className="p-6 md:col-span-2">
    <p className="mb-1 text-sm text-primary">{date}</p>
    <h3 className="mb-2 text-lg font-semibold text-fg">{title}</h3>
    <p className="mb-4 line-clamp-2 text-sm text-muted-fg">{excerpt}</p>
    <Link className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
      Lesa frétt <ArrowRightIcon className="size-4" />
    </Link>
  </div>
</div>

Viðburðaspjald (EventCard)

<div className="flex flex-col overflow-hidden rounded-xl bg-white shadow-sm">
  <div className="relative flex aspect-video items-center justify-center overflow-hidden bg-gradient-to-br from-primary/10 via-primary/5 to-muted">
    <Image ... />
  </div>
  <div className="flex flex-1 flex-col p-6">
    <h2 className="mb-3 line-clamp-2 text-lg font-bold">{title}</h2>
    <div className="text-sm text-muted-fg">...</div>
    <p className="text-sm text-muted-fg">{description}</p>
  </div>
</div>

Sameiginlegt

• Öll spjöld nota rounded-xl og shadow-sm
• Bakgrunnur: bg-overlay eða bg-white
• Myndir: object-cover í aspect-video umgjörð
• Titlar á spjöldum: text-lg font-semibold eða text-lg font-bold
• Lýsing: text-sm text-muted-fg

CheckItem mynstur

Notað í lista á mörgum síðum (auðlesið, gerast félagi, o.fl.):

<li className="flex items-start gap-3">
  <CheckIcon className="mt-0.5 size-5 shrink-0 text-secondary" />
  <span>{text}</span>
</li>

Foreldri-<ul> þarf body-stærð:

<ul className="space-y-4 text-xl/relaxed text-fg sm:text-2xl/relaxed">
  <CheckItem>...</CheckItem>
</ul>

Takkar (Button)

Notum react-aria-components Button með tailwind-variants:

import { Button } from "@/components/ui/button";

<Button intent="primary" size="md" shape="pill">Styrkja</Button>

Bil og stærðir

Lárétt bil (padding)

px-8                    # Allt innihald síðu
sm:px-12 lg:px-16      # Aðeins á forsíðu

Umgjörð (container)

mx-auto max-w-3xl      # Þröngt (hero, samband)
mx-auto max-w-4xl      # Miðlungs (efnishlutar)
mx-auto max-w-6xl      # Breitt (forsíða, grid)

Lóðrétt bil

py-12 lg:py-16          # Hlutabil
mb-4                    # h1 → lead
mb-6 / mb-8             # h2 → efni
space-y-4 / space-y-6   # Milli málsgreina/lista
gap-6                   # Grid spjöld

Leturgerð

• Barlow (Google Fonts)
• Þyngdir: 400 (meginmál), 500 (medium), 600 (semibold), 700 (bold/fyrirsagnir)
• Línuhæð: 1.6 (meginmál), 1.2 (fyrirsagnir)
• text-pretty á öllum textStyles-variants

Responsive mynstur

text-xl sm:text-2xl           # Texti stækkar
py-12 lg:py-16               # Meira pláss
grid sm:grid-cols-2 lg:grid-cols-3  # Fleiri dálkar