The lobot­omized owl selector

The owl (*+*)is used here to add a top margin of 1em and remove the bottom margin of every child element of the .content container except the first.

Since h2’s are bigger than paragraphs their 1em of space is naturally bigger too. This is exaggerated by the fact that the h1 and h2’s line-height is set to 1. The other elements are set to 1.5.

.content>*+* {
    margin-top: 1em;
    margin-bottom: 0;
}

The content wrapper is spaced using this..

.content {
    width: min(760px, 100% - 4rem);
    margin-inline: auto;
   }

The h1 tag uses the CSS hyphens: auto to add hyphens when needed. By adding an ­ character it also splits lobotomized where declared.

Sint commodo sit aliquip officia sint est esse laboris nisi magna irure labore. Ipsum proident deserunt voluptate cupidatat sint. Velit reprehenderit deserunt occaecat commodo irure quis duis adipisicing magna do.

Officia quis tempor magna aute do enim laborum tempor aliqua irure incididunt consequat nisi. Duis ex proident in sit aliquip nisi ea mollit exercitation voluptate sit. Sint pariatur eiusmod incididunt proident do ex sint adipisicing officia et in pariatur. Ex consequat irure fugiat ex voluptate duis pariatur anim irure enim. Aliquip pariatur laborum commodo non ullamco enim nulla aliqua consectetur tempor aliqua do in cupidatat. Id esse commodo voluptate officia adipisicing.

This is an h2 heading

Enim consequat ullamco enim non et consectetur ipsum velit dolor culpa dolor excepteur. Culpa anim ex dolore enim et irure Lorem cupidatat qui commodo id adipisicing. Do sit irure labore officia in amet eu voluptate amet amet velit ut labore sint. Velit nostrud ea nostrud ad sint ad incididunt laborum nostrud minim nulla veniam officia nostrud. Quis eiusmod nisi deserunt nisi consequat tempor commodo.

Ipsum velit amet ullamco id pariatur exercitation ut id sit nulla.

A blockquote

This is a blockquote, or rather a paragraph inside a blockquote. Velit ad nisi velit magna elit irure ea excepteur labore quis ullamco commodo elit pariatur. Ad fugiat minim esse ipsum elit duis aliqua officia elit sunt sit aliqua qui ut. Ex culpa culpa fugiat velit cillum occaecat occaecat excepteur aliqua id nulla laboris nostrud. Id cillum esse magna aliquip sint et qui fugiat duis reprehenderit aliqua dolor Lorem consectetur.

Officia exercitation aliquip excepteur laborum ullamco aute. Consequat consequat pariatur velit adipisicing. Esse labore voluptate voluptate commodo nisi et non officia cillum consequat sint voluptate. Ullamco aliquip esse est mollit sit officia dolor. Dolore quis id ullamco esse ullamco magna culpa eu excepteur amet aute mollit. Minim occaecat pariatur enim reprehenderit occaecat. Do eiusmod ut ad Lorem eu.

Qui ad nostrud dolore voluptate commodo tempor excepteur officia amet ad esse non eiusmod.

  1. And here is an ordered list.
  2. Commodo aute aliqua consectetur aliqua adipisicing irure mollit reprehenderit excepteur id mollit.
  3. Velit minim veniam aliquip cupidatat dolor ullamco sunt amet pariatur.
  4. Minim consequat excepteur tempor et adipisicing adipisicing sint excepteur laboris.
  5. Labore adipisicing tempor in veniam duis adipisicing aliquip incididunt ut dolor voluptate cupidatat voluptate. Exercitation ipsum elit sint dolor officia labore aute.

Sunt veniam tempor proident reprehenderit eu in officia labore reprehenderit tempor voluptate sunt. Cupidatat cillum aute laborum aliquip non duis cillum incididunt culpa cupidatat adipisicing voluptate. Irure aliqua esse et magna sint sunt laborum fugiat.

Veniam aute aliqua eu cillum fugiat et ullamco commodo ex veniam nulla deserunt esse. Sunt laborum do id voluptate consectetur magna qui est aliquip aliqua laboris. Ex sit cillum dolor anim incididunt excepteur est velit. Ipsum dolore id magna occaecat qui tempor labore laborum ex ut ea. In laborum duis anim irure velit cillum sunt deserunt amet in proident laboris sit. Non laboris ipsum commodo mollit do consequat aute reprehenderit voluptate.

  1. Logrocket article
  2. Original article by Heydon Pickering on A List Apart in 2014.