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 b4f7d3f6636f402205266062640937a21e52f876..204778bf52c6e442ab28667daa853a41afef6725 100644
--- a/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
+++ b/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
@@ -1,11 +1,11 @@
-<div class="flex flex-col md:flex-row mb-10">
+<div class="flex flex-col mb-5 lg:flex-row lg:mb-10">
<img src="https://i.picsum.photos/id/361/576/576.jpg?hmac=kb62KiZkyDuigb46DUJQd7QvQM6LfYFolTdIMwEqei4" alt=""
- class="md:mr-12">
+ class="max-w-xl lg:mr-12">
<div class="flex flex-col items-start">
- <span class="text-green-500 text-3xl mt-12 mb-8">2.3.2022</span>
- <h5 class="uppercase mb-10 h-allcaps head-alt-md ">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska
+ <span class="text-green-500 head-3xl mt-12 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-8">
+ <p class="leading-6 mb-4 lg:mb-8">
Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z
prostředků rozpočtu České republiky.
Plénum Senátu PČR dnes schválilo usnesení Stálé komise Senátu pro dohled nad poskytováním veřejných
diff --git a/main/styleguide/source/_patterns/molecules/representative-box.mustache b/main/styleguide/source/_patterns/molecules/representative-box.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..048ad8f648615a33e1c72b40d09c1438a1b0fdc2
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/representative-box.mustache
@@ -0,0 +1,12 @@
+<div class="w-full max-w-xs mb-1 w-80 h-80 flex flex-col items-center justify-center"
+ style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
+ <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</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>
diff --git a/main/styleguide/source/_patterns/organisms/articles-section.mustache b/main/styleguide/source/_patterns/organisms/articles-section.mustache
index 07324d7f9d253dadab3ad855e9c10de0e08eb7b1..cf1ea1b1e80aeac8f9e799cd12647bff6cde6508 100644
--- a/main/styleguide/source/_patterns/organisms/articles-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/articles-section.mustache
@@ -1,14 +1,14 @@
<div class="mb-32 section-clip py-32 bg-no-repeat"
style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
- <div class="container--wide mx-auto px-4 ">
- <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
+ <div class="container--medium mx-auto px-4">
+ <h2 class="head-7xl text-center mb-16 pb-4 lg:pb-8">
Aktuality z paluby
</h2>
{{> molecules-main-article-preview }}
<div class="flex w-11/12">
- {{> molecules-small-article-preview }}
- {{> molecules-small-article-preview }}
- {{> molecules-small-article-preview }}
+ <div class="__js-root">
+ <ui-article-carousel></ui-article-carousel>
+ </div>
</div>
</div>
</div>
diff --git a/main/styleguide/source/_patterns/organisms/representatives-section.mustache b/main/styleguide/source/_patterns/organisms/representatives-section.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..a9ccac45e3ff764dbaec44bc2786c15d108f6227
--- /dev/null
+++ b/main/styleguide/source/_patterns/organisms/representatives-section.mustache
@@ -0,0 +1,11 @@
+<div class="container--medium mb-32">
+ <h2 class="head-7xl text-center mb-14 lg:mb-28">
+ Piráti zastupují občany
+ </h2>
+ <div class="flex flex-wrap space-x-1 justify-center items-center">
+ {{> molecules-representative-box }}
+ {{> molecules-representative-box }}
+ {{> molecules-representative-box }}
+ {{> molecules-representative-box }}
+ </div>
+</div>
diff --git a/main/styleguide/source/_patterns/organisms/twitter-section.mustache b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
index 627ed8bc38eec7353b0db0583a9edd2a3c56f9c3..d58f621e882a4a8cbd89c04bd03e6333313e464a 100644
--- a/main/styleguide/source/_patterns/organisms/twitter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
@@ -1,5 +1,5 @@
<div class="container--medium mx-auto pt-8 lg:py-16 mb-16">
- <h2 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center">
+ <h2 class="head-7xl text-center pb-4 lg:pb-8">
Co právě děláme
</h2>
<div class="mb-8 flex flex-wrap justify-center">
diff --git a/main/styleguide/source/_patterns/templates/homepage.mustache b/main/styleguide/source/_patterns/templates/homepage.mustache
index 51692c700d2113393b532cbb450930fa5270f94d..0f5c453681efbd641d6206305e876f738db1ae5a 100644
--- a/main/styleguide/source/_patterns/templates/homepage.mustache
+++ b/main/styleguide/source/_patterns/templates/homepage.mustache
@@ -6,61 +6,7 @@
</div>
{{> organisms-twitter-section }}
{{> organisms-articles-section }}
- <div class="container--wide mx-auto px-4 mb-32">
- <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
- Piráti zastupují občany
- </h2>
- <div class="flex flex-col md:flex-row justify-center items-center">
- <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
- style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
- <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</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 flex-col items-center justify-center md:mr-1"
- style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
- <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</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 flex-col items-center justify-center md:mr-1"
- style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
- <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</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 flex-col items-center justify-center md:mr-1"
- style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
- <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</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>
- </div>
+ {{> organisms-representatives-section }}
{{> organisms-region-section }}
{{> organisms-newsletter-section }}
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index b3e0fa8d5b7d375322c7f49e160523385acc9f7d..7aeaefae72cd5f18ef013104d4ab01a5a0e1b34f 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -9,7 +9,7 @@
.container--medium {
margin: auto;
- max-width: 1280px;
+ max-width: 1300px;
}
.container--wide {
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 23f2ec1a62a2860c55188c26f410a121eef14add..bf0e3caf38f85dbde785fc7d10717ca9ecda7723 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -149,12 +149,16 @@
@apply text-2xl font-bold leading-8 uppercase
}
+.head-3xl {
+ @apply text-2xl leading-4 uppercase xl:text-3xl xl:leading-8;
+}
+
.head-4xl {
- @apply text-4xl font-bold leading-10 uppercase mb-5;
+ @apply text-2xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10;
}
-.head-8xl {
- @apply text-7xl font-bold uppercase;
+.head-7xl {
+ @apply text-3xl font-bold uppercase lg:text-7xl;
}
diff --git a/main/styleguide/source/js/components/articles/ArticleCarousel.vue b/main/styleguide/source/js/components/articles/ArticleCarousel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b6aec5d041a32ff0987879160ab3809cc916076
--- /dev/null
+++ b/main/styleguide/source/js/components/articles/ArticleCarousel.vue
@@ -0,0 +1,30 @@
+<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>
+ </vue-slick-carousel>
+ </div>
+</template>
+
+<script>
+import VueSlickCarousel from 'vue-slick-carousel'
+
+export default {
+ components: {VueSlickCarousel},
+ name: 'ArticleCarousel',
+ data: () => ({
+ settings: {
+ "dots": false,
+ }
+ })
+}
+</script>
diff --git a/main/styleguide/source/js/main.js b/main/styleguide/source/js/main.js
index 4146ab9e0727fdaaef3467ea1063ca8b03383252..12575b699ced05736b1a29710190da160d06202b 100644
--- a/main/styleguide/source/js/main.js
+++ b/main/styleguide/source/js/main.js
@@ -2,6 +2,7 @@ import Vue from "vue";
import { forEachNode } from "./utils";
+import ArticleCarousel from "./components/articles/ArticleCarousel";
import HeaderCarousel from "./components/header/HeaderCarousel";
import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
@@ -13,6 +14,7 @@ import FooterCollapsible from "./components/footer/FooterCollapsible";
import FlipClock from "./components/FlipClock";
+Vue.component("ui-article-carousel", ArticleCarousel);
Vue.component("ui-header-carousel", HeaderCarousel);
Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider);