Skip to content
Snippets Groups Projects
Commit 36ba8ee8 authored by Štěpán Farka's avatar Štěpán Farka
Browse files

[FIX] homepage

parent 90bd1906
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9353 passed
<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-6xl mb-8">naloď se k pirátům</h5>
{{> atoms-button-animated(btn-text: "Přidat se k nám") }}
</div>
<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 mx-4">
<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>
<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">
......
<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">
......
......@@ -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;
}
}
......
......@@ -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
......
......@@ -162,6 +162,10 @@
@apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:text-4xl lg:leading-10 xl:text-4xl;
}
.head-6xl {
@apply font-alt text-2xl font-medium tracking-tight uppercase xl:text-6xl;
}
.head-7xl {
@apply font-alt text-3xl font-medium tracking-tight uppercase xl:text-7xl;
}
......
<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"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment