Skip to content
Snippets Groups Projects
Commit 3cc66a22 authored by OndraPetrzilka's avatar OndraPetrzilka
Browse files

Merge branch 'feature/pirati-cz' into feature/pirati-cz-ondra

parents 449c1934 c967713f
No related branches found
No related tags found
3 merge requests!607Pirati.cz,!586Feature/pirati cz ondra,!575Feature/pirati cz
Show whitespace changes
Inline Side-by-side
Showing
with 555 additions and 243 deletions
main/styleguide/source/_patterns/organisms/articles-section.mustache
+ 1
− 3
View file @ 3cc66a22
......@@ -5,10 +5,8 @@
Aktuality z paluby
</h2>
{{> molecules-main-article-preview }}
<div class="flex w-11/12">
<div class="__js-root">
<ui-article-carousel></ui-article-carousel>
</div>
</div>
</div>
</div>
main/styleguide/source/_patterns/organisms/box-links-section.mustache
+ 12
− 49
View file @ 3cc66a22
<div class="bg-cover bg-no-repeat footer-section section-clip py-32"
<div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
<div class="container--wide mx-auto px-4 pt-16">
<h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
Buď v tom s námi
<div class="container--medium">
<h2 class="head-7xl text-center mb-6 xl:mb-28">
Piráti zastupují občany
</h2>
<div class="flex flex-col justify-center items-center mb-32 md:flex-row">
<div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
<img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
<h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
{{> atoms-button-animated(btn-text: "Přidat se k nám") }}
</div>
<div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
<img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
<h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
<a href="" class="btn btn__slide__wrap w-32 mt-">
<span class="btn bg-black text-white w-32">
Poslanecký klub
</span>
<span class="btn bg-white text-black w-32">
Poslanecký klub
</span>
</a>
</div>
<div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
<img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
<h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
<a href="" class="btn btn__slide__wrap w-32 mt-">
<span class="btn bg-black text-white w-32">
Poslanecký klub
</span>
<span class="btn bg-white text-black w-32">
Poslanecký klub
</span>
</a>
</div>
<div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
<img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
<h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
<a href="" class="btn btn__slide__wrap w-32 mt-">
<span class="btn bg-black text-white w-32">
Poslanecký klub
</span>
<span class="btn bg-white text-black w-32">
Poslanecký klub
</span>
</a>
</div>
<div class="flex flex-wrap justify-center items-center">
{{> molecules-box-link }}
{{> molecules-box-link }}
{{> molecules-box-link }}
{{> molecules-box-link }}
</div>
</div>
</div>
main/styleguide/source/_patterns/organisms/newsletter-section.mustache
+ 1
− 1
View file @ 3cc66a22
<div class="footer-section section-clip bg-cover bg-no-repeat flex"
<div class="section-clip bg-cover bg-no-repeat flex py-16 lg:py-36"
style="background-image: url('https://images.pexels.com/photos/3073681/pexels-photo-3073681.jpeg')">
<div class="grid-container items-center px-4">
<div class="grid-full flex flex-col">
......
......
main/styleguide/source/_patterns/organisms/region-section.mustache
+ 3
− 3
View file @ 3cc66a22
<div class="bg-cover bg-no-repeat section-clip pt-32 pb-52"
<div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
<div class="container--medium mx-auto px-4 ">
<h2 class="head-7xl text-center mb-14 lg:mb-28">
<h2 class="head-7xl text-center mb-6 xl:mb-28">
Piráti v regionech
</h2>
<div class="flex flex-wrap">
<div class="__js-root w-12/12 flex items-center justify-center lg:w-7/12">
<div class="__js-root flex items-center justify-center h-full mb-4 w-full w-12/12 lg:w-7/12">
<ui-region-map class="w-full"></ui-region-map>
</div>
<div class="w-12/12 lg:w-5/12">
......
......
main/styleguide/source/_patterns/templates/people.mustache
+ 22
− 8
View file @ 3cc66a22
......@@ -15,14 +15,28 @@
</div>
</div>
<div class="container--medium">
<div class="__js-root">
<ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true"
v-slot="{ isCurrentView, toggleView }">
<div class="flex justify-center mb-12">
{{> molecules-multi-state-switch }}
<div class="switch">
<a @click="toggleView('candidates')" class="switch__item"
:class="{'switch__item--active': isCurrentView('candidates')}">Poslanecká sněmovna</a>
<a @click="toggleView('program')" class="switch__item"
:class="{'switch__item--active': isCurrentView('program')}">Vláda</a>
</div>
</div>
<div class="flex flex-wrap justify-center mb-12">
<template v-if="isCurrentView('candidates')">
{{> molecules-person-contact-big-block(name: "Ivan Bartoš", function: "předseda Pirátů, poslanec PSP ČR za Ústecký kraj, ministr, vicepremiér") }}
</template>
<template v-if="isCurrentView('program')">
{{> molecules-person-contact-big-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }}
{{> molecules-person-contact-big-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }}
{{> molecules-person-contact-big-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }}
</template>
</div>
</ui-view-provider>
</div>
</div>
{{> organisms-newsletter-section }}
......
......
main/styleguide/source/_patterns/templates/person.mustache
+ 107
− 87
View file @ 3cc66a22
......@@ -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/_patterns/templates/program.mustache
+ 15
− 4
View file @ 3cc66a22
......@@ -13,13 +13,24 @@
</div>
</div>
<div class="container--medium">
<div class="__js-root">
<ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" v-slot="{ isCurrentView, toggleView }">
<div class="mb-12">
{{> molecules-multi-state-switch }}
<div class="switch">
<a @click="toggleView('candidates')" class="switch__item" :class="{'switch__item--active': isCurrentView('candidates')}">Komunální volby 2022</a>
<a @click="toggleView('program')" class="switch__item" :class="{'switch__item--active': isCurrentView('program')}">Sněmovní volby 2021</a>
</div>
</div>
<div class="mb-12">
<template v-if="isCurrentView('candidates')">
{{> molecules-icon-title-text-block(icon: "ico--book") }}
{{> molecules-icon-title-text-block(icon: "ico--book") }}
{{> molecules-icon-title-text-block(icon: "ico--search") }}
</template>
<template v-if="isCurrentView('program')">
{{> molecules-icon-title-text-block(icon: "ico--eye") }}
</template>
</div>
</ui-view-provider>
</div>
</div>
{{> organisms-newsletter-section }}
......
......
main/styleguide/source/css/atoms/container.pcss
+ 6
− 3
View file @ 3cc66a22
......@@ -10,7 +10,7 @@
.container--medium {
@apply px-5;
margin: auto;
max-width: 1300px;
max-width: 1350px;
}
.container--wide {
......@@ -19,11 +19,11 @@
}
.section-clip {
clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%);
margin-bottom: -3.2vw;
@screen xl {
clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%);
margin-bottom: -4.2vw;
}
}
......@@ -59,6 +59,9 @@
"left-side content right-side";
margin-left: 10%;
}
@screen 3xl {
margin-left: 20%;
}
}
}
......
......
main/styleguide/source/css/atoms/extra_sizing.pcss
+ 15
− 11
View file @ 3cc66a22
......@@ -18,6 +18,8 @@
.photo-header {
height: 36rem;
@screen xl {
height: 40vw;
}
.simple-header-height {
......@@ -29,8 +31,10 @@
.simple-header-height {
height: 26rem;
}
.footer-section {
height: 981px;
}
}
}
}
main/styleguide/source/css/atoms/form-field.pcss
+ 2
− 2
View file @ 3cc66a22
......@@ -66,7 +66,7 @@
}
.select {
@apply relative flex items-center w-full py-4;
@apply relative flex items-center w-full py-2 xl:py-4;
&:after {
@apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
......@@ -77,7 +77,7 @@
}
.select__control {
@apply w-full appearance-none outline-none bg-grey-25 py-5 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200;
@apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200 xl:py-5;
/* Fix FF input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
......
......
main/styleguide/source/css/atoms/heading.pcss
+ 5
− 1
View file @ 3cc66a22
......@@ -159,7 +159,11 @@
}
.head-4xl {
@apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:text-4xl lg:leading-10 xl:text-4xl;
@apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl;
}
.head-6xl {
@apply font-alt text-2xl font-medium tracking-tight uppercase xl:text-6xl;
}
.head-7xl {
......
......
main/styleguide/source/css/molecules/carousels.pcss
+ 45
− 0
View file @ 3cc66a22
.slick-slider .slick-arrow {
font-size: 0;
position: absolute;
top: -.7rem;
z-index: 10;
&:before, &:after {
border-right: 2px solid white;
border-bottom: 2px solid white;
content: '';
height: .8rem;
position: absolute;
width: .8rem;
@screen lg {
height: 1rem;
width: 1rem;
}
}
&.slick-next {
transform: rotate(-45deg);
}
&.slick-prev {
transform: rotate(135deg);
}
}
.header-carousel {
display: block;
margin: 0 auto;
......@@ -114,3 +140,22 @@
}
}
}
.article-carousel {
.slick-arrow {
right: 10%;
@screen lg {
right: 5%;
}
&:before, &:after {
border-color: black;
}
&.slick-disabled {
&:before, &:after {
border-color: #B3B3B3;
}
}
}
}
main/styleguide/source/js/components/RegionMap.vue
+ 2
− 2
View file @ 3cc66a22
<template>
<div class="region-map flex justify-start items-center space-x-16 ">
<div class="w-full max-w-xl">
<div class="region-map flex justify-center items-center space-x-16 ">
<div class="w-full max-w-xl block">
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
......
......
main/styleguide/source/js/components/articles/ArticleCarousel.vue
+ 48
− 40
View file @ 3cc66a22
<template>
<div>
<vue-slick-carousel v-bind="settings">
<vue-slick-carousel v-bind="settings" class="article-carousel">
<div>
<div class="flex max-w-md items-start">
<img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
class="w-16 mr-4">
class="w-16 xl:w-36 mr-4">
<div class="flex flex-col justify-between items-start">
<span class="text-green-500">23.2.2022</span>
<h4 class="uppercase">
<span class="text-green-500 mb-2">23.2.2022</span>
<h4 class="uppercase mb-2">
Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
ale skutečná. Jak nenaletět internetovým šmejdům?
</h4>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
</a>
</div>
</div>
</div>
<div>
<div class="flex max-w-md items-start">
<img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
class="w-16 mr-4">
class="w-16 xl:w-36 mr-4">
<div class="flex flex-col justify-between items-start">
<span class="text-green-500">23.2.2022</span>
<h4 class="uppercase">
<span class="text-green-500 mb-2">23.2.2022</span>
<h4 class="uppercase mb-2">
Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
ale skutečná. Jak nenaletět internetovým šmejdům?
</h4>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
</a>
</div>
</div>
</div>
<div>
<div class="flex max-w-md items-start">
<img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
class="w-16 mr-4">
class="w-16 xl:w-36 mr-4">
<div class="flex flex-col justify-between items-start">
<span class="text-green-500">23.2.2022</span>
<h4 class="uppercase">
<span class="text-green-500 mb-2">23.2.2022</span>
<h4 class="uppercase mb-2">
Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
ale skutečná. Jak nenaletět internetovým šmejdům?
</h4>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
</a>
</div>
</div>
</div>
</vue-slick-carousel>
</div>
</template>
<script>
......@@ -54,15 +64,13 @@ export default {
settings: {
"dots": false,
"infinite": false,
"speed": 500,
"slidesToShow": 3,
"slidesToScroll": 1,
"responsive": [
{
"breakpoint": 1200,
"settings": {
"slidesToShow": 1,
"slidesToScroll": 1
"slidesToShow": 1
}
}
]
......
......
main/styleguide/tailwind.config.js
+ 1
− 0
View file @ 3cc66a22
......@@ -35,6 +35,7 @@ module.exports = {
'lg': '992px',
'xl': '1200px',
'2xl': '1366px',
'3xl': '2060px',
},
fontFamily: {
alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
......
......
main/templates/main/base.html
+ 5
− 2
View file @ 3cc66a22
......@@ -25,8 +25,11 @@
<body>
{% include 'main/includes/layout/header.html' %}
{% block content %}
{% endblock content %}
{% block content %}{% endblock content %}
{% include 'main/includes/layout/footer.html' %}
{% block scripts %}{% endblock scripts %}
</body>
</html>
main/templates/main/includes/button_animated.html 0 → 100644
+ 8
− 0
View file @ 3cc66a22
<a href="" class="btn btn__slide__wrap {{ extra_classes }}">
<span class="btn text-sm bg-black text-white w-32 lg:text-base">
{{ btn_text | default_if_none:"Číst dále" }}
</span>
<span class="btn text-sm bg-white text-black w-32 lg:text-base">
{{ btn_text | default_if_none:"Číst dále" }}
</span>
</a>
main/templates/main/includes/layout/footer.html 0 → 100644
+ 211
− 0
View file @ 3cc66a22
<footer class="bg-black footer-clip text-white pt-12">
<div class="footer__container">
<div class="font-alt mb-10 text-right text-2xl">
Zůstaňte s námi v konaktu
</div>
<div class="flex justify-end mb-16 text-right">
{% for social_link_block in page.root_page.social_links %}
<div>
<a href="{{ social_link_block.value.link }}" class="ml-8">
<i class="{{ social_link_block.value.icon }} mr-1"></i>
{{ social_link_block.value.text }}
</a>
</div>
{% endfor %}
</div>
<div class="flex flex-wrap mb-16 w-full">
<div>
<h6 class="font-alt text-2xl mb-12">
Navigace
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-12">
Transparance
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-12">
Osobní stránky
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
olgarichterova.cz
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
gregorova.eu
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
mikulas-peksa.eu
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
kolaja.eu
</a>
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-12">
Další projekty
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
budoucnostresimeted.cz
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
voda.pirati.cz
</a>
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-12">
Média
</h6>
<div class="flex flex-col flex-wrap max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Foto
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Video
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Newsletter
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Grafika
</a>
</div>
</div>
</div>
<div class="flex flex-wrap items-end pb-2">
<div class="text-grey-300 w-full lg:w-1/2">
&copy; Piráti 2022. Všechna práva vyhlazena.<br>
Sdílejte a nechte ostatní sdílet za stejných podmínek.
</div>
<div class="flex justify-endw-full lg:w-1/2">
<div class="flex ml-4">
<div class="mr-5">
<img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
</div>
<div class="flex flex-col">
<h6 class="font-alt text-2xl text-uppercase">
Veronika Šmídová
</h6>
<strong class="font-bold mb-1 text-grey-300">
Tisková mluvčí
</strong>
<span>
+420 778 111 466
</span>
<span class="text-turquoise-500">
veronika.smidova@pirati.cz
</span>
</div>
</div>
<div class="flex ml-4">
<div class="mr-5">
<img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
</div>
<div class="flex flex-col">
<h6 class="font-alt text-2xl text-uppercase">
Veronika Šmídová
</h6>
<strong class="font-bold mb-1 text-grey-300">
Tisková mluvčí
</strong>
<span>
+420 778 111 466
</span>
<span class="text-turquoise-500">
veronika.smidova@pirati.cz
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
main/templates/main/includes/layout/header.html
+ 46
− 27
View file @ 3cc66a22
{% load static %}
{% load static wagtailcore_tags %}
<!-- Navbar -->
<nav class="text-white bg-black transition duration-200">
<!-- Flex container -->
<div class="flex items-center justify-between">
<nav class="navbar-background bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
<!-- Logo -->
<div class="logo flex bg-white px-12 w-80 h-16 my-8">
<img src="{% static "shared/img/logo-full-black.svg" %}" alt="Pirátská strana" class="w-36"/>
</div>
<a href="/" class="menu-flag flex justify-center flag bg-white my-2 p-1 main-menu__logo xl:my-3">
<img src="{% static "shared/img/logo-full-black.svg" %}" alt="">
</a>
<!-- Flex container -->
<div class="grid-container main-menu-grid">
<div class="main-menu grid-content-with-right-side grid justify-between items-center xl:py-6">
<!-- Hamburger Icon -->
<input class="hidden" type="checkbox" id="menuToggle"/>
<label class="p-3 hamb text-white col-start-2 xl:hidden" for="menuToggle">
<i class="ico--menu text-3xl"></i>
</label>
<!-- Menu -->
<div class="flex space-x-6 uppercase gap-8">
<a href="#">Jak pracujeme</a>
<a href="#">Program</a>
<a href="#">O nás</a>
<a href="#">Naloď se</a>
<a href="#">Přispěj</a>
<a href="#">Kontakty</a>
<div class="main-menu__main main-menu-items space-x-3 2xl:space-x-6 xl:flex">
{% for block in page.root_page.menu %}
{% include_block block %}
{% endfor %}
</div>
<!-- Social & Related -->
<div>
<a href="">FB</a>
<a href="">TWITTER</a>
<a href="">INSTAGRAM</a>
<a href="#" class="px-12 py-3 bg-lightGreen mr-2">
Dary
<!-- Buttons & Social-->
<div class="main-menu__external main-menu-items items-center space-x-1 2xl:space-x-3 xl:flex">
<div class="flex space-x-3 mb-2 xl:mb-0 xl:mr-2">
{% for social_link_block in page.root_page.social_links %}
<a href="{{ social_link_block.value.link }}" class="text-white hover:no-underline">
<i class="{{ social_link_block.value.icon }}"></i>
</a>
<a href="#" class="px-12 py-3 text-blue-100 bg-purple mr-2">
Nalodění
{% endfor %}
</div>
{% if page.root_page.donation_page %}
<a href="{{ page.root_page.donation_page }}"
class="btn btn--green-500 btn--hoveractive font-condensed uppercase max-w-sm w-full">
<div class="btn__body-wrap h-full">
<div class="btn__body ">Dary</div>
</div>
</a>
{% endif %}
{% if page.root_page.contact_newcomers %}
<a href="{{ page.root_page.contact_newcomers }}"
class="btn btn--violet-500 btn--hoveractive font-condensed uppercase max-w-sm w-full">
<div class="btn__body-wrap h-full">
<div class="btn__body ">Nalodění</div>
</div>
</a>
{% endif %}
</div>
</div>
</div>
</nav>
main/templates/main/includes/layout/photo_page_header.html 0 → 100644
+ 0
− 0
View file @ 3cc66a22
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment

Pirátský GitLab - Home of the CopyLeft