Skip to content
Snippets Groups Projects
Commit 968e6d99 authored by Daniel Kriz's avatar Daniel Kriz
Browse files

[FIX] 

Responsive -> photos, articles, twitter, newsletter
person.mustache -> format
parent 893e0a70
No related branches found
No related tags found
3 merge requests!607Pirati.cz,!583[FIX] responsive,!575Feature/pirati cz
Pipeline #9318 passed
Stage: build
Show whitespace changes
Inline Side-by-side
Showing
with 139 additions and 98 deletions
main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache
+ 1
− 1
View file @ 968e6d99
<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>
main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
+ 1
− 1
View file @ 968e6d99
<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">
......
main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache
+ 3
− 3
View file @ 968e6d99
<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>
......
main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
+ 1
− 1
View file @ 968e6d99
......@@ -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
......
main/styleguide/source/_patterns/molecules/photo_header.mustache
+ 4
− 2
View file @ 968e6d99
<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>
main/styleguide/source/_patterns/organisms/newsletter-section.mustache
+ 3
− 3
View file @ 968e6d99
<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">
......
main/styleguide/source/_patterns/templates/person.mustache
+ 107
− 87
View file @ 968e6d99
......@@ -3,24 +3,44 @@
{{> molecules-photo_header }}
<main role="main">
<section class="container--narrow flex flex-wrap">
<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.
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.
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.
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="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>
......@@ -57,12 +77,12 @@
</div>
</div>
</section>
<section>
<h2 class="font-alt text-4xl">
</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 justify-center">
<!-- TODO dostylovat-->
<div class="mb-8 flex flex-wrap">
<div class="md:w-1/3 lg:w-1/4">
{{> molecules-twitter-box }}
</div>
......@@ -77,7 +97,7 @@
</div>
</div>
</section>
<section class="container--medium mb-40">
<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
......@@ -86,17 +106,17 @@
{{> molecules-person-article-preview }}
</div>
</section>
<section class="container--medium mb-20">
<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">
<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>
</section>
</div>
{{> organisms-newsletter-section }}
</main>
{{> organisms-footer }}
main/styleguide/source/css/atoms/container.pcss
+ 3
− 0
View file @ 968e6d99
......@@ -54,6 +54,9 @@
"left-side content right-side";
margin-left: 10%;
}
@screen 3xl {
margin-left: 20%;
}
}
}
......
main/styleguide/source/css/atoms/extra_sizing.pcss
+ 15
− 0
View file @ 968e6d99
......@@ -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;
}
}
main/styleguide/tailwind.config.js
+ 1
− 0
View file @ 968e6d99
......@@ -35,6 +35,7 @@ module.exports = {
'lg': '992px',
'xl': '1200px',
'2xl': '1366px',
'3xl': '2060px',
},
fontFamily: {
alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft