main: footer style fixed

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

@@ -2281,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;
@@ -2701,6 +2713,8 @@ p{
   display: grid;
   gap: 0.5rem;
 
+  margin-top: -20px;
+
   grid-template-areas:
     "left-article"
     "right-article";
@@ -2726,6 +2740,23 @@ p{
   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%);
@@ -2778,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;
@@ -3245,6 +3291,12 @@ p{
   height: 100%;
 }
 
+.h-fit{
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .h-32{
   height: 8rem;
 }
@@ -3265,12 +3317,6 @@ p{
   height: 3rem;
 }
 
-.h-fit{
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
 .max-h-20{
   max-height: 5rem;
 }
@@ -3335,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));
 }
@@ -3430,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));
@@ -4198,6 +4229,10 @@ a.icon-link:hover span{
     flex-direction: row;
   }
 
+  .lg\:flex-wrap{
+    flex-wrap: wrap;
+  }
+
   .lg\:items-end{
     align-items: flex-end;
   }
@@ -4378,11 +4413,6 @@ a.icon-link:hover span{
     flex-shrink: 0;
   }
 
-  .xl\:columns-3{
-    -moz-columns: 3;
-         columns: 3;
-  }
-
   .xl\:flex-row{
     flex-direction: row;
   }
@@ -4411,12 +4441,6 @@ a.icon-link:hover span{
     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;
   }

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/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/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>