Add mobile styling

resources/assets/js/functions/menu.js

@@ -19,23 +19,52 @@
       var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone());
       var pos = $menuItem.offset();
       submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
-      submenu.on( "mouseleave", function(){
+      submenu.on( "mouseleave", function() {
         $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
         $menuItem.removeClass('hover');
       } );
       $('body').append(submenu);
       submenu.children('ul.submenu').slideDown();
 
-      submenu.find('ul.submenu li.has_submenu').click(function(){
-        $(this).find('ul.submenu').slideToggle();
-        $(this).toggleClass('opened');
-      });
+      submenu.find('ul.submenu').subMenu({});
       openPlayerInNewScreen();
     });
   };
 
+  /**
+   * @param {object} _options
+   */
+  $.fn.subMenu = function (_options) {
+    var options = {
+      menuSubmenuClass: 'has_submenu'
+    };
+    $.extend(options, _options);
+    var $container = $(this);
+
+    $container.find('li.' + options.menuSubmenuClass + ' > a').click(function(e) {
+      e.preventDefault();
+      var $li = $(this).closest('li');
+      $li.children('ul.submenu').slideToggle();
+      $li.toggleClass('opened');
+    });
+  };
+
 }(jQuery));
 
 $(function () {
-  $('.menu, .mobile-menu').menu({});
+  $('.menu').menu({});
+  $('.mobile-menu').subMenu({});
+  $('.mobile_menu_button a').click(function() {
+    $('.mobile_menu_container').show();
+  });
+  $('.mobile_close_menu_button a').click(function() {
+    $('.mobile_menu_container').hide();
+  });
+  $('.mobile_menu_container').click(function(e){
+    var $target = $(e.target);
+    if(!$target.closest('#mobile_menu_nav').length &&
+      $('.mobile_menu_container').is(":visible")) {
+      $('.mobile_menu_container').hide();
+    }
+  });
 });

resources/assets/js/functions/prettyPhoto.js

