diff --git a/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache b/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
index 204778bf52c6e442ab28667daa853a41afef6725..0b9047e1a490a475cd63e069e97a43aeb5b4948c 100644
--- a/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
+++ b/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
@@ -1,8 +1,8 @@
-<div class="flex flex-col mb-5 lg:flex-row lg:mb-10">
+<div class="flex flex-wrap mb-5 lg:mb-10">
<img src="https://i.picsum.photos/id/361/576/576.jpg?hmac=kb62KiZkyDuigb46DUJQd7QvQM6LfYFolTdIMwEqei4" alt=""
- class="max-w-xl lg:mr-12">
- <div class="flex flex-col items-start">
- <span class="text-green-500 head-3xl mt-12 mb-4 lg:mb-8">2.3.2022</span>
+ class="lg:max-w-lg lg:mr-11">
+ <div class="flex flex-col max-w-xl items-start">
+ <span class="text-green-500 head-3xl mt-10 mb-4 lg:mb-8">2.3.2022</span>
<h5 class="head-4xl mb-5 lg:mb-10">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska
a Běloruska, vkteré neodsoudí akt vojenské agrese na Ukrajině</h5>
<p class="leading-6 mb-4 lg:mb-8">
diff --git a/main/styleguide/source/_patterns/organisms/articles-section.mustache b/main/styleguide/source/_patterns/organisms/articles-section.mustache
index cf1ea1b1e80aeac8f9e799cd12647bff6cde6508..814cf0b4fa0bde2b0c806388bc38ef12f450f6d4 100644
--- a/main/styleguide/source/_patterns/organisms/articles-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/articles-section.mustache
@@ -1,7 +1,7 @@
-<div class="mb-32 section-clip py-32 bg-no-repeat"
+<div class="section-clip mb-8 py-16 bg-no-repeat lg:py-36 lg:mb-16"
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-16 pb-4 lg:pb-8">
+ <h2 class="head-7xl text-center mb-6 xl:mb-28">
Aktuality z paluby
</h2>
{{> molecules-main-article-preview }}
diff --git a/main/styleguide/source/_patterns/organisms/region-section.mustache b/main/styleguide/source/_patterns/organisms/region-section.mustache
index 6bf63d20ac05efe56bc0781a40de4b5a836f2dbc..cfa87f4baff7f9ef3a7eb4409b1b7a5cbbb34770 100644
--- a/main/styleguide/source/_patterns/organisms/region-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/region-section.mustache
@@ -5,8 +5,8 @@
Piráti zastupují občany
</h2>
<div class="flex flex-wrap">
- <div class="w-12/12 flex items-center justify-center lg:w-7/12">
- MAPA
+ <div class="__js-root w-12/12 flex items-center justify-center lg:w-7/12">
+ <ui-region-map class="w-full"></ui-region-map>
</div>
<div class="w-12/12 lg:w-5/12">
<div class="flex flex-col justify-center">
diff --git a/main/styleguide/source/_patterns/organisms/representatives-section.mustache b/main/styleguide/source/_patterns/organisms/representatives-section.mustache
index a9ccac45e3ff764dbaec44bc2786c15d108f6227..0a4171ec1e0a29426a30ec1b96e762ea19e1fb4c 100644
--- a/main/styleguide/source/_patterns/organisms/representatives-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/representatives-section.mustache
@@ -1,5 +1,5 @@
-<div class="container--medium mb-32">
- <h2 class="head-7xl text-center mb-14 lg:mb-28">
+<div class="container--medium mb-8 lg:mb-16">
+ <h2 class="head-7xl text-center mb-6 xl:mb-28">
Piráti zastupují občany
</h2>
<div class="flex flex-wrap space-x-1 justify-center items-center">
diff --git a/main/styleguide/source/_patterns/organisms/twitter-section.mustache b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
index 2ae9621c6a29366bb9b753d46a3d3e01071f7f19..6ddc87f4b9e6c20b4680e361efb03c0701cc49cf 100644
--- a/main/styleguide/source/_patterns/organisms/twitter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
@@ -1,4 +1,4 @@
-<div class="container--medium mx-auto mb-6 lg:mb-16">
+<div class="container--medium mx-auto mb-8 lg:mb-16">
<h2 class="head-7xl text-center mb-6 xl:mb-28">
Co právě děláme
</h2>
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 7aeaefae72cd5f18ef013104d4ab01a5a0e1b34f..2d81e61dd90958e5466e6616b3ecca6b05bcac60 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -18,7 +18,11 @@
}
.section-clip {
- clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
+ clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
+
+ @screen xl {
+ clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
+ }
}
.header-max-width {
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 7667b907c73be3d3dbe43bd943cd909e91b55bf3..7b08cd44c25389c20fbdabb1b63293c647a18228 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -135,6 +135,10 @@
}
}
+
+
+
+
.header-clip {
clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
}
@@ -150,11 +154,11 @@
}
.head-3xl {
- @apply text-2xl leading-4 uppercase xl:text-3xl xl:leading-8;
+ @apply text-lg leading-4 uppercase xl:text-3xl xl:leading-8;
}
.head-4xl {
- @apply text-2xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10;
+ @apply text-xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10 lg:text-4xl;
}
.head-7xl {
@@ -163,117 +167,10 @@
p {
- @apply leading-6;
+ @apply text-sm leading-6 lg:text-base;
}
.vertical-time-line {
border-left: 1px solid green;
}
-
-.header-carousel {
- display: block;
- margin: 0 auto;
- position: relative;
- .header-carousel--text {
- @apply text-2xl uppercase font-medium lg:text-7xl;
- position: absolute;
- top: 20%;
- left: 10%;
- max-width: 1200px;
- @screen sm {
- top: 35%;
- }
- @screen lg {
- top: 45%;
- }
- }
-
-
- img {
- bottom: 0;
- top: 0;
- left: 0;
- right: 0;
- width: 100%;
- 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);
- }
- .header-carousel--text {
- animation: right_to_left 500ms ease;
- }
- }
-
- @keyframes right_to_left {
- from {
- left: 15%;
- }
- to {
- left: 10%;
- }
- }
-
- .slick-arrow {
- font-size: 0;
- position: absolute;
- 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: .8rem;
- height: .8rem;
- @screen lg {
- width: 1rem;
- height: 1rem;
- }
- }
-
- &.slick-next {
- transform: rotate(-45deg);
- }
- &.slick-prev {
- transform: rotate(135deg);
- }
- }
- .slick-dots {
- position: absolute;
- left: 5%;
- color: white;
- top: 60%;
- z-index: 10;
-
- li {
- height: 6px;
- width: 6px;
- margin-bottom: 6px;
- border: 1px solid white;
- border-radius: 50%;
-
- &.slick-active {
- background-color: white;
- }
-
- button {
- font-size: 0;
- }
- }
- }
-}
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..f16101df67646c2a15edd367cb11b40ee60b6998
--- /dev/null
+++ b/main/styleguide/source/css/molecules/carousels.pcss
@@ -0,0 +1,112 @@
+.header-carousel {
+ display: block;
+ margin: 0 auto;
+ position: relative;
+
+ .header-carousel--text {
+ @apply text-2xl uppercase font-medium lg:text-7xl;
+ left: 10%;
+ max-width: 1200px;
+ position: absolute;
+ top: 20%;
+
+ @screen sm {
+ top: 35%;
+ }
+ @screen lg {
+ top: 45%;
+ }
+ }
+
+
+ img {
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ transition: all 800ms ease-in-out;
+ transform: scale(1.15, 1.15);
+ width: 100%;
+ }
+
+ .slick-slide {
+ clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
+ }
+
+ .slick-active {
+ img {
+ transform: scale(1, 1);
+ }
+
+ .header-carousel--text {
+ animation: right_to_left 500ms ease;
+ }
+ }
+
+ @keyframes right_to_left {
+ from {
+ left: 15%;
+ }
+ to {
+ left: 10%;
+ }
+ }
+
+ .slick-arrow {
+ font-size: 0;
+ position: absolute;
+ right: 10%;
+ top: 80%;
+ z-index: 10;
+
+ @screen lg {
+ top: 60%;
+ }
+
+ &:before, &:after {
+ 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;
+ }
+ }
+
+ &.slick-next {
+ transform: rotate(-45deg);
+ }
+
+ &.slick-prev {
+ transform: rotate(135deg);
+ }
+ }
+
+ .slick-dots {
+ color: white;
+ left: 5%;
+ position: absolute;
+ top: 60%;
+ z-index: 10;
+
+ li {
+ border: 1px solid white;
+ border-radius: 50%;
+ height: 6px;
+ margin-bottom: 6px;
+ width: 6px;
+
+ &.slick-active {
+ background-color: white;
+ }
+
+ button {
+ font-size: 0;
+ }
+ }
+ }
+}
diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss
index 61ac4bb7d6730d449759b409f16d3e97e8ddd675..30227b2ef1fd1af255b95968b91de0d32130e136 100644
--- a/main/styleguide/source/css/style.pcss
+++ b/main/styleguide/source/css/style.pcss
@@ -25,6 +25,7 @@
@import "./atoms/heading.pcss";
@import "./atoms/icons.pcss";
+@import "molecules/carousels.pcss";
@import "./molecules/contact_box.pcss";
@import "./molecules/sliding_button.pcss";
@import "./molecules/switch.pcss";
diff --git a/main/styleguide/source/js/components/RegionMap.vue b/main/styleguide/source/js/components/RegionMap.vue
index ebff74871494489d53631ae2999cbc696070a97b..881146bb2105c79b0e20ea94e50f6bbf1b6dd4d6 100644
--- a/main/styleguide/source/js/components/RegionMap.vue
+++ b/main/styleguide/source/js/components/RegionMap.vue
@@ -1,14 +1,6 @@
<template>
<div class="region-map flex justify-start items-center space-x-16 ">
- <div class="">
- <h1 class="head-alt-sm mb-2">Vyberte kraj</h1>
- <ul class="region-map__list leading-loose whitespace-no-wrap text-sm">
- <li v-for="region in regions" :key="region.id">
- <a href="#" @click="selectRegion(region)" @mouseover="current = region" @mouseout="current = null">{{ region.name }}</a>
- </li>
- </ul>
- </div>
- <div class="w-full max-w-xl hidden md:block">
+ <div class="w-full max-w-xl">
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
diff --git a/main/styleguide/source/js/components/articles/ArticleCarousel.vue b/main/styleguide/source/js/components/articles/ArticleCarousel.vue
index 7b6aec5d041a32ff0987879160ab3809cc916076..997b01a55d1bd3693367068539122470c1505bf0 100644
--- a/main/styleguide/source/js/components/articles/ArticleCarousel.vue
+++ b/main/styleguide/source/js/components/articles/ArticleCarousel.vue
@@ -1,14 +1,43 @@
<template>
<div>
<vue-slick-carousel v-bind="settings">
- <div class="flex max-w-md">
- <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" class="mr-4">
- <div class="flex flex-col justify-between items-start">
- <span class="text-green-500">23.2.2022</span>
- <h4 class="uppercase">
- 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>
+ <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">
+ <div class="flex flex-col justify-between items-start">
+ <span class="text-green-500">23.2.2022</span>
+ <h4 class="uppercase">
+ 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>
+ </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">
+ <div class="flex flex-col justify-between items-start">
+ <span class="text-green-500">23.2.2022</span>
+ <h4 class="uppercase">
+ 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>
+ </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">
+ <div class="flex flex-col justify-between items-start">
+ <span class="text-green-500">23.2.2022</span>
+ <h4 class="uppercase">
+ 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>
+ </div>
</div>
</div>
</vue-slick-carousel>
@@ -24,6 +53,19 @@ export default {
data: () => ({
settings: {
"dots": false,
+ "infinite": false,
+ "speed": 500,
+ "slidesToShow": 3,
+ "slidesToScroll": 1,
+ "responsive": [
+ {
+ "breakpoint": 1200,
+ "settings": {
+ "slidesToShow": 1,
+ "slidesToScroll": 1
+ }
+ }
+ ]
}
})
}