diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
index d7847714ce43493abde4d3aa0afac61247e68b66..633819bde64409e2445531ea6c6290728d0cbb5b 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
@@ -1,8 +1,12 @@
-<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>
- <span>prehled-tabulka.pdf</span>
+<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-11 p-0") }}
</div>
- {{> atoms-button-animated(btn-text: "Stáhnout", classes: "h-full") }}
</div>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..457f0a91d03f1f7d9f219b63c3bc458f41bd4296
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
@@ -0,0 +1,11 @@
+<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>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
index 5e5d5bb071a6ea7526294942bf7091a9dd3ed3c5..aef2765ef79b028116258c755c507403ffd10800 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
@@ -1,7 +1,10 @@
-<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>
diff --git a/main/styleguide/source/_patterns/templates/article-detail.mustache b/main/styleguide/source/_patterns/templates/article-detail.mustache
index e6f6274befb11b59ffbace3367d96692ce938993..8dfaf7cddbf7d0d96a86e3f43b9383a89641731d 100644
--- a/main/styleguide/source/_patterns/templates/article-detail.mustache
+++ b/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 }}
+ {{> 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>
- <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--medium">
- {{> 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>
+ {{> 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>
- {{> organisms-newsletter-section }}
</main>
+{{> organisms-newsletter-section }}
+
{{> organisms-footer }}
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 90fff43a4885c43465fb978a2c08a589cad9a5fc..2b7f60ea50104de5e83f49ac12b05fc31562809b 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/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 {
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 66dc246bd4b9099772a87345ba69e9d00ab82b55..5ac9895f05b7be0f3885b445784ea4c8916241ff 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/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;
+}
diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js
index 359b32203c47818fe52c893e64fba7ea98a9109a..ce4ce109720b2439e3c969bdf8bd6bfc6f42ad4b 100644
--- a/main/styleguide/tailwind.config.js
+++ b/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',