Add source files

2019-05-21 21:50:29 +02:00 · 2019-05-21 21:50:29 +02:00 · 5187b7377a
parent 755eb3f29e
commit 5187b7377a
70 changed files with 4336 additions and 0 deletions
--- a/src/js/app.js
+++ b/src/js/app.js
@ -0,0 +1,234 @@
+import $ from 'jquery'
+import slick from 'slick-carousel'
+import tippy from 'tippy.js'
+import AOS from 'aos'
+import GhostContentAPI from '@tryghost/content-api'
+import Fuse from 'fuse.js'
+
+$(document).ready(() => {
+  const $body = $('body')
+  const $header = $('.js-header')
+  const $openMenu = $('.js-open-menu')
+  const $closeMenu = $('.js-close-menu')
+  const $menu = $('.js-menu')
+  const $toggleSubmenu = $('.js-toggle-submenu')
+  const $submenuOption = $('.js-submenu-option')[0]
+  const $submenu = $('.js-submenu')
+  const $recentArticles = $('.js-recent-articles')
+  const $openSearch = $('.js-open-search')
+  const $closeSearch = $('.js-close-search')
+  const $search = $('.js-search')
+  const $inputSearch = $('.js-input-search')
+  const $searchResults = $('.js-search-results')
+
+  const headerHeight = $header.outerHeight()
+
+  let fuse = null
+  let lastScrollY = window.pageYOffset
+  let ticking = false
+  let submenuIsOpen = false
+
+  function onScroll() {
+    requestTick()
+  }
+
+  function requestTick() {
+    if (!ticking) {
+      requestAnimationFrame(toggleHeader)
+    }
+
+    ticking = true
+  }
+
+  function toggleHeader() {
+    const scrollTop = window.pageYOffset
+
+    if (scrollTop >= headerHeight) {
+      $header.addClass('fixed')
+
+      if (submenuIsOpen) {
+        $header.addClass('fixed-active')
+      }
+
+      if (scrollTop >= lastScrollY) {
+        if (!submenuIsOpen) {
+          $header.removeClass('fixed-active')
+        }
+      } else {
+        $header.addClass('fixed-active')
+      }
+    } else {
+      if (!submenuIsOpen) {
+        $header.removeClass('fixed-active')
+      }
+
+      $header.removeClass('fixed')
+    }
+
+    lastScrollY = scrollTop
+    ticking = false
+  }
+
+  function showSubmenu() {
+    $header.addClass('submenu-is-active')
+    $toggleSubmenu.addClass('active')
+    $submenu.removeClass('closed').addClass('opened')
+  }
+
+  function hideSubmenu() {
+    $header.removeClass('submenu-is-active')
+    $toggleSubmenu.removeClass('active')
+    $submenu.removeClass('opened').addClass('closed')
+  }
+
+  function toggleScrollVertical() {
+    $body.toggleClass('no-scroll-y')
+  }
+
+  function trySearchFeature() {
+    if (typeof ghostSearchApiKey !== 'undefined') {
+      getAllPosts(ghostHost, ghostSearchApiKey)
+    } else {
+      $openSearch.remove()
+      $closeSearch.remove()
+      $search.remove()
+    }
+  }
+
+  function getAllPosts(host, key) {
+    const api = new GhostContentAPI({
+      host,
+      key,
+      version: 'v2'
+    })
+    const allPosts = []
+    const fuseOptions = {
+      shouldSort: true,
+      threshold: 0,
+      location: 0,
+      distance: 100,
+      tokenize: true,
+      matchAllTokens: true,
+      maxPatternLength: 32,
+      minMatchCharLength: 1,
+      keys: ['title']
+    }
+
+    api.posts.browse({
+      limit: 'all',
+      fields: 'id, title, url, published_at'
+    })
+      .then((posts) => {
+        for (var i = 0, len = posts.length; i < len; i++) {
+          allPosts.push(posts[i])
+        }
+
+        fuse = new Fuse(allPosts, fuseOptions)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+
+  function formatDate(date) {
+    if (date) {
+      return new Date(date).toLocaleDateString(
+        document.documentElement.lang,
+        {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        }
+      )
+    }
+
+    return ''
+  }
+
+  $openMenu.click(() => {
+    $menu.addClass('opened')
+    toggleScrollVertical()
+  })
+
+  $closeMenu.click(() => {
+    $menu.removeClass('opened')
+    toggleScrollVertical()
+  })
+
+  $toggleSubmenu.click(() => {
+    submenuIsOpen = !submenuIsOpen
+
+    if (submenuIsOpen) {
+      showSubmenu()
+    } else {
+      hideSubmenu()
+    }
+  })
+
+  $openSearch.click(() => {
+    $search.addClass('opened')
+    setTimeout(() => {
+      $inputSearch.focus()
+    }, 400);
+    toggleScrollVertical()
+  })
+
+  $closeSearch.click(() => {
+    $inputSearch.blur()
+    $search.removeClass('opened')
+    toggleScrollVertical()
+  })
+
+  $inputSearch.keyup(() => {
+    if ($inputSearch.val().length > 0 && fuse) {
+      const results = fuse.search($inputSearch.val())
+
+      if (results.length > 0) {
+        for (var i = 0, len = results.length; i < len; i++) {
+          $searchResults.html(`
+          <article class="m-result">\
+            <a href="${results[i].url}" class="m-result__link">\
+              <h3 class="m-result__title">${results[i].title}</h3>\
+              <span class="m-result__date">${formatDate(results[i].published_at)}</span>\
+            </a>\
+          </article>
+        `)
+        }
+      } else {
+        $searchResults.html('<p class="m-no-found align-center">0 results for your search, try something different.</>')
+      }
+    } else {
+      $searchResults.html('')
+    }
+  })
+
+  $(window).click((e) => {
+    if (submenuIsOpen) {
+      if ($submenuOption && !$submenuOption.contains(e.target)) {
+        submenuIsOpen = false
+        hideSubmenu()
+      }
+    }
+  })
+
+  if ($recentArticles.length > 0) {
+    $recentArticles.slick({
+      adaptiveHeight: true,
+      arrows: false,
+      infinite: false,
+      mobileFirst: true,
+      variableWidth: true
+    })
+  }
+
+  AOS.init({
+    once: true,
+    startEvent: 'DOMContentLoaded',
+  })
+
+  tippy('.js-tooltip')
+
+  trySearchFeature()
+
+  window.addEventListener('scroll', onScroll, { passive: true })
+})
--- a/src/js/home.js
+++ b/src/js/home.js
@ -0,0 +1,20 @@
+import $ from 'jquery'
+import slick from 'slick-carousel'
+
+$(document).ready(() => {
+  const $featuredArticles = $('.js-featured-articles')
+
+  if ($featuredArticles.length > 0) {
+    $featuredArticles.slick({
+      arrows: true,
+      infinite: true,
+      prevArrow: '<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',
+      nextArrow: '<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',
+      mobileFirst: true
+    })
+    
+    setTimeout(() => {
+      $featuredArticles.slick('setPosition')
+    }, 350)
+  }
+})
--- a/src/js/page.js
+++ b/src/js/page.js
@ -0,0 +1,34 @@
+import $ from 'jquery'
+import mediumZoom from 'medium-zoom'
+import fitvids from 'fitvids'
+
+$(document).ready(() => {
+  fitvids('.js-post-content')
+
+  function adjustImageGallery() {
+    const images = document.querySelectorAll('.kg-gallery-image img')
+
+    for (var i = 0, len = images.length; i < len; i++) {
+      const container = images[i].closest('.kg-gallery-image')
+      const width = images[i].attributes.width.value
+      const height = images[i].attributes.height.value
+      const ratio = width / height
+      container.style.flex = `${ratio} 1 0%`
+    }
+  }
+
+  adjustImageGallery()
+
+  $('.js-post-content').find('figure img').each(function() {
+    $(this).addClass('js-zoomable')
+
+    const $figcaption = $(this).parent().find('figcaption')
+    if ($figcaption) {
+      $(this).attr('alt', $figcaption.text())
+    } else {
+      $this.attr('alt', '')
+    }
+  })
+
+  mediumZoom('.js-zoomable')
+})
--- a/src/js/polyfill.js
+++ b/src/js/polyfill.js
@ -0,0 +1,90 @@
+import 'promise-polyfill/src/polyfill';
+
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, 'includes', {
+    value: function (searchElement, fromIndex) {
+
+      if (this == null) {
+        throw new TypeError('"this" is null or is not defined');
+      }
+
+      var o = Object(this);
+      var len = o.length >>> 0;
+
+      if (len === 0) {
+        return false;
+      }
+
+      var n = fromIndex | 0;
+      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+      function sameValueZero(x, y) {
+        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
+      }
+
+      while (k < len) {
+        if (sameValueZero(o[k], searchElement)) {
+          return true;
+        }
+        k++;
+      }
+
+      return false;
+    }
+  });
+}
+
+if (!String.prototype.endsWith) {
+  String.prototype.endsWith = function (search, this_len) {
+    if (this_len === undefined || this_len > this.length) {
+      this_len = this.length;
+    }
+    return this.substring(this_len - search.length, this_len) === search;
+  };
+}
+
+if (!String.prototype.startsWith) {
+  Object.defineProperty(String.prototype, 'startsWith', {
+    value: function (search, pos) {
+      pos = !pos || pos < 0 ? 0 : +pos;
+      return this.substring(pos, pos + search.length) === search;
+    }
+  });
+}
+
+if (typeof Object.assign != 'function') {
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) {
+      'use strict';
+      if (target == null) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource != null) {
+          for (var nextKey in nextSource) {
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}
+
+if (window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = function (callback, thisArg) {
+    thisArg = thisArg || window;
+    for (var i = 0; i < this.length; i++) {
+      callback.call(thisArg, this[i], i, this);
+    }
+  };
+}
--- a/src/js/post.js
+++ b/src/js/post.js
@ -0,0 +1,176 @@
+import $ from 'jquery'
+import slick from 'slick-carousel'
+import stickybits from 'stickybits'
+import mediumZoom from 'medium-zoom'
+import fitvids from 'fitvids'
+
+$(document).ready(() => {
+  fitvids('.js-post-content')
+
+  const $aosWrapper = $('.js-aos-wrapper')
+  const $progressCircle = $('.js-progress')
+  const $scrollButton = $('.js-scrolltop')
+  const $loadComments = $('.js-load-comments')
+  const $commentsIframe = $('.js-comments-iframe')
+  const $recommendedArticles = $('.js-recommended-articles')
+
+  let lastScrollingY = window.pageYOffset
+  let lastWindowHeight = 0
+  let lastDocumentHeight = 0
+  let circumference = 0
+  let isTicking = false
+
+  function isMobile(width = '768px') {
+    return window.matchMedia(`(max-width: ${width})`).matches
+  }
+
+  function onScrolling() {
+    lastScrollingY = window.pageYOffset
+    requestTicking()
+  }
+
+  function onResizing() {
+    setHeights()
+    adjustShare(100)
+
+    setTimeout(() => {
+      setCircleStyles()
+      requestTicking()
+    }, 200)
+  }
+
+  function requestTicking() {
+    if (!isTicking) {
+      requestAnimationFrame(updating)
+    }
+
+    isTicking = true
+  }
+
+  function updating() {
+    const progressMax = lastDocumentHeight - lastWindowHeight
+    const percent = Math.ceil((lastScrollingY / progressMax) * 100)
+
+    if (percent <= 100) {
+      setProgress(percent * 1.5)
+    }
+
+    isTicking = false
+  }
+
+  function setHeights() {
+    lastWindowHeight = window.innerHeight
+    lastDocumentHeight = $(document).height()
+  }
+
+  function setCircleStyles() {
+    const radiusCircle = $progressCircle.parent().width() / 2
+    const borderWidth = isMobile() ? 2 : 3
+
+    $progressCircle.attr('stroke-width', borderWidth)
+    $progressCircle.attr('r', radiusCircle - (borderWidth - 1))
+    $progressCircle.attr('cx', radiusCircle)
+    $progressCircle.attr('cy', radiusCircle)
+
+    circumference = radiusCircle * 2 * Math.PI
+
+    $progressCircle[0].style.strokeDasharray = `${circumference} ${circumference}`
+    $progressCircle[0].style.strokeDashoffset = circumference
+  }
+
+  function setProgress(percent) {
+    if (percent <= 100) {
+      const offset = circumference - percent / 100 * circumference
+      $progressCircle[0].style.strokeDashoffset = offset
+    }
+  }
+
+  function adjustImageGallery() {
+    const images = document.querySelectorAll('.kg-gallery-image img')
+
+    for (var i = 0, len = images.length; i < len; i++) {
+      const container = images[i].closest('.kg-gallery-image')
+      const width = images[i].attributes.width.value
+      const height = images[i].attributes.height.value
+      const ratio = width / height
+      container.style.flex = `${ratio} 1 0%`
+    }
+  }
+
+  function adjustShare(timeout) {
+    if (!isMobile('1023px')) {
+      stickybits('.js-sticky', { stickyBitStickyOffset: 100 })
+      $('body').removeClass('share-menu-displayed')
+    } else {
+      $('body').addClass('share-menu-displayed')
+      setTimeout(() => {
+        $aosWrapper.removeAttr('data-aos')
+      }, timeout)
+    }
+  }
+
+  adjustImageGallery()
+  adjustShare(1000)
+
+  if ($recommendedArticles.length > 0) {
+    $recommendedArticles.on('init', function() {
+      setHeights()
+      setCircleStyles()
+      updating()
+    })
+
+    $recommendedArticles.slick({
+      arrows: true,
+      infinite: true,
+      prevArrow: '<button class="m-icon-button filled in-recommended-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',
+      nextArrow: '<button class="m-icon-button filled in-recommended-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',
+      mobileFirst: true,
+      responsive: [
+        {
+          breakpoint: 720,
+          settings: {
+            slidesToShow: 2
+          }
+        },
+        {
+          breakpoint: 1023,
+          settings: {
+            arrows: false,
+            slidesToShow: 3
+          }
+        }
+      ]
+    })
+  } else {
+    setHeights()
+    setCircleStyles()
+    updating()
+  }
+
+  $scrollButton.click(() => {
+    $('html, body').animate({
+      scrollTop: 0
+    }, 500)
+  })
+
+  $loadComments.click(() => {
+    $loadComments.parent().hide()
+    $commentsIframe.fadeIn('slow')
+  })
+
+  $('.js-post-content').find('img').each(function() {
+    $(this).addClass('js-zoomable')
+
+    const $figcaption = $(this).parent().find('figcaption')
+    if ($figcaption) {
+      $(this).attr('alt', $figcaption.text())
+    } else {
+      $this.attr('alt', '')
+    }
+  })
+
+  mediumZoom('.js-zoomable')
+
+  window.addEventListener('scroll', onScrolling, { passive: true })
+  window.addEventListener('resize', onResizing, { passive: true })
+})
--- a/src/sass/app.scss
+++ b/src/sass/app.scss
@ -0,0 +1,65 @@
+// @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700');
+
+@import "common/reset";
+@import "common/mixins";
+@import "common/variables";
+@import "common/helpers";
+@import "common/global";
+@import "common/icons";
+
+@import "layouts/wrapper";
+@import "layouts/content";
+@import "layouts/post-content";
+@import "layouts/grid";
+@import "layouts/fullscreen";
+
+@import "components/ui/button";
+@import "components/ui/icon-button";
+@import "components/ui/input";
+@import "components/ui/pagination";
+@import "components/ui/section-title";
+@import "components/ui/back";
+@import "components/ui/small-text";
+@import "components/ui/no-found";
+@import "components/header/header";
+@import "components/header/mobile-topbar";
+@import "components/header/logo";
+@import "components/header/nav";
+@import "components/header/menu";
+@import "components/header/submenu";
+@import "components/header/submenu-title";
+@import "components/header/recent-articles";
+@import "components/header/recent-article";
+@import "components/header/tags";
+@import "components/hero/hero";
+@import "components/hero/avatar";
+@import "components/hero/title";
+@import "components/hero/description";
+@import "components/hero/social";
+@import "components/hero/stats";
+@import "components/heading/heading";
+@import "components/heading/title";
+@import "components/heading/description";
+@import "components/heading/meta";
+@import "components/articles/article-card";
+@import "components/articles/featured-slider";
+@import "components/articles/featured-article";
+@import "components/articles/recommended-articles";
+@import "components/articles/recommended-slider";
+@import "components/articles/share";
+@import "components/subscribe/subscribe-section";
+@import "components/author/author";
+@import "components/author/picture";
+@import "components/author/links";
+@import "components/comments/load-comments";
+@import "components/search/search";
+@import "components/search/icon";
+@import "components/search/result";
+@import "components/footer";
+
+@import"components/404/title";
+@import"components/404/subtitle";
+@import"components/404/text";
+
+@import "libs/slick";
+@import "libs/aos/aos"
--- a/src/sass/common/_global.scss
+++ b/src/sass/common/_global.scss
@ -0,0 +1,71 @@
+/** Global styles */
+
+body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
+  color: $body;
+  font-size: 1rem;
+  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+  font-display: swap;
+  background-color: white;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &.share-menu-displayed {
+    padding-bottom: 45px;
+
+    @include respond-to('medium') {
+      padding-bottom: 0;
+    }
+  }
+}
+
+.main-wrap {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+p {
+  line-height: 1.3;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  position: relative;
+}
+
+.tippy-popper * {
+  text-align: left !important;
+}
+
+.medium-zoom-overlay,
+.medium-zoom-image {
+  z-index: 5;
+}
+
+::-webkit-input-placeholder {
+  color: $gray;
+}
+
+::-moz-placeholder {
+  color: $gray;
+}
+
+:-ms-input-placeholder {
+  color: $gray;
+}
+
+:-moz-placeholder {
+  color: $gray;
+}
--- a/src/sass/common/_helpers.scss
+++ b/src/sass/common/_helpers.scss
@ -0,0 +1,102 @@
+@charset "UTF-8";
+
+/**
+ *  Helpers
+ */
+
+.hide {
+  display: none;
+}
+
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.clearfix:before,
+.clearfix:after {
+  content: " "; /* 1 */
+  line-height: 0;
+  display: table; /* 2 */
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.clearfix {
+  *zoom: 1;
+}
+
+.content-centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-appearance {
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  -o-appearance: none !important;
+  -ms-appearance: none !important;
+  appearance: none !important;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.no-margin {
+  margin: 0
+}
+
+.no-scroll-y {
+  overflow-y: hidden;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.pos-relative {
+  position: relative;
+}
+
+.pos-absolute {
+  position: absolute;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.only-desktop {
+  display: none;
+
+  @include respond-to('medium') {
+    display: block;
+  }
+}
--- a/src/sass/common/_icons.scss
+++ b/src/sass/common/_icons.scss
@ -0,0 +1,65 @@
+/** Icons */
+
+@font-face {
+  font-family: 'icomoon';
+  src:  url('../fonts/icomoon/icomoon.eot?jcg9f9');
+  src:  url('../fonts/icomoon/icomoon.eot?jcg9f9#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon/icomoon.ttf?jcg9f9') format('truetype'),
+    url('../fonts/icomoon/icomoon.woff?jcg9f9') format('woff'),
+    url('../fonts/icomoon/icomoon.svg?jcg9f9#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-star:before {
+  content: "\e900";
+}
+.icon-arrow-left:before {
+  content: "\e901";
+}
+.icon-arrow-right:before {
+  content: "\e902";
+}
+.icon-arrow-top:before {
+  content: "\e903";
+}
+.icon-close:before {
+  content: "\e904";
+}
+.icon-comments:before {
+  content: "\e905";
+}
+.icon-facebook:before {
+  content: "\e906";
+}
+.icon-globe:before {
+  content: "\e907";
+}
+.icon-menu:before {
+  content: "\e908";
+}
+.icon-more:before {
+  content: "\e909";
+}
+.icon-search:before {
+  content: "\e90a";
+}
+.icon-twitter:before {
+  content: "\e90b";
+}
--- a/src/sass/common/_mixins.scss
+++ b/src/sass/common/_mixins.scss
@ -0,0 +1,141 @@
+/** Mixins */
+
+$break-small: 35.5rem; // >= 568px @ 16px
+$break-medium: 48rem; // >= 768px @ 16px
+$break-large: 64rem; // >= 1024px @ 16px
+$break-extra-large: 80rem; // >= 1280px @ 16px
+$break-largest: 90rem; // >= 1440px @ 16px
+
+// @include respond-to( );
+@mixin respond-to( $condition ) {
+  @if $condition == 'initialize' { @media only screen and (min-width: 1px) { @content; } }
+
+  @if $condition == 'small' { @media only screen and (min-width: $break-small) { @content; } }
+
+  @if $condition == 'medium' { @media only screen and (min-width: $break-medium) { @content; } }
+
+  @if $condition == 'large' { @media only screen and (min-width: $break-large) { @content; } }
+
+  @if $condition == 'extra-large' { @media only screen and (min-width: $break-extra-large) { @content; } }
+
+  @if $condition == 'largest' { @media only screen and (min-width: $break-largest) { @content; } }
+}
+
+// Text shadow
+@mixin ts($tsval: 0 1px 0 #fff) {
+  text-shadow: $tsval;
+}
+
+// Box shadow
+@mixin bs($bsval: 0 0 0.83em #333, $due: 0 0 0 transparent) {
+  -moz-box-shadow: $bsval, $due;
+  -webkit-box-shadow: $bsval, $due;
+  -o-box-shadow: $bsval, $due;
+  box-shadow: $bsval, $due;
+}
+
+// Opacity
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  -moz-opacity: $opacity;
+}
+
+// Transitions
+@mixin transition($transition: all linear 0.2s) {
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -o-transition: $transition;
+  -ms-transition: $transition;
+  transition: $transition;
+}
+
+// Transforms
+@mixin transform($transform: translate3d(0, 0, 0)) {
+  -webkit-transform: $transform;
+  -moz-transform: $transform;
+  -ms-transform: $transform;
+  -o-transform: $transform;
+  transform: $transform;
+}
+
+@mixin animation($animate...) {
+  $max: length($animate);
+  $animations: '';
+
+  @for $i from 1 through $max {
+    $animations: #{$animations + nth($animate, $i)};
+
+    @if $i < $max {
+      $animations: #{$animations + ", "};
+    }
+  }
+
+  -webkit-animation: $animations;
+  -moz-animation: $animations;
+  -o-animation: $animations;
+  animation: $animations;
+}
+
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+
+  @keyframes #{$animationName} {
+    @content;
+  }
+}
+
+@mixin strip($lines: 1, $font-size: 16px, $line-height: 1.3, $width: 100%) {
+  display: block;
+  width: $width;
+  min-height: ($font-size*$line-height*$lines) + 2;
+  max-height: ($font-size*$line-height*$lines) + 2; /* Fallback for non-webkit */
+  font-size: $font-size;
+  line-height: $line-height;
+  white-space: nowrap;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+// Utilities
+// -------------------------
+
+// Clearfix
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+@mixin clearfix() {
+  zoom: 1;
+
+  &::before,
+  &::after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
--- a/src/sass/common/_reset.scss
+++ b/src/sass/common/_reset.scss
@ -0,0 +1,586 @@
+/*! sanitize.css v7.0.2 | CC0 License | github.com/csstools/sanitize.css */
+
+/* Document
+ * ========================================================================== */
+
+/**
+ * 1. Remove repeating backgrounds in all browsers (opinionated).
+ * 2. Add border box sizing in all browsers (opinionated).
+ */
+
+*,
+::before,
+::after {
+  background-repeat: no-repeat; /* 1 */
+  box-sizing: border-box; /* 2 */
+}
+
+/**
+ * 1. Add text decoration inheritance in all browsers (opinionated).
+ * 2. Add vertical alignment inheritance in all browsers (opinionated).
+ */
+
+::before,
+::after {
+  text-decoration: inherit; /* 1 */
+  vertical-align: inherit; /* 2 */
+}
+
+/**
+ * 1. Use the default cursor in all browsers (opinionated).
+ * 2. Use the default user interface font in all browsers (opinionated).
+ * 3. Correct the line height in all browsers.
+ * 4. Use a 4-space tab width in all browsers (opinionated).
+ * 5. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ * 6. Breaks words to prevent overflow in all browsers (opinionated).
+ */
+
+html {
+  font-family:
+    system-ui,
+    /* macOS 10.11-10.12 */ -apple-system,
+    /* Windows 6+ */ Segoe UI,
+    /* Android 4+ */ Roboto,
+    /* Ubuntu 10.10+ */ Ubuntu,
+    /* Gnome 3+ */ Cantarell,
+    /* KDE Plasma 4+ */ Oxygen,
+    /* fallback */ sans-serif,
+    /* macOS emoji */ "Apple Color Emoji",
+    /* Windows emoji */ "Segoe UI Emoji",
+    /* Windows emoji */ "Segoe UI Symbol",
+    /* Linux emoji */ "Noto Color Emoji"; /* 2 */
+
+  line-height: 1.15; /* 3 */
+  -moz-tab-size: 4; /* 4 */
+  tab-size: 4; /* 4 */
+  -ms-text-size-adjust: 100%; /* 5 */
+  -webkit-text-size-adjust: 100%; /* 5 */
+  word-break: break-word; /* 6 */
+}
+
+/* Sections
+ * ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+ * ========================================================================== */
+
+/**
+ * 1. Add the correct sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Remove the list style on navigation lists in all browsers (opinionated).
+ */
+
+nav ol,
+nav ul {
+  list-style: none;
+}
+
+/**
+ * 1. Use the default monospace user interface font
+ *    in all browsers (opinionated).
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family:
+    /* macOS 10.10+ */ Menlo,
+    /* Windows 6+ */ Consolas,
+    /* Android 4+ */ Roboto Mono,
+    /* Ubuntu 10.10+ */ Ubuntu Monospace,
+    /* KDE Plasma 4+ */ Oxygen Mono,
+    /* Linux/OpenOffice fallback */ Liberation Mono,
+    /* fallback */ monospace; /* 1 */
+
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ * ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Add the correct text decoration in Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Use the default monospace user interface font
+ *    in all browsers (opinionated).
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family:
+    /* macOS 10.10+ */ Menlo,
+    /* Windows 6+ */ Consolas,
+    /* Android 4+ */ Roboto Mono,
+    /* Ubuntu 10.10+ */ Ubuntu Monospace,
+    /* KDE Plasma 4+ */ Oxygen Mono,
+    /* Linux/OpenOffice fallback */ Liberation Mono,
+    /* fallback */ monospace; /* 1 */
+
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/*
+ * Remove the text shadow on text selections in Firefox 61- (opinionated).
+ * 1. Restore the coloring undone by defining the text shadow
+ *    in all browsers (opinionated).
+ */
+
+::-moz-selection {
+  background-color: #b3d4fc; /* 1 */
+  color: #000; /* 1 */
+  text-shadow: none;
+}
+
+::selection {
+  background-color: #b3d4fc; /* 1 */
+  color: #000; /* 1 */
+  text-shadow: none;
+}
+
+/* Embedded content
+ * ========================================================================== */
+
+/*
+ * Change the alignment on media elements in all browers (opinionated).
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Change the fill color to match the text color in all browsers (opinionated).
+ */
+
+svg {
+  fill: currentColor;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Tabular data
+ * ========================================================================== */
+
+/**
+ * Collapse border spacing in all browsers (opinionated).
+ */
+
+table {
+  border-collapse: collapse;
+}
+
+/* Forms
+ * ========================================================================== */
+
+/**
+ * Inherit styling in all browsers (opinionated).
+ */
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/**
+ * Remove the margin in Safari.
+ */
+
+button,
+input,
+select {
+  margin: 0;
+}
+
+/**
+ * 1. Show the overflow in IE.
+ * 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ */
+
+button {
+  overflow: visible; /* 1 */
+  text-transform: none; /* 2 */
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * Show the overflow in Edge and IE.
+ */
+
+input {
+  overflow: visible;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ */
+
+legend {
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in Edge and IE.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the inheritance of text transform in Firefox.
+ */
+
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Remove the margin in Firefox and Safari.
+ * 2. Remove the default vertical scrollbar in IE.
+ * 3. Change the resize direction on textareas in all browsers (opinionated).
+ */
+
+textarea {
+  margin: 0; /* 1 */
+  overflow: auto; /* 2 */
+  resize: vertical; /* 3 */
+}
+
+/**
+ * Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding of focus outlines in Firefox.
+ */
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus outline styles unset by the previous rule in Firefox.
+ */
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/* Interactive
+ * ========================================================================== */
+
+/*
+ * Add the correct display in Edge and IE.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct styles in Edge, IE, and Safari.
+ */
+
+dialog {
+  background-color: white;
+  border: solid;
+  color: black;
+  display: block;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  left: 0;
+  margin: auto;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+ * ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* User interaction
+ * ========================================================================== */
+
+/*
+ * 1. Remove the tapping delay on clickable elements
+      in all browsers (opinionated).
+ * 2. Remove the tapping delay in IE 10.
+ */
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation; /* 1 */
+  touch-action: manipulation; /* 2 */
+}
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
+
+/* Accessibility
+ * ========================================================================== */
+
+/**
+ * Change the cursor on busy elements in all browsers (opinionated).
+ */
+
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+/*
+ * Change the cursor on control elements in all browsers (opinionated).
+ */
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+/*
+ * Change the cursor on disabled, not-editable, or otherwise
+ * inoperable elements in all browsers (opinionated).
+ */
+
+[aria-disabled],
+[disabled] {
+  cursor: disabled;
+}
+
+/*
+ * Change the display on visually hidden accessible elements
+ * in all browsers (opinionated).
+ */
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  display: inherit;
+  position: absolute;
+}
--- a/src/sass/common/_variables.scss
+++ b/src/sass/common/_variables.scss
@ -0,0 +1,17 @@
+/** Colors */
+$white: #fff;
+$black: #000;
+$main-color: #04aeee;
+$titles: #333;
+$body: #4a4a4a;
+$light-blue: #f4f8fd;
+$dark-blue: #293951;
+$gray: #9b9b9b;
+
+/** Images */
+$img-url: "../img/";
+
+/** Box Model  */
+$mobile-space: 20px;
+$mobile-bar-height: 50px;
+$desktop-bar-height: 64px;
--- a/src/sass/components/.gitkeep
+++ b/src/sass/components/.gitkeep
--- a/src/sass/components/404/_subtitle.scss
+++ b/src/sass/components/404/_subtitle.scss
@ -0,0 +1,13 @@
+.m-404-subtitle {
+  color: $body;
+  letter-spacing: 0.4px;
+  line-height: 1;
+  font-size: 1.250rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.5px;
+    font-size: 1.5rem;
+  }
+}
--- a/src/sass/components/404/_text.scss
+++ b/src/sass/components/404/_text.scss
@ -0,0 +1,13 @@
+.m-404-text {
+  letter-spacing: 0.3px;
+  line-height: 1.4;
+  font-size: 0.875em;
+  padding: 0 $mobile-space;
+  margin-bottom: 25px;
+
+  @include respond-to('medium') {
+    font-size: 1rem;
+    padding: 0;
+    margin-bottom: 30px;
+  }
+}
--- a/src/sass/components/404/_title.scss
+++ b/src/sass/components/404/_title.scss
@ -0,0 +1,14 @@
+.m-404-title {
+  color: $body;
+  letter-spacing: 3px;
+  line-height: 1;
+  font-size: 9.000rem;
+  font-weight: 700;
+  margin: 0 0 10px;
+
+  @include respond-to('medium') {
+    letter-spacing: 4px;
+    font-size: 12rem;
+    margin-bottom: 5px;
+  }
+}
--- a/src/sass/components/_footer.scss
+++ b/src/sass/components/_footer.scss
@ -0,0 +1,56 @@
+.m-footer {
+  flex-shrink: 0;
+  background-color: $dark-blue;
+}
+
+.m-footer__content {
+  color: $white;
+  text-align: center;
+  padding: 30px $mobile-space;
+
+  @include respond-to('medium') {
+    padding: 70px 0;
+    max-width: 330px;
+    margin: 0 auto;
+  }
+}
+
+.m-footer-copyright {
+  font-size: 0.875rem;
+  letter-spacing: 0.3px;
+  line-height: 1.75rem;
+  margin-bottom: $mobile-space;
+
+  span {
+    display: block;
+
+    @include respond-to('medium') {
+      display: inline;
+    }
+
+    &:nth-child(2) {
+      display: none;
+
+      @include respond-to('medium') {
+        display: inline;
+      }
+    }
+  }
+}
+
+.m-footer-social {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  a {
+    display: inline-block;
+    color: $white;
+    margin: 0 15px;
+
+    span {
+      color: inherit;
+      font-size: 1rem;
+    }
+  }
+}
--- a/src/sass/components/articles/_article-card.scss
+++ b/src/sass/components/articles/_article-card.scss
@ -0,0 +1,318 @@
+.m-article-card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin-bottom: 20px;
+  height: 400px;
+  background-color: $white;
+  border-radius: 10px;
+  border: 1px solid aliceblue;
+  z-index: 1;
+  @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+
+  &:hover {
+    @include transform(translateY(-5px));
+
+    &:before {
+      @include bs(0 4px 60px 0 rgba(0,0,0,.2));
+    }
+
+    .m-article-card__author {
+      @include bs(0 4px 8px rgba(0, 0, 0, 0.3));
+    }
+  }
+
+  @include respond-to('medium') {
+    width: calc((100% / 2) - 20px);
+    height: 420px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 20px;
+  }
+
+  @include respond-to('large') {
+    width: calc((100% / 3) - 40px);
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-bottom: 40px;
+  }
+
+  &.no-picture {
+    .m-article-card__picture {
+      height: 85px;
+    }
+
+    .m-article-card__info {
+      background-color: $light-blue;
+    }
+
+    .m-article-card__title {
+      line-height: 1.4;
+      font-size: 1.750rem;
+    }
+  }
+
+  &.as-author {
+    .m-article-card__picture-link {
+      z-index: 2;
+    }
+
+    .m-article-card__picture {
+      &:before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 10px 10px 0 0;
+        background-color: rgba(0,0,0,0.25);
+      }
+    }
+
+    .m-article-card__info {
+      padding: 0;
+    }
+
+    .m-article-card__info-link {
+      padding: $mobile-space $mobile-space 60px $mobile-space;
+    }
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    bottom: 0;
+    left: 10px;
+    border-radius: 10px;
+    @include bs(0 10px 10px rgba(0,0,0,0.08));
+    @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+  }
+}
+
+.m-article-card__picture {
+  position: relative;
+  height: 200px;
+  border-radius: 10px 10px 0 0;
+  background-color: $light-blue;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+
+  @include respond-to('medium') {
+    height: 220px;
+  }
+}
+
+.m-article-card__picture-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.m-article-card__name {
+  position: absolute;
+  left: $mobile-space;
+  bottom: $mobile-space;
+  color: $white;
+  letter-spacing: 0.4px;
+  line-height: 1.3;
+  font-size: 1.250rem;
+  font-weight: 600;
+  margin: 0;
+  z-index: 1;
+
+  @include respond-to('medium') {
+    left: 25px;
+    bottom: 25px;
+  }
+}
+
+.m-article-card__author {
+  position: absolute;
+  top: $mobile-space;
+  left: $mobile-space;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  z-index: 2;
+  @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+
+  @include respond-to('medium') {
+    top: 25px;
+    left: 25px;
+  }
+
+  div {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 2px solid $white;
+    background-color: $white;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+}
+
+.m-article-card__featured {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 26px;
+  right: $mobile-space;
+  width: 24px;
+  height: 24px;
+  color: $black;
+  background-color: $white;
+  border-radius: 50%;
+  z-index: 2;
+
+  @include respond-to('medium') {
+    top: 31px;
+    right: 25px;
+  }
+
+  span {
+    color: inherit;
+    font-size: 0.750rem;
+  }
+}
+
+.m-article-card__info {
+  flex: 1;
+  position: relative;
+  padding-top: 48px;
+  height: 200px;
+  overflow: hidden;
+  border-radius: 0 0 10px 10px;
+  background-color: $white;
+
+  @include respond-to('medium') {
+    padding-top: 53px;
+  }
+
+  &.no-tag {
+    padding-top: 0 !important;
+
+    .m-article-card__info-link {
+      padding-top: 48px;
+
+      @include respond-to('medium') {
+        padding-top: 53px;
+      }
+    }
+  }
+}
+
+.m-article-card__tag {
+  position: absolute;
+  top: $mobile-space;
+  left: $mobile-space;
+  color: $dark-blue;
+  letter-spacing: 0.2px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  @include strip(1, 14px, 1.3, calc(100% - 40px));
+
+  @include respond-to('medium') {
+    top: 25px;
+    left: 25px;
+  }
+}
+
+.m-article-card__info-link {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 0 $mobile-space $mobile-space $mobile-space;
+
+  @include respond-to('medium') {
+    padding: 0 25px 25px 25px;
+  }
+}
+
+.m-article-card__title {
+  color: $titles;
+  letter-spacing: 0.4px;
+  line-height: 1.3;
+  font-size: 1.250rem;
+  font-weight: 400;
+  margin: 0;
+
+  @include respond-to('medium') {
+    font-weight: 600;
+  }
+}
+
+.m-article-card__excerpt {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  color: $titles;
+  letter-spacing: 0.3px;
+  line-height: 1.5;
+  font-size: 1rem;
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 20px;
+    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
+  }
+}
+
+.m-article-card__timestamp,
+.m-article-card__author-stats {
+  display: flex;
+  align-items: center;
+  color: $titles;
+  letter-spacing: 0.2px;
+  font-size: 0.875rem;
+
+  span:nth-child(2) {
+    padding: 0 10px;
+  }
+}
+
+.m-article-card__author-stats {
+  position: absolute;
+  left: $mobile-space;
+  right: $mobile-space;
+  bottom: $mobile-space;
+  justify-content: space-between;
+  span {
+    padding: 0 !important;
+  }
+}
+
+.m-article-card__social {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: inline-block;
+    margin-left: 22px;
+
+    a {
+      color: $body;
+      font-size: 0.938rem;
+
+      span {
+        color: inherit;
+      }
+    }
+  }
+}
--- a/src/sass/components/articles/_featured-article.scss
+++ b/src/sass/components/articles/_featured-article.scss
@ -0,0 +1,165 @@
+.m-featured-article {
+  position: relative;
+  height: 100%;
+  background-color: $main-color;
+  z-index: 1;
+
+  &:hover {
+    .m-featured-article__author {
+      @include bs(0 4px 8px rgba(0, 0, 0, 0.3));
+    }
+  }
+
+  &.no-picture {
+    .m-featured-article__picture {
+      background-color: $dark-blue;
+    }
+  }
+}
+
+.m-featured-article__picture {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $black;
+  z-index: 1;
+
+  div {
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    opacity: 0.7;
+  }
+}
+
+.m-featured-article__meta {
+  position: absolute;
+  top: $mobile-space;
+  left: $mobile-space;
+  z-index: 4;
+
+  @include respond-to('medium') {
+    top: 40px;
+    left: 40px;
+  }
+}
+
+.m-featured-article__author {
+  display: block;
+  width: 35px;
+  height: 35px;
+  background-color: $white;
+  border: 2px solid $white;
+  border-radius: 50%;
+  margin-bottom: 20px;
+  @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+
+  div {
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    border-radius: 50%;
+  }
+}
+
+.m-featured-article__tag {
+  color: $white;
+  letter-spacing: 0.3px;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.m-featured-article__ribbon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 26px;
+  right: $mobile-space;
+  width: 24px;
+  height: 24px;
+  color: $black;
+  background-color: $white;
+  border-radius: 50%;
+  z-index: 2;
+
+  @include respond-to('medium') {
+    justify-content: flex-start;
+    top: 47px;
+    right: 40px;
+    width: auto;
+    height: 22px;
+    padding: 0 7px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: 15px;
+  }
+
+  span {
+    display: inline-block;
+  }
+
+  span:first-of-type {
+    @include respond-to('medium') {
+      font-size: 0.750rem;
+      margin-right: 4px;
+    }
+  }
+
+  span:last-of-type {
+    display: none;
+
+    @include respond-to('medium') {
+      display: block;
+    }
+  }
+}
+
+.m-featured-article__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 120px $mobile-space $mobile-space $mobile-space;
+  position: relative;
+  z-index: 3;
+
+  @include respond-to('medium') {
+    padding: 125px 40px 40px 40px;
+  }
+}
+
+.m-featured-article__title {
+  color: $white;
+  letter-spacing: 0.4px;
+  line-height: 1.3;
+  font-size: 1.625rem;
+  font-weight: 600;
+  margin: 0;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.5px;
+    font-size: 2.250em;
+    max-width: 80%;
+  }
+}
+
+.m-featured-article__timestamp {
+  display: flex;
+  align-items: center;
+  color: $white;
+  letter-spacing: 0.2px;
+  font-size: 0.875rem;
+  font-weight: 600;
+
+  span:nth-child(2) {
+    padding: 0 10px;
+  }
+}
--- a/src/sass/components/articles/_featured-slider.scss
+++ b/src/sass/components/articles/_featured-slider.scss
@ -0,0 +1,64 @@
+.m-featured-slider {
+  position: relative;
+  overflow: hidden;
+  height: 350px;
+  margin: -40px -#{$mobile-space} 40px;
+  @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+
+  &:hover {
+    @include respond-to('medium') {
+      @include transform(translateY(-5px));
+    }
+
+    &:before {
+      @include bs(0 4px 60px 0 rgba(0,0,0,.2));
+    }
+  }
+
+  @include respond-to('medium') {
+    width: 100%;
+    height: 420px;
+    margin: -40px 10px 20px 10px;
+    border-radius: 10px;
+  }
+
+  @include respond-to('large') {
+    width: calc(100% - (100% / 3) - 40px);
+    margin: 0 20px 40px 20px;
+    overflow: unset;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    bottom: 0;
+    left: 10px;
+    border-radius: 10px;
+    @include bs(0 10px 10px rgba(0,0,0,0.08));
+    @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+  }
+}
+
+.m-featured-slider__list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+
+  @include respond-to('medium') {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .slick-list,
+  .slick-track,
+  .slick-slide > div {
+    height: 100%;
+  }
+}
+
+.m-featured-slider__list__item {
+  height: 100%;
+}
--- a/src/sass/components/articles/_recommended-articles.scss
+++ b/src/sass/components/articles/_recommended-articles.scss
@ -0,0 +1,8 @@
+.m-recommended-articles {
+  margin: 0 -20px;
+
+  @include respond-to('large') {
+    padding: 0 40px;
+    margin: 0 -30px;
+  }
+}
--- a/src/sass/components/articles/_recommended-slider.scss
+++ b/src/sass/components/articles/_recommended-slider.scss
@ -0,0 +1,35 @@
+.m-recommended-slider {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  .slick-list {
+    padding: 40px 0 60px;
+
+    @include respond-to('large') {
+      padding: 40px 40px 60px;
+      margin: 0 -40px;
+    }
+  }
+
+  .m-article-card {
+    width: 100% !important;
+    margin: 0 !important;
+
+    @include respond-to('large') {
+      .m-article-card__picture {
+        height: 190px;
+      }
+    }
+
+    @include respond-to('extra-large') {
+      .m-article-card__picture {
+        height: 220px;
+      }
+    }
+  }
+}
+
+.m-recommended-slider__item {
+  padding: 0 20px;
+}
--- a/src/sass/components/articles/_share.scss
+++ b/src/sass/components/articles/_share.scss
@ -0,0 +1,59 @@
+.m-share {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 45px;
+  z-index: 3;
+  background-color: rgba(255,255,255,0.98);
+  @include bs(0 -4px 10px rgba(0,0,0,0.1));
+
+  @include respond-to('medium') {
+    height: 50px;
+  }
+
+  @include respond-to('large') {
+    position: absolute;
+    top: 0;
+    left: auto;
+    right: -75px;
+    width: 40px;
+    height: auto;
+    background-color: transparent;
+    @include bs(0 0 0 transparent);
+  }
+
+  @include respond-to('extra-large') {
+    width: 50px;
+    right: -175px;
+  }
+
+  @include respond-to('largest') {
+    right: -200px;
+  }
+
+  a:first-of-type {
+    margin-left: 0;
+
+    @include respond-to('large') {
+      margin-bottom: 0;
+    }
+  }
+
+  button:last-of-type {
+    margin-right: 0;
+  }
+}
+
+.m-share__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  @include respond-to('large') {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    height: auto;
+  }
+}
--- a/src/sass/components/author/_author.scss
+++ b/src/sass/components/author/_author.scss
@ -0,0 +1,65 @@
+.m-author {
+  padding: 40px $mobile-space;
+  margin: 0 auto;
+
+  @include respond-to('medium') {
+    display: flex;
+    justify-content: center;
+    padding: 60px 40px;
+  }
+
+  @include respond-to('extra-large') {
+    padding: 60px 0;
+  }
+}
+
+.m-author__content {
+  @include respond-to('medium') {
+    display: flex;
+    width: 100%;
+    max-width: 820px;
+  }
+}
+
+.m-author__picture {
+  width: 90px;
+  margin: 0 auto 25px;
+
+  @include respond-to('medium') {
+    width: 100px;
+    margin: 0 30px 0 0;
+  }
+}
+
+.m-author__info {
+  text-align: center;
+
+  @include respond-to('medium') {
+    flex: 1;
+    text-align: left;
+  }
+}
+
+.m-author__name {
+  color: $dark-blue;
+  letter-spacing: 0.2px;
+  line-height: 1.3;
+  font-size: 1.125rem;
+  font-weight: 400;
+  margin: 0 0 15px;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.3px;
+    font-size: 1.250rem;
+  }
+}
+
+.m-author__bio {
+  letter-spacing: 0.2px;
+  line-height: 1.5;
+  margin-bottom: 20px;
+
+  @include respond-to('medium') {
+    margin-bottom: 15px;
+  }
+}
--- a/src/sass/components/author/_links.scss
+++ b/src/sass/components/author/_links.scss
@ -0,0 +1,23 @@
+.m-author-links {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  text-align: center;
+
+  @include respond-to('medium') {
+    text-align: left;
+  }
+
+  li {
+    display: inline-block;
+    margin: 0 11px;
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}
--- a/src/sass/components/author/_picture.scss
+++ b/src/sass/components/author/_picture.scss
@ -0,0 +1,19 @@
+.m-author-picture {
+  display: block;
+  width: 90px;
+  height: 90px;
+
+  @include respond-to('medium') {
+    width: 100px;
+    height: 100px;
+  }
+
+  div {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+}
--- a/src/sass/components/comments/_load-comments.scss
+++ b/src/sass/components/comments/_load-comments.scss
@ -0,0 +1,24 @@
+.m-load-comments {
+  position: relative;
+  margin: 0 auto 40px;
+  max-width: 280px;
+
+  @include respond-to('medium') {
+    max-width: 400px;
+    margin-bottom: 60px;
+  }
+}
+
+.m-load-comments__line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+  z-index: 1;
+  background-color: #e2e2e2;
+}
+
+.m-load-comments__iframe {
+  display: none;
+}
--- a/src/sass/components/header/_header.scss
+++ b/src/sass/components/header/_header.scss
@ -0,0 +1,41 @@
+.m-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 4;
+
+  @include respond-to('medium') {
+    padding: 20px 0;
+  }
+
+  &.fixed {
+    position: fixed;
+    opacity: 0;
+    background-color: $white;
+    @include transform(translateY(-100%));
+    @include bs(0 4px 8px rgba(0, 0, 0, 0.05));
+    @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+
+    .m-header__shadow {
+      display: none;
+    }
+  }
+
+  &.fixed-active {
+    opacity: 1;
+    @include transform(translateY(0));
+  }
+
+  &.submenu-is-active {
+    background-color: $white;
+
+    .m-header__shadow {
+      display: none;
+    }
+  }
+
+  &.with-picture {
+    background-color: $white;
+  }
+}
--- a/src/sass/components/header/_logo.scss
+++ b/src/sass/components/header/_logo.scss
@ -0,0 +1,15 @@
+.m-logo {
+  display: inline-block;
+  height: 25px;
+
+  img {
+    width: auto;
+    max-width: 150px;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  &.in-mobile-topbar {
+    height: 20px;
+  }
+}
--- a/src/sass/components/header/_menu.scss
+++ b/src/sass/components/header/_menu.scss
@ -0,0 +1,42 @@
+.m-menu {
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  opacity: 0;
+  overflow-y: auto;
+  z-index: 2;
+  background-color: rgba(255,255,255,0.99);
+  -webkit-overflow-scrolling: touch;
+  @include transform(scale(1.2));
+  @include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+
+  &.opened {
+    visibility: visible;
+    opacity: 1;
+    z-index: 10;
+    @include transform(scale(1));
+  }
+
+  @include respond-to('medium') {
+    visibility: visible !important;
+    position: relative;
+    top: auto;
+    left: auto;
+    height: auto;
+    opacity: 1 !important;
+    overflow: initial;
+    background-color: transparent;
+    @include transform(translate3d(0, 0, 0) !important);
+  }
+}
+
+.m-menu__main {
+  padding: 50px 0 5px;
+
+  @include respond-to('medium') {
+    padding: 0;
+  }
+}
--- a/src/sass/components/header/_mobile-topbar.scss
+++ b/src/sass/components/header/_mobile-topbar.scss
@ -0,0 +1,12 @@
+.m-mobile-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $mobile-bar-height;
+  position: relative;
+  z-index: 2;
+
+  @include respond-to('medium') {
+    display: none !important;
+  }
+}
--- a/src/sass/components/header/_nav.scss
+++ b/src/sass/components/header/_nav.scss
@ -0,0 +1,54 @@
+.m-nav {
+  @include respond-to('medium') {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.m-nav__left {
+  margin-bottom: 30px;
+
+  @include respond-to('medium') {
+    margin-bottom: 0;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+
+    @include respond-to('medium') {
+      display: flex;
+      align-items: center;
+    }
+
+    li {
+      color: $titles;
+      letter-spacing: 0.3px;
+      font-size: 1.125rem;
+      margin-bottom: 15px;
+
+      @include respond-to('medium') {
+        margin-bottom: 0;
+        margin-right: 35px;
+        position: relative;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+
+        @include respond-to('medium') {
+          margin-right: 0;
+        }
+      }
+
+      &.nav-current {
+        font-weight: 600;
+      }
+
+      a {
+        color: inherit;
+      }
+    }
+  }
+}
--- a/src/sass/components/header/_recent-article.scss
+++ b/src/sass/components/header/_recent-article.scss
@ -0,0 +1,54 @@
+.m-recent-article {
+  display: block;
+  width: 230px;
+  margin: 0 $mobile-space;
+
+  @include respond-to('medium') {
+    margin: 0 60px 0 0;
+  }
+
+  &:hover {
+    .m-recent-article__picture {
+      div {
+        @include transform(scale(1.1));
+      }
+    }
+  }
+}
+
+.m-recent-article__picture {
+  height: 130px;
+  margin-bottom: 15px;
+  border-radius: 5px;
+  overflow: hidden;
+
+  div {
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    -webkit-backface-visibility: visible !important;
+    backface-visibility: visible !important;
+    @include transition(transform .5s cubic-bezier(0.165, 0.84, 0.44, 1));
+  }
+}
+
+.m-recent-article__title {
+  color: $titles;
+  letter-spacing: 0.2px;
+  line-height: 1.438rem;
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0 0 10px;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.25px;
+    font-size: 1.125rem;
+  }
+}
+
+.m-recent-article__date {
+  color: $titles;
+  letter-spacing: 0.15px;
+  font-size: 0.813rem;
+}
--- a/src/sass/components/header/_recent-articles.scss
+++ b/src/sass/components/header/_recent-articles.scss
@ -0,0 +1,12 @@
+.m-recent-articles {
+  margin: 0 -#{$mobile-space} 40px;
+  overflow: hidden;
+
+  @include respond-to('medium') {
+    margin: 0 0 40px;
+  }
+
+  ul {
+    cursor: grab;
+  }
+}
--- a/src/sass/components/header/_submenu-title.scss
+++ b/src/sass/components/header/_submenu-title.scss
@ -0,0 +1,15 @@
+.m-submenu-title {
+  letter-spacing: 0.3px;
+  line-height: 1.3;
+  font-size: 1.125rem;
+  font-weight: 400;
+  margin: 0 0 25px;
+
+  &.in-recent-articles {
+    padding: 0 $mobile-space;
+
+    @include respond-to('medium') {
+      padding: 0;
+    }
+  }
+}
--- a/src/sass/components/header/_submenu.scss
+++ b/src/sass/components/header/_submenu.scss
@ -0,0 +1,65 @@
+.m-submenu {
+  padding-top: 25px;
+
+  @include respond-to('medium') {
+    visibility: hidden;
+    position: fixed;
+    top: 45px;
+    left: 0;
+    width: 100%;
+    padding: 30px 0 20px 0;
+    background-color: $white;
+    border-top: 1px solid aliceblue;
+    z-index: 5;
+    @include bs(0 60px 60px rgba(0,0,0,0.25));
+  }
+
+  @include respond-to('extra-large') {
+    padding: 32px 0 23px 0;
+  }
+
+  &.opened {
+    @include respond-to('medium') {
+      visibility: visible;
+      -webkit-backface-visibility: visible !important;
+      backface-visibility: visible !important;
+      @include animation('openSubmenuAnimation 0.3s both');
+      @include keyframes(openSubmenuAnimation) {
+        from {
+          opacity: 0;
+          @include transform(translate3d(0, -5%, 0));
+        }
+        to {
+          opacity: 1;
+          @include transform(translate3d(0, 0, 0));
+        }
+      }
+    }
+  }
+
+  &.closed {
+    @include respond-to('medium') {
+      -webkit-backface-visibility: visible !important;
+      backface-visibility: visible !important;
+      @include animation('closeSubmenuAnimation 0.3s both');
+      @include keyframes(closeSubmenuAnimation) {
+        from {
+          visibility: visible;
+          opacity: 1;
+          @include transform(translate3d(0, 0, 0));
+        }
+        to {
+          visibility: hidden;
+          opacity: 0;
+          @include transform(translate3d(0, -2.5%, 0));
+        }
+      }
+    }
+  }
+}
+
+_:-ms-fullscreen, :root .m-submenu {
+  @include respond-to('medium') {
+    top: 65px;
+  }
+}
--- a/src/sass/components/header/_tags.scss
+++ b/src/sass/components/header/_tags.scss
@ -0,0 +1,22 @@
+.m-tags {
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+      letter-spacing: 0.2px;
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-right: 30px;
+      margin-bottom: 10px !important;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+
+      a {
+        color: $dark-blue;
+      }
+    }
+  }
+}
--- a/src/sass/components/heading/_description.scss
+++ b/src/sass/components/heading/_description.scss
@ -0,0 +1,17 @@
+.m-heading__description {
+  letter-spacing: 0.2px;
+  line-height: 1.3;
+  font-size: 0.938rem;
+  margin: 0 auto;
+
+  @include respond-to('medium') {
+    font-size: 1.125rem;
+  }
+
+  &.in-subscribe-page {
+    @include respond-to('medium') {
+      max-width: 420px;
+      font-size: 1rem;
+    }
+  }
+}
--- a/src/sass/components/heading/_heading.scss
+++ b/src/sass/components/heading/_heading.scss
@ -0,0 +1,14 @@
+.m-heading {
+  text-align: center;
+  margin: 0 auto 40px;
+
+  @include respond-to('medium') {
+    margin-bottom: 60px;
+  }
+
+  &.in-subscribe-page {
+    @include respond-to('medium') {
+      margin-bottom: 50px;
+    }
+  }
+}
--- a/src/sass/components/heading/_meta.scss
+++ b/src/sass/components/heading/_meta.scss
@ -0,0 +1,27 @@
+.m-heading__meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 0.2px;
+  font-size: 0.875rem;
+  font-weight: 600;
+
+  @include respond-to('medium') {
+    font-size: 1rem;
+  }
+}
+
+.m-heading__meta__tag,
+.m-heading__meta__time {
+  color: $dark-blue !important;
+}
+
+.m-heading__meta__tag {
+  text-decoration: none !important;
+}
+
+.m-heading__meta__divider {
+  display: inline-block;
+  color: $gray;
+  margin: 0 10px;
+}
--- a/src/sass/components/heading/_title.scss
+++ b/src/sass/components/heading/_title.scss
@ -0,0 +1,29 @@
+.m-heading__title {
+  color: $titles;
+  letter-spacing: 0.4px;
+  line-height: 1.3;
+  font-size: 1.750rem;
+  margin: 0 0 10px;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.5px;
+    font-size: 2.250rem;
+    margin-bottom: 15px;
+  }
+
+  &.in-post {
+    letter-spacing: 0.5px;
+    font-size: 2rem;
+    margin-bottom: 15px;
+
+    @include respond-to('medium') {
+      letter-spacing: 0.7px;
+      font-size: 2.625rem;
+      margin-bottom: 20px;
+    }
+  }
+
+  &.in-page {
+    margin: 0;
+  }
+}
--- a/src/sass/components/hero/_avatar.scss
+++ b/src/sass/components/hero/_avatar.scss
@ -0,0 +1,16 @@
+.m-hero-avatar {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 25px;
+  border-radius: 50%;
+  background-color: #5c697c;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  @include bs(inset 0  2px 4px rgba(0, 0, 0, 0.25));
+
+  @include respond-to('medium') {
+    width: 100px;
+    height: 100px;
+  }
+}
--- a/src/sass/components/hero/_description.scss
+++ b/src/sass/components/hero/_description.scss
@ -0,0 +1,24 @@
+.m-hero-description {
+  letter-spacing: 0.2px;
+  line-height: 1.5;
+  font-size: 0.938rem;
+  margin-bottom: 20px;
+
+  @include respond-to('medium') {
+    font-size: 1.125rem;
+  }
+
+  &.bigger {
+    line-height: 1.3;
+    font-size: 1.125rem;
+    margin-bottom: 25px;
+
+    @include respond-to('medium') {
+      font-size: 1.375rem;
+    }
+  }
+
+  &.with-picture {
+    color: $white;
+  }
+}
--- a/src/sass/components/hero/_hero.scss
+++ b/src/sass/components/hero/_hero.scss
@ -0,0 +1,72 @@
+.m-hero {
+  position: relative;
+  flex-direction: column;
+  min-height: 365px;
+  overflow: hidden;
+  padding: 100px 0 75px;
+  background-color: $light-blue;
+  @extend .content-centered;
+
+  @include respond-to('medium') {
+    min-height: 400px;
+    padding: 150px 0 75px;
+  }
+
+  &.with-picture {
+    color: $white;
+    background-color: darken($body, 25%);
+
+    @include respond-to('medium') {
+      min-height: 450px;
+    }
+
+    @include respond-to('extra-large') {
+      min-height: 565px;
+    }
+
+    .m-hero-title {
+      color: $white;
+    }
+  }
+}
+
+.m-hero__picture {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  z-index: 1;
+  opacity: 0.7;
+  &.in-post {
+    opacity: 1;
+  }
+}
+
+.m-hero__content {
+  position: relative;
+  text-align: center;
+  padding: 0 $mobile-space;
+  z-index: 2;
+
+  @include respond-to('medium') {
+    max-width: 700px;
+  }
+
+  @include respond-to('extra-large') {
+    padding: 0;
+  }
+}
+
+.m-hero__meta {
+  margin: 0 auto;
+
+  @include respond-to('medium') {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
--- a/src/sass/components/hero/_social.scss
+++ b/src/sass/components/hero/_social.scss
@ -0,0 +1,29 @@
+.m-hero-social {
+  text-align: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0 0 15px;
+
+  @include respond-to('medium') {
+    margin-right: 7px;
+    margin-bottom: 0;
+  }
+
+  &.with-picture {
+    color: $white;
+  }
+
+  li {
+    display: inline-block;
+    margin: 0 11px;
+
+    a {
+      color: inherit;
+      font-size: 0.938rem;
+
+      span {
+        color: inherit;
+      }
+    }
+  }
+}
--- a/src/sass/components/hero/_stats.scss
+++ b/src/sass/components/hero/_stats.scss
@ -0,0 +1,27 @@
+.m-hero-stats {
+  text-align: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  @include respond-to('medium') {
+    margin-left: 7px;
+  }
+
+  &.with-picture {
+    color: $white;
+  }
+
+  li {
+    display: inline-block;
+    color: inherit;
+    letter-spacing: 0.2px;
+    font-size: 0.813rem;
+    margin: 0 4px;
+
+    @include respond-to('medium') {
+      letter-spacing: 0.3px;
+      font-size: 1rem;
+    }
+  }
+}
--- a/src/sass/components/hero/_title.scss
+++ b/src/sass/components/hero/_title.scss
@ -0,0 +1,24 @@
+.m-hero-title {
+  color: $titles;
+  letter-spacing: 0.4px;
+  line-height: 1.3;
+  font-size: 1.750rem;
+  font-weight: 700;
+  margin: 0 0 15px;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.5px;
+    font-size: 2.250rem;
+  }
+
+  &.bigger {
+    letter-spacing: 0.5px;
+    font-size: 2rem;
+
+    @include respond-to('medium') {
+      letter-spacing: 0.8px;
+      font-size: 3.250rem;
+      margin-bottom: 10px;
+    }
+  }
+}
--- a/src/sass/components/search/_icon.scss
+++ b/src/sass/components/search/_icon.scss
@ -0,0 +1,15 @@
+.m-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  color: $gray;
+  font-size: 1rem;
+  font-weight: 500;
+  pointer-events: none;
+  @include transform(translateY(-45%));
+
+  @include respond-to('medium') {
+    font-size: 1.250em;
+    left: 25px;
+  }
+}
--- a/src/sass/components/search/_result.scss
+++ b/src/sass/components/search/_result.scss
@ -0,0 +1,48 @@
+.m-result {
+  border-bottom: 1px solid lighten($gray, 30%);
+
+  &.last {
+    border-bottom: 0;
+  }
+}
+
+.m-result__link {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 10px 0;
+
+  @include respond-to('medium') {
+    padding: 15px 0;
+  }
+}
+
+.m-result__title {
+  color: $body;
+  letter-spacing: 0.3px;
+  line-height: 1.4;
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0 0 5px;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.4px;
+    font-size: 1.250rem;
+    margin-bottom: 10px;
+  }
+
+  @include respond-to('extra-large') {
+    font-size: 1.375rem;
+  }
+}
+
+.m-result__date {
+  color: $titles;
+  letter-spacing: 0.2px;
+  font-size: 0.813rem;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.3px;
+    font-size: 0.938rem;
+  }
+}
--- a/src/sass/components/search/_search.scss
+++ b/src/sass/components/search/_search.scss
@ -0,0 +1,51 @@
+.m-search {
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  overflow-y: auto;
+  z-index: 2;
+  background-color: rgba(255,255,255,0.99);
+  -webkit-overflow-scrolling: touch;
+  @include transform(scale(1.2));
+  @include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+
+  &.opened {
+    visibility: visible;
+    opacity: 1;
+    z-index: 10;
+    @include transform(scale(1));
+  }
+}
+
+.m-search__content {
+  padding: 80px $mobile-space 40px;
+  margin: 0 auto;
+
+  @include respond-to('medium') {
+    padding-top: 100px;
+    padding-bottom: 50px;
+    max-width: 700px;
+  }
+
+  @include respond-to('extra-large') {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  @include respond-to('largest') {
+    max-width: 800px;
+  }
+}
+
+.m-search__form {
+  margin-bottom: 30px;
+
+  @include respond-to('medium') {
+    max-width: 500px;
+    margin: 0 auto 45px;
+  }
+}
--- a/src/sass/components/subscribe/_subscribe-section.scss
+++ b/src/sass/components/subscribe/_subscribe-section.scss
@ -0,0 +1,59 @@
+.m-subscribe-section {
+  padding: 50px 0;
+  background-color: $light-blue;
+
+  @include respond-to('medium') {
+    padding: 80px 0;
+  }
+}
+
+.m-subscribe-section__content {
+  @include respond-to('medium') {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.m-subscribe-section__text {
+  text-align: center;
+  margin-bottom: 30px;
+
+  @include respond-to('medium') {
+    flex: 1;
+    text-align: left;
+    padding-right: 75px;
+    margin-bottom: 0;
+  }
+}
+
+.m-subscribe-section__title {
+  color: $titles;
+  letter-spacing: 0.3px;
+  line-height: 1.3;
+  font-size: 1.250rem;
+  font-weight: 600;
+  margin: 0 0 20px;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.3px;
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+  }
+}
+
+.m-subscribe-section__description {
+  letter-spacing: 0.2px;
+  line-height: 1.4;
+
+  @include respond-to('medium') {
+    font-size: 1.125rem;
+  }
+}
+
+.m-subscribe-section__form {
+  @include respond-to('medium') {
+    width: 300px;
+    margin: 0 auto;
+  }
+}
--- a/src/sass/components/ui/_back.scss
+++ b/src/sass/components/ui/_back.scss
@ -0,0 +1,33 @@
+.m-back {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: $mobile-space;
+  left: $mobile-space;
+  color: $titles;
+  letter-spacing: 0.2px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  z-index: 2;
+
+  @include respond-to('medium') {
+    top: 40px;
+    letter-spacing: 0.3px;
+    font-size: 1rem;
+  }
+
+  span {
+    color: inherit;
+    display: inline-block;
+  }
+}
+
+.m-back__icon {
+  font-size: 0.750rem;
+  margin-right: 10px;
+
+  @include respond-to('medium') {
+    font-size: 0.875rem;
+  }
+}
--- a/src/sass/components/ui/_button.scss
+++ b/src/sass/components/ui/_button.scss
@ -0,0 +1,46 @@
+.m-button {
+  display: inline-block;
+  color: $titles;
+  text-align: center;
+  letter-spacing: 0.2px;
+  line-height: 1;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 5px;
+  padding: 13px 25px;
+  cursor: pointer;
+  outline: 0;
+  border: 0;
+  background-color: transparent;
+  @extend .no-appearance;
+  @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+
+  &.outlined {
+    border: 1px solid $body;
+  }
+
+  &.filled,
+  &.primary {
+    @include bs(0 2px 4px rgba(108, 108, 108, 0.2));
+
+    &:hover {
+      @include transform(translateY(-2px));
+      @include bs(0 4px 8px rgba(108, 108, 108, 0.3));
+    }
+  }
+
+  &.filled {
+    border-radius: 5px;
+    background-color: $white;
+  }
+
+  &.block {
+    display: block;
+    width: 100%;
+  }
+
+  &.primary {
+    color: $white;
+    background-color: $main-color;
+  }
+}
--- a/src/sass/components/ui/_icon-button.scss
+++ b/src/sass/components/ui/_icon-button.scss
@ -0,0 +1,216 @@
+.m-icon-button {
+  color: $titles;
+  font-size: 1.125rem;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  cursor: pointer;
+  background-color: transparent;
+  @extend .content-centered;
+  @extend .no-appearance;
+
+  &.outlined {
+    border-radius: 50%;
+    border: 1px solid $body;
+  }
+
+  &.filled {
+    background-color: $white;
+    border-radius: 50%;
+    @include bs(0 2px 4px rgba(108, 108, 108, 0.2));
+    @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+
+    &:hover {
+      @include bs(0 4px 8px rgba(108, 108, 108, 0.3));
+    }
+  }
+
+  &.in-mobile-topbar {
+    width: 65px;
+    height: 100%;
+  }
+
+  &.as-close-menu {
+    position: absolute;
+    top: $mobile-space;
+    right: $mobile-space;
+    width: 32px;
+    height: 32px;
+    font-size: 0.625rem;
+    z-index: 2;
+
+    @include respond-to('medium') {
+      display: none !important;
+    }
+  }
+
+  &.as-close-search {
+    position: absolute;
+    top: $mobile-space;
+    right: $mobile-space;
+    width: 32px;
+    height: 32px;
+    font-size: 0.625rem;
+    z-index: 2;
+    background-color: $white;
+
+    @include respond-to('medium') {
+      top: 30px;
+      right: 30px;
+      width: 42px;
+      height: 42px;
+      font-size: 0.875rem;
+    }
+
+    @include respond-to('extra-large') {
+      top: 40px;
+      right: 40px;
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  &.in-menu-main {
+    display: none;
+
+    @include respond-to('medium') {
+      display: flex;
+      width: 25px;
+      height: 25px;
+    }
+  }
+
+  &.more {
+    font-size: 6px;
+    z-index: 6;
+    position: relative;
+
+    &.active {
+      color: $main-color;
+    }
+  }
+
+  &.in-pagination-left,
+  &.in-pagination-right {
+    width: 40px;
+    height: 40px;
+    font-size: 0.625rem;
+
+    @include respond-to('medium') {
+      width: 46px;
+      height: 46px;
+      font-size: 0.688rem;
+    }
+  }
+
+  &.in-pagination-left {
+    margin-right: 30px;
+  }
+
+  &.in-pagination-right {
+    margin-left: 30px;
+  }
+
+  &.in-featured-articles {
+    position: absolute;
+    color: $white;
+    font-size: 0.875rem;
+    width: 29px;
+    height: 22px;
+    bottom: 16px;
+    z-index: 2;
+
+    @include respond-to('medium') {
+      bottom: 36px;
+    }
+
+    &.slick-prev {
+      right: 52px;
+
+      @include respond-to('medium') {
+        right: 72px;
+      }
+    }
+
+    &.slick-next {
+      right: 16px;
+
+      @include respond-to('medium') {
+        right: 36px;
+      }
+    }
+  }
+
+  &.in-recommended-articles {
+    position: absolute;
+    font-size: 0.625rem;
+    width: 40px;
+    height: 40px;
+    top: 200px;
+    z-index: 2;
+    @include transform(translateY(-50%));
+
+    &.slick-prev {
+      left: 0;
+    }
+
+    &.slick-next {
+      right: 0;
+    }
+  }
+
+  &.as-load-comments {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    font-size: 1.250rem;
+    margin: 0 auto;
+    z-index: 2;
+
+    @include respond-to('medium') {
+      width: 80px;
+      height: 80px;
+      font-size: 1.625rem;
+    }
+  }
+
+  &.in-share {
+    color: $titles;
+    font-size: 0.750rem;
+    text-decoration: none;
+    width: 31px;
+    height: 31px;
+    margin: 0 25px;
+
+    @include respond-to('large') {
+      font-size: 0.875rem;
+      width: 40px;
+      height: 40px;
+      margin: 0 0 20px 0;
+    }
+
+    @include respond-to('extra-large') {
+      font-size: 1rem;
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  &.progress {
+    position: relative;
+
+    svg {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+
+      circle {
+        transform-origin: 50% 50%;
+        @include transform(rotate(-90deg));
+        @include transition(stroke-dashoffset 0.2s);
+      }
+    }
+  }
+}
--- a/src/sass/components/ui/_input.scss
+++ b/src/sass/components/ui/_input.scss
@ -0,0 +1,26 @@
+.m-input {
+  letter-spacing: 0.2px;
+  line-height: 1.3;
+  font-size: 1rem;
+  width: 100%;
+  border-radius: 5px;
+  padding: 11px 15px;
+  border: 1px solid $gray;
+  outline: 0;
+  background-color: $white;
+  @extend .no-appearance;
+
+  &.in-search {
+    font-weight: 600;
+    padding-left: 40px;
+
+    @include respond-to('medium') {
+      font-size: 1.250rem;
+      padding: 15px 30px 15px 60px;
+    }
+  }
+
+  &.in-subscribe-section {
+    margin-bottom: 15px;
+  }
+}
--- a/src/sass/components/ui/_no-found.scss
+++ b/src/sass/components/ui/_no-found.scss
@ -0,0 +1,14 @@
+.m-no-found {
+  color: $black;
+  line-height: 1.3;
+  font-size: 0.875rem;
+  font-weight: 600;
+
+  &.in-recent-articles {
+    margin-left: $mobile-space;
+
+    @include respond-to('medium') {
+      margin-left: 0;
+    }
+  }
+}
--- a/src/sass/components/ui/_pagination.scss
+++ b/src/sass/components/ui/_pagination.scss
@ -0,0 +1,19 @@
+.m-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 40px;
+}
+
+.m-pagination__text {
+  display: inline-block;
+  color: $titles;
+  letter-spacing: 0.2px;
+  text-align: center;
+  font-size: 0.875rem;
+
+  @include respond-to('medium') {
+    letter-spacing: 0.3px;
+    font-size: 1rem;
+  }
+}
--- a/src/sass/components/ui/_section-title.scss
+++ b/src/sass/components/ui/_section-title.scss
@ -0,0 +1,18 @@
+.m-section-title {
+  color: $body;
+  text-align: center;
+  letter-spacing: 0.3px;
+  line-height: 1.3;
+  font-weight: 400;
+  font-size: 1.250rem;
+  margin: 0 0 30px;
+
+  @include respond-to('medium') {
+    font-size: 1.5rem;
+    margin-bottom: 40px;
+  }
+
+  &.in-recommended {
+    margin-bottom: 0 !important;
+  }
+}
--- a/src/sass/components/ui/_small-text.scss
+++ b/src/sass/components/ui/_small-text.scss
@ -0,0 +1,17 @@
+.m-small-text {
+  color: $gray;
+  font-size: 0.875rem;
+
+  &.in-subscribe-page {
+    padding-top: 30px;
+    font-weight: 600;
+  }
+
+  &.in-author-along-with {
+    margin-bottom: 20px;
+
+    a {
+      color: $black;
+    }
+  }
+}
--- a/src/sass/layouts/.gitkeep
+++ b/src/sass/layouts/.gitkeep
--- a/src/sass/layouts/_content.scss
+++ b/src/sass/layouts/_content.scss
@ -0,0 +1,7 @@
+.l-content {
+  padding: 40px 0 20px;
+
+  @include respond-to('medium') {
+    padding: 60px 0 40px;
+  }
+}
--- a/src/sass/layouts/_fullscreen.scss
+++ b/src/sass/layouts/_fullscreen.scss
@ -0,0 +1,25 @@
+.l-fullscreen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.l-fullscreen__content {
+  text-align: center;
+  padding: 0 $mobile-space;
+
+  @include respond-to('medium') {
+    max-width: 500px;
+  }
+
+  &.in-subscribe-page {
+    @include respond-to('medium') {
+      padding: 0;
+    }
+
+    @include respond-to('large') {
+      max-width: 820px;
+    }
+  }
+}
--- a/src/sass/layouts/_grid.scss
+++ b/src/sass/layouts/_grid.scss
@ -0,0 +1,19 @@
+.l-grid {
+  padding-bottom: 20px;
+
+  @include respond-to('medium') {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -10px;
+  }
+
+  @include respond-to('extra-large') {
+    margin: 0 -20px;
+  }
+
+  &.centered {
+    @include respond-to('medium') {
+      justify-content: center;
+    }
+  }
+}
--- a/src/sass/layouts/_post-content.scss
+++ b/src/sass/layouts/_post-content.scss
@ -0,0 +1,377 @@
+.l-post-content {
+  @include respond-to('medium') {
+    max-width: 820px;
+    margin: 0 auto;
+  }
+
+  &.has-subscribe-form {
+    padding-bottom: 15px;
+
+    @include respond-to('medium') {
+      padding-bottom: 30px;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $titles;
+    line-height: 1.3;
+    font-weight: 700;
+    padding-top: 5px;
+    margin: 0 0 30px;
+
+    @include respond-to('medium') {
+      padding-top: 10px;
+      margin-bottom: 40px;
+    }
+  }
+
+  h1 {
+    font-size: 2.125rem;
+
+    @include respond-to('medium') {
+      font-size: 2.625rem;
+    }
+  }
+
+  h2 {
+    font-size: 1.750rem;
+
+    @include respond-to('medium') {
+      font-size: 2.250rem;
+    }
+  }
+
+  h3 {
+    font-size: 1.375rem;
+
+    @include respond-to('medium') {
+      font-size: 1.750rem;
+    }
+  }
+
+  h4 {
+    font-size: 1rem;
+
+    @include respond-to('medium') {
+      font-size: 1.375rem;
+    }
+  }
+
+  h5 {
+    font-size: 0.938rem;
+
+    @include respond-to('medium') {
+      font-size: 1.125rem;
+    }
+  }
+
+  h6 {
+    font-size: 0.813rem;
+
+    @include respond-to('medium') {
+      font-size: 1rem;
+    }
+  }
+
+  p {
+    letter-spacing: 0.2px;
+    line-height: 1.5;
+    font-size: 1.125rem;
+    margin-bottom: 25px;
+
+    @include respond-to('medium') {
+      letter-spacing: 0.3px;
+      line-height: 1.6;
+      font-size: 1.250rem;
+      margin-bottom: 30px;
+    }
+
+    img {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  b, strong {
+    font-weight: 600;
+  }
+
+  a {
+    color: $black;
+    text-decoration: underline;
+  }
+
+  ul, ol {
+    letter-spacing: 0.2px;
+    line-height: 1.5;
+    font-size: 1.125rem;
+    padding-left: 20px;
+    margin: 0 0 20px 0;
+
+    @include respond-to('medium') {
+      letter-spacing: 0.3px;
+      line-height: 1.6;
+      font-size: 1.250rem;
+      padding-left: 40px;
+      margin-bottom: 30px;
+    }
+
+    li {
+      margin-bottom: 20px;
+    }
+  }
+
+  img,
+  .kg-image {
+    display: block;
+    max-width: 100%;
+    margin: 0 auto 35px;
+
+    @include respond-to('medium') {
+      margin-bottom: 40px;
+    }
+  }
+
+  iframe {
+    max-width: 100%;
+  }
+
+  .fluid-width-video-wrapper {
+    margin: 0 auto 35px;
+
+    @include respond-to('medium') {
+      margin-bottom: 40px;
+    }
+  }
+
+  figure,
+  &.kg-image-card {
+    padding: 20px 0 40px;
+    margin: 0 -#{$mobile-space};
+
+    @include respond-to('medium') {
+      padding: 20px 0 50px;
+      margin: 0;
+    }
+
+    &.kg-embed-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 100%;
+      margin: 0 auto;
+
+      iframe {
+        margin: 0 auto;
+      }
+    }
+
+    &.kg-width-full,
+    &.kg-width-wide {
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    &.kg-width-wide {
+      @include respond-to('extra-large') {
+        margin: 0 -70px;
+      }
+    }
+
+    img,
+    .kg-image {
+      display: block;
+      width: auto;
+      max-width: 100%;
+      height: auto;
+      margin: 0 auto;
+    }
+
+    figcaption {
+      text-align: center;
+      letter-spacing: 0.1px;
+      line-height: 1.3;
+      font-size: 0.750rem;
+      padding: 10px $mobile-space 0 $mobile-space;
+
+      @include respond-to('medium') {
+        font-size: 0.875rem;
+        padding: 15px 0 0 0;
+      }
+    }
+
+    .fluid-width-video-container {
+      flex-grow: 1;
+      width: 100%;
+    }
+
+    .fluid-width-video-wrapper {
+      margin: 0 auto !important;
+    }
+
+    .kg-gallery-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .kg-gallery-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    .kg-gallery-image img {
+      display: block;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .kg-gallery-row:not(:first-of-type) {
+      margin: 0.75em 0 0 0;
+    }
+
+    .kg-gallery-image:not(:first-of-type) {
+      margin: 0 0 0 0.75em;
+    }
+  }
+
+  hr {
+    position: relative;
+    margin: 30px 0;
+    border: 0;
+    border-top: 1px solid darken($light-blue, 5%);
+
+    @include respond-to('medium') {
+      margin: 50px 0;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: darken($light-blue, 5%);
+      @include bs(0 0 0 10px $white);
+      @include transform(translate(-50%,-50%));
+
+      @include respond-to('medium') {
+        width: 12px;
+        height: 12px;
+        @include bs(0 0 0 20px $white);
+      }
+    }
+  }
+
+  blockquote {
+    position: relative;
+    letter-spacing: 0.2px;
+    line-height: 1.5;
+    font-size: 1.125rem;
+    font-style: italic;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    padding: 0 40px;
+    margin: 0 0 25px;
+
+    @include respond-to('medium') {
+      letter-spacing: 0.3px;
+      line-height: 1.6;
+      font-size: 1.250rem;
+      padding: 0 60px;
+      margin-bottom: 30px;
+    }
+
+    &:before {
+      content: '"';
+      position: absolute;
+      top: 0;
+      left: 0;
+      color: darken($light-blue, 10%);
+      line-height: 1;
+      font-size: 2.625rem;
+
+      @include respond-to('medium') {
+        font-size: 4rem;
+      }
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  table {
+    color: $titles;
+    font-size: 0.875rem;
+    width: calc(100% + 40px);
+    margin: 0 -#{$mobile-space} 25px;
+
+    @include respond-to('medium') {
+      font-size: 1rem;
+      width: 100%;
+      margin: 0 0 30px;
+    }
+
+    thead {
+      border-bottom: 1px solid #e2e2e2;
+
+      td {
+        font-weight: 600;
+      }
+    }
+
+    tbody {
+      tr:nth-child(odd) {
+        background-color: #fafafa;
+      }
+    }
+
+    td {
+      text-align: center;
+      padding: 10px;
+
+      @include respond-to('medium') {
+        padding: 20px;
+      }
+    }
+  }
+
+  code {
+    display: inline-block;
+    color: $dark-blue;
+    font-size: 0.9rem;
+    padding: 0 5px;
+    border-radius: 5px;
+    background-color: lighten($gray, 35%);
+  }
+
+  pre {
+    line-height: 1.4;
+    margin: 0 0 25px;
+
+    @include respond-to('medium') {
+      margin-bottom: 30px;
+    }
+
+    > code {
+      display: block;
+      padding: 10px;
+      white-space: pre-wrap;
+
+      @include respond-to('medium') {
+        padding: 20px;
+      }
+    }
+  }
+
+}
--- a/src/sass/layouts/_wrapper.scss
+++ b/src/sass/layouts/_wrapper.scss
@ -0,0 +1,49 @@
+.l-wrapper {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 $mobile-space;
+
+  @include respond-to('medium') {
+    max-width: 1200px;
+  }
+
+  @include respond-to('extra-large') {
+    padding: 0;
+  }
+
+  &.in-submenu {
+    padding: 0;
+
+    @include respond-to('medium') {
+      padding: 0 $mobile-space;
+    }
+
+    @include respond-to('extra-large') {
+      padding: 0;
+    }
+  }
+
+  &.in-post {
+    @include respond-to('medium') {
+      max-width: 960px;
+    }
+  }
+
+  &.in-comments {
+    @include respond-to('medium') {
+      max-width: 820px;
+    }
+  }
+
+  &.in-recommended {
+    @include respond-to('large') {
+      padding: 0;
+      max-width: calc(100% - 60px);
+    }
+
+    @include respond-to('largest') {
+      max-width: 1200px;
+    }
+  }
+}
--- a/src/sass/libs/_slick.scss
+++ b/src/sass/libs/_slick.scss
@ -0,0 +1,103 @@
+/* Slider */
+
+.slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  margin: 0;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &.dragging {
+    cursor: pointer;
+    cursor: hand;
+  }
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+  @include transform(translate3d(0, 0, 0));
+}
+
+.slick-track {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+
+  .slick-loading & {
+    visibility: hidden;
+  }
+}
+
+.slick-slide {
+  float: left;
+  height: 100%;
+  min-height: 1px;
+
+  [dir="rtl"] & {
+    float: right;
+  }
+
+  img {
+    display: block;
+  }
+
+  &.slick-loading img {
+    display: none;
+  }
+
+  display: none;
+
+  &.dragging img {
+    pointer-events: none;
+  }
+
+  .slick-initialized & {
+    display: block;
+  }
+
+  .slick-loading & {
+    visibility: hidden;
+  }
+
+  .slick-vertical & {
+    display: block;
+    height: auto;
+    border: 1px solid transparent;
+  }
+}
+
+.slick-arrow.slick-hidden {
+  display: none;
+}
--- a/src/sass/libs/aos/_animations.scss
+++ b/src/sass/libs/aos/_animations.scss
@ -0,0 +1,51 @@
+// Animations variables
+$aos-distance: 100px !default;
+
+/**
+ * Fade animations:
+ * fade
+ * fade-up, fade-down, fade-left, fade-right
+ * fade-up-right, fade-up-left, fade-down-right, fade-down-left
+ */
+
+[data-aos^='fade'][data-aos^='fade'] {
+  opacity: 0;
+  transition-property: opacity, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+[data-aos='fade-up'] {
+  transform: translate3d(0, $aos-distance, 0);
+}
+
+[data-aos='fade-down'] {
+  transform: translate3d(0, -$aos-distance, 0);
+}
+
+[data-aos='fade-right'] {
+  transform: translate3d(-$aos-distance, 0, 0);
+}
+
+[data-aos='fade-left'] {
+  transform: translate3d($aos-distance, 0, 0);
+}
+
+[data-aos='fade-up-right'] {
+  transform: translate3d(-$aos-distance, $aos-distance, 0);
+}
+
+[data-aos='fade-up-left'] {
+  transform: translate3d($aos-distance, $aos-distance, 0);
+}
+
+[data-aos='fade-down-right'] {
+  transform: translate3d(-$aos-distance, -$aos-distance, 0);
+}
+
+[data-aos='fade-down-left'] {
+  transform: translate3d($aos-distance, -$aos-distance, 0);
+}
--- a/src/sass/libs/aos/_aos.scss
+++ b/src/sass/libs/aos/_aos.scss
@ -0,0 +1,3 @@
+@import 'core';
+@import 'easing';
+@import 'animations';
--- a/src/sass/libs/aos/_core.scss
+++ b/src/sass/libs/aos/_core.scss
@ -0,0 +1,18 @@
+// Generate Duration && Delay
+[data-aos] {
+  @for $i from 1 through 60 {
+    body[data-aos-duration='#{$i * 50}'] &,
+    &[data-aos][data-aos-duration='#{$i * 50}'] {
+      transition-duration: #{$i * 50}ms;
+    }
+
+    body[data-aos-delay='#{$i * 50}'] &,
+    &[data-aos][data-aos-delay='#{$i * 50}'] {
+      transition-delay: 0;
+
+      &.aos-animate {
+        transition-delay: #{$i * 50}ms;
+      }
+    }
+  }
+}
--- a/src/sass/libs/aos/_easing.scss
+++ b/src/sass/libs/aos/_easing.scss
@ -0,0 +1,34 @@
+$aos-easing: (
+  linear: cubic-bezier(0.25, 0.25, 0.75, 0.75),
+  ease: cubic-bezier(0.25, 0.1, 0.25, 1),
+  ease-in: cubic-bezier(0.42, 0, 1, 1),
+  ease-out: cubic-bezier(0, 0, 0.58, 1),
+  ease-in-out: cubic-bezier(0.42, 0, 0.58, 1),
+  ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045),
+  ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 10.275),
+  ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 10.55),
+  ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715),
+  ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1),
+  ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95),
+  ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53),
+  ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94),
+  ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955),
+  ease-in-cubic: cubic-bezier(0.55, 0.085, 0.68, 0.53),
+  ease-out-cubic: cubic-bezier(0.25, 0.46, 0.45, 0.94),
+  ease-in-out-cubic: cubic-bezier(0.455, 0.03, 0.515, 0.955),
+  ease-in-quart: cubic-bezier(0.55, 0.085, 0.68, 0.53),
+  ease-out-quart: cubic-bezier(0.25, 0.46, 0.45, 0.94),
+  ease-in-out-quart: cubic-bezier(0.455, 0.03, 0.515, 0.955)
+);
+
+// Easings implementations
+// Default timing function: 'ease'
+
+[data-aos] {
+  @each $key, $val in $aos-easing {
+    body[data-aos-easing="#{$key}"] &,
+    &[data-aos][data-aos-easing="#{$key}"] {
+      transition-timing-function: $val;
+    }
+  }
+}