wip - migrate new homepage design

main/templates/main/includes/layout/header.html

-{% load static wagtailcore_tags %}
-
-<!-- Navbar -->
-<nav class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full xl:duration-200 hover:bg-black">
-  <!-- Logo -->
-  <a href="/" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-4">
-    <img src="{% static "shared/img/logo-full-black.svg" %}" alt="">
-  </a>
-  <!-- Flex container -->
-  <div class="grid-container main-menu-grid m-0 w-full xl:w-auto absolute xl:static">
-    <div class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none xl:py-6">
-      <!-- Hamburger Icon -->
-      <input class="hidden" type="checkbox" id="menuToggle"/>
-      <label class="pl-3 py-3 z-50 hamb mr-1 mr-sm-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
-        <span class="container">
-          <span class="bar1"></span>
-          <span class="bar2"></span>
-          <span class="bar3"></span>
-        </span>
-      </label>
-      <!-- Menu -->
-
-      <div class="main-menu__main main-menu-items justify-center pt-20 xl:pt-0 xl:flex-wrap z-40 space-x-3 overflow-auto bg-white -mt-20 xl:-mt-0 xl:h-auto xl:bg-transparent text-center xl:text-left xl:space-x-3 xl:mt-0 2xl:space-x-6 xl:flex">
-        {% for block in page.root_page.menu %}
-          {% include_block block %}
-        {% endfor %}
-      </div>
-      <!--     Buttons & Social-->
-      <div class="main-menu__external main-menu-items items-center justify-center xl:justify-start space-x-1 2xl:space-x-3 xl:flex">
-        <div class="flex py-4 space-x-10 xl:space-x-3 mb-2 xl:mb-0 justify-center xl:justify-start xl:mr-2">
-          {% for social_link_block in page.root_page.social_links %}
-            <a href="{{ social_link_block.value.link }}"
-               class="text-lg xl:text-base text-black duration-100 xl:text-white hover:no-underline hover:text-yellow-600">
-              <i class="{{ social_link_block.value.icon }}"></i>
-            </a>
-          {% endfor %}
-        </div>
-
-        <div class="flex-row flex pb-8 xl:pb-0 gap-4 xl:pr-5">
-          {% if page.root_page.contact_newcomers_link and page.root_page.contact_newcomers_text %}
-            <a href="{{ page.root_page.contact_newcomers_link }}"
-               class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive uppercase" target="_blank">
-              <div class="btn__body-wrap w-32 h-11">
-                <div class="btn__body w-32 h-11 xl:w-auto ">{{ page.root_page.contact_newcomers_text }}</div>
-              </div>
-            </a>
-          {% endif %}
-          {% if page.root_page.donation_page_link and page.root_page.donation_page_text %}
-            <a href="{{ page.root_page.donation_page_link }}"
-               class="btn btn--white btn--to-grey-175 btn--hoveractive uppercase" target="_blank">
-              <div class="btn__body-wrap w-32 h-11">
-                <div class="btn__body w-32 h-11 xl:w-auto">{{ page.root_page.donation_page_text }}</div>
-              </div>
-            </a>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
-</nav>

main/templates/main/includes/layout/messages.html

-{% if messages %}
-    <ul class="flex flex-col w-full drop-shadow-lg">
-        {% for message in messages %}
-            <li
-                class="px-5 py-4 text-center relative z-50 {% if message.tags == "debug" %}bg-grey-200{% elif message.tags == "info" %}bg-blue-300 text-white{% elif message.tags == "success" %}bg-green-400 text-white{% elif message.tags == "warning" %}bg-yellow-300{% elif message.tags == "error" %}bg-red-600 text-white{% endif %}"
-            >
-                <i
-                    class="ico--{% if message.tags == "debug" %}cog{% elif message.tags == "info" %}info{% elif message.tags == "success" %}checkmark{% elif message.tags == "warning" %}warning{% elif message.tags == "error" %}cross{% endif %} mr-2"
-                ></i>
-
-                {{ message }}
-            </li>
-        {% endfor %}
-    </ul>
-{% endif %}

main/templates/main/includes/layout/person_photo_page_header.html

-{% load wagtailcore_tags %}
-
-<header
-  class="bg-black flex items-center header-clip photo-header py-32 mb-4 xl:mb-20 w-full bg-no-repeat bg-cover bg-center"
-  style="background-image: url('{{ image_url | default_if_none:"https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg" }}')"
->
-  <div class="grid-container header-max-width pt-16">
-    <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0">
-      <h1 class="font-alt text-white">
-        <span class="text-xl sm:text-2xl">{{ before_title | default_if_none:"" }}</span><br>
-
-        <div class="flex items-baseline flex-col sm:flex-row">
-          <span class="font-alt text-6xl sm:text-7xl grow sm:grow-0">{{ page.title | default_if_none:"" }}</span>
-          {% if after_title %}
-            <span class="text-xl sm:text-2xl">
-              <span class="text-xl hidden sm:text-2xl sm:inline">, </span>{{ after_title }}
-            </span>
-          {% endif %}
-        </div>
-        <br>
-
-        <span class="font-alt">{{ subtitle | default_if_none:"" }}</span>
-      </h1>
-    </div>
-  </div>
-</header>

