Merge branch 'feature/pirati-cz' into feature/pirati-cz-martin

main/static/main/css/pattern-scaffolding.css

+/**
+ * This stylesheet is for styles you want to include only when displaying demo
+ * styles for grids, animations, color swatches, etc.
+ * These styles will not be your production CSS.
+ */
+#sg-patterns {
+  -webkit-box-sizing: border-box !important;
+          box-sizing: border-box !important;
+  max-width: 100%;
+  padding: 0 0.5em;
+}
+
+.demo-animate {
+  background: #ddd;
+  padding: 1em;
+  margin-bottom: 1em;
+  text-align: center;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.sg-colors {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.sg-colors li {
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+  padding: 0.3em;
+  margin: 0 0.5em 0.5em 0;
+  min-width: 5em;
+  max-width: 14em;
+  border: 1px solid #ddd;
+  border-radius: 0;
+}
+
+.sg-swatch {
+  display: block;
+  height: 8rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0;
+}
+
+.sg-label {
+  font-size: 1rem;
+}
+
+.sg-pattern-example {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+}
+
+.sg-pattern-head .sg-pattern-title a {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+  color: #202020 !important;
+}
+
+.sg-pattern-category-title a {
+  font-family: "Bebas Neue", "Helvetica", "Arial", sans-serif !important;
+  font-weight: 400 !important;
+  font-size: 3.5rem !important;
+}

main/static/main/css/styles.css

@@ -1475,12 +1475,18 @@ video {
   grid-area: left-side;
 }
 
+.grid-left-side-with-content {
+  grid-column: left-side / content;
+  grid-row: left-side / content;
+}
+
 .grid-right-side {
   grid-area: right-side;
 }
 
 .grid-content-with-right-side {
   grid-column: content / right-side;
+  grid-row: content / right-side;
 }
 
 .footer-section {
@@ -2275,6 +2281,18 @@ p{
   border-left: 1px solid green;
 }
 
+.quote-icon {
+  font-size: 7rem;
+  height: 1rem;
+}
+
+@media (min-width: 1200px) {
+
+.quote-icon {
+    font-size: 15rem
+}
+  }
+
 .slick-slider .slick-arrow {
   font-size: 0;
   position: absolute;
@@ -2691,6 +2709,54 @@ p{
   background-color: rgb(146 210 219 / var(--tw-bg-opacity));
 }
 
+.article-timeline-grid{
+  display: grid;
+  gap: 0.5rem;
+
+  margin-top: -20px;
+
+  grid-template-areas:
+    "left-article"
+    "right-article";
+}
+
+@media (min-width: 1200px) {
+
+.article-timeline-grid{
+    grid-template-columns: minmax(0, 570px) 1px minmax(0, 570px);
+    grid-template-areas: "left-article timeline right-article";
+  }
+  }
+
+.article-timeline-grid__left-article {
+  grid-area: left-article;
+}
+
+.article-timeline-grid__right-article {
+  grid-area: right-article;
+}
+
+.article-timeline-grid__timeline {
+  grid-area: timeline;
+}
+
+.article-timeline-grid__timeline:before {
+    content: '';
+    background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
+    position: absolute;
+    bottom: -1px;
+    height: 20px;
+    z-index: 10;
+    width: 2px;
+    left: -1px;
+  }
+
+.article-timeline-grid__timeline .article-timeline--month {
+    transform: translateX(-50%);
+    top: -1rem;
+    z-index: 100;
+  }
+
 .footer-clip {
     -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0% 100%);
             clip-path: polygon(0 10px, 100% 0, 100% 100%, 0% 100%);
@@ -2743,6 +2809,21 @@ p{
   }
 }
 
+.footer__main-links ul {
+    display: grid;
+    grid-auto-columns: minmax(160px, auto);
+    grid-auto-flow: column;
+    grid-gap: 10px;
+    grid-template-rows: repeat(12, 40px);
+  }
+
+@media (min-width: 576px) {
+
+.footer__main-links ul {
+      grid-template-rows: repeat(6, 40px)
+  }
+    }
+
 .footer-collapsible__toggle{
   display: flex;
   cursor: pointer;
@@ -3023,6 +3104,10 @@ p{
 * by plugins.
 */
 
+.static{
+  position: static;
+}
+
 .absolute{
   position: absolute;
 }
@@ -3031,6 +3116,10 @@ p{
   position: relative;
 }
 
+.bottom-0{
+  bottom: 0px;
+}
+
 .z-10{
   z-index: 10;
 }
@@ -3063,8 +3152,14 @@ p{
   grid-column-end: 3;
 }
 
-.m-1{
-  margin: 0.25rem;
+.mx-1{
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.mx-2{
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 .mx-auto{
@@ -3072,21 +3167,16 @@ p{
   margin-right: auto;
 }
 
-.mx-8{
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
 .mr-2{
   margin-right: 0.5rem;
 }
 
-.mb-2{
-  margin-bottom: 0.5rem;
+.mr-4{
+  margin-right: 1rem;
 }
 
-.mr-1{
-  margin-right: 0.25rem;
+.mb-2{
+  margin-bottom: 0.5rem;
 }
 
 .mb-20{
@@ -3109,34 +3199,30 @@ p{
   margin-bottom: 2.25rem;
 }
 
-.mb-6{
-  margin-bottom: 1.5rem;
-}
-
-.mr-4{
-  margin-right: 1rem;
+.mr-1{
+  margin-right: 0.25rem;
 }
 
-.mr-12{
-  margin-right: 3rem;
+.mb-6{
+  margin-bottom: 1.5rem;
 }
 
 .mr-3{
   margin-right: 0.75rem;
 }
 
-.mt-0{
-  margin-top: 0px;
-}
-
-.mb-0{
-  margin-bottom: 0px;
+.mt-4{
+  margin-top: 1rem;
 }
 
 .mb-3{
   margin-bottom: 0.75rem;
 }
 
+.mb-12{
+  margin-bottom: 3rem;
+}
+
 .mr-6{
   margin-right: 1.5rem;
 }
@@ -3145,14 +3231,6 @@ p{
   margin-bottom: 2rem;
 }
 
-.mb-1{
-  margin-bottom: 0.25rem;
-}
-
-.mb-16{
-  margin-bottom: 4rem;
-}
-
 .mr-5{
   margin-right: 1.25rem;
 }
@@ -3169,16 +3247,12 @@ p{
   margin-bottom: 2.5rem;
 }
 
-.mt-4{
-  margin-top: 1rem;
-}
-
 .mt-20{
   margin-top: 5rem;
 }
 
-.mb-12{
-  margin-bottom: 3rem;
+.mb-1{
+  margin-bottom: 0.25rem;
 }
 
 .mr-0{
@@ -3217,6 +3291,12 @@ p{
   height: 100%;
 }
 
+.h-fit{
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .h-32{
   height: 8rem;
 }
@@ -3229,8 +3309,8 @@ p{
   height: 18rem;
 }
 
-.h-80{
-  height: 20rem;
+.h-60{
+  height: 15rem;
 }
 
 .h-12{
@@ -3249,14 +3329,14 @@ p{
   width: 10rem;
 }
 
-.w-full{
-  width: 100%;
-}
-
 .w-16{
   width: 4rem;
 }
 
+.w-full{
+  width: 100%;
+}
+
 .w-20{
   width: 5rem;
 }
@@ -3269,10 +3349,6 @@ p{
   width: 24rem;
 }
 
-.w-80{
-  width: 20rem;
-}
-
 .w-12{
   width: 3rem;
 }
@@ -3281,6 +3357,10 @@ p{
   width: 83.333333%;
 }
 
+.max-w-md{
+  max-width: 28rem;
+}
+
 .max-w-xl{
   max-width: 36rem;
 }
@@ -3289,10 +3369,6 @@ p{
   max-width: 24rem;
 }
 
-.max-w-md{
-  max-width: 28rem;
-}
-
 .max-w-xs{
   max-width: 20rem;
 }
@@ -3305,19 +3381,10 @@ p{
   flex-shrink: 0;
 }
 
-.transform{
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .resize{
   resize: both;
 }
 
-.columns-2{
-  -moz-columns: 2;
-       columns: 2;
-}
-
 .grid-cols-4{
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -3366,6 +3433,14 @@ p{
   gap: 0.75rem;
 }
 
+.gap-6{
+  gap: 1.5rem;
+}
+
+.gap-2{
+  gap: 0.5rem;
+}
+
 .gap-8{
   gap: 2rem;
 }
@@ -3392,12 +3467,6 @@ p{
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]){
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .space-x-3 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -3457,14 +3526,14 @@ p{
   background-color: rgb(236 236 236 / var(--tw-bg-opacity));
 }
 
-.bg-green-400{
+.bg-green-500{
   --tw-bg-opacity: 1;
-  background-color: rgb(76 169 113 / var(--tw-bg-opacity));
+  background-color: rgb(79 196 159 / var(--tw-bg-opacity));
 }
 
-.bg-violet-400{
+.bg-violet-600{
   --tw-bg-opacity: 1;
-  background-color: rgb(132 0 72 / var(--tw-bg-opacity));
+  background-color: rgb(125 51 127 / var(--tw-bg-opacity));
 }
 
 .bg-blue-300{
@@ -3472,6 +3541,16 @@ p{
   background-color: rgb(2 125 168 / var(--tw-bg-opacity));
 }
 
+.bg-green-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(76 169 113 / var(--tw-bg-opacity));
+}
+
+.bg-violet-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(132 0 72 / var(--tw-bg-opacity));
+}
+
 .bg-grey-100{
   --tw-bg-opacity: 1;
   background-color: rgb(243 243 243 / var(--tw-bg-opacity));
@@ -3507,8 +3586,8 @@ p{
   padding: 1.5rem;
 }
 
-.p-3{
-  padding: 0.75rem;
+.p-1{
+  padding: 0.25rem;
 }
 
 .p-0{
@@ -3523,8 +3602,8 @@ p{
   padding: 1.75rem;
 }
 
-.p-1{
-  padding: 0.25rem;
+.p-3{
+  padding: 0.75rem;
 }
 
 .py-32{
@@ -3537,9 +3616,9 @@ p{
   padding-right: 0.25rem;
 }
 
-.px-4{
-  padding-left: 1rem;
-  padding-right: 1rem;
+.py-5{
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
 }
 
 .px-3{
@@ -3547,6 +3626,11 @@ p{
   padding-right: 0.75rem;
 }
 
+.py-3{
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-4{
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -3557,6 +3641,11 @@ p{
   padding-bottom: 4rem;
 }
 
+.px-4{
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .py-8{
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -3579,22 +3668,6 @@ p{
   padding-right: 0.5rem;
 }
 
-.pt-5{
-  padding-top: 1.25rem;
-}
-
-.pb-5{
-  padding-bottom: 1.25rem;
-}
-
-.pt-3{
-  padding-top: 0.75rem;
-}
-
-.pt-10{
-  padding-top: 2.5rem;
-}
-
 .pt-16{
   padding-top: 4rem;
 }
@@ -3651,32 +3724,32 @@ p{
   font-size: .65rem;
 }
 
-.text-3xl{
-  font-size: 1.875rem;
+.text-base{
+  font-size: 1rem;
 }
 
 .text-sm{
   font-size: .875rem;
 }
 
-.text-6xl{
-  font-size: 4rem;
-}
-
-.text-7xl{
-  font-size: 5.3rem;
+.text-3xl{
+  font-size: 1.875rem;
 }
 
 .text-xl{
   font-size: 1.3rem;
 }
 
+.text-6xl{
+  font-size: 4rem;
+}
+
 .text-4xl{
   font-size: 2.45rem;
 }
 
-.text-base{
-  font-size: 1rem;
+.text-7xl{
+  font-size: 5.3rem;
 }
 
 .font-light{
@@ -3695,6 +3768,10 @@ p{
   text-transform: uppercase;
 }
 
+.leading-5{
+  line-height: 1.25rem;
+}
+
 .leading-6{
   line-height: 1.5rem;
 }
@@ -3703,12 +3780,8 @@ p{
   line-height: 2.25rem;
 }
 
-.leading-5{
-  line-height: 1.25rem;
-}
-
-.leading-4{
-  line-height: 1rem;
+.leading-7{
+  line-height: 1.75rem;
 }
 
 .tracking-wide{
@@ -3975,6 +4048,10 @@ a.icon-link:hover span{
 
 @media (min-width: 576px){
 
+  .sm\:bottom-5{
+    bottom: 1.25rem;
+  }
+
   .sm\:col-start-2{
     grid-column-start: 2;
   }
@@ -4085,9 +4162,17 @@ a.icon-link:hover span{
     justify-content: flex-start;
   }
 
+  .md\:gap-1{
+    gap: 0.25rem;
+  }
+
   .md\:text-5xl{
     font-size: 3rem;
   }
+
+  .md\:text-4xl{
+    font-size: 2.45rem;
+  }
 }
 
 @media (min-width: 992px){
@@ -4112,10 +4197,6 @@ a.icon-link:hover span{
     margin-bottom: 2rem;
   }
 
-  .lg\:mb-20{
-    margin-bottom: 5rem;
-  }
-
   .lg\:mb-16{
     margin-bottom: 4rem;
   }
@@ -4148,6 +4229,10 @@ a.icon-link:hover span{
     flex-direction: row;
   }
 
+  .lg\:flex-wrap{
+    flex-wrap: wrap;
+  }
+
   .lg\:items-end{
     align-items: flex-end;
   }
@@ -4232,10 +4317,18 @@ a.icon-link:hover span{
     margin-bottom: 0.75rem;
   }
 
+  .xl\:mr-2{
+    margin-right: 0.5rem;
+  }
+
   .xl\:mb-20{
     margin-bottom: 5rem;
   }
 
+  .xl\:mr-12{
+    margin-right: 3rem;
+  }
+
   .xl\:mt-8{
     margin-top: 2rem;
   }
@@ -4248,6 +4341,10 @@ a.icon-link:hover span{
     margin-bottom: 4rem;
   }
 
+  .xl\:mb-12{
+    margin-bottom: 3rem;
+  }
+
   .xl\:mb-0{
     margin-bottom: 0px;
   }
@@ -4264,10 +4361,6 @@ a.icon-link:hover span{
     margin-top: 0px;
   }
 
-  .xl\:mr-2{
-    margin-right: 0.5rem;
-  }
-
   .xl\:mb-14{
     margin-bottom: 3.5rem;
   }
@@ -4276,10 +4369,6 @@ a.icon-link:hover span{
     margin-bottom: 8rem;
   }
 
-  .xl\:mb-12{
-    margin-bottom: 3rem;
-  }
-
   .xl\:block{
     display: block;
   }
@@ -4288,6 +4377,10 @@ a.icon-link:hover span{
     display: flex;
   }
 
+  .xl\:grid{
+    display: grid;
+  }
+
   .xl\:hidden{
     display: none;
   }
@@ -4296,6 +4389,10 @@ a.icon-link:hover span{
     height: 100vh;
   }
 
+  .xl\:w-36{
+    width: 9rem;
+  }
+
   .xl\:w-60{
     width: 15rem;
   }
@@ -4304,10 +4401,6 @@ a.icon-link:hover span{
     width: 11rem;
   }
 
-  .xl\:w-36{
-    width: 9rem;
-  }
-
   .xl\:w-full{
     width: 100%;
   }
@@ -4316,15 +4409,22 @@ a.icon-link:hover span{
     max-width: 36rem;
   }
 
-  .xl\:columns-3{
-    -moz-columns: 3;
-         columns: 3;
+  .xl\:shrink-0{
+    flex-shrink: 0;
   }
 
   .xl\:flex-row{
     flex-direction: row;
   }
 
+  .xl\:flex-col{
+    flex-direction: column;
+  }
+
+  .xl\:items-start{
+    align-items: flex-start;
+  }
+
   .xl\:items-center{
     align-items: center;
   }
@@ -4333,20 +4433,27 @@ a.icon-link:hover span{
     justify-content: flex-end;
   }
 
+  .xl\:justify-center{
+    justify-content: center;
+  }
+
   .xl\:gap-5{
     gap: 1.25rem;
   }
 
-  .xl\:space-y-8 > :not([hidden]) ~ :not([hidden]){
-    --tw-space-y-reverse: 0;
-    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+  .xl\:justify-self-end{
+    justify-self: end;
   }
 
   .xl\:bg-transparent{
     background-color: transparent;
   }
 
+  .xl\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .xl\:py-6{
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
@@ -4357,10 +4464,6 @@ a.icon-link:hover span{
     padding-bottom: 2.25rem;
   }
 
-  .xl\:pt-0{
-    padding-top: 0px;
-  }
-
   .xl\:pb-24{
     padding-bottom: 6rem;
   }
@@ -4385,6 +4488,14 @@ a.icon-link:hover span{
     padding-bottom: 0px;
   }
 
+  .xl\:text-center{
+    text-align: center;
+  }
+
+  .xl\:text-7xl{
+    font-size: 5.3rem;
+  }
+
   .xl\:text-4xl{
     font-size: 2.45rem;
   }
@@ -4397,18 +4508,6 @@ a.icon-link:hover span{
     font-size: 7.5rem;
   }
 
-  .xl\:text-7xl{
-    font-size: 5.3rem;
-  }
-
-  .xl\:text-xl{
-    font-size: 1.3rem;
-  }
-
-  .xl\:leading-6{
-    line-height: 1.5rem;
-  }
-
   .xl\:duration-200{
     transition-duration: 200ms;
   }

main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache

 <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="lg:max-w-lg lg:mr-11">
+       class="lg:max-w-lg lg:mr-11 h-fit">
   <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
@@ -12,6 +12,10 @@
       prostředků k urychlené tvorbě zákona,
       který zamezí poskytování dotací, pobídek, úvěrů a veřejných zakázek z rozpočtu ČR firmám a občanům Ruské
       federace a Běloruska,
+      Č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
+      prostředků k urychlené tvorbě zákona,
+      který zamezí poskytování dotací, pobídek,
       kteří neodsoudí akt vojenské agrese vůči Ukrajině.
     </p>
     {{> atoms-button-animated(btn-text: "Číst dále") }}

main/styleguide/source/_patterns/molecules/blocks/block-download.mustache

-<div class="grid-container px-4 mb-4 bg-grey-150 xl:mb-20 py-5">
+<div class="grid-container flex xl:grid mb-4 bg-grey-150 xl:mb-20 py-5">
   <div class="flex justify-start xl:justify-end grid-left-side">
-    <i class="ico--download  text-6xl sm:text-7xl mr-12"></i>
+    <i class="ico--download p-2 text-3xl md:text-4xl xl:text-7xl xl:mr-12"></i>
   </div>
   <div class="grid-content flex items-center flex-wrap gap-3">
     <div class="flex items-center bg-white h-11 p-1 mr-3">

main/styleguide/source/_patterns/molecules/blocks/block-image.mustache

-<div class="grid-container px-3 pt-3 mb-4 bg-grey-150 xl:pt-0 xl:mb-20">
+<div class="grid-container px-3 py-3 mb-4 bg-grey-150 xl:py-0 xl:mb-20">
   <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
     <img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="w-full max-w-sm">
     <div class="flex flex-col justify-between">
-      <a href="" class="mt-0 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
+      <a href="" class="mt-4 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
         Et harum quidem rerum facilis est et expedita distinctio.
       </a>
-      <span class="text-sm text-grey-200 uppercase mb-0 xl:mb-6">zdroj: www.internet.cz</span>
+      <span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6">zdroj: www.internet.cz</span>
     </div>
   </div>
 </div>

main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache

-<div class="grid-container flex flex-wrap xl:justify-center px-4 mb-4 bg-grey-150 pt-6 xl:pt-10 lg:mb-20">
-  <div class="grid-left-side">
-    <i class="ico--code text-6xl sm:text-7xl sm:mr-12"></i>
+<div class="grid-container flex xl:grid mb-4 bg-grey-150 xl:mb-20 py-5">
+  <div class="grid-left-side flex lg:justify-end">
+    <span class="quote-icon p-2 xl:mr-12 font-alt">”</span>
   </div>
   <div class="flex flex-col grid-content">
     <span class="text-3xl head-4xl xl:text-4xl">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>

main/styleguide/source/_patterns/organisms/footer.mustache

@@ -33,10 +33,10 @@
             </a>
           </div>
         </section>
-        <section class="footer__main-links text-white lg:flex lg:justify-between gap-8">
+        <section class="footer__main-links text-white lg:flex lg:flex-wrap 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">
+              <ul class="text-white py-8">
                 <li>
                   <a href="#">Lorem ipsum</a>
                 </li>
@@ -51,7 +51,7 @@
           </div>
           <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">
+              <ul class="text-white py-8">
                 <li>
                   <a href="#">Lorem ipsum</a>
                 </li>
@@ -66,7 +66,7 @@
           </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">
+              <ul class="text-white py-8">
                 <li>
                   <a href="#">Lorem ipsum</a>
                 </li>
@@ -81,7 +81,7 @@
           </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">
+              <ul class="text-white py-8">
                 <li>
                   <a href="#">Lorem ipsum</a>
                 </li>
@@ -129,7 +129,7 @@
           </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">
+              <ul class="text-white py-8">
                 <li>
                   <a href="#">Foto</a>
                 </li>

main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache

@@ -9,7 +9,7 @@
           {{> molecules-work-article-preview }}
         </div>
         <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
-          <div class="absolute bg-violet-400  p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
+          <div class="article-timeline--month absolute bg-violet-400  p-1 text-white font-bold">
             Červenec
           </div>
         </div>
@@ -27,7 +27,7 @@
           {{> molecules-work-article-preview }}
         </div>
         <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
-          <div class="absolute bg-violet-400  p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
+          <div class="article-timeline--month absolute bg-violet-400  p-1 text-white font-bold">
             Srpen
           </div>
         </div>

main/styleguide/source/_patterns/templates/how-we-works.mustache

@@ -29,7 +29,9 @@
       </div>
       </div>
         <template v-if="isCurrentView('timeline')">
+          <div class="mt-20">
           {{> organisms-main-articles-timeline }}
+          </div>
         </template>
         <template v-if="isCurrentView('articles')">
           {{> organisms-main-articles-article-list }}

main/styleguide/source/css/molecules/block-quote.pcss

+.quote-icon {
+  font-size: 7rem;
+  height: 1rem;
+
+  @screen xl {
+    font-size: 15rem;
+  }
+}

main/styleguide/source/css/organisms/article-timeline.pcss

 .article-timeline-grid {
   @apply grid gap-2;
 
+  margin-top: -20px;
+
   grid-template-areas:
     "left-article"
     "right-article";
@@ -21,4 +23,21 @@
 
 .article-timeline-grid__timeline {
   grid-area: timeline;
+
+  &:before {
+    content: '';
+    background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
+    position: absolute;
+    bottom: -1px;
+    height: 20px;
+    z-index: 10;
+    width: 2px;
+    left: -1px;
+  }
+
+  .article-timeline--month {
+    transform: translateX(-50%);
+    top: -1rem;
+    z-index: 100;
+  }
 }

main/styleguide/source/css/organisms/footer.pcss

@@ -28,6 +28,18 @@
   .footer__main--link {
     @apply mt-6 w-fit xl:mr-2
   }
+
+  ul {
+    display: grid;
+    grid-auto-columns: minmax(160px, auto);
+    grid-auto-flow: column;
+    grid-gap: 10px;
+    grid-template-rows: repeat(12, 40px);
+
+    @screen sm {
+      grid-template-rows: repeat(6, 40px);
+    }
+  }
 }
 
 .footer-collapsible__toggle {

main/styleguide/source/css/style.pcss

@@ -25,6 +25,7 @@
 @import "./atoms/heading.pcss";
 @import "./atoms/icons.pcss";
 
+@import "./molecules/block-quote.pcss";
 @import "./molecules/carousels.pcss";
 @import "./molecules/contact_box.pcss";
 @import "./molecules/sliding_button.pcss";

main/styleguide/source/js/components/TwitterCarousel.vue

@@ -22,14 +22,21 @@ export default {
           "settings": {
             "slidesToShow": 3
           }
-        },        {
-          "breakpoint": 1400,
+        },
+        {
+          "breakpoint": 1200,
+          "settings": {
+            "slidesToShow": 3
+          }
+        },
+        {
+          "breakpoint": 900,
           "settings": {
             "slidesToShow": 2
           }
         },
         {
-          "breakpoint": 700,
+          "breakpoint": 500,
           "settings": {
             "slidesToShow": 1
           }

main/templates/main/blocks/twitter_block.html

@@ -14,10 +14,10 @@
              data-page="2"
              class="btn btn__slide__wrap">
               <span class="btn text-sm bg-black text-white w-32 lg:text-base">
-                Zobrazit další
+                Zobrazit starší
               </span>
               <span class="btn text-sm bg-white text-black w-32 lg:text-base">
-                Zobrazit další
+                Zobrazit starší
               </span>
             </a>
       </div>

main/templates/main/includes/layout/footer.html

@@ -26,11 +26,11 @@
             </div>
           {% endif %}
         </section>
-        <section class="footer__main-links text-white lg:flex gap-8">
+        <section class="footer__main-links text-white lg:flex lg:flex-wrap lg:justify-between gap-8">
           {% for other_link in page.root_page.footer_other_links %}
             <div class="{% if forloop.first %}pt-8 pb-4 {% else %}pt-4 {% endif %}lg:py-0">
               <ui-footer-collapsible label="{{ other_link.value.title }}">
-                <ul class="text-white py-8 space-y-4 xl:space-y-8 {% if other_link.value.list|length > 6 and other_link.value.list|length < 12 %}columns-2{% elif other_link.value.list|length > 12 %}xl:columns-3{% endif %}">
+                <ul class="text-white py-8">
                   {% for link_list in other_link.value.list %}
                     <li>
                       <a href="{{ link_list.link }}">{{ link_list.text }}</a>
@@ -68,7 +68,9 @@
               {% endfor %}
             </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>
+              <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>

main/templates/main/includes/layout/header.html

@@ -31,7 +31,7 @@
         </div>
         {% if page.root_page.donation_page %}
           <a href="{{ page.root_page.donation_page }}"
-             class="btn btn--green-500 btn--hoveractive font-condensed uppercase max-w-sm w-full">
+             class="btn btn--green-500 btn--hoveractive font-condensed uppercase max-w-sm w-full" target="_blank">
             <div class="btn__body-wrap h-full">
               <div class="btn__body ">Dary</div>
             </div>
@@ -39,7 +39,7 @@
         {% endif %}
         {% if page.root_page.contact_newcomers %}
           <a href="{{ page.root_page.contact_newcomers }}"
-             class="btn btn--violet-500 btn--hoveractive font-condensed uppercase max-w-sm w-full">
+             class="btn btn--violet-500 btn--hoveractive font-condensed uppercase max-w-sm w-full" target="_blank">
             <div class="btn__body-wrap h-full">
               <div class="btn__body ">Nalodění</div>
             </div>