diff --git a/main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache b/main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache index a453bfe25cebc8bce6cb3bb889ebca88d464c58d..ba16df74bb7aee64994a01249f064f016def1dab 100644 --- a/main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache +++ b/main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache @@ -1,4 +1,4 @@ <div class="checkbox form-field__control {{ classes }}"> <input type="checkbox" id="checkbox_1" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}> - <label for="checkbox_1">{{ label }}</label> + <label class="text-xs font-bold" for="checkbox_1">{{ label }}</label> </div> diff --git a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache index 4fad5b1395b2114ec5510b7ad47dbc542b5360ba..3e75ea8f0623eb10afb6f4f0d4732768add1311d 100644 --- a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache +++ b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache @@ -1,7 +1,7 @@ <div class="grid-container mb-2 lg:mb-12"> <div class="grid-left-side h-full bg-grey-150 left-tab"> <div class="p-6"> - <span class="font-bold">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br> + <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br> </div> </div> <div class="grid-content leading-6"> 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 daea5bfef2e0e6c086935145acc5f2a0896c80e0..b6154c0fe83b5ed890a9ceb8f991066cc3b719dc 100644 --- a/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache +++ b/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache @@ -1,13 +1,13 @@ <header - class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full" + class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center" style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')" > <div class="grid-container header-max-width pt-16"> - <div class="col-start-2 col-end-13"> + <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0"> <div class="text-3xl text-green-500 mb-8"> <span>2.3.2022</span> </div> - <h1 class="font-alt text-white text-6xl"> + <h1 class="font-alt text-white text-3xl md:text-5xl lg: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> diff --git a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache index 5ad0f6db7aebd6d7619402634094a657a9930a3c..c331fff40854b87855f8c9e23534ca3dbeb3a667 100644 --- a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache +++ b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache @@ -4,7 +4,7 @@ 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> + <p class="3xl:text-lg"> 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 diff --git a/main/styleguide/source/_patterns/molecules/photo_header.mustache b/main/styleguide/source/_patterns/molecules/photo_header.mustache index 9869ba92402e84e0ac2cacee7784d8f02b9fe860..1665e37c896cb01e8afcd208be0e1bec363eea0b 100644 --- a/main/styleguide/source/_patterns/molecules/photo_header.mustache +++ b/main/styleguide/source/_patterns/molecules/photo_header.mustache @@ -1,12 +1,14 @@ <header - class="bg-black flex items-center header-clip photo-header mb-20 w-full" + class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center" style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')" > - <div class="container--narrow flex items-center pt-40"> + <div class="grid-container header-max-width pt-16"> + <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0"> <h1 class="font-alt text-white"> <span class="text-2xl">Ing.</span><br> <span class="font-alt text-7xl">Ivan Bartoš</span><span class="text-2xl">, PhDr. et PhD</span><br> <span class="font-alt">Prezident České republiky</span> </h1> </div> + </div> </header> diff --git a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache index 97506b5833d13085360ca2ba4edcadd713a7384c..12bb4b475904fe409d0a2c7c61b930f882529d4e 100644 --- a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache +++ b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache @@ -1,13 +1,13 @@ <div class="footer-section section-clip bg-cover bg-no-repeat flex" style="background-image: url('https://images.pexels.com/photos/3073681/pexels-photo-3073681.jpeg')"> <div class="container--medium mx-auto px-4 "> - <div class="w-6/12 flex flex-col"> + <div class="flex flex-col lg:w-7/12"> <div class="flex mb-4"> - <i class="ico--anchor text-9xl mb-4 w-1/4"></i> + <i class="ico--anchor text-7xl sm:text-9xl mb-4 w-1/4"></i> <h5 class="uppercase mt-4 head-alt-md w-3/4 md:head-alt-lg">Odebírej náš newsletter</h5> </div> <div class="flex"> - <span class="uppercase font-bold w-1/4"> + <span class="uppercase font-bold w-1/4 text-sm sm:text-base"> Fake news tam nenajdeš, ale dozvíš se co chystáme doopravdy! </span> <div class="w-3/4"> diff --git a/main/styleguide/source/_patterns/templates/person.mustache b/main/styleguide/source/_patterns/templates/person.mustache index c7f61ce98b0ab41e3714836a36d02e09f41c893d..ea35aa0a872cc74d2e6d25aa870b931a5dbe6859 100644 --- a/main/styleguide/source/_patterns/templates/person.mustache +++ b/main/styleguide/source/_patterns/templates/person.mustache @@ -3,100 +3,120 @@ {{> molecules-photo_header }} <main role="main"> - <section class="container--narrow flex flex-wrap"> - <div class="leading-6 w-7/12"> - <article class="mb-24"> - <p class="font-alt mb-5"> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. - </p> + <div class="grid-container"> + <section class="flex flex-wrap grid-content-with-right-side"> + <div class="leading-6 w-7/12"> + <article class="mb-24"> + <p class="font-alt mb-5"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula + venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, + vel sagittis velit mauris vel metus. + </p> - <p class="mb-5"> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla non lectus sed nisl molestie malesuada. - </p> + <p class="mb-5"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula + venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, + vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus + id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, + sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, + justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla + vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, + suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce + consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. + Nulla non lectus sed nisl molestie malesuada. + </p> - <p class="mb-5"> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla non lectus sed nisl molestie malesuada. - </p> - </article> - </div> - <div class="w-1/12"><!-- TODO solve this better --></div> - <div class="w-4/12"> - <div class="bg-grey-100 mb-1 px-7 py-9"> - <div class="flex mb-2"> - <i class="ico--envelope mr-2"></i> - <a href="mailto:ivan.bartos@pirati.cz" class="text-turquoise-500 underline"> - ivan.bartos@pirati.cz - </a> + <p class="mb-5"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula + venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, + vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus + id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, + sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, + justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla + vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, + suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce + consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. + Nulla non lectus sed nisl molestie malesuada. + </p> + </article> </div> - <div class="flex mb-2"> - <i class="ico--phone mr-2"></i> - <a href="tel:+420 775 978 550"> - +420 775 978 550 - </a> + <div class="w-auto"> + <div class="bg-grey-100 mb-1 px-7 py-9"> + <div class="flex mb-2"> + <i class="ico--envelope mr-2"></i> + <a href="mailto:ivan.bartos@pirati.cz" class="text-turquoise-500 underline"> + ivan.bartos@pirati.cz + </a> + </div> + <div class="flex mb-2"> + <i class="ico--phone mr-2"></i> + <a href="tel:+420 775 978 550"> + +420 775 978 550 + </a> + </div> + </div> + <div class="bg-grey-100 px-7 py-9"> + <div class="flex mb-2"> + <i class="ico--facebook mr-2"></i> + <a href=""> + Facebook + </a> + </div> + <div class="flex mb-2"> + <i class="ico--twitter mr-2"></i> + <a href=""> + Twitter + </a> + </div> + <div class="flex mb-2"> + <i class="ico--instagram mr-2"></i> + <a href=""> + Instagram + </a> + </div> + </div> </div> - </div> - <div class="bg-grey-100 px-7 py-9"> - <div class="flex mb-2"> - <i class="ico--facebook mr-2"></i> - <a href=""> - Facebook - </a> + </section> + </div> + <section class="container--medium"> + <h2 class="font-alt text-4xl text-center xl:text-left"> + Aktuálně na Twitteru + </h2> + <div class="mb-8 flex flex-wrap"> + <div class="md:w-1/3 lg:w-1/4"> + {{> molecules-twitter-box }} + </div> + <div class="md:w-1/3 lg:w-1/4"> + {{> molecules-twitter-box }} + </div> + <div class="md:w-1/3 lg:w-1/4"> + {{> molecules-twitter-box }} + </div> + <div class="md:w-1/3 lg:w-1/4"> + {{> molecules-twitter-box }} + </div> </div> - <div class="flex mb-2"> - <i class="ico--twitter mr-2"></i> - <a href=""> - Twitter - </a> + </section> + <section class="container--medium mb-40 flex flex-wrap justify-center xl:justify-start"> + <div class="leading-6 w-8/12"> + <h2 class="font-alt mb-7 text-4xl"> + Články + </h2> + {{> molecules-person-article-preview }} + {{> molecules-person-article-preview }} </div> - <div class="flex mb-2"> - <i class="ico--instagram mr-2"></i> - <a href=""> - Instagram - </a> + </section> + <section class="container--medium mb-20 flex flex-wrap justify-center xl:justify-start"> + <h2 class="font-alt mb-12 text-4xl"> + Další lidé z poslanecké sněmovny + </h2> + <div class="flex flex-wrap justify-center"> + {{> molecules-person-simple-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }} + {{> molecules-person-simple-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }} + {{> molecules-person-simple-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }} </div> - </div> - </div> - </section> - <section> - <h2 class="font-alt text-4xl"> - Aktuálně na Twitteru - </h2> - <div class="mb-8 flex flex-wrap justify-center"> - <!-- TODO dostylovat--> - <div class="md:w-1/3 lg:w-1/4"> - {{> molecules-twitter-box }} - </div> - <div class="md:w-1/3 lg:w-1/4"> - {{> molecules-twitter-box }} - </div> - <div class="md:w-1/3 lg:w-1/4"> - {{> molecules-twitter-box }} - </div> - <div class="md:w-1/3 lg:w-1/4"> - {{> molecules-twitter-box }} - </div> - </div> - </section> - <section class="container--medium mb-40"> - <div class="leading-6 w-8/12"> - <h2 class="font-alt mb-7 text-4xl"> - Články - </h2> - {{> molecules-person-article-preview }} - {{> molecules-person-article-preview }} - </div> - </section> - <section class="container--medium mb-20"> - <h2 class="font-alt mb-12 text-4xl"> - Další lidé z poslanecké sněmovny - </h2> - <div class="flex flex-wrap"> - {{> molecules-person-simple-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }} - {{> molecules-person-simple-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }} - {{> molecules-person-simple-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }} - </div> - </section> - + </section> + </div> {{> organisms-newsletter-section }} </main> {{> organisms-footer }} diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss index 56448fbc2c46e0bb7e0669dfd23fb1df34208320..c6bfa43cef07d88533e2b32693f8e8bd5484a9dd 100644 --- a/main/styleguide/source/css/atoms/container.pcss +++ b/main/styleguide/source/css/atoms/container.pcss @@ -54,6 +54,9 @@ "left-side content right-side"; margin-left: 10%; } + @screen 3xl { + margin-left: 20%; + } } } diff --git a/main/styleguide/source/css/atoms/extra_sizing.pcss b/main/styleguide/source/css/atoms/extra_sizing.pcss index 1d108c15cc91d9536a2dfe923bb46356735805d2..8e62337dc9f18105b4bcf6e17d0cc828cc2eba05 100644 --- a/main/styleguide/source/css/atoms/extra_sizing.pcss +++ b/main/styleguide/source/css/atoms/extra_sizing.pcss @@ -19,3 +19,18 @@ .photo-header { height: 36rem; } +@media (min-width: 1920px) { + .photo-header { + height: 40rem; + } +} +@media (min-width: 2000px) { + .photo-header { + height: 45rem; + } +} +@media (min-width: 2160px) { + .photo-header { + height: 60rem; + } +} diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js index b61def6da9556a6c505d9bb2fcad890474eecab6..48a15b00cdb0ade181836396761b8267188dc46c 100644 --- a/main/styleguide/tailwind.config.js +++ b/main/styleguide/tailwind.config.js @@ -35,6 +35,7 @@ module.exports = { 'lg': '992px', 'xl': '1200px', '2xl': '1366px', + '3xl': '2060px', }, fontFamily: { alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],