Merge branch 'feat/improvement-set-6' into 'master'

Added crossroads section, full-block program section links, header links hovering

See merge request !9

majak_uistyleguide/templates/patterns/molecules/blocks/icon_title_text_block.html

+{% if icon_title_url %}
+  <a href="{{ icon_title_url }}" class="hover:no-underline grid-container mb-12">
+{% else %}
   <div class="grid-container mb-12">
+{% endif %}
+
   <i class="grid-left-side {{ icon }} mr-6 text-6xl xl:justify-self-end"></i>
   <div class="grid-content flex flex-col">
     <h3 class="font-alt mb-4 text-4xl">
@@ -8,4 +13,9 @@
       {{ icon_title_text }}
     </p>
   </div>
+
+{% if icon_title_url %}
+  </a>
+{% else %}
   </div>
+{% endif %}

majak_uistyleguide/templates/patterns/molecules/blocks/icon_title_text_block.yaml

 context:
+  icon_title_url: 'http://example.com'
   icon_title_title: 'DOSTUPNÉ A DŮSTOJNÉ BYDLENÍ PRO KVALITNÍ ŽIVOT '
   icon_title_text: 'Bydlení je jednou ze základních věcí pro každou obec nebo město. Nevnímáme bydlení jako
     zásluhu. Bydlet

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

+<article class="card">
+  <a href="{{ url }}">
+    <img src="{{ image }}" alt="{{ header }}" class="w-full h-48 object-cover">
+  </a>
+  <div class="p-4">
+    <h2 class="mb-2 text-xl font-bold">
+      <a href="{{ url }}">
+        {{ header }}
+      </a>
+    </h1>
+    <div class="font-light text-sm break-words">
+      {% if content %}
+        {{ content }}
+      {% endif %}
+    </div>
+  </div>
+</article>

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

+context:
+  url: "https://example.com"
+  image: "https://randomuser.me/api/portraits/men/62.jpg"
+  header: "MRT Návykové chování"
+  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis ut diam quam nulla porttitor."

majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html

 <div class="flex mb-8 person-box-big max-w-sm gap-6 xl:max-w-xl flex-col xl:flex-row xl:mb-16">
   <div class="xl:shrink-0">
+    <a href="#">
       <img
         class="rounded-full shadow-sm w-30 xl:w-60"
         src="../../../../static/images/person-table.png"
         alt=" {{ name }}"
       >
+    </a>
   </div>
   <div class="flex flex-col justify-between py-4">
     <div class="flex flex-col mb-8">
-      <h4 class="font-bold mb-2 text-2xl xl:text-4xl">
-        {{ person_big_name }}
-      </h4>
+      <a
+        class="hover:no-underline block font-bold mb-2 text-2xl xl:text-4xl"
+        href="#"
+      ><h4>{{ person_big_name }}</h4></a>
       <span class="leading-6 mb-4 xl:mb-6 w-10/12">
         {{ person_big_function }}
       </span>

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

@@ -23,20 +23,32 @@
       <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 item in menu_items %}
