From 1c7757894c86050e0c675eee7ef3dae226bd11db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Sun, 21 Aug 2022 13:11:45 +0200
Subject: [PATCH] [ADD] twitter section & header
---
.../organisms/twitter-section.mustache | 6 ++--
main/styleguide/source/css/atoms/heading.pcss | 33 ++++++++++++++-----
.../js/components/header/HeaderCarousel.vue | 10 +++---
main/styleguide/tailwind.config.js | 1 +
4 files changed, 34 insertions(+), 16 deletions(-)
diff --git a/main/styleguide/source/_patterns/organisms/twitter-section.mustache b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
index d58f621e8..2ae9621c6 100644
--- a/main/styleguide/source/_patterns/organisms/twitter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
@@ -1,8 +1,8 @@
-<div class="container--medium mx-auto pt-8 lg:py-16 mb-16">
- <h2 class="head-7xl text-center pb-4 lg:pb-8">
+<div class="container--medium mx-auto mb-6 lg:mb-16">
+ <h2 class="head-7xl text-center mb-6 xl:mb-28">
Co právě děláme
</h2>
- <div class="mb-8 flex flex-wrap justify-center">
+ <div class="flex flex-wrap justify-center mb-8 lg:mb-24">
<div class="w-full max-w-xs">
{{> molecules-twitter-box }}
</div>
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index bf0e3caf3..7667b907c 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -158,7 +158,7 @@
}
.head-7xl {
- @apply text-3xl font-bold uppercase lg:text-7xl;
+ @apply text-3xl font-medium uppercase lg:text-7xl;
}
@@ -176,16 +176,21 @@ p {
margin: 0 auto;
position: relative;
.header-carousel--text {
- @apply text-3xl uppercase font-bold lg:text-7xl;
+ @apply text-2xl uppercase font-medium lg:text-7xl;
position: absolute;
- top: 40%;
+ top: 20%;
left: 10%;
max-width: 1200px;
+ @screen sm {
+ top: 35%;
+ }
+ @screen lg {
+ top: 45%;
+ }
}
img {
- clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
bottom: 0;
top: 0;
left: 0;
@@ -194,6 +199,10 @@ p {
transition: all 800ms ease-in-out;
transform: scale(1.15, 1.15);
}
+
+ .slick-slide {
+ clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
+ }
.slick-active {
img {
transform: scale(1, 1);
@@ -215,18 +224,26 @@ p {
.slick-arrow {
font-size: 0;
position: absolute;
- top: 70%;
+ top: 80%;
right: 10%;
z-index: 10;
+ @screen lg {
+ top: 60%;
+ }
+
&:before, &:after {
color: white;
border-right: 2px solid white;
border-bottom: 2px solid white;
content: '';
position: absolute;
- width: 16px;
- height: 16px;
+ width: .8rem;
+ height: .8rem;
+ @screen lg {
+ width: 1rem;
+ height: 1rem;
+ }
}
&.slick-next {
@@ -240,7 +257,7 @@ p {
position: absolute;
left: 5%;
color: white;
- top: 70%;
+ top: 60%;
z-index: 10;
li {
diff --git a/main/styleguide/source/js/components/header/HeaderCarousel.vue b/main/styleguide/source/js/components/header/HeaderCarousel.vue
index ca9104162..2d54bb9db 100644
--- a/main/styleguide/source/js/components/header/HeaderCarousel.vue
+++ b/main/styleguide/source/js/components/header/HeaderCarousel.vue
@@ -1,18 +1,18 @@
<template>
- <div class="header-carousel">
+ <div class="header-carousel mb-8 xl:mb-32">
<vue-slick-carousel v-bind="settings">
<div class="xl:h-screen relative">
<img src="https://unsplash.it/792/387?image=4" draggable="false">
<div class="header-carousel--text">
- <h1>72% domácností bylo</h1>
- <h1 class="text-green-500">násilně digitalizováno</h1>
+ <h1 class="text-white">72% domácností bylo</h1>
+ <h1 class="text-orange-250">násilně digitalizováno</h1>
</div>
</div>
<div class="xl:h-screen relative">
<img src="https://unsplash.it/792/387?image=1" draggable="false">
<div class="header-carousel--text">
- <h1>72% domácností bylo</h1>
- <h1 class="text-green-500">násilně digitalizováno</h1>
+ <h1 class="text-white">72% domácností bylo</h1>
+ <h1 class="text-orange-250">násilně digitalizováno</h1>
</div>
</div>
<!-- <div class="homepage-item" style="background: url('https://placeimg.com/1920/1080/any?1') no-repeat center / cover">-->
diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js
index 8fd17b9f1..b61def6da 100644
--- a/main/styleguide/tailwind.config.js
+++ b/main/styleguide/tailwind.config.js
@@ -124,6 +124,7 @@ module.exports = {
'orange': {
'100': '#f2d29f',
'200': '#f1ae7b',
+ '250': '#FEA86A',
'300': '#ed9654',
},
'violet': {
--
GitLab