This is the illustration of omarek common css.

Note that look of this page changes depending on your system color scheme setting (light/dark).

Also, there is a 'wide look'.

Heading1

Paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur in velit non modi quisquam officia necessitatibus porro at quasi totam.

Heading2

Heading3

Heading4

Heading5
Heading6

Links

let link be this way
let 'new tab' link be this way
let download link be this way

Other text decorations

let computer key be this way
let // inline computer code be this way

let blockquoted text be this way
This is block preformatted text.
    U see?
             (it is a long long long long long long long long long long long long long long row)

The box

These pragraphs are in the box.

To use it, make <div> with .box.

If you will to wrap part of webpage in <div> and do not break the spacing, use .flow.

Like this…

Horizontal ruler

Lists

Unordered

Ordered

  1. Ordered list item
  2. Ordered list item
    1. Nested ordered list item
    2. Nested ordered list item
    3. Nested ordered list item
  3. Ordered list item
    with multiple lines
  4. Ordered list item

Description

Description term
Description detail
Another description term
Another description detail

Images

Throwing in <img>

Computer with a blue screen

Using HTML5 <figure> and <figcaption>

Computer with a blue screen
Computer with a blue screen

Not loaded image

This image could not be loaded, this is [alt] text

Grid system

Grid system is simple; .grid-2 creates grid with 2 columns, .grid-3 with 3, .grid-4 with 4 and .grid-responsive lowers the amount of columns if width of one column is less than certain value until 1 column is reached.

First image illustrates how it is possible to use <a> within .image-grid. This class sets font-size: 0 so that <a target="_blank"> decoration does not cause troubles in vertical spacing.

.grid-2

Computer Computer Computer Computer

.grid-3

Computer Computer Computer

.grid-4

Computer Computer Computer Computer

.grid-responsive

Computer Computer Computer Computer Computer Computer

Interactive elements

Summary #1

(Details #1)

Use <blockquote> to wrap rest of content (like this) to make it stand out more.

Summary #2

(Details #2)

Use .box on <details> combined with <section> in <details> (like this) to make it stand out more.

Wide look

You can apply .body-wide to <body> for wider look. Be careful with images – .grid-responsive comes handy then.

Use .narrow to child elements of <body> which should not span. They will be aligned left.

Aligning text

Use .center
to align text in the center

Use .right
to align text right

Dark mode

Dark mode is automatically set according to system configuration.

Dimming in dark mode

Apply .dark-mode-dim to elements which should be dimmed in dark mode.

Inverting in dark mode

It is possible to use .dark-mode-invert on elements which should be inverted when dark mode is turned on. It is especially useful with b/w images.

Examples

regular image | dimmed image | inverted image | dimmed inverted image

Printing

Use .noprint on elements which should be hidden in print.

Bonus: forgotten tags which are not custom-styled, yet work well with this style sheet