more extensible cards, fix navbar scrolling

majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html

@@ -2,16 +2,23 @@
   <div class="flip-card-inner">
     <div class="flip-card-front">
       <div
-        class="relative h-[33rem] bg-black rounded-3xl overflow-hidden bg-cover"
-        style="background-image:url('{{ image_url }}')"
+        class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
+        style="
+          background-color: {{ bg_color }};
+
+          {% if image_url %}
+            background-image: url('{{ image_url }}')
+          {% endif %}
+        "
       >
         <div
           class="
             absolute top-0 left-0
 
             border border-r-[27rem] border-r-[transparent]
-            border-l-0 border-t-[33rem] border-t-pirati-yellow
+            border-l-0 border-t-[33rem]
           "
+          style="border-top-color: {{ bg_color }}"
         ></div>
 
         <h1
@@ -19,10 +26,23 @@
             font-alt text-5xl whitespace-pre-line absolute top-10 left-10 max-w-[60%]
           "
         >{{ title }}</h1>
+
+        <div
+          class="
+            absolute bottom-4 right-4 block text-white opacity-75 text-right leading-5 font-condensed
+
+            md:hidden
+          "
+        >
+          Pro zobrazení detailů
+          <br>
+          se dotkni karty.
+        </div>
       </div>
     </div>
     <div
-      class="flip-card-back bg-pirati-yellow rounded-3xl p-10"
+      class="flip-card-back rounded-3xl p-10"
+      style="background-color: {{ bg_color }}"
     >
       <div class="prose prose-black">
         {% comment %}

majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml

@@ -28,3 +28,4 @@ context:
       Ozve se ti koordinátor/ka a provede tě přijímacím procesem
     </p>
   button_text: 'Chci se zapojit!'
+  bg_color: '#FEC900'

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

@@ -255,6 +255,17 @@
 
 {% block observer_script %}
   <script>
+    const navbar = document.querySelector("#navbar")
+
+    const transparentClass = "{% block observer_script_toggled_class %}navbar--transparent{% endblock %}"
+    let initiallyHadTransparentClass = false
+
+    if (navbar.classList.contains(transparentClass)) {
+      initiallyHadTransparentClass = true
+    }
+
+    console.log(initiallyHadTransparentClass)
+
     window.onscroll = () => {
       const screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
 
@@ -262,11 +273,10 @@
         return
       }
 
-      const navbar = document.querySelector("#navbar")
-      const transparentClass = "{% block observer_script_toggled_class %}navbar--transparent{% endblock %}"
-
       if (window.scrollY === 0) {
+        if (initiallyHadTransparentClass) {
           navbar.classList.add(transparentClass)
+        }
       } else {
         navbar.classList.remove(transparentClass)
       }