Add content block

source/_patterns/00-atoms/figure/figure.mustache

+<figure class="figure">
+  <img src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
+  <figcaption>
+    {{ excerpt.short }}
+    Autor: {{ person.first }} {{ person.last }} CC-BY-SA
+  </figcaption>
+</figure>

source/_patterns/00-atoms/horizontal-rule/hr.mustache

+<hr />

source/_patterns/00-atoms/lists/ordered-list.mustache

+<ol class="ordered-list">
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+</ol>

source/_patterns/00-atoms/lists/unordered-list.mustache

+<ul class="unordered-list">
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+</ul>

source/_patterns/00-atoms/quotations/quotation.mustache

+<blockquote class="quote">
+  „{{ excerpt.long }}“
+</blockquote>

source/_patterns/00-atoms/tables/bordered-striped-table.mustache

+{{> atoms-table(classes: "table--striped table--bordered") }}

source/_patterns/00-atoms/tables/bordered-table.mustache

+{{> atoms-table(classes: "table--bordered") }}

source/_patterns/00-atoms/tables/condensed-table.mustache

+{{> atoms-table(classes: "table--condensed") }}

source/_patterns/00-atoms/tables/striped-table.mustache

+{{> atoms-table(classes: "table--striped") }}

source/_patterns/00-atoms/tables/table.mustache

+<table class="table {{ classes }}">
+  <thead>
+    <tr>
+      <td>{{ headline.short }}</td>
+      <td>{{ headline.medium }}</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ excerpt.short }}</td>
+      <td>{{ excerpt.short }}</td>
+    </tr>
+    <tr>
+      <td>{{ excerpt.short }}</td>
+      <td>{{ excerpt.short }}</td>
+    </tr>
+    <tr>
+      <td>{{ excerpt.short }}</td>
+      <td>{{ excerpt.short }}</td>
+    </tr>
+    <tr>
+      <td>{{ excerpt.short }}</td>
+      <td>{{ excerpt.short }}</td>
+    </tr>
+  </tbody>
+</table>

source/_patterns/01-molecules/content-block/content-block.mustache

+<div class="content-block max-w-2xl">
+  <h1>{{ headline.short }}</h1>
+  <p>{{ excerpt.long }}</p>
+
+  <h2>{{ headline.short }}</h2>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+
+  <h3>{{ headline.short }}</h3>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+
+  <h3>{{ headline.short }}</h3>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+
+  <h4>{{ headline.short }}</h4>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+  <p>
+    Praha, 29. října 2019 – Pirátský senátor Lukáš Wagenknecht podal žalobu k
+    Soudnímu dvoru
+    <strong
+      >Evropské unie proti Evropské radě. Žádá, aby Evropská rada nastavila
+      pravidla proti střetu zájmů pro prezidenty a předsedy vlád členských
+      států.</strong
+    >
+    Aby nedošlo k zneplatnění budoucího evropského rozpočtu a nutnosti
+    hospodařit v rozpočtovém provizoriu, vyzval senátor Wagenknecht opakovaně
+    Evropskou radu k jednání a vypořádání se se střetem zájmů Andreje Babiše.
+    Pirátský senátor však zdůrazňuje, že Evropská rada dosud nepřijala žádné
+    opatření v této věci. Praha, 29. října 2019 – Pirátský senátor Lukáš
+    Wagenknecht podal žalobu k Soudnímu dvoru
+    <strong
+      >Evropské unie proti Evropské radě. Žádá, aby Evropská rada nastavila
+      pravidla proti střetu zájmů pro prezidenty a předsedy vlád členských
+      států.</strong
+    >
+    Aby nedošlo k zneplatnění budoucího evropského rozpočtu a nutnosti
+    hospodařit v rozpočtovém provizoriu, vyzval senátor Wagenknecht opakovaně
+    Evropskou radu k jednání a vypořádání se se střetem zájmů Andreje Babiše.
+    Pirátský senátor však zdůrazňuje, že Evropská rada dosud nepřijala žádné
+    opatření v této věci.
+  </p>
+
+  <h5>{{ headline.short }}</h5>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+  <p>{{ excerpt.long }}</p>
+
+  <h2>{{ headline.short }}</h2>
+  <p>{{ excerpt.long }}</p>
+  {{> atoms-quotation }}
+  <p>{{ excerpt.long }}</p>
+
+  <h2>{{ headline.short }}</h2>
+  <p>{{ excerpt.long }}</p>
+  {{> atoms-unordered-list() }}
+  <p>{{ excerpt.long }}</p>
+  {{> atoms-ordered-list() }}
+  <p>{{ excerpt.long }}</p>
+  {{> atoms-bordered-striped-table() }}
+  <p>{{ excerpt.long }}</p>
+
+  <h2>{{ headline.short }}</h2>
+  <p>{{ excerpt.long }}</p>
+  {{> atoms-figure }}
+  <p>{{ excerpt.long }}</p>
+</div>

