From a47423c74ef0873e9de216923ae6e81a27162d52 Mon Sep 17 00:00:00 2001
From: dankriz <dan@codero.cz>
Date: Thu, 25 Aug 2022 14:06:38 +0200
Subject: [PATCH] [FIX] Homepage => responsive
---
.../atoms/buttons/button-animated.mustache | 4 +-
.../_patterns/molecules/box-link.mustache | 4 +-
.../_patterns/molecules/twitter-box.mustache | 24 ++++----
.../organisms/box-links-section.mustache | 2 +-
.../_patterns/organisms/header.mustache | 4 +-
.../organisms/twitter-section.mustache | 12 ++--
.../_patterns/templates/homepage.mustache | 18 +++---
main/styleguide/source/css/atoms/flag.pcss | 3 +-
.../source/css/molecules/carousels.pcss | 60 ++++++++++++++-----
.../source/css/molecules/sliding_button.pcss | 2 +-
.../source/css/organisms/navbar.pcss | 3 +-
11 files changed, 86 insertions(+), 50 deletions(-)
diff --git a/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache b/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache
index ba8598298..7abcece01 100644
--- a/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache
+++ b/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache
@@ -1,8 +1,8 @@
<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>
diff --git a/main/styleguide/source/_patterns/molecules/box-link.mustache b/main/styleguide/source/_patterns/molecules/box-link.mustache
index 0385dfe58..ba2fb8dbd 100644
--- a/main/styleguide/source/_patterns/molecules/box-link.mustache
+++ b/main/styleguide/source/_patterns/molecules/box-link.mustache
@@ -1,5 +1,5 @@
-<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>
diff --git a/main/styleguide/source/_patterns/molecules/twitter-box.mustache b/main/styleguide/source/_patterns/molecules/twitter-box.mustache
index 55d737e6c..7a77ed3fa 100644
--- a/main/styleguide/source/_patterns/molecules/twitter-box.mustache
+++ b/main/styleguide/source/_patterns/molecules/twitter-box.mustache
@@ -1,14 +1,16 @@
-<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"
- alt="user image"/>
- <h5 class="font-alt mb-2">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 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"/>
+ <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>
+ </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>
diff --git a/main/styleguide/source/_patterns/organisms/box-links-section.mustache b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
index 1f9cefd96..b8bce5a27 100644
--- a/main/styleguide/source/_patterns/organisms/box-links-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
@@ -1,6 +1,6 @@
<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>
diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache
index 585b80052..19a0e2329 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/main/styleguide/source/_patterns/organisms/header.mustache
@@ -1,7 +1,7 @@
<!-- 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>
diff --git a/main/styleguide/source/_patterns/organisms/twitter-section.mustache b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
index 9e93c3fb8..09b693c90 100644
--- a/main/styleguide/source/_patterns/organisms/twitter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
@@ -1,18 +1,20 @@
<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>
diff --git a/main/styleguide/source/_patterns/templates/homepage.mustache b/main/styleguide/source/_patterns/templates/homepage.mustache
index dc0b7349c..01a471a4a 100644
--- a/main/styleguide/source/_patterns/templates/homepage.mustache
+++ b/main/styleguide/source/_patterns/templates/homepage.mustache
@@ -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>
diff --git a/main/styleguide/source/css/atoms/flag.pcss b/main/styleguide/source/css/atoms/flag.pcss
index f16166ec8..58a71c86e 100644
--- a/main/styleguide/source/css/atoms/flag.pcss
+++ b/main/styleguide/source/css/atoms/flag.pcss
@@ -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%);
}
}
+
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
index 035c6744a..7507f48c3 100644
--- a/main/styleguide/source/css/molecules/carousels.pcss
+++ b/main/styleguide/source/css/molecules/carousels.pcss
@@ -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: 3px solid white;
+ border-bottom: 3px solid white;
+ color: white;
+ content: '';
+ height: 1.3rem;
+ position: absolute;
+ width: 1.3rem;
+ @screen sm {
border-right: 2px solid white;
border-bottom: 2px solid white;
- color: white;
- content: '';
height: .8rem;
- position: absolute;
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 {
- border: 1px solid white;
- border-radius: 50%;
- height: 6px;
- margin-bottom: 6px;
- width: 6px;
-
+ display:inline-block;
+ border: 1px solid white;
+ border-radius: 50%;
+ height: 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 {
diff --git a/main/styleguide/source/css/molecules/sliding_button.pcss b/main/styleguide/source/css/molecules/sliding_button.pcss
index 15ad7d202..4e1fbdabb 100644
--- a/main/styleguide/source/css/molecules/sliding_button.pcss
+++ b/main/styleguide/source/css/molecules/sliding_button.pcss
@@ -1,5 +1,5 @@
.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 {
diff --git a/main/styleguide/source/css/organisms/navbar.pcss b/main/styleguide/source/css/organisms/navbar.pcss
index c651eabba..5f80724da 100644
--- a/main/styleguide/source/css/organisms/navbar.pcss
+++ b/main/styleguide/source/css/organisms/navbar.pcss
@@ -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 {
--
GitLab