main/templates/main/includes/layout/photo_page_header.html

-{% load wagtailcore_tags %}
-
-<header
-  class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
-  style="background-image: url('{{ image_url | default_if_none:"https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg" }}')"
->
-  <div class="grid-container">
-  <div class="grid-content-with-right-side header-max-width pt-40 sm:pt-0">
-    <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0">
-      <div class="text-lg sm:text-3xl text-green-500 mb-4 font-medium sm:mb-8">
-        <span>{{ before_title|default_if_none:"" }}</span>
-      </div>
-      <h1 class="font-alt text-white text-3xl md:text-5xl leading-9 sm:leading-none lg:text-6xl">
-        {{ page.title | default_if_none:"" }}
-      </h1>
-    </div>
-  </div>
-  </div>
-</header>

main/templates/main/includes/layout/simple_page_header.html

-<header class="bg-black flex items-center simple-header-height header-clip mb-8 xl:mb-24 xl:pb-24 xl:pt-44 w-full">
-  <div class="grid-container header-max-width">
-    <div class="grid-content">
-      <h1 class="head-8xl text-white">
-        {{ page.title }}
-      </h1>
-      {% if sub_heading %}
-        <h2 class="head-3xl text-white">
-          {{ sub_heading }}
-        </h2>
-      {% endif %}
-    </div>
-  </div>
-</header>

main/templates/main/includes/menu_item.html

-{% firstof self.page.url self.link as target %}
-<a
-  href="{{ target }}"
-  class="text-2xl xl:text-base menu-link duration-100 hover:text-yellow-600"
->
-  {{ self.title }}
-</a>

main/templates/main/includes/molecules/articles/article_richtext_content_with_image.html

+<div>
+  <div
+    class="
+      {{ classes }}
+
+      font-condensed text-justify
+
+      [&_p]:leading-7 [&_p]:text-black [&_p]:text-lg
+    "
+  >
+    {% include "main/includes/atoms/articles/side_image.html" with classes="lg:float-right" image_url=image_url image_source=image_source %}
+
+    <p>
+      {{ text_1 }}
+    </p>
+    <p>
+      {{ text_2 }}
+    </p>
+
+    <p>
+      {{ text_1 }}
+    </p>
+
+    {% include "main/includes/atoms/articles/side_image.html" with classes="lg:float-left" image_url=image_url image_source=image_source %}
+
+    <p>
+      {{ text_2 }}
+    </p>
+  </div>
+</div>

main/templates/main/includes/molecules/articles/article_timeline_preview.html

+<div
+  class="
+    flex flex-col mb-8 bg-grey-180 drop-shadow
+
+    {{ classes }}
+  "
+>
+  <a href="#">
+    <img
+      src="../../../../static/images/person-table.png" alt=""
+      class="w-full"
+    >
+  </a>
+
+  <div class="flex flex-col px-8 pb-6 pt-5">
+    <div class="text-grey-350 font-condensed mb-2">
+      {{ date }}
+    </div>
+
+    <a href="#" class="mb-2 underline-offset-4">
+      <h2 class="head-3xl">{{ title }}</h2>
+    </a>
+
+    <div class="mb-6">
+      {% include 'patterns/molecules/tags/inline_tags.html' %}
+    </div>
+
+    <p class="mb-8">
+      {{ text }}
+    </p>
+
+    <div class="flex justify-end">
+      {% include 'patterns/atoms/buttons/round_button.html' with button_text='Zjisti více' %}
+    </div>
+  </div>
+</div>

main/templates/main/includes/molecules/articles/small_article_preview.html

