Add mobile styling

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'));
+  });
+});