citrine.css

CSS reset that's expressive and fun. Primarily targets semantic HTML, while also adding a couple of classes for things that are hard to do without them.

Source code on Codeberg.

This thing is still in early development, expect some rough edges.

Why It Looks the Way It Does

Personally, I'm sick of flat, sterile, dead UIs all over the place, and I've always liked skeuomorphism because it's fun, alive, and pleasant to look at. While it's not very feasible to make things look overly realistic, some edge highlights, nice shadows, and a vibrant palette make a big difference. The design system that Citrine uses is made of slightly frosted colored acrylic, everything is rounded, but the edges are not so rounded, so the edge highlight is rather thin, you can think of it as Lego bricks, fun and nice to touch. The animations are very bouncy to raise the fun level even higher. Still, the balance between fun and not being annoying is maintained. Did I succeed with this premise? I don't know, you tell me :P

How to Use

Download style.css from https://citrine.daudix.one/style.css, load it directly from there, or build it yourself by cloning the repo and running zola build, the resulting CSS will be in ./public/style.css. You can also use Dart Sass, of course, it should work.

Accent Color

For demo purposes only, usually it should be set on an html element:

<!doctype html>
<html
  lang="en"
  style="
    --accent-light-h: 254.118;
    --accent-light-s: 44%;
    --accent-light-l: 55%;
    --accent-dark-h: 19.7315;
    --accent-dark-s: 96%;
    --accent-dark-l: 70%;
  "
>
(...)
</html>

hsl(, , )

Hello everypony

I'm paragraph, and I approve this message.

List item numero uno
Blegh

// Some code idk
import(from "china" item "computer chips");

Markdown

Text can be bold, italic, ~~strikethrough~~, and ~~all at the same time~~.

Link to another site.

There should be whitespace between paragraphs.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a normal paragraph following a header.

😭😂🥺🤣❤️✨🙏😍🥰😊

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.

"Original content is original only for a few seconds before getting old"

Rule #21 of the internet

Item 1
Item 2
- Item 2.1
- Item 2.2
Item 3
Item 4

Perform step #1
Proceed to step #2
Conclude with step #3

Milk
Eggs
Flour
Coffee
Combustible lemons

Character	Show	Quotes
Derpy Hooves	My Little Pony	I just don't know what went wrong
Gir	Invader ZIM	GUESS WHO MADE WAAAAFFLES?!!
WALL-E	WALL-E	Ooooo 0.0
Taco	Inanimate Insanity	SOUR CREAM!

let highlight = true;

Description List

<dl>
<dt>Something</dt>
<dd>And its description</dd>
</dl>

Name: Godzilla
Born: 1952
Birthplace: Japan
Color: Green

Form Input

<input type="checkbox" />
<label>Checkbox</label>

Milk
Eggs
Flour
Coffee
Combustible lemons

With switch class:

<input class="switch" type="checkbox" />
<label>Checkbox</label>

Milk
Eggs
Flour
Coffee
Combustible lemons

With switch and big classes:

<input class="switch big" type="checkbox" />
<label>Checkbox</label>

Milk
Eggs
Flour
Coffee
Combustible lemons

With radio type:

<input type="radio" name="test" />
<label>Radio</label>

Milk
Eggs
Flour
Coffee
Combustible lemons

With color type:

<label>Color:</label>
<input type="color" value="#000000" />

Color:

Disabled:

With range type:

<input type="range" max="100" value="33">

Figure Captions

<figure>
  -> Whatever content <-
  <figcaption>Caption of content above</figcaption>
</figure>

The Office where Stanley works, it has yellow floor and beige walls

Accordion

<details>
  <summary>Accordion title</summary>
  -> Contents here <-
</details>

Reveal accordion

Get it? I know, it's an awful pun.

Side Comment

<small>Small, cute text that doesn't catch attention.</small>

Small, cute text that doesn't catch attention.

Abbreviation

<abbr title="American Standard Code for Information Interchange">ASCII</abbr>

The ASCII art is awesome!

Aside

<aside>

-> Contents here <-
</aside>

A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.

As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.

Keyboard Input

<kbd>⌘ Command</kbd>.

To switch the keyboard layout, press ⌘ Super + Space.

Mark Text

<mark>Marked text</mark>

You know what? I'm gonna say some very important stuff, so important that even bold is not enough.

Deleted and Inserted Text

<del>Something deleted</del> <ins>Something added</ins>

~~Text deleted~~ Text added

Progress Indicator

<progress></progress>
<progress value="33" max="100"></progress>

Sample Output

<samp>Sample Output</samp>

Sample Output

Inline Quotation

<q>Someone said something</q>

Blah blah Inline Quote hmm.

Unarticulated Annotation

<u>Gmarrar mitsakes</u>

Yeet the sus drip while vibing with the TikTok fam on a cap-free boomerang.

Titles

<strong class="title">Title-Looking Text</strong>

Title-Looking Text

External Links

<a class="external" href="https://example.org">External link</a>

Link to site

Spoilers

<span class="spoiler">Some spoiler</span>

You know, Ametrines are very pretty. I know, crazy.

With solid class:

<span class="spoiler solid">Some spoiler</span>

You know, Ametrines are very pretty. I know, crazy.

Buttons

<div class="buttons">
  <a href="#top">Go to Top</a>
  <a class="suggested external" href="https://example.org">Example</a>
</div>

Go to Top Example

With centered and big classes:

<div class="buttons centered big">
  <button class="suggested">Do Something…</button>
</div>

Standalone:

<button class="suggested">Do Something…</button>
<a class="button external" href="https://example.org">Example</a>

Example

Subtle:

<button class="subtle suggested">Do Something…</button>
<a class="button subtle external" href="https://example.org">Example</a>

Example

Disabled:

<button disabled class="suggested">Do Something…</button>
<a aria-disabled="true" class="button external" href="https://example.org">Example</a>

Example

Busy:

<button aria-busy="true">Do Something…</button>
<a aria-busy="true" class="button external" href="https://example.org">Example</a>

Example