+<div class="flex">
+  <img
+      src="../../../../static/images/person-table.png"
+      alt=""
+      class="mr-4 h-36 w-36"
+  >
+  <div class="flex flex-col justify-between items-start">
+    <div class="flex flex-col gap-2.5">
+      <span class="text-sm text-grey-250 lg:text-base">{{ date }}</span>
+      <h4 class="leading-5">
+        {{ text }}
+      </h4>
+    </div>
+
+    {% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Číst dále' %}
+  </div>
+</div>

main/templates/main/includes/molecules/blocks/download_block.html

+<div
+  class="
+    flex flex-col justify-between bg-grey-150 px-10 py-10 my-10
+
+    xl:flex-row xl:my-10 xl:py-5
+  "
+>
+
+  <div
+    class="
+      flex flex-col gap-3 mb-6 text-lg
+      xl:flex-row xl:items-center xl:gap-0 xl:mb-0 xl:text-xl
+    "
+  >
+    <i class="ico--download p-2 text-3xl md:text-4xl xl:text-7xl xl:mr-12"></i>
+
+    <div>
+      <span class="font-bold mr-1">Soubor:</span>
+      <span class="overflow-hidden text-ellipsis">{{ filename }}</span>
+    </div>
+  </div>
+
+  <div class="flex flex-col justify-center items-start">
+    {% include 'patterns/atoms/buttons/round_button.html' with button_text='Stáhnout' %}
+  </div>
+</div>

main/templates/main/includes/molecules/blocks/icon_title_text_block.html

+{% if url %}
+  <a
+    href="{{ url }}"
+{% else %}
+  <div
+{% endif %}
+    class="hover:no-underline mb-12 flex gap-3 max-w-4xl"
+  >
+
+  {% if icon %}
+    <i class="{{ icon }} mr-6 text-6xl xl:justify-self-end"></i>
+  {% endif %}
+
+  <div class="flex flex-col">
+    <h3 class="font-alt mb-4 text-4xl">
+      {{ title }}
+    </h3>
+    <p class="leading-6">
+      {{ text }}
+    </p>
+  </div>
+
+{% if url %}
+  </a>
+{% else %}
+  </div>
+{% endif %}

main/templates/main/includes/molecules/blocks/message_block.html

+<div
+    class="px-5 py-4 text-center relative z-30 {% if type == "debug" %}bg-grey-200{% elif type == "info" %}bg-blue-300 text-white{% elif type == "success" %}bg-green-400 text-white{% elif type == "warning" %}bg-yellow-300{% elif type == "error" %}bg-red-600 text-white{% endif %} {% if is_last_child %}drop-shadow-lg{% endif %}"
+>    
+    <i
+        class="ico--{% if type == "debug" %}cog{% elif type == "info" %}info{% elif type == "success" %}checkmark{% elif type == "warning" %}warning{% elif type == "error" %}cross{% endif %} mr-2"
+    ></i>
+
+    {{ content }}
+</div>

main/templates/main/includes/molecules/blocks/search_block.html

+<div class="flex flex-row">
+  <input
+    class="bg-grey-150 w-56 h-10 px-4 text-lg xl:h-14 xl:px-5"
+    type="text"
+    value="{{ value }}"
+    placeholder="{{ placeholder }}"
+    aria-label="Vyhledávací box"
+  >
+  {% include 'patterns/atoms/buttons/search_button.html' %}
+</div>

main/templates/main/includes/molecules/boxes/card_box.html

+<article class="min-w-96 flex flex-col min-h-[600px] {{ classes }}">
+  <a href="#">
+    <img src="{{ image }}" alt="{{ header }}" draggable="false" class="w-full h-80 object-cover">
+  </a>
+  <div class="p-6 bg-white text-black {{ description_classes }} h-full flex flex-col justify-between">
+    <div class="mb-6">
+      {% if date %}
+        <div class="text-xl text-grey-350 font-condensed mb-2">
+          {{ date }}
+        </div>
+      {% endif %}
+
+      <div class="flex flex-col mt-3 gap-3 justify-between mt-auto">
+        <h2 class="font-alt text-4xl">
+          <a href="#" class="underline-offset-4">
+            {{ header }}
+          </a>
+        </h2>
+
+        <p class="text-black text-lg leading-[1.8rem] font-condensed">
+          {{ content }}
+        </p>
+      </div>
+    </div>
+
+    <div class="flex justify-center">
+      {% include 'patterns/atoms/buttons/round_button.html' with button_text="Zjisti více" %}
+    </div>
+  </div>
+</article>

main/templates/main/includes/molecules/boxes/image_with_button_box.html

+<div class="flex flex-col">
+  <img
+    class="w-74 h-74 object-cover"
+    src="{{ image.url }}"
+  >
+
+  <div class="text-center mt-6 mb-4">
+    <h2 class="head-6xl">{{ desc_text }}</h2>
+  </div>
+
+  <div class="text-center flex justify-center">
+    {% include 'patterns/atoms/buttons/round_button.html' with url=url classes='bg-white text-black' button_text=button_text %}
+  </div>
+</div>

main/templates/main/includes/molecules/contact/contact_footer_box.html

+<div class="flex grow flex-col gap-0 md:flex-row md:gap-8">
+  <div class="md:shrink-0">
+    <a href="#">
+      <img
+        class="h-full w-36 object-cover rounded-full"
+        src="../../../../static/images/person-table.png"
+        alt=" {{ name }}"
+      >
+    </a>
+  </div>
+  <div>
+    <div class="flex flex-col justify-between py-4 pr-4 h-full">
+      <div class="flex flex-col">
+        <a
+          class="hover:no-underline block font-bold font-alt leading-8 text-xl md:text-2xl xl:text-3xl"
+          href="#"
+        ><h4>{{ name }}</h4></a>
+
+        <span class="leading-6 mb-4 md:mb-6 w-10/12 text-grey-200">
+          {{ function }}
+        </span>
+      </div>
+
+      <div class="flex flex-col items-start">
+        <a
+          class="mb-2"
+          href="tel:{{ telephone }}"
+        >{{ telephone }}</a>
+
+        <a
+          class="text-pirati-yellow"
+          href="mailto:{{ mail }}"
+        >{{ mail }}</a>
+      </div>
+    </div>
+  </div>
+</div>

main/templates/main/includes/molecules/contact/contact_person_large_box.html

+<div
+  class="
+    flex flex-col grow bg-grey-180
+
+    xl:gap-8 xl:flex-row
+
+    {{ classes }}
+  ">
+  <div class="xl:shrink-0">
+    <a href="#">
+      <img
+        class="h-full w-full xl:w-60 object-cover"
+        src="../../../../static/images/person-table.png"
+        alt=" {{ name }}"
+      >
+    </a>
+  </div>
+  <div>
+    <div
+      class="
+        flex flex-col justify-between py-4 px-4 h-full
+        xl:px-0 xl:pr-4
+      "
+    >
+      <div class="flex flex-col">
+        <a
+          class="hover:no-underline block font-bold mb-1 text-xl xl:text-3xl"
+          href="#"
+        ><h4>{{ name }}</h4></a>
+
+        <span class="leading-6 mb-4 xl:mb-6">
+          {{ function }}
+        </span>
+      </div>
+
+      <div class="flex flex-col">
+        <a
+          class="font-bold mb-2"
+          href="tel:{{ telephone }}"
+        >{{ telephone }}</a>
+
+        <a
+          class="font-bold"
+          href="mailto:{{ mail }}"
+        >{{ mail }}</a>
+
+        <div class="flex mt-5">
+          {% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Zjisti více' %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

main/templates/main/includes/molecules/menus/carousel.html

+{% load wagtailimages_tags %}
+
+<div>
+  <div class="header-carousel">
+    <div class="h-[700px] xl:h-screen relative">
+      {% image self.image fill-1920x1020 as carousel_img %}
+
+      <img
+        src="{{ carousel_img.url }}"
+        draggable="false"
+      >
+
+      <div class="header-carousel--text-wrapper">
+        <div class="container--wide h-full flex flex-col justify-end items-start">
+          <div class="mb-4">
+            <h1 class="text-black">{{ self.line_1 }}</h1>
+            <h1 class="text-black mb-2">{{ self.line_2 }}</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

main/templates/main/includes/molecules/popouts/hoax_popout_point.html

+{% load static %}
+
+<div class="__js-root">
+  <ui-popout>
+    <template slot="toggler">
+      {{ title }}
+    </template>
+    <ui-popout-content>
+      <div class="flex flex-wrap gap-4 lg:flex-nowrap">
+        <div class="grow lg:grow-0 lg:basis-2/3 prose max-w-screen-lg">
+          {% include "main/includes/atoms/text/paragraph.html" with text=hoax %}
+          <img
+            class="mt-10"
+            src="{% static "images/hoax.webp" %}"
+            alt="Hoax"
+          >
+          <h3 class="head-4xl mt-10">Jak to je?</h3>
+          {% include "main/includes/atoms/text/paragraph.html" with text=reality %}
+        </div>
+        <div class="lg:basis-1/3">
+          <img
+            class="w-full mb-3"
+            src="{{ image_url }}"
+            alt="Obrázek hoaxu"
+          >
+          <small class="text-grey-300">
+            <i>{{ image_explanation }}</i>
+          </small>
+        </div>
+      </div>
+    </ui-popout-content>
+  </ui-popout>
+</div>

main/templates/main/includes/molecules/popouts/popout_point.html

+<div class="__js-root">
+  <ui-popout>
+    <template slot="toggler">
+      {{ name }}
+    </template>
+    <ui-popout-content>
+      <div class="prose max-w-screen-lg">
+        {% include "main/includes/atoms/text/paragraph.html" with text=text %}
+      </div>
+    </ui-popout-content>
+  </ui-popout>
+</div>