OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Inverted

Apply this to a container to flip all the colors > light will become dark, dark will be light.

Syntax: .inverted
SCSS: _inverted.scss

Inverted is whitish on blackish

CSS is awesome
div.box
.active
a.box
mini-info
progress
meter

Local theming

Already in use
Weak password
striped
loading

The .article wrapper class gives you reading-optimized styling for articles and blog posts. It’s made for Markdown generated content like from Jekyll or Grav, but it will also work with any CMS. —Inside here:

  1. Text is optimized for readability
  2. Headlines have more spacing
  • Lists have a hanging punctuation
    • Nested lists work as well

p, ol, ol, dl, table, blockquote, a, img, hr, pre, code, i — all work well


Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12

h1: Headline level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vitae dicta amet nobis porro laudantium accusantium, velit minima vel, aliquam veniam atque perferendis maxime earum autem dolor, dolore fugit iure?

Pasting code from the Internet into production code is like chewing gum found in the street.

h2: Headline level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odio assumenda, veritatis tempora enim nemo ipsum quidem, porro et voluptate animi minus ad commodi architecto recusandae eveniet, accusamus rem. Dolor!

# Never execute:
$ rmf *

h3: Headline level 3 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

h4: Headline level 4 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

h5: Headline level 5 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

That’s all she wrote.

Normal is blackish on whitish

CSS is awesome
div.box
.active
a.box
mini-info
progress
meter

Local theming

Already in use
Weak password
striped
loading

The .article wrapper class gives you reading-optimized styling for articles and blog posts. It’s made for Markdown generated content like from Jekyll or Grav, but it will also work with any CMS. —Inside here:

  1. Text is optimized for readability
  2. Headlines have more spacing
  • Lists have a hanging punctuation
    • Nested lists work as well

p, ol, ol, dl, table, blockquote, a, img, hr, pre, code, i — all work well


Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12

h1: Headline level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vitae dicta amet nobis porro laudantium accusantium, velit minima vel, aliquam veniam atque perferendis maxime earum autem dolor, dolore fugit iure?

Pasting code from the Internet into production code is like chewing gum found in the street.

h2: Headline level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odio assumenda, veritatis tempora enim nemo ipsum quidem, porro et voluptate animi minus ad commodi architecto recusandae eveniet, accusamus rem. Dolor!

# Never execute:
$ rmf *

h3: Headline level 3 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

h4: Headline level 4 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

h5: Headline level 5 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

That’s all she wrote.