sync changes - new twitter image view, better typesetting on program + people pages

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

-<a href="#" class="mb-5 w-full flex flex-col align-center overflow-hidden text-center border border-grey-100 sm:mb-0 hover:no-underline">
-  <div class="md:min-h-[21rem] p-4">
+<a href="#" class="group mb-5 w-full flex flex-col align-center overflow-hidden text-center border border-grey-100 relative sm:mb-0 hover:no-underline">
+  <div class="md:min-h-[21rem] p-4{% if has_image %} opacity-0 group-focus:opacity-100 group-hover:opacity-100 duration-150 z-10{% endif %}">
     <div class="flex flex-col items-center">
       <div class="mb-4 flex items-center justify-between xl:flex-col gap-3">
         <img
@@ -27,7 +27,7 @@
   </div>
 
   {% if has_image %}
-    <div class="flex-shrink-0">
+    <div class="absolute inset-0 flex-shrink-0 z-0 duration-150 group-focus:blur-lg group-focus:opacity-25 group-hover:blur-lg group-hover:opacity-25">
       <img src="https://randomuser.me/api/portraits/women/56.jpg"
            class="tweet-image"
            alt="Obrázek Tweetu">

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

@@ -14,12 +14,14 @@
       <span class="leading-6 mb-4 xl:mb-6 w-10/12">
         {{ person_big_function }}
       </span>
-      <span class="font-bold mb-2 text-grey-300">
-        {{ person_big_telephone }}
-      </span>
-      <span class="text-turquoise-500 underline">
-        {{ person_big_mail }}
-      </span>
+      <a
+        class="font-bold mb-2 text-grey-300"
+        href="tel:{{ person_big_telephone }}"
+      >{{ person_big_telephone }}</a>
+     <a
+        class="text-turquoise-500"
+        href="mailto:{{ person_big_mail }}"
+      >{{ person_big_mail }}</a>
     </div>
     <div>
        {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %}

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

@@ -6,8 +6,8 @@ context:
   menu_facebook: '#'
   menu_twitter: '#'
   menu_instagram: '#'
-  menu_button_1: 'Dary'
-  menu_button_2: 'Nalodění'
+  menu_button_1: 'Darovat'
+  menu_button_2: 'Nalodit se'
 
   menu_items:
   - Jak pracujeme

majak_uistyleguide/templates/patterns/templates/people/people.html

@@ -3,9 +3,13 @@
 <main role="main" class="mb-4 xl:mb-20">
   <div class="grid-container">
     <div class="grid-content">
-      <p class="font-condensed text-xl leading-7 mb-5">
+      <div class="prose max-w-none font-condensed text-xl text-black leading-7 mb-12 program-perex">
+        {# BEGIN Cast generovana Majakem #}<div class="content-block">
+          <p>
             {{ people_text }}
           </p>
+        </div>{# END Cast generovana Majakem #}
+      </div>
     </div>
   </div>
   <div class="container--medium">

majak_uistyleguide/templates/patterns/templates/program/program.html

@@ -4,9 +4,13 @@
 <main role="main" class="mb-4 xl:mb-20">
   <div class="grid-container">
     <div class="grid-content">
-      <p class="font-condensed text-xl leading-7 mb-5 program-perex">
+      <div class="prose max-w-none font-condensed text-xl text-black leading-7 mb-12 program-perex">
+        {# BEGIN Cast generovana Majakem #}<div class="content-block">
+          <p>
             {{ program_text }}
           </p>
+        </div>{# END Cast generovana Majakem #}
+      </div>
     </div>
   </div>
   <div class="">

src/css/style.pcss

@@ -50,11 +50,12 @@
 @import '../../node_modules/vue-slick-carousel/dist/vue-slick-carousel.css';
 
 ::-moz-selection {
-  background: theme("colors.orange.150");
+  @apply text-black;
+  background: theme("colors.yellow.500");
 }
 
 ::selection {
-  background: theme("colors.orange.150");
+  background: theme("colors.yellow.500");
 }
 
 :root {

tailwind.config.js

@@ -73,11 +73,11 @@ module.exports = {
                 '50': '#f7f7f7',
                 '100': '#f3f3f3',
                 '125': '#f0f0f0',
-                '150': '#ECECEC',
+                '150': '#ececec',
                 '175': '#d0d0d0',
-                '200': '#ADADAD',
+                '200': '#adadad',
                 '300': '#4c4c4c',
-                '350': '#4F4F4F',
+                '350': '#4f4f4f',
                 '400': '#343434',
                 '500': '#303132',
                 '600': '#262626',
@@ -116,9 +116,9 @@ module.exports = {
                 '300': '#027da8',
             },
             'turquoise': {
-                '200': '#92D2DB',
-                '400': '#1BC0E3',
-                '500': '#25A5B9'
+                '200': '#92d2db',
+                '400': '#1bc0e3',
+                '500': '#25a5b9'
             },
             'cyan': {
                 '100': '#a7d4d1',
@@ -131,7 +131,7 @@ module.exports = {
                 '100': '#f2d29f',
                 '150': '#ffeda5',
                 '200': '#f1ae7b',
-                '250': '#FEA86A',
+                '250': '#fea86a',
                 '300': '#ed9654',
             },
             'violet': {
@@ -140,8 +140,8 @@ module.exports = {
                 '300': '#8d415f',
                 '400': '#840048',
                 '500': '#670047',
-                '600': '#7D337F',
-                '700': '#7D347D',
+                '600': '#7d337f',
+                '700': '#7d347d',
             },
         },
         container: {