mobile UI

majak_uistyleguide/templates/patterns/organisms/header/nakopneme/simple_header.html

@@ -3,13 +3,7 @@
 {% block heading_classes %}
     mb-1
 
-    {% if is_short %}head-short{% endif %}
-
-    {% if description and not override_title_size %}
-        head-10xl
-    {% else %}
-        head-14xl
-    {% endif %}
+    sm:text-9xl xs:text-6xl md:text-[4rem] head-10xl
 
     nakopneme-font
 {% endblock %}
\ No newline at end of file

majak_uistyleguide/templates/patterns/templates/nakopneme/calculator/calculator.html

@@ -28,7 +28,7 @@
         <h2 class="text-center head-9xl mb-4">Sečteno a rozkradeno</h2>
 
         <div class="flex justify-center">
-            <div class="bg-pirati-yellow p-5 head-8xl font-alt justify-center flex min-w-96">
+            <div class="bg-pirati-yellow p-5 head-8xl font-alt justify-center flex min-w-32 lg:min-w-96">
                 <div id="total" data-value="0">0 Kč</div>
             </div>
         </div>

src/css/atoms/form-field.pcss

@@ -138,6 +138,17 @@
     @apply inline absolute pointer-events-none;
 
     content: "";
+    height: 5px;
+    width: 12px;
+    top: 6px;
+    left: 4px;
+
+    border-left: 2px solid theme("colors.white");
+    border-bottom: 2px solid theme("colors.white");
+    transform: rotate(-45deg);
+  }
+
+  input._calculator_item:checked:after {
     height: 23px;
     width: 37px;
     top: 3px;
@@ -145,7 +156,6 @@
 
     border-left: 4px solid theme("colors.white");
     border-bottom: 4px solid theme("colors.white");
-    transform: rotate(-45deg);
   }
 }