[ADD] Article detail page

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

-<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">
+<div class="grid-container bg-grey-200 py-4 mb-20 bg-grey-150">
+  <div class="col-start-1 col-end-4 flex justify-end">
+    <i class="ico--download text-6xl mr-12 pt-5 pb-5"></i>
+  </div>
+  <div class="col-start-4 col-end-13 flex items-center">
+    <div class="flex items-center bg-white p-3 h-11 mr-3">
       <span class="font-bold mr-1">Stáhnout soubor: </span>
       <span>prehled-tabulka.pdf</span>
     </div>
-  {{> atoms-button-animated(btn-text: "Stáhnout", classes: "h-full") }}
+    {{> atoms-button-animated(btn-text: "Stáhnout", classes: "h-11 p-0") }}
+  </div>
 </div>

main/styleguide/source/_patterns/molecules/blocks/block-image.mustache

+<div class="grid-container bg-grey-200 mb-20 bg-grey-150">
+  <div class="col-start-4 col-end-13 flex">
+    <img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="max-w-md mr-10">
+    <div class="flex flex-col justify-between">
+      <a href="" class="mt-8 font-bold hover:no-underline leading-5">
+        Et harum quidem rerum facilis est et expedita distinctio.
+      </a>
+      <span class="text-sm text-grey-200 uppercase mb-6">zdroj: www.internet.cz</span>
+    </div>
+  </div>
+</div>

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

-<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 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 class="grid-container bg-grey-200 py-4 mb-20 bg-grey-150 pt-10">
+  <div class="col-start-1 col-end-4 flex justify-end">
+    <i class="ico--code text-7xl mr-12"></i>
   </div>
+  <div class="flex flex-col col-start-4 col-end-12">
+    <span class="head-4xl">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
+    <span class="font-alt text-turquoise-500 mb-6">– ADÉLA ŠÍPOVÁ, SENÁTORKA ZA PIRÁTY</span>
+  </div>
+  <div class="col-start-12 col-end-13 h-full bg-grey-200 right-tab"></div>
 </div>

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

@@ -2,32 +2,53 @@
 
 {{> molecules-article-photo-header }}
 
-<main role="main">
-  <div class="grid-container">
-    <div class="col-start-1 col-end-4 h-44 bg-grey-200">
-      <div class="p-2">
+<main role="main" class="mb-32">
+  <div class="grid-container mb-12">
+    <div class="col-start-1 col-end-4 h-full bg-grey-150 left-tab">
+      <div class="p-6">
       <span class="font-bold">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
       </div>
     </div>
     <div class="col-start-4 col-end-12 leading-6">
+      <h2 class="head-xl">
+        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.
+        Plénum Senátu PČR dnes schválilo usnesení Stálé komise Senátu pro dohled nad poskytováním veřejných prostředků k urychlené tvorbě zákona,
+        který zamezí poskytování dotací, pobídek, úvěrů a veřejných zakázek z rozpočtu ČR firmám a občanům Ruské federace a Běloruska,
+        kteří neodsoudí akt vojenské agrese vůči Ukrajině.
+      </h2>
+    </div>
+    <div class="col-start-12 col-end-13 h-full bg-grey-150 right-tab"></div>
+  </div>
+  <div class="grid-container mb-12">
+    <div class="col-start-4 col-end-12">
       <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.
+        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>
-      <p class="mb-12">
+    </div>
+  </div>
+  {{> molecules-block-quote }}
+  <div class="grid-container mb-12">
+    <div class="col-start-4 col-end-12">
+      <h2 class="head-4xl">
+        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>
         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
@@ -52,61 +73,67 @@
         voluptatem accusantium doloremque laudantium…
       </p>
     </div>
-    <div class="col-start-12 col-end-13 h-44 bg-grey-200"></div>
-  </div>
-  <div class="grid-container">
-    <div class="col-start-1 col-end-13">
-    {{> molecules-block-quote }}
   </div>
-  </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">
+  {{> molecules-block-download }}
+  <div class="grid-container mb-12">
+    <div class="col-start-4 col-end-12">
+      <p>
         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
+        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
+        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
+        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
+        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--medium">
-    {{> molecules-block-download }}
   </div>
-  <div class="container--narrow leading-6">
-    <p class="mb-12">
+  {{> molecules-block-image }}
+  <div class="grid-container mb-12">
+    <div class="col-start-4 col-end-12">
+      <p>
         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
+        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
+        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
+        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
+        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 }}
+  </div>
 </main>
 
+{{> organisms-newsletter-section }}
+
 {{> organisms-footer }}

main/styleguide/source/css/atoms/container.pcss

@@ -24,10 +24,14 @@
 .grid-container {
   @apply grid grid-cols-12;
   margin-left: 10%;
-  max-width: 1200px;
-  > div {
+  max-width: 1300px;
+
+  .left-tab {
     margin-right: 1.5rem;
   }
+  .right-tab {
+    margin-left: 1.5rem;
+  }
 }
 
 @responsive {

main/styleguide/source/css/atoms/heading.pcss

@@ -138,3 +138,17 @@
 .header-clip {
   clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
 }
+
+
+
+.head-xl {
+  @apply text-xl font-bold leading-7 uppercase;
+}
+
+.head-4xl {
+  @apply text-4xl font-bold leading-10 uppercase mb-5;
+}
+
+p {
+  @apply leading-6;
+}

main/styleguide/tailwind.config.js

@@ -71,8 +71,8 @@ module.exports = {
                 '50': '#f7f7f7',
                 '100': '#f3f3f3',
                 '125': '#f0f0f0',
-                '150': '#CDCDCD',
-                '200': '#ECECEC',
+                '150': '#ECECEC',
+                '200': '#ADADAD',
                 '300': '#4c4c4c',
                 '400': '#343434',
                 '500': '#303132',