Inverted
←Apply this to a container to flip all the colors > light will become dark, dark will be light.
.inverted
_inverted.scss
Inverted is whitish on blackish
CSS is awesome
Local theming
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:
- Text is optimized for readability
- 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
Local theming
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:
- Text is optimized for readability
- 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.