main: footer wip

main/ui-main/public/index.html

@@ -150,34 +150,34 @@
     <div class="font-alt mb-10 text-right text-2xl">
       Zůstaňte s námi v konaktu
     </div>
-    <div class="footer__social">
+    <div class="flex justify-end mb-16 text-right">
       <div>
-        <a href="">
-          <i class="ico--facebook"></i>
+        <a href="" class="ml-8">
+          <i class="ico--facebook mr-1"></i>
           @ceska.piratska.strana
         </a>
       </div>
       <div>
-        <a href="">
-          <i class="ico--twitter"></i>
+        <a href="" class="ml-8">
+          <i class="ico--twitter mr-1"></i>
           #piratskastrana
         </a>
       </div>
       <div>
-        <a href="">
-          <i class="ico--instagram"></i>
+        <a href="" class="ml-8">
+          <i class="ico--instagram mr-1"></i>
           @pirati.cz
         </a>
       </div>
       <div>
-        <a href="">
-          <i class="ico--youtube"></i>
+        <a href="" class="ml-8">
+          <i class="ico--youtube mr-1"></i>
           pirati.cz
         </a>
       </div>
     </div>
-    <div class="w-full">
-      <div>
+    <div class="flex flex-wrap w-full">
+      <div class="w-48">
         <h6 class="font-alt text-2xl mb-12">
           Navigace
         </h6>
@@ -191,6 +191,65 @@
           <a class="cursor-pointer hover:no-underline mb-5">
             Lidé
           </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+        </div>
+      </div>
+      <div class="w-48">
+        <h6 class="font-alt text-2xl mb-12">
+          Navigace
+        </h6>
+        <div class="flex flex-col max-h-60">
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Jak pracujeme
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Program
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+        </div>
+      </div>
+      <div class="w-48">
+        <h6 class="font-alt text-2xl mb-12">
+          Navigace
+        </h6>
+        <div class="flex flex-col max-h-60">
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Jak pracujeme
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Program
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
         </div>
       </div>
     </div>

main/ui-main/src/css/organisms/footer.pcss

 footer {
     clip-path: polygon(0 7%, 100% 0, 100% 100%, 0% 100%);
-
-    a {
-        @apply no-underline;
-    }
-}
-
-.footer__social {
-    @apply flex justify-end mb-2;
-
-    a {
-        @apply mr-8;
-    }
-}
-
-.footer__social i {
-    @apply mr-1;
 }