@@ -1,5 +1,4 @@
 $(function () {
-  console.log($(".prettyPhoto[rel^='prettyPhoto']"));
   $(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({
     show_title: false,
     slideshow: 3000,

resources/assets/js/functions/snapTo.js

@@ -0,0 +1,54 @@
+(function ($) {
+
+  /**
+   * @param {object} _options
+   */
+  $.fn.snapTo = function (_options) {
+    var options = {
+      elementClass: 'post'
+    };
+    $.extend(options, _options);
+    var $container = $(this);
+    var $elements = $container.find('.' + options.elementClass + ':visible');
+    var stopSnapTo = false;
+
+    var snapTimeout = null;
+    var snapHandler = function() {
+      if (!stopSnapTo) {
+        stopSnapTo = true;
+        var y = $container.scrollLeft();
+        $elements.each(function () {
+          var offset = $(this).offset();
+          if (offset.left > -(window.screen.width / 2) && offset.left < window.screen.width / 2) {
+            $container.animate({
+              scrollLeft: Math.round(y + offset.left) + 'px'
+            }, 300);
+            return false;
+          }
+        });
+        if (snapTimeout) {
+          clearTimeout(snapTimeout);
+        }
+        snapTimeout = setTimeout(function () {
+          stopSnapTo = false;
+        }, 500);
+      }
+    }
+    var snapToHandlerTimer = null;
+    var scrollHandler = function() {
+      if (snapToHandlerTimer) {
+        clearTimeout(snapToHandlerTimer);
+      }
+      snapToHandlerTimer = setTimeout(snapHandler, 300);
+    };
+
+    $container.on( "scroll", scrollHandler);
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-snapto]').each(function () {
+    $(this).snapTo($(this).data('snapto'));
+  });
+});

resources/assets/sass/base/_base.scss

@@ -7,6 +7,8 @@
 
 @use "../layout";
 
+@use "mobile";
+
 .mejs__overlay-button {
   border: none;
 }

resources/assets/sass/base/_container.scss

@@ -10,6 +10,9 @@ body {
 .body_container {
   @include container;
   padding: 67px 0;
+  @media (max-width: 768px) {
+    padding: 50px 0;
+  }
   background-color: #f9f9f9;
 }
 .header_container  {
@@ -24,3 +27,11 @@ body {
 .sidebar {
   width: CALC(300px + var(--bs-gutter-x));
 }
+@media (max-width: 768px) {
+  .content_container {
+    padding-right: calc(var(--bs-gutter-x)* .5);
+  }
+  .site_container {
+    overflow: hidden;
+  }
+}

resources/assets/sass/components/_box.scss

@@ -39,6 +39,7 @@
 .tabs {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   &.fit_content {
     width: fit-content;
   }

resources/assets/sass/components/_contact_box.scss

@@ -2,6 +2,8 @@
 
 .contact_box {
   position: relative;
+  padding: 15px 23px 15px 15px;
+
   .logo-whatsapp {
     position: absolute;
     right: 0;
@@ -29,4 +31,9 @@
   .read_more {
     @include read_more_link;
   }
-}
+}
+@media (max-width: 768px) and (min-width: 423px) {
+  .contact_box  p {
+    width: CALC(100% - 81px);
+  }
+}

resources/assets/sass/components/_footer.scss

@@ -10,6 +10,9 @@
 
   .footer_menu {
     background-image: linear-gradient(to right, #0102b0, #4090e3);
+    @media (max-width: 768px) {
+      padding: 60px 30px 30px 30px;
+    }
 
     .row {
       @include container;

resources/assets/sass/components/_header.scss

@@ -1,10 +1,37 @@
 .header {
   height: 110px;
+  .logo {
+    float: left;
+    margin-top: 18px;
+    img {
+      height: 75px;
+    }
+  }
+  .advertisement {
+    float: right;
+    width: 728px;
+    height: 90px;
+  }
 }
-.header .logo {
-  float: left;
-  margin-top: 18px;
+
+@media (max-width: 1170px) {
+  .header {
+    padding: 0 20px;
+  }
 }
-.header .logo img {
-  height: 75px;
+@media (max-width: 980px) {
+  .header {
+    height: 212px;
+    .logo {
+      float: none;
+    }
+    .advertisement {
+      float: none;
+    }
+  }
+}
+@media (max-width: 768px) {
+  .header_container {
+    display: none;
+  }
 }

resources/assets/sass/components/_main_news.scss

@@ -2,6 +2,28 @@
 @use "../abstracts/variables" as *;
 
 .blog_grid {
+  @media (max-width: 768px) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    &::-webkit-scrollbar {
+      height: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      border-radius: 100vw;
+      background: #eee;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: linear-gradient(to right, #10229c, #64a9f2);
+    }
+    .grid_view {
+      width: 300%;
+    }
+  }
   .row, .row > * {
     padding: 0;
     margin: 0;
@@ -12,6 +34,9 @@
   .post {
     position: relative;
     height: 100%;
+    @media (max-width: 768px) {
+      height: 50%;
+    }
 
     img {
       width: 100%;
@@ -64,6 +89,12 @@
         font-size: 16px;
         line-height: 1.17;
       }
+      @media (max-width: 768px) {
+        h2 a, h5 a {
+          font-size: 16px;
+          line-height: 1.17;
+        }
+      }
       .post_date {
         @include post_date;
         color: $news-banner-text-color;

resources/assets/sass/components/_menu.scss

@@ -2,9 +2,11 @@
 @use "../abstracts/mixin" as *;
 
 .menu_container {
-  height: 75px;
-  margin-bottom: 20px;
-  background-image: linear-gradient(to right, #0102b0, #4090e3);
+  @media (min-width: 767px) {
+    height: 75px;
+    margin-bottom: 20px;
+    background-image: linear-gradient(to right, #0102b0, #4090e3);
+  }
 
   nav {
     display: flex;
@@ -97,11 +99,11 @@
     }
   }
 }
-.top_menu_container {
+.top_menu_container, .menu_mobile_container {
   height: 50px;
   @include container;
 
-  ul {
+  ul.right_menu {
     float: right;
     @include reset-list;
 
@@ -145,7 +147,7 @@
 
         .search_input {
           border: 1px solid #efefef;
-          border-radius: 5px;
+          border-radius: 3px;
           background-color: #fff;
           height: 29px;
           font-family: Montserrat, serif;
@@ -164,8 +166,60 @@
     }
   }
 }
+.menu_mobile_container {
+  height: 30px;
+  padding: 12px 0;
+  .mobile_menu_button a {
+    display: block;
+    width: 20px;
+    height: 21px;
+    padding: 4px 10px 4px 11px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: #10229c;
+    margin-right: 12px;
+    i {
+      color: white;
+      font-size: 19px;
+    }
+  }
+  .logo_mobile {
+    height: 100%;
+    img {
+      height: 100%;
+    }
+  }
+  .right_menu_container {
+    background-color: #10229c;
+    margin-left: 12px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    flex-grow: 1;
+    ul.right_menu {
+      li {
+        padding: 5px 19px;
+        margin: 0;
 
-.menu-submenu {
+        .search_form {
+          height: 25px;
+          .search_input {
+            height: 18px;
+            width: 80px;
+          }
+          .search_submit {
+            margin: 0 6px;
+          }
+        }
+
+        .search_button {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+.menu-submenu, .mobile_menu_container {
   position: absolute;
 
   > a {
@@ -222,6 +276,7 @@
         top: 15px;
         -webkit-transform: rotate(270deg);
         transform: rotate(270deg);
+        transition: 0.6s ease;
       }
       &.opened:after {
         -webkit-transform: rotate(0deg);
@@ -230,3 +285,100 @@
     }
   }
 }
+
+.mobile_menu_container {
+  display: none;
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  nav {
+    background: white;
+    width: fit-content;
+    height: 100vh;
+    padding: 20px;
+    min-width: 70vw;
+    max-width: 100vw;
+    overflow: hidden;
+
+    ul, li, li a {
+      width: 100%;
+    }
+    ul > li > ul > li {
+      padding-left: 20px;
+      width: CALC(100% - 20px);
+    }
+
+    .submenu {
+      display: none;
+    }
+
+    li.has_submenu {
+      position: relative;
+      &:after {
+        -webkit-font-smoothing: antialiased;
+        display: var(--fa-display, inline-block);
+        font-style: normal;
+        font-variant: normal;
+        line-height: 1;
+        text-rendering: auto;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f0d7";
+        position: absolute;
+        right: 0;
+        top: 15px;
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+      }
+      &.opened:after {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+    }
+  }
+}
+.logo_close_button {
+  display: flex;
+  height: 42px;
+  margin-bottom: 37px;
+  .logo {
+    flex-grow: 1;
+    height: 42px;
+    a {
+      height: 100%;
+      padding: 0;
+      border-bottom: none;
+      img {
+        height: 100%;
+      }
+    }
+  }
+  .mobile_close_menu_button {
+    height: 30px;
+    width: 22.5px;
+    padding: 4px;
+    a {
+      font-size: 30px;
+      color: #1d2bb2;
+      padding: 0;
+      border-bottom: none;
+    }
+  }
+}
+.mobile_menu_container nav li.has_submenu {
+  &:after {
+    content: "\f054";
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    transition: 0.6s ease;
+  }
+
+  &.opened:after {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+}

resources/assets/sass/components/_page.scss

@@ -3,8 +3,11 @@
 .page_container {
   @include container;
   background-color: #fff;
-  width: CALC(100% - 270px);
-  padding: 32px 135px;
+  padding: 20px;
+  @media (min-width: 768px) {
+    width: CALC(100% - 270px);
+    padding: 32px 135px;
+  }
 }
 .page_body {
   font-family: Nunito, serif;

resources/assets/sass/components/_sidebar.scss

@@ -1,3 +1,8 @@
 .sidebar .box {
   width: CALC(100% - 38px);
 }
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+  }
+}