Revize 4e003182

Re #8079 - finishing frontend
- new date label next to timeline
- changed intro images to images with real data
- locations box has maximum height with scrollbar
- new texts on intro pages (map points)
- CSS changes and repairs

website/public/css/style.scss

@@ -274 +274 @@
 }
 
 .swiper-slide {
-  z-index: -1000;
   display: flex;
   justify-content: center;
   align-items: center;
 
   &.slide-bg-1 {
-    background: url($images-dir + 'bg-1.jpg') no-repeat bottom center;
+    background: url($images-dir + 'bg-1.jpg') no-repeat top center;
     background-size: cover;
   }
 
@@ -293 +292 @@
     background: url($images-dir + 'bg-3.jpg') no-repeat bottom center;
     background-size: cover;
 
-    @include media-breakpoint-down(sm) {
-      .container {
-        max-width: 100%;
-        height: 100%;
-        overflow-y: scroll;
-      }
-    }
-
     .slide-text {
       width: 100%;
     }
   }
+
+  @include media-breakpoint-down(sm) {
+    .container {
+      max-width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+    }
+  }
 }
 
 // TEXT VE SLIDU
@@ -534 +533 @@
   cursor: pointer;
   border: 2px solid #fff;
 
-  @include media-breakpoint-down(sm) {
+  @media not all and (min-width: 1900px) and (max-width: 2100px) {
     display: none;
   }
 
@@ -558 +557 @@
 
     .desc {
       display: block;
-      width: 210px;
+      width: 220px;
       padding: 10px 20px;
       z-index: 0;
       opacity: 0.75;
@@ -598 +597 @@
   }
 
   &.point-1 {
-    bottom: 12%;
-    right: -75%;
+    top: 455px;
+    right: 32.5%;
   }
 
   &.point-2 {
-    top: 21%;
-    right: -92%;
+    top: 235px;
+    right: 18%;
   }
 
   &.point-3 {
-    top: 22%;
-    right: -92%;
+    bottom: 430px;
+    right: 20.8%;
   }
 }
 
@@ -646 +645 @@
 
   @include media-breakpoint-down(xs) {
     max-width: 240px;
+    max-height: 70%;
     top: 80px;
     right: 10px;
   }
@@ -694 +694 @@
       list-style-image: url($images-dir + 'li-bullet.svg');
 
       @include media-breakpoint-down(xs) {
+        max-height: 244px;
+        overflow-y: scroll;
         font-size: 13.5px;
       }
     }
@@ -789 +791 @@
       order: 3;
     }
 
+    @include media-breakpoint-down(xs) {
+      margin-right: 0;
+    }
+
     &:after {
       background: url($images-dir + 'btn-next.svg') no-repeat;
     }
@@ -804 +810 @@
     }
   }
 
+  .datetime {
+    display: flex;
+    
+    @media (max-width: 390px) {
+      display: block;
+      text-align: center;
+      margin-right: 10px;
+    }
+  }
+
+  .date {
+    font-size: 15px;
+    padding: 3px 12px 4px 12px;
+    margin-right: 10px;
+    text-align: center;
+    border-radius: 15px;
+    cursor: pointer;
+    background: #0B155A;
+
+    @media (max-width: 390px) {
+      margin-right: 0;
+    }
+
+    &:hover {
+      opacity: .7;
+    }
+  }
+
   .timeline {
     display: flex;
     height: 30px;
@@ -819 +853 @@
       margin-right: 20px;
     }
 
+    @media (max-width: 390px) {
+      display: inline-block;
+      margin: 4px 0 0 0;
+    }
+
     .hour {
       @include media-breakpoint-down(md) {
         display: none;