From 968e6d99836d00c56dc03f88c93c78b5d759ff14 Mon Sep 17 00:00:00 2001
From: dankriz <dan@codero.cz>
Date: Mon, 22 Aug 2022 15:55:32 +0200
Subject: [PATCH] [FIX] Responsive -> photos, articles, twitter, newsletter
person.mustache -> format
---
.../atoms/form-fields/form-checkbox.mustache | 2 +-
.../molecules/articles/article-perex.mustache | 2 +-
.../articles/article-photo-header.mustache | 6 +-
.../article-richtext-content.mustache | 2 +-
.../_patterns/molecules/photo_header.mustache | 6 +-
.../organisms/newsletter-section.mustache | 6 +-
.../_patterns/templates/person.mustache | 194 ++++++++++--------
.../source/css/atoms/container.pcss | 3 +
.../source/css/atoms/extra_sizing.pcss | 15 ++
main/styleguide/tailwind.config.js | 1 +
10 files changed, 139 insertions(+), 98 deletions(-)
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 a453bfe25..ba16df74b 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 4fad5b139..3e75ea8f0 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 daea5bfef..b6154c0fe 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 5ad0f6db7..c331fff40 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 9869ba924..1665e37c8 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 97506b583..12bb4b475 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 c7f61ce98..ea35aa0a8 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 56448fbc2..c6bfa43ce 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 1d108c15c..8e62337dc 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 b61def6da..48a15b00c 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'],
--
GitLab