Merge branch 'feat/requested-changes-1' into 'master'

[ADD] minor layout changes - move main header further down, article titles up,...

See merge request !4

majak_uistyleguide/templates/patterns/molecules/articles/article_photo_header.html

@@ -3,7 +3,7 @@
   style="background-image: url('../../../../static/images/background-images/bg-bartos-newsletter.jpg')"
 >
   <div class="grid-container">
-  <div class="grid-content-with-right-side header-max-width pt-40 sm:pt-0">
+  <div class="grid-content-with-right-side header-max-width pt-20 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>{{ photo_header_date }}</span>

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

@@ -27,12 +27,10 @@
   </div>
 
   {% if has_image %}
-    <div class="flex-shrink-0 flex justify-center items-center">
-      <img
-        src="https://randomuser.me/api/portraits/women/56.jpg"
-        class="w-80"
-        alt="Obrázek Tweetu"
-      />
+    <div class="flex-shrink-0">
+      <img src="https://randomuser.me/api/portraits/women/56.jpg"
+           class="tweet-image"
+           alt="Obrázek Tweetu">
     </div>
   {% endif %}
 </a>

majak_uistyleguide/templates/patterns/organisms/main_section/region_section.html

 <div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
-     style="background-image: url('../../../../static/images/background-images/bg-map.jpg')">
+     style="background-image: url('../../../../static/images/background-images/bg-map.jpg')"
+     id="regiony">
   <div class="container--medium mx-auto px-4">
     <h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
       {{ region_title }}

src/css/molecules/carousels.pcss

@@ -38,12 +38,12 @@
     max-width: 1200px;
     position: absolute;
     margin-left: 10%;
-    bottom: 15%;
+    bottom: 11.5%;
     height: 85%;
     width: 85%;
 
     @screen xl {
-      bottom: 37%;
+      bottom: 27%;
     }
   }
 

src/css/molecules/twitter_box.pcss

+.tweet-image {
+  @apply w-80 h-80;
+
+  object-fit: cover;
+}

src/css/style.pcss

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