diff --git a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..5d344bf52c57937e0cba89b7cf7d1f09e69d80af
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
@@ -0,0 +1,19 @@
+<div class="grid-container mb-12">
+ <div class="col-start-1 col-end-2 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-2 col-end-3 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-3 col-end-3 h-full bg-grey-150 right-tab"></div>
+</div>
diff --git a/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache b/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache
index 6d78f9e445f27d0540c623075624765c03ad7fdf..daea5bfef2e0e6c086935145acc5f2a0896c80e0 100644
--- a/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache
+++ b/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache
@@ -1,14 +1,16 @@
<header
- class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full"
- style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
+ class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full"
+ style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
>
- <div class="grid-container pt-16">
- <div class="col-start-4 col-end-13">
- <span class="mb-4 text-3xl text-green-500">2.3.2022</span>
- <h1 class="font-alt text-white text-6xl">
- Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska a Běloruska, vkteré neodsoudí akt vojenské agrese na
- Ukrajině
- </h1>
+ <div class="grid-container header-max-width pt-16">
+ <div class="col-start-2 col-end-13">
+ <div class="text-3xl text-green-500 mb-8">
+ <span>2.3.2022</span>
+ </div>
+ <h1 class="font-alt text-white text-6xl">
+ Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska a Běloruska, vkteré neodsoudí akt vojenské agrese na
+ Ukrajině
+ </h1>
</div>
</div>
</header>
diff --git a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..88128eee126fa8d0e61e8db7b0b78062747dee80
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
@@ -0,0 +1,26 @@
+<div class="grid-container mb-12">
+ <div class="col-start-2 col-end-3">
+ <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 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>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
index 633819bde64409e2445531ea6c6290728d0cbb5b..f39ede73e9cf153f4c3c3fd573be4ce9ab1e4258 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
@@ -1,8 +1,8 @@
-<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">
+<div class="grid-container py-4 mb-20 bg-grey-150">
+ <div class="col-start-1 col-end-2 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="col-start-2 col-end-4 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>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
index 457f0a91d03f1f7d9f219b63c3bc458f41bd4296..51ecb075e6c80e5b4f20bd51a84cdac61a8170dd 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
@@ -1,5 +1,5 @@
-<div class="grid-container bg-grey-200 mb-20 bg-grey-150">
- <div class="col-start-4 col-end-13 flex">
+<div class="grid-container mb-20 bg-grey-150">
+ <div class="col-start-2 col-end-4 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">
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
index aef2765ef79b028116258c755c507403ffd10800..83a20ac7f32886b0b9935536e275c0c951957888 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
@@ -1,10 +1,9 @@
-<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">
+<div class="grid-container py-4 mb-20 bg-grey-150 pt-10">
+ <div class="col-start-1 col-end-2 flex justify-end">
<i class="ico--code text-7xl mr-12"></i>
</div>
- <div class="flex flex-col col-start-4 col-end-12">
+ <div class="flex flex-col col-start-2 col-end-4">
<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>
diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache
index b075291fecba1d1228f16cfe7c1efa4e04e5380b..bfcd260b350dcab10b81e273385159b5a48719d4 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/main/styleguide/source/_patterns/organisms/header.mustache
@@ -1,7 +1,7 @@
<!-- Navbar -->
<nav class="bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
<!-- Flex container -->
- <div class="relative main-menu grid items-center justify-between xl:container xl:mx-auto xl:p-6">
+ <div class="relative main-menu grid items-center justify-around xl:p-6">
<!-- Logo -->
<a href="" class="flag bg-white m-3 p-1 main-menu__logo">
<img src="../../images/logo-full-black.svg" alt="">
diff --git a/main/styleguide/source/_patterns/templates/article-detail.mustache b/main/styleguide/source/_patterns/templates/article-detail.mustache
index 8dfaf7cddbf7d0d96a86e3f43b9383a89641731d..64a7d564cc39ff96f67b1f44bb98ee0efe171540 100644
--- a/main/styleguide/source/_patterns/templates/article-detail.mustache
+++ b/main/styleguide/source/_patterns/templates/article-detail.mustache
@@ -3,135 +3,14 @@
{{> molecules-article-photo-header }}
<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. 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>
+ {{> molecules-article-perex }}
+ {{> molecules-article-richtext-content }}
{{> 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
- 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>
+ {{> molecules-article-richtext-content }}
{{> 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
- 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>
+ {{> molecules-article-richtext-content }}
{{> 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
- 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>
+ {{> molecules-article-richtext-content }}
</main>
{{> organisms-newsletter-section }}
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 2b7f60ea50104de5e83f49ac12b05fc31562809b..0088b9986a18b4fe0926c05d32525a7cfe1aa456 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -21,10 +21,15 @@
clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
}
+.header-max-width {
+ max-width: 1340px !important;
+}
+
.grid-container {
- @apply grid grid-cols-12;
+ @apply grid;
+ grid-template-columns: 240px 1fr 102px;
margin-left: 10%;
- max-width: 1300px;
+ max-width: 1150px;
.left-tab {
margin-right: 1.5rem;