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

[FIX] 

Homepage => responsive
parent 46d91dd7
No related branches found
No related tags found
3 merge requests!607Pirati.cz,!588[FIX]17-meta-pro-bloky,!575Feature/pirati cz
Pipeline #9444 passed
Stage: build
Show whitespace changes
Inline Side-by-side
Showing
with 86 additions and 50 deletions
main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache
+ 2
− 2
View file @ a47423c7
<a href="" class="btn btn__slide__wrap {{ classes }}">
<span class="btn text-sm bg-black text-white w-32 lg:text-base">
<span class="btn text-lg bg-black text-white w-32 lg:text-base">
{{ btn-text }}
</span>
<span class="btn text-sm bg-white text-black w-32 lg:text-base">
<span class="btn text-lg bg-white text-black w-32 lg:text-base">
{{ btn-text }}
</span>
</a>
main/styleguide/source/_patterns/molecules/box-link.mustache
+ 2
− 2
View file @ a47423c7
<div class="mb-1 w-60 w-80 h-80 flex bg-white flex-col items-center justify-center mr-1">
<img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
<div class="mb-2 w-96 h-72 flex bg-white flex-col items-center justify-center mr-1 drop-shadow-xl">
<img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8 max-w-20 max-h-20">
<h5 class="head-4xl mb-8">naloď se k pirátům</h5>
{{> atoms-button-animated(btn-text: "Přidat se k nám") }}
</div>
main/styleguide/source/_patterns/molecules/twitter-box.mustache
+ 13
− 11
View file @ a47423c7
<div class="p-4 flex flex-col items-center text-center border border-grey-100">
<img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
<div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
<div class="flex flex-row sm:flex-col items-center">
<img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
alt="user image"/>
<h5 class="font-alt mb-2">Tomáš Marný</h5>
<div class="flex flex-col sm:sm:flex-col">
<h5 class="font-alt text-xl mb-2 sm:text-base">Tomáš Marný</h5>
<small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
<p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod
tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
<p class="text-small sm:text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum.</p>
<a href="" class="hover:no-underline">
<i class="ico--twitter text-turquoise-400 text-xl"></i>
<i class="ico--twitter text-turquoise-400 text-3xl sm:text-xl"></i>
</a>
</div>
main/styleguide/source/_patterns/organisms/box-links-section.mustache
+ 1
− 1
View file @ a47423c7
<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">
<div class="container-collapsible">
<h2 class="head-7xl text-center mb-6 xl:mb-28">
Piráti zastupují občany
</h2>
......
main/styleguide/source/_patterns/organisms/header.mustache
+ 2
− 2
View file @ a47423c7
<!-- Navbar -->
<nav class="navbar-background bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
<!-- Logo -->
<a href="" class="menu-flag flex justify-center flag bg-white my-2 p-1 main-menu__logo xl:my-3">
<a href="" class="menu-flag flex justify-center flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
<img src="../../images/logo-full-black.svg" alt="">
</a>
<!-- Flex container -->
......@@ -13,7 +13,7 @@
<i class="ico--menu text-3xl"></i>
</label>
<!-- Menu -->
<div class="main-menu__main main-menu-items space-x-3 2xl:space-x-6 xl:flex">
<div class="main-menu__main main-menu-items mt-4 space-x-3 xl:mt-0 2xl:space-x-6 xl:flex">
<a href="#" class="menu-link">Jak pracujeme</a>
<a href="#" class="menu-link">Program</a>
<a href="#" class="menu-link">O nás</a>
......
main/styleguide/source/_patterns/organisms/twitter-section.mustache
+ 7
− 5
View file @ a47423c7
<div class="container--wide mx-auto mb-8 lg:mb-16">
<h2 class="head-7xl text-center mb-6 xl:mb-28">
<div class="flex flex-wrap justify-center">
<h2 class="w-full flex max-w-xs head-7xl text-left mb-6 sm:text-center xl:mb-28">
Co právě děláme
</h2>
</div>
<div class="flex flex-wrap justify-center mb-8 lg:mb-24">
<div class="w-full flex max-w-xs">
<div class="w-full flex max-w-sm sm:max-w-xs">
{{> molecules-twitter-box }}
</div>
<div class="w-full flex max-w-xs">
<div class="w-full flex max-w-sm sm:max-w-xs">
{{> molecules-twitter-box }}
</div>
<div class="w-full flex max-w-xs">
<div class="w-full flex max-w-sm sm:max-w-xs">
{{> molecules-twitter-box }}
</div>
<div class="w-full flex max-w-xs">
<div class="w-full flex max-w-sm sm:max-w-xs">
{{> molecules-twitter-box }}
</div>
</div>
......
main/styleguide/source/_patterns/templates/homepage.mustache
+ 9
− 9
View file @ a47423c7
......@@ -9,9 +9,9 @@
<div class="grid-content-with-right-side">
<h1 class="text-white">72% domácností bylo</h1>
<h1 class="text-orange-250">násilně digitalizováno</h1>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více1</span>
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více1</span>
<a href="" class="btn btn__slide__wrap btn-carousel">
<span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více1</span>
<span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více1</span>
</a>
</div>
</div>
......@@ -22,9 +22,9 @@
<div class="grid-content-with-right-side">
<h1 class="text-white">72% domácností bylo</h1>
<h1 class="text-orange-250">násilně digitalizováno</h1>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více2</span>
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více2</span>
<a href="" class="btn btn__slide__wrap btn-carousel">
<span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více2</span>
<span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více2</span>
</a>
</div>
</div>
......@@ -35,9 +35,9 @@
<div class="grid-content-with-right-side">
<h1 class="text-white">72% domácností33 bylo</h1>
<h1 class="text-orange-250">násilně digitalizováno</h1>
<a href="" class="btn btn__slide__wrap ">
<span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
<span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
<a href="" class="btn btn__slide__wrap btn-carousel">
<span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více3</span>
<span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více3</span>
</a>
</div>
</div>
......
main/styleguide/source/css/atoms/flag.pcss
+ 2
− 1
View file @ a47423c7
......@@ -8,6 +8,7 @@
left: 100%;
top: 0;
background: inherit;
clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100.7%, -2px 100.7%);
clip-path: polygon(0px 0px, 100% 0px, 0% 50%, 100% 100%, 0px 100%);
}
}
main/styleguide/source/css/molecules/carousels.pcss
+ 45
− 15
View file @ a47423c7
......@@ -30,18 +30,20 @@
position: relative;
.header-carousel--text {
@apply font-alt text-2xl sm:text-5xl uppercase lg:text-7xl;
@apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
max-width: 1200px;
position: absolute;
top: 35%;
margin-left: 15%;
top: 50%;
@screen sm {
margin-left: 10%;
top: 35%;
}
@screen lg {
top: 30%;
}
@screen xl {
margin-left: 15%;
}
@screen 2xl {
top: 45%;
}
......@@ -56,6 +58,13 @@
transition: all 800ms ease-in-out;
transform: scale(1.15, 1.15);
width: 100%;
height: 458px;
object-fit: cover;
margin-bottom: -3px;
@screen sm {
height: auto;
}
}
.slick-slide {
......@@ -85,22 +94,31 @@
.slick-arrow {
font-size: 0;
position: absolute;
right: 10%;
right: 20%;
top: 80%;
z-index: 10;
@screen sm {
right: 10%;
}
@screen lg {
top: 60%;
}
&:before, &:after {
border-right: 2px solid white;
border-bottom: 2px solid white;
border-right: 3px solid white;
border-bottom: 3px solid white;
color: white;
content: '';
height: .8rem;
height: 1.3rem;
position: absolute;
width: 1.3rem;
@screen sm {
border-right: 2px solid white;
border-bottom: 2px solid white;
height: .8rem;
width: .8rem;
}
@screen lg {
height: 1rem;
width: 1rem;
......@@ -120,16 +138,24 @@
color: white;
left: 5%;
position: absolute;
top: 60%;
top: 90%;
z-index: 10;
@screen sm{
top: 60%;
}
li {
display:inline-block;
border: 1px solid white;
border-radius: 50%;
height: 6px;
margin-bottom: 6px;
width: 6px;
margin: 3px;
@screen sm {
display: block;
margin-bottom: 6px;
}
&.slick-active {
background-color: white;
}
......@@ -140,6 +166,10 @@
}
}
}
.btn-carousel{
@aplly h-11;
top: 28%;
}
.article-carousel {
.slick-arrow {
......
main/styleguide/source/css/molecules/sliding_button.pcss
+ 1
− 1
View file @ a47423c7
.btn {
@apply font-alt inline-flex justify-center items-center h-8 leading-9 py-1 xl:h-11;
@apply font-alt inline-flex justify-center items-center leading-9 py-1 h-11;
}
.btn__slide__wrap {
......
main/styleguide/source/css/organisms/navbar.pcss
+ 2
− 1
View file @ a47423c7
......@@ -38,6 +38,7 @@
.navbar-background {
background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
min-height: 63px;
}
.main-menu-grid {
max-width: none;
......@@ -48,7 +49,7 @@
.menu-flag {
position: absolute;
left: 0;
width: 110px;
width: 209px;
}
.main-menu__external {
......
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