-        <a href="#" class="text-2xl xl:text-base menu-link">{{ item }}</a>
+          <a
+            href="#"
+            class="text-2xl xl:text-base menu-link duration-100 hover:text-yellow-600"
+          >{{ item }}</a>
         {% 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">
-          <a href="{{ menu_facebook }}" class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
+          <a
+            href="{{ menu_facebook }}"
+            class="text-lg xl:text-base text-black duration-100 xl:text-white hover:no-underline hover:text-yellow-600"
+          >
             <i class="ico--facebook"></i>
           </a>
-          <a href="{{ menu_twitter }}" class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
+          <a
+            href="{{ menu_twitter }}"
+            class="text-lg xl:text-base text-black duration-100 xl:text-white hover:no-underline hover:text-yellow-600"
+          >
             <i class="ico--twitter"></i>
           </a>
-          <a href="{{ menu_instagram }}" class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
+          <a
+            href="{{ menu_instagram }}"
+            class="text-lg xl:text-base text-black duration-100 xl:text-white hover:no-underline hover:text-yellow-600"
+          >
             <i class="ico--instagram"></i>
           </a>
         </div>

majak_uistyleguide/templates/patterns/templates/crossroad/crossroad.html

+{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/molecules/header/simple_header.html' with simple_header_title='Rezortní týmy' %}
+<main role="main" class="mb-10 xl:mb-32">
+  <div class="grid-container mb-2 lg:mb-12">
+    <div class="grid-full">
+      {% for section in sections %}
+        {% if section.header %}
+          <h2 class="head-4xl mt-5 mb-5">{{ section.header }}</h2>
+        {% endif %}
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {% for card in section.cards %}
+            {% include 'patterns/molecules/boxes/card_box.html' with url=card.url image=card.image header=card.header content=card.content %}
+          {% endfor %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</main>
+{% include 'patterns/organisms/layout/footer.html' %}

majak_uistyleguide/templates/patterns/templates/crossroad/crossroad.yaml

+context:
+  sections:
+    -
+      header: "Rezortní týmy"
+      cards:
+        -
+          url: "https://example.com"
+          image: "https://randomuser.me/api/portraits/women/63.jpg"
+          header: "Informatika"
+          content: "Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Laoreet id donec ultrices tincidunt arcu non. Sem et tortor consequat id."
+        -
+          url: "https://example.com"
+          image: "https://randomuser.me/api/portraits/men/64.jpg"
+          header: "Životní Prostředí"
+          content: "Id velit ut tortor pretium viverra suspendisse potenti. Accumsan in nisl nisi scelerisque eu ultrices. Arcu odio ut sem nulla. Mollis nunc sed id semper risus in."
+        -
+          url: "https://example.com"
+          image: "https://randomuser.me/api/portraits/women/65.jpg"
+          header: "Evropa, zahraničí, obrana"
+          content: "Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Tellus elementum sagittis vitae et leo duis ut diam. Eu non diam phasellus vestibulum."
+    -
+      header: "Mezirezortní týmy"
+      cards:
+        -
+          url: "https://example.com"
+          image: "https://randomuser.me/api/portraits/men/62.jpg"
+          header: "Návykové chování"
+          content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis ut diam quam nulla porttitor."
+        -
+          url: "https://example.com"
+          image: "https://randomuser.me/api/portraits/women/63.jpg"
+          header: "Demokracie"
+          content: "Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Laoreet id donec ultrices tincidunt arcu non. Sem et tortor consequat id."
+        -
+          url: "https://example.com"
+          image: "https://randomuser.me/api/portraits/men/64.jpg"
+          header: "Lidská práva"
+          content: "Id velit ut tortor pretium viverra suspendisse potenti. Accumsan in nisl nisi scelerisque eu ultrices. Arcu odio ut sem nulla. Mollis nunc sed id semper risus in."
+        -
+          url: "https://example.com"
+          image: "https://randomuser.me/api/portraits/women/65.jpg"
+          header: "Bezbariérové Česko"
+          content: "Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Tellus elementum sagittis vitae et leo duis ut diam. Eu non diam phasellus vestibulum."

src/css/molecules/card_box.pcss

+.card {
+  box-shadow: 0 3px 1px -2px rgba(221,221,221,.43), 0 2px 2px 0 rgba(221,221,221,.37), 0 1px 5px 0 rgba(221,221,221,.35);
+}
+
+.card:hover {
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-duration: .2s;
+  box-shadow: 0 10px 13px -6px rgba(221,221,221,.43), 0 21px 33px 3px rgba(221,221,221,.37), 0 8px 40px 7px rgba(221,221,221,.35);
+}

src/css/style.pcss

@@ -33,6 +33,7 @@
 @import "molecules/switch.pcss";
 @import "molecules/representative_box.pcss";
 @import "molecules/twitter_box.pcss";
+@import "molecules/card_box.pcss";
 
 @import "organisms/article-timeline.pcss";
 @import "organisms/footer.pcss";