Cyberia Computer Club Unified Theme

Content design

The following CSS variables apply to various elements and you can easily change these defaults by overriding them.

:root {
  --radius: 3px;
  --content-width: 72ch;
  
  --border-color: var(--grey);
  --border: 1px solid var(--border-color);
  --border-muted-color: var(--bg-grey-4);
  --border-muted: 1px solid var(--border-muted-color);
  --border-strong-color: var(--fg-grey-4);
  --border-strong: 1px solid var(--border-strong-color);
  --border-dashed-color: var(--fg-grey-4);
  --border-dashed: 1px dashed var(--border-strong-color);
  
  --input-focus: var(--purple);
  --placeholder: var(--grey);

  --link: var(--fg-blue-4);
  --link-active: var(--yellow);
  --link-broken: var(--fg-red-4);
  --link-hover: var(--fg-blue-3);
  --link-visited: var(--fg-yellow-4);
  
  --code-bg: var(--bg-grey-2);
  --code-fg: var(--fg);
}

Form inputs

boop

Lists

  1. item one
    • ..has a sub-entry
    • or two!
  2. item two

Primary heading

Secondary heading

Tertiary heading

Quaternary heading

Quintary heading
Senary heading

Lead paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil voluptas quidem, eligendi cupiditate voluptatem modi nesciunt labore fuga.

Normal paragraph. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Optio odit eligendi fugiat veniam perspiciatis consectetur aliquam, saepe autem natus voluptate, delectus deleniti aspernatur commodi nobis dolores corrupti voluptates eveniet tempora.

Blockquote. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea delectus, ipsa? Odit dignissimos sequi libero ea soluta, reprehenderit facere quibusdam delectus, amet perspiciatis error fuga placeat qui, et doloribus sit.

Bold Italic Strikethrough