source/css/atoms/figure.pcss

+.figure {
+  @apply relative;
+
+  &:after {
+    @apply absolute z-10 block top-0 left-0 bottom-0 right-0 pointer-events-none opacity-100 transition duration-200;
+
+    content: "";
+
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8));
+
+    @screen sm {
+      background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.8));
+    }
+  }
+
+  img {
+    @apply w-full;
+  }
+
+  figcaption {
+    @apply absolute z-20 bottom-0 left-0 w-full px-2 py-2 text-white text-sm leading-tight;
+  }
+
+  &:hover,
+  &:focus {
+    &:after {
+      @apply opacity-0;
+    }
+  }
+}

source/css/atoms/horizontal-rule.pcss

+hr {
+  @apply border-t border-grey-100;
+}

source/css/atoms/list.pcss

+.unordered-list,
+.ordered-list {
+  @apply pl-2 ml-3;
+}
+
+.unordered-list {
+  list-style-type: square;
+}
+
+.ordered-list {
+  @apply list-decimal;
+}

source/css/atoms/quotation.pcss

+.quote {
+  @apply italic leading-relaxed border-l-2 border-black pl-2 py-1 ml-3;
+
+  width: 80%;
+  max-width: 60em;
+}

source/css/atoms/table.pcss

+.table {
+  th,
+  thead td,
+  td {
+    @apply px-3 py-2
+  }
+
+  th,
+  thead td {
+    @apply bg-black text-white;
+  }
+}
+
+.table--striped {
+  tr:nth-child(even) td {
+    @apply bg-grey-100;
+  }
+}
+
+.table--bordered {
+  th,
+  thead td {
+    @apply border border-grey-500;
+  }
+
+  td {
+    @apply border border-grey-150;
+  }
+}
+
+.table--condensed {
+  th,
+  thead td,
+  td {
+    @apply px-1 py-1;
+  }
+}

source/css/molecules/content-block.pcss

+.content-block {
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply font-condensed font-bold leading-tight;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin-bottom: .5em;
+
+    &:not(:first-child) {
+      margin-top: .95em;
+    }
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+
+  h2 {
+    @apply text-2xl;
+  }
+
+  h3 {
+    @apply text-xl;
+  }
+
+  h4 {
+    @apply text-lg;
+  }
+
+  h5 {
+    @apply text-base font-condensed uppercase leading-tight;
+  }
+
+  p, ul, ol {
+    @apply leading-normal;
+  }
+
+  p:not(:last-child) {
+    margin-bottom: 1em;
+  }
+
+  strong {
+    @apply font-bold;
+  }
+
+  ul,
+  ol,
+  table,
+  blockquote,
+  figure {
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
+    &:not(:last-child) {
+      margin-bottom: 1em;
+    }
+  }
+}

source/css/organisms/hero.pcss

@@ -12,9 +12,4 @@
     var(--image-url);
 
   @apply relative bg-cover bg-no-repeat bg-center text-white;
-  /* &:before {
-    @apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none;
-    content: "";
-    background: rgba(0, 0, 0, 0.3);
-  } */
 }

source/css/style.pcss

-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
 
 /**
 * This injects Tailwind's base styles and any base styles registered by
@@ -20,11 +20,16 @@
 @import "./atoms/card.pcss";
 @import "./atoms/contact-line.pcss";
 @import "./atoms/container.pcss";
+@import "./atoms/figure.pcss";
 @import "./atoms/flag.pcss";
 @import "./atoms/heading.pcss";
+@import "./atoms/horizontal-rule.pcss";
+@import "./atoms/list.pcss";
 @import "./atoms/paragraph.pcss";
+@import "./atoms/quotation.pcss";
 @import "./atoms/social-icon.pcss";
 @import "./atoms/super-button.pcss";
+@import "./atoms/table.pcss";
 
 @import "./molecules/article-card.pcss";
 @import "./molecules/badge.pcss";
@@ -32,6 +37,7 @@
 @import "./molecules/calendar.pcss";
 @import "./molecules/candidate-card.pcss";
 @import "./molecules/candidate-table-row.pcss";
+@import "./molecules/content-block.pcss";
 @import "./molecules/social-icon-group.pcss";
 @import "./molecules/switch.pcss";