[WIP] article detail

main/styleguide/source/_patterns/molecules/utils/file-download.mustache → main/styleguide/source/_patterns/molecules/blocks/block-download.mustache

-<div class="bg-grey-200 py-4 flex items-center">
+<div class="bg-grey-200 py-4 flex items-center w-full mb-20">
   <i class="ico--download text-5xl mr-6 ml-32"></i>
   <div class="flex items-center bg-white p-4 mr-2">
     <span class="font-bold mr-1">Stáhnout soubor: </span>

main/styleguide/source/_patterns/molecules/utils/block-quote.mustache → main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache

-<div class="bg-grey-200 py-4 flex">
+<div class="bg-grey-200 py-4 flex w-full mb-20">
   <i class="ico--code text-7xl mr-6 ml-32"></i>
   <div class="flex flex-col">
-    <span class="font-alt mb-4 text-4xl">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
+    <span class="font-alt mb-4 text-4xl max-w-md">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
     <span class="font-alt text-turquoise-500">– ADÉLA ŠÍPOVÁ, SENÁTORKA ZA PIRÁTY</span>
   </div>
 </div>

main/styleguide/source/_patterns/organisms/newsletter-section.mustache

@@ -11,7 +11,7 @@
             Fake news tam nenajdeš, ale dozvíš se co chystáme doopravdy!
           </span>
         <div class="w-3/4">
-          {{> atoms-form-input(placeholder: "Tvůj email", classes: "mb-3") }}
+          {{> atoms-form-input(placeholder: "Tvůj email", classes: "mb-3 w-full") }}
           {{> atoms-form-checkbox(label: "Souhlasím se zpracováním osobních údajů", classes: "mb-3") }}
           {{> atoms-button-animated(btn-text: "Odebírat") }}
         </div>

main/styleguide/source/_patterns/templates/article-detail.mustache

 {{> organisms-header }}
 
 {{> molecules-article-photo-header }}
+
+<main role="main">
+  <div class="container--narrow leading-6">
+    <p class="mb-12">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+      aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+      enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
+      ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+      voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
+      aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et
+      iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
+      molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
+      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+    </p>
+    <p class="mb-12">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+      aperiam,
+      eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum
+      et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
+      natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+      veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+      aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+      nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
+      vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
+      eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
+      non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
+      harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
+      voluptatem accusantium doloremque laudantium…
+    </p>
+  </div>
+  <div class="container--middle">
+    {{> molecules-block-quote }}
+  </div>
+  <div class="container--narrow leading-6">
+    <h2 class="font-alt mb-7 text-4xl leading-10">
+      Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z prostředků
+      rozpočtu České republiky.
+    </h2>
+    <p class="mb-12">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+      aperiam,
+      eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum
+      et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
+      natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+      veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+      aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+      nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
+      vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
+      eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
+      non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
+      harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
+      voluptatem accusantium doloremque laudantium…
+    </p>
+  </div>
+  <div class="container--middle">
+    {{> molecules-block-download }}
+  </div>
+  <div class="container--narrow leading-6">
+    <p class="mb-12">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+      aperiam,
+      eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum
+      et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
+      natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+      veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+      aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+      nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
+      vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
+      eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
+      non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
+      harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
+      voluptatem accusantium doloremque laudantium…
+    </p>
+  </div>
+  {{> organisms-newsletter-section }}
+</main>