diff --git a/main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache b/main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..e98fad8f511d9e425a48a0d07624bde71c5f7f8e
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache
@@ -0,0 +1,20 @@
+<div class="flex space-x-2 mb-4 xl:mb-0">
+ <div class="mr-5">
+ <img class="rounded-full shadow-sm w-16 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg"
+ alt="user image">
+ </div>
+ <div class="flex flex-col leading-6">
+ <h6 class="font-alt text-xl text-uppercase">
+ Veronika Šmídová
+ </h6>
+ <strong class="font-bold text-sm text-grey-300">
+ Tisková mluvčí
+ </strong>
+ <span>
+ +420 778 111 466
+ </span>
+ <span class="text-turquoise-500 text-sm">
+ veronika.smidova@pirati.cz
+ </span>
+ </div>
+</div>
diff --git a/main/styleguide/source/_patterns/organisms/footer.mustache b/main/styleguide/source/_patterns/organisms/footer.mustache
index d603b20ee0161d9a0429bb1b0d15e4ed3bce1427..3b3485dfba59b41d997f16815ba2a7809d67b714 100644
--- a/main/styleguide/source/_patterns/organisms/footer.mustache
+++ b/main/styleguide/source/_patterns/organisms/footer.mustache
@@ -1,227 +1,163 @@
-<footer class="bg-black footer-clip text-white pt-12">
- <div class="footer__container sm:mt-0">
- <div class="flex flex-wrap justify-center font-alt mb-10 md:justify-end md:text-right text-2xl">
- Zůstaňte s námi v konaktu
- </div>
- <div class="flex flex-col mb-16 ml-5 justify-center sm:justify-end sm:text-right sm:flex-row">
- <div class="mb-2 sm:mb-0">
- <a href="" class="sm:ml-8">
- <i class="ico--facebook mr-1"></i>
- @ceska.piratska.strana
- </a>
- </div>
- <div class="mb-2 sm:mb-0">
- <a href="" class="sm:ml-8">
- <i class="ico--twitter mr-1"></i>
- #piratskastrana
- </a>
- </div>
- <div class="mb-2 sm:mb-0">
- <a href="" class="sm:ml-8">
- <i class="ico--instagram mr-1"></i>
- @pirati.cz
- </a>
- </div>
- <div>
- <a href="" class="sm:ml-8">
- <i class="ico--youtube mr-1"></i>
- pirati.cz
- </a>
- </div>
- </div>
- <div class="flex flex-wrap mb-16 w-full sm:justify-center">
- <div class="mb-8 md:mb-0">
- <h6 class="font-alt text-2xl mb-6 sm:mb-12">
- Navigace
- </h6>
- <div class="grid grid-flow-col grid-rows-6 max-h-60">
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Jak pracujeme
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Program
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- </div>
- </div>
- <div class="mb-8 md:mb-0">
- <h6 class="font-alt text-2xl mb-6 sm:mb-12">
- Transparance
- </h6>
- <div class="grid grid-flow-col grid-rows-6 max-h-60">
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Jak pracujeme
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Program
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- </div>
- </div>
- <div class="mb-8 md:mb-0">
- <h6 class="font-alt text-2xl mb-6 sm:mb-12">
- Osobní stránky
- </h6>
- <div class="grid grid-flow-col grid-rows-6 max-h-60">
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- olgarichterova.cz
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- gregorova.eu
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- mikulas-peksa.eu
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- kolaja.eu
- </a>
- </div>
- </div>
- <div class="flex flex-col mb-6 md:mb-0">
- <h6 class="font-alt text-2xl mb-6 sm:mb-12">
- Další projekty
- </h6>
- <div class="flex flex-col sm:grid sm:grid-flow-col sm:grid-rows-6 sm:max-h-60">
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Jak pracujeme
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Program
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- budoucnostresimeted.cz
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Jak pracujeme
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Program
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Jak pracujeme
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Program
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Lidé
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- voda.pirati.cz
- </a>
- </div>
- </div>
- <div>
- <h6 class="font-alt text-2xl mb-8 md:mb-12">
- Média
- </h6>
- <div class="flex flex-col flex-wrap max-h-60">
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Foto
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Video
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Newsletter
- </a>
- <a class="cursor-pointer hover:no-underline mb-5 w-48">
- Grafika
- </a>
- </div>
- </div>
- </div>
- <div class="flex flex-wrap items-end pb-2">
- <div class="text-grey-300 w-full mb-10 lg:mb-0 lg:w-1/2">
- © Piráti 2022. Všechna práva vyhlazena.<br>
- Sdílejte a nechte ostatní sdílet za stejných podmínek.
- </div>
- <div class="flex flex-col justify-end-full sm:flex-row lg:w-1/2">
- <div class="flex ml-4 mb-10 sm:mb-0">
- <div class="mr-5">
- <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
+<footer class="footer footer-clip bg-black text-white __js-root">
+ <ui-app inline-template>
+ <div>
+ <div class="footer__main py-4 lg:py-16 container--wide">
+ <section class="footer__brand">
+ <img
+ src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
+ alt=""
+ class="w-32 md:w-40 pb-6"
+ />
+ </section>
+ <section class="footer__social lg:text-right lg:mb-10">
+ <div class="font-alt text-2xl mb-4">
+ Zůstaňte s námi v konaktu
</div>
- <div class="flex flex-col leading-6">
- <h6 class="font-alt text-2xl text-uppercase">
- Veronika Šmídová
- </h6>
- <strong class="font-bold mb-1 text-grey-300">
- Tisková mluvčí
- </strong>
- <span>
- +420 778 111 466
- </span>
- <span class="text-turquoise-500">
- veronika.smidova@pirati.cz
- </span>
+ <div
+ class="flex flex-col space-y-2 lg:flex-row lg:justify-end lg:space-y-0 lg:space-x-4">
+ <a href="" class="flex items-center hover:no-underline">
+ <i class="ico--facebook mr-1"></i>
+ <span class="text-sm">@ceska.piratska.strana</span>
+ </a>
+ <a href="" class="flex items-center hover:no-underline">
+ <i class="ico--twitter mr-1"></i>
+ <span class="text-sm">#piratskastrana</span>
+ </a>
+ <a href="" class="flex items-center hover:no-underline">
+ <i class="ico--instagram mr-1"></i>
+ <span class="text-sm">@pirati.cz</span>
+ </a>
+ <a href="" class="flex items-center hover:no-underline">
+ <i class="ico--youtube mr-1"></i>
+ <span class="text-sm">pirati.cz</span>
+ </a>
</div>
- </div>
- <div class="flex ml-4">
- <div class="mr-5">
- <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
+ </section>
+ <section class="footer__main-links text-white lg:flex lg:justify-between gap-8">
+ <div class="pt-8 pb-4 lg:py-0">
+ <ui-footer-collapsible label="Navigace">
+ <ul class="text-white py-8 space-y-4 xl:space-y-8">
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ </ul>
+ </ui-footer-collapsible>
</div>
- <div class="flex flex-col leading-6">
- <h6 class="font-alt text-2xl text-uppercase">
- Veronika Šmídová
- </h6>
- <strong class="font-bold mb-1 text-grey-300">
- Tisková mluvčí
- </strong>
- <span>
- +420 778 111 466
- </span>
- <span class="text-turquoise-500">
- veronika.smidova@pirati.cz
- </span>
+ <div class="py-4 lg:py-0">
+ <ui-footer-collapsible label="Transparence">
+ <ul class="text-white py-8 space-y-4 xl:space-y-8">
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ </ul>
+ </ui-footer-collapsible>
</div>
- </div>
+ <div class="py-4 lg:py-0">
+ <ui-footer-collapsible label="osobní stránky">
+ <ul class="text-white py-8 space-y-4 xl:space-y-8">
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ </ul>
+ </ui-footer-collapsible>
+ </div>
+ <div class="py-4 lg:py-0">
+ <ui-footer-collapsible label="další projekty">
+ <ul class="text-white py-8 space-y-4 xl:space-y-8 columns-2 xl:columns-3">
+ <li class="mr-16">
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ <li>
+ <a href="#">Lorem ipsum</a>
+ </li>
+ </ul>
+ </ui-footer-collapsible>
+ </div>
+ <div class="pt-4 lg:py-0">
+ <ui-footer-collapsible label="média">
+ <ul class="text-white py-8 space-y-4 xl:space-y-8">
+ <li>
+ <a href="#">Foto</a>
+ </li>
+ <li>
+ <a href="#">Video</a>
+ </li>
+ <li>
+ <a href="#">Newsletter</a>
+ </li>
+ <li>
+ <a href="#">Grafika</a>
+ </li>
+ </ul>
+ </ui-footer-collapsible>
+ </div>
+ </section>
</div>
+ <section class="bg-black py-8 xl:pb-36">
+ <div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end">
+ <div class="mb-10 flex flex-col lg:flex-row lg:order-2 lg:mb-0">
+ {{> molecules-footer-person-contact }}
+ {{> molecules-footer-person-contact }}
+ </div>
+ <div class="max-w-xs">
+ <span class="text-xs text-grey-350 ">© Piráti, 2022. Všechna práva vyhlazena. Sdílejte a nechte ostatní sdílet za stejných podmínek</span>
+ </div>
+ </div>
+ </section>
</div>
- </div>
+ </ui-app>
</footer>
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 5d1123b83d42da78a984e0e6ab8e9402dd2da1e4..82e0135993e0274f56e19d65c51dbf54a9202be1 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -14,6 +14,7 @@
}
.container--wide {
+ @apply px-5;
margin: auto;
max-width: 1400px;
}
@@ -33,7 +34,7 @@
}
.container {
- @apply: mx-auto;
+ @apply mx-auto px-4;
max-width: 1150px;
}
diff --git a/main/styleguide/source/css/organisms/footer.pcss b/main/styleguide/source/css/organisms/footer.pcss
index 34f404d4e0f7b48416af822fdd0c9aace6832ec4..f58c01ea2dd08c77c8130726fc70a4aba31e21ed 100644
--- a/main/styleguide/source/css/organisms/footer.pcss
+++ b/main/styleguide/source/css/organisms/footer.pcss
@@ -6,10 +6,48 @@
}
}
-.footer__container {
- /* TODO user common container from container.pcss */
- margin-left: auto;
- margin-right: auto;
- max-width: 1416px;
- padding: 2rem;
+.footer__main {
+ @apply grid;
+ grid-template-areas:
+ "brand"
+ "social"
+ "main-links";
+}
+
+.footer__brand {
+ grid-area: brand;
+}
+
+.footer__social {
+ grid-area: social;
+}
+
+.footer__main-links {
+ grid-area: main-links;
+
+ .footer__main--link {
+ @apply mt-6 w-fit xl:mr-2
+ }
+}
+
+.footer-collapsible__toggle {
+ @apply flex items-center cursor-pointer;
+
+ &:after {
+ content: "\e925";
+ font-family: "pirati-ui";
+
+ @apply ml-auto font-light text-2xl transition duration-200;
+ }
+
+ &.footer-collapsible__toggle--open:after {
+ transform: rotate(-180deg);
+ }
+
+ @screen lg {
+ &:after {
+ @apply hidden;
+ @apply cursor-auto;
+ }
+ }
}
diff --git a/main/styleguide/source/js/components/footer/FooterCollapsible.vue b/main/styleguide/source/js/components/footer/FooterCollapsible.vue
index 6503acca239e016ca1912786662ac89ccb4dd9b1..fbffaf56fb78fd85bde2687088770fbe915d4037 100644
--- a/main/styleguide/source/js/components/footer/FooterCollapsible.vue
+++ b/main/styleguide/source/js/components/footer/FooterCollapsible.vue
@@ -1,6 +1,6 @@
<template>
<div :class="[wrapperclass, 'footer-collapsible']">
- <span class="text-xl uppercase text-white footer-collapsible__toggle" :class="[labelclass, show ? 'footer-collapsible__toggle--open' : '']" @click="handleClick">{{ label }}</span>
+ <span class="text-xl font-alt uppercase tracking-wide text-white footer-collapsible__toggle" :class="[labelclass, show ? 'footer-collapsible__toggle--open' : '']" @click="handleClick">{{ label }}</span>
<div v-show="show || isLgScreenSize" :class="[slotwrapperclass]">
<slot>
</slot>
diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js
index 048ccfd1f1fdd098273fe04b3d43f09cbc0415af..887c89fcc450f49be38602121c7e5f534398be7b 100644
--- a/main/styleguide/tailwind.config.js
+++ b/main/styleguide/tailwind.config.js
@@ -76,6 +76,7 @@ module.exports = {
'150': '#ECECEC',
'200': '#ADADAD',
'300': '#4c4c4c',
+ '350': '#4F4F4F',
'400': '#343434',
'500': '#303132',
'600': '#262626',