nicer mobile scaling

majak_uistyleguide/templates/patterns/organisms/articles/district/articles_section.html

 {% extends 'patterns/organisms/articles/articles_section.html' %}
 
 {% block description_classes %}max-w-[400px] text-xl{% endblock %}
+
+{% block button_wrapper_classes %}
+  flex justify-center pt-12 pb-20
+
+  xl:py-24
+{% endblock %}

majak_uistyleguide/templates/patterns/organisms/layout/navbar.html

@@ -17,7 +17,7 @@
 
     <div class="flex items-center xl:items-start">
       <!-- BEGIN Logo-->
-      <a href="{{ logo_url }}" class="z-20 xl:mt-2">
+      <a href="{{ logo_url }}" class="z-20 xl:mt-2 hover:no-underline">
         {% block navbar_logo_images %}
           <img class="navbar__logo--white w-[150px] lg:w-[180px]" src="{{ white_logo_image_url }}" alt="">
           <img class="navbar__logo--black w-[150px] lg:w-[180px]" src="{{ black_logo_image_url }}" alt="">

majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.html

@@ -4,18 +4,40 @@
       {{ title }}
     </h2>
     <div class="flex flex-col flex-wrap mb-12">
-      <div class="flex gap-4 font-alt items-center">
-        <div class="text-6xl flex items-center gap-2">
+      <div class="
+        flex gap-1 font-alt flex-col
+
+        lg:gap-4 lg:flex-row lg:items-center
+      ">
+        <div
+          class="
+            text-4xl flex items-center gap-1
+
+            lg:text-6xl
+          "
+        >
+          <div class="lg:block hidden">
             {% include 'patterns/atoms/icons/arrow.html' with width="66.6" height="70" fill="#000" %}
+          </div>
+
+          <div class="block lg:hidden">
+            {% include 'patterns/atoms/icons/arrow.html' with width="33.3" height="35" fill="#000" %}
+          </div>
 
           <div class="leading-none mt-2">
             Aktuálně zbývá
           </div>
         </div>
-        <div class="p-4 text-6xl bg-black text-white">
-          <div class="leading-none mt-2 __js-root">
+        <div
+          class="
+            text-4xl
+
+            lg:text-6xl
+          "
+        >
+          <span class="inline-block bg-black text-white p-4 leading-none mt-2 __js-root">
             <ui-countdown to="{{ ending_time }}"></ui-countdown>
-          </div>
+          </span>
         </div>
       </div>
     </div>

majak_uistyleguide/templates/patterns/organisms/main_section/district/representatives_section.html

 {% extends 'patterns/organisms/main_section/representatives_section.html' %}
 
-{% block wrapper_classes %}bg-black text-white pt-16{% endblock %}
+{% block wrapper_classes %}bg-black text-white xl:pt-16{% endblock %}

src/css/organisms/navbar.pcss

@@ -2,6 +2,8 @@
   @apply bg-black text-white;
 
   .navbar__logo--white {
+    @apply !text-white;
+
     &:not(.navbar__district__logo) {
       @apply inline
     }
@@ -11,7 +13,7 @@
     }
   }
   .navbar__logo--black {
-    @apply hidden
+    @apply !text-black hidden
   }
 
   .navbar__border-button {

src/js/components/countdown/Countdown.vue

 <template>
-  <div>
+  <span>
     {{ countdownText }}
-  </div>
+  </span>
 </template>
 
 <script>