From 5187b7377a28604c72f3983e3724567844cad3ef Mon Sep 17 00:00:00 2001 From: Eduardo Date: Tue, 21 May 2019 21:50:29 +0200 Subject: [PATCH] Add source files --- src/js/app.js | 234 +++++++ src/js/home.js | 20 + src/js/page.js | 34 + src/js/polyfill.js | 90 +++ src/js/post.js | 176 ++++++ src/sass/app.scss | 65 ++ src/sass/common/_global.scss | 71 +++ src/sass/common/_helpers.scss | 102 +++ src/sass/common/_icons.scss | 65 ++ src/sass/common/_mixins.scss | 141 +++++ src/sass/common/_reset.scss | 586 ++++++++++++++++++ src/sass/common/_variables.scss | 17 + src/sass/components/.gitkeep | 0 src/sass/components/404/_subtitle.scss | 13 + src/sass/components/404/_text.scss | 13 + src/sass/components/404/_title.scss | 14 + src/sass/components/_footer.scss | 56 ++ .../components/articles/_article-card.scss | 318 ++++++++++ .../articles/_featured-article.scss | 165 +++++ .../components/articles/_featured-slider.scss | 64 ++ .../articles/_recommended-articles.scss | 8 + .../articles/_recommended-slider.scss | 35 ++ src/sass/components/articles/_share.scss | 59 ++ src/sass/components/author/_author.scss | 65 ++ src/sass/components/author/_links.scss | 23 + src/sass/components/author/_picture.scss | 19 + .../components/comments/_load-comments.scss | 24 + src/sass/components/header/_header.scss | 41 ++ src/sass/components/header/_logo.scss | 15 + src/sass/components/header/_menu.scss | 42 ++ .../components/header/_mobile-topbar.scss | 12 + src/sass/components/header/_nav.scss | 54 ++ .../components/header/_recent-article.scss | 54 ++ .../components/header/_recent-articles.scss | 12 + .../components/header/_submenu-title.scss | 15 + src/sass/components/header/_submenu.scss | 65 ++ src/sass/components/header/_tags.scss | 22 + src/sass/components/heading/_description.scss | 17 + src/sass/components/heading/_heading.scss | 14 + src/sass/components/heading/_meta.scss | 27 + src/sass/components/heading/_title.scss | 29 + src/sass/components/hero/_avatar.scss | 16 + src/sass/components/hero/_description.scss | 24 + src/sass/components/hero/_hero.scss | 72 +++ src/sass/components/hero/_social.scss | 29 + src/sass/components/hero/_stats.scss | 27 + src/sass/components/hero/_title.scss | 24 + src/sass/components/search/_icon.scss | 15 + src/sass/components/search/_result.scss | 48 ++ src/sass/components/search/_search.scss | 51 ++ .../subscribe/_subscribe-section.scss | 59 ++ src/sass/components/ui/_back.scss | 33 + src/sass/components/ui/_button.scss | 46 ++ src/sass/components/ui/_icon-button.scss | 216 +++++++ src/sass/components/ui/_input.scss | 26 + src/sass/components/ui/_no-found.scss | 14 + src/sass/components/ui/_pagination.scss | 19 + src/sass/components/ui/_section-title.scss | 18 + src/sass/components/ui/_small-text.scss | 17 + src/sass/layouts/.gitkeep | 0 src/sass/layouts/_content.scss | 7 + src/sass/layouts/_fullscreen.scss | 25 + src/sass/layouts/_grid.scss | 19 + src/sass/layouts/_post-content.scss | 377 +++++++++++ src/sass/layouts/_wrapper.scss | 49 ++ src/sass/libs/_slick.scss | 103 +++ src/sass/libs/aos/_animations.scss | 51 ++ src/sass/libs/aos/_aos.scss | 3 + src/sass/libs/aos/_core.scss | 18 + src/sass/libs/aos/_easing.scss | 34 + 70 files changed, 4336 insertions(+) create mode 100644 src/js/app.js create mode 100644 src/js/home.js create mode 100644 src/js/page.js create mode 100644 src/js/polyfill.js create mode 100644 src/js/post.js create mode 100644 src/sass/app.scss create mode 100644 src/sass/common/_global.scss create mode 100644 src/sass/common/_helpers.scss create mode 100644 src/sass/common/_icons.scss create mode 100644 src/sass/common/_mixins.scss create mode 100644 src/sass/common/_reset.scss create mode 100644 src/sass/common/_variables.scss create mode 100644 src/sass/components/.gitkeep create mode 100644 src/sass/components/404/_subtitle.scss create mode 100644 src/sass/components/404/_text.scss create mode 100644 src/sass/components/404/_title.scss create mode 100644 src/sass/components/_footer.scss create mode 100644 src/sass/components/articles/_article-card.scss create mode 100644 src/sass/components/articles/_featured-article.scss create mode 100644 src/sass/components/articles/_featured-slider.scss create mode 100644 src/sass/components/articles/_recommended-articles.scss create mode 100644 src/sass/components/articles/_recommended-slider.scss create mode 100644 src/sass/components/articles/_share.scss create mode 100644 src/sass/components/author/_author.scss create mode 100644 src/sass/components/author/_links.scss create mode 100644 src/sass/components/author/_picture.scss create mode 100644 src/sass/components/comments/_load-comments.scss create mode 100644 src/sass/components/header/_header.scss create mode 100644 src/sass/components/header/_logo.scss create mode 100644 src/sass/components/header/_menu.scss create mode 100644 src/sass/components/header/_mobile-topbar.scss create mode 100644 src/sass/components/header/_nav.scss create mode 100644 src/sass/components/header/_recent-article.scss create mode 100644 src/sass/components/header/_recent-articles.scss create mode 100644 src/sass/components/header/_submenu-title.scss create mode 100644 src/sass/components/header/_submenu.scss create mode 100644 src/sass/components/header/_tags.scss create mode 100644 src/sass/components/heading/_description.scss create mode 100644 src/sass/components/heading/_heading.scss create mode 100644 src/sass/components/heading/_meta.scss create mode 100644 src/sass/components/heading/_title.scss create mode 100644 src/sass/components/hero/_avatar.scss create mode 100644 src/sass/components/hero/_description.scss create mode 100644 src/sass/components/hero/_hero.scss create mode 100644 src/sass/components/hero/_social.scss create mode 100644 src/sass/components/hero/_stats.scss create mode 100644 src/sass/components/hero/_title.scss create mode 100644 src/sass/components/search/_icon.scss create mode 100644 src/sass/components/search/_result.scss create mode 100644 src/sass/components/search/_search.scss create mode 100644 src/sass/components/subscribe/_subscribe-section.scss create mode 100644 src/sass/components/ui/_back.scss create mode 100644 src/sass/components/ui/_button.scss create mode 100644 src/sass/components/ui/_icon-button.scss create mode 100644 src/sass/components/ui/_input.scss create mode 100644 src/sass/components/ui/_no-found.scss create mode 100644 src/sass/components/ui/_pagination.scss create mode 100644 src/sass/components/ui/_section-title.scss create mode 100644 src/sass/components/ui/_small-text.scss create mode 100644 src/sass/layouts/.gitkeep create mode 100644 src/sass/layouts/_content.scss create mode 100644 src/sass/layouts/_fullscreen.scss create mode 100644 src/sass/layouts/_grid.scss create mode 100644 src/sass/layouts/_post-content.scss create mode 100644 src/sass/layouts/_wrapper.scss create mode 100644 src/sass/libs/_slick.scss create mode 100644 src/sass/libs/aos/_animations.scss create mode 100644 src/sass/libs/aos/_aos.scss create mode 100644 src/sass/libs/aos/_core.scss create mode 100644 src/sass/libs/aos/_easing.scss diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..764a0e8 --- /dev/null +++ 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(` +
\ + \ +

${results[i].title}

\ + ${formatDate(results[i].published_at)}\ + \ +
+ `) + } + } else { + $searchResults.html('

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 }) +}) diff --git a/src/js/home.js b/src/js/home.js new file mode 100644 index 0000000..94695ce --- /dev/null +++ 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: '', + nextArrow: '', + mobileFirst: true + }) + + setTimeout(() => { + $featuredArticles.slick('setPosition') + }, 350) + } +}) diff --git a/src/js/page.js b/src/js/page.js new file mode 100644 index 0000000..fc132af --- /dev/null +++ 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') +}) diff --git a/src/js/polyfill.js b/src/js/polyfill.js new file mode 100644 index 0000000..000c230 --- /dev/null +++ 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); + } + }; +} diff --git a/src/js/post.js b/src/js/post.js new file mode 100644 index 0000000..a413dbd --- /dev/null +++ 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: '', + nextArrow: '', + 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 }) +}) diff --git a/src/sass/app.scss b/src/sass/app.scss new file mode 100644 index 0000000..f2c8939 --- /dev/null +++ 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" diff --git a/src/sass/common/_global.scss b/src/sass/common/_global.scss new file mode 100644 index 0000000..a8a32f6 --- /dev/null +++ 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; +} diff --git a/src/sass/common/_helpers.scss b/src/sass/common/_helpers.scss new file mode 100644 index 0000000..9d1b612 --- /dev/null +++ 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; + } +} diff --git a/src/sass/common/_icons.scss b/src/sass/common/_icons.scss new file mode 100644 index 0000000..b4c1d4e --- /dev/null +++ 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"; +} diff --git a/src/sass/common/_mixins.scss b/src/sass/common/_mixins.scss new file mode 100644 index 0000000..4c0a076 --- /dev/null +++ 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; + } +} + diff --git a/src/sass/common/_reset.scss b/src/sass/common/_reset.scss new file mode 100644 index 0000000..9738ede --- /dev/null +++ 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; +} diff --git a/src/sass/common/_variables.scss b/src/sass/common/_variables.scss new file mode 100644 index 0000000..0e8f127 --- /dev/null +++ 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; diff --git a/src/sass/components/.gitkeep b/src/sass/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/components/404/_subtitle.scss b/src/sass/components/404/_subtitle.scss new file mode 100644 index 0000000..df351de --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/404/_text.scss b/src/sass/components/404/_text.scss new file mode 100644 index 0000000..8a4a5b7 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/404/_title.scss b/src/sass/components/404/_title.scss new file mode 100644 index 0000000..3c0805d --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/_footer.scss b/src/sass/components/_footer.scss new file mode 100644 index 0000000..dcf79f8 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/components/articles/_article-card.scss b/src/sass/components/articles/_article-card.scss new file mode 100644 index 0000000..b5c9d02 --- /dev/null +++ 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; + } + } + } +} diff --git a/src/sass/components/articles/_featured-article.scss b/src/sass/components/articles/_featured-article.scss new file mode 100644 index 0000000..e082205 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/articles/_featured-slider.scss b/src/sass/components/articles/_featured-slider.scss new file mode 100644 index 0000000..feeaa84 --- /dev/null +++ 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%; +} diff --git a/src/sass/components/articles/_recommended-articles.scss b/src/sass/components/articles/_recommended-articles.scss new file mode 100644 index 0000000..f79286c --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/articles/_recommended-slider.scss b/src/sass/components/articles/_recommended-slider.scss new file mode 100644 index 0000000..51b93ba --- /dev/null +++ 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; +} diff --git a/src/sass/components/articles/_share.scss b/src/sass/components/articles/_share.scss new file mode 100644 index 0000000..a92a988 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/author/_author.scss b/src/sass/components/author/_author.scss new file mode 100644 index 0000000..ad483cb --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/author/_links.scss b/src/sass/components/author/_links.scss new file mode 100644 index 0000000..b76b827 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/components/author/_picture.scss b/src/sass/components/author/_picture.scss new file mode 100644 index 0000000..f0b9407 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/comments/_load-comments.scss b/src/sass/components/comments/_load-comments.scss new file mode 100644 index 0000000..f468109 --- /dev/null +++ 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; +} diff --git a/src/sass/components/header/_header.scss b/src/sass/components/header/_header.scss new file mode 100644 index 0000000..a71d5af --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/header/_logo.scss b/src/sass/components/header/_logo.scss new file mode 100644 index 0000000..d1143eb --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/header/_menu.scss b/src/sass/components/header/_menu.scss new file mode 100644 index 0000000..674012f --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/header/_mobile-topbar.scss b/src/sass/components/header/_mobile-topbar.scss new file mode 100644 index 0000000..f987ba6 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/header/_nav.scss b/src/sass/components/header/_nav.scss new file mode 100644 index 0000000..f280278 --- /dev/null +++ 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; + } + } + } +} diff --git a/src/sass/components/header/_recent-article.scss b/src/sass/components/header/_recent-article.scss new file mode 100644 index 0000000..1f7b16d --- /dev/null +++ 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; +} diff --git a/src/sass/components/header/_recent-articles.scss b/src/sass/components/header/_recent-articles.scss new file mode 100644 index 0000000..61ae54a --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/header/_submenu-title.scss b/src/sass/components/header/_submenu-title.scss new file mode 100644 index 0000000..8c773a5 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/components/header/_submenu.scss b/src/sass/components/header/_submenu.scss new file mode 100644 index 0000000..666efc6 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/header/_tags.scss b/src/sass/components/header/_tags.scss new file mode 100644 index 0000000..eb09784 --- /dev/null +++ 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; + } + } + } +} diff --git a/src/sass/components/heading/_description.scss b/src/sass/components/heading/_description.scss new file mode 100644 index 0000000..67b7cac --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/components/heading/_heading.scss b/src/sass/components/heading/_heading.scss new file mode 100644 index 0000000..05f719a --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/components/heading/_meta.scss b/src/sass/components/heading/_meta.scss new file mode 100644 index 0000000..2458953 --- /dev/null +++ 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; +} diff --git a/src/sass/components/heading/_title.scss b/src/sass/components/heading/_title.scss new file mode 100644 index 0000000..865b6c6 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/hero/_avatar.scss b/src/sass/components/hero/_avatar.scss new file mode 100644 index 0000000..c3a3559 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/hero/_description.scss b/src/sass/components/hero/_description.scss new file mode 100644 index 0000000..b97c6cd --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/hero/_hero.scss b/src/sass/components/hero/_hero.scss new file mode 100644 index 0000000..fd0b88e --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/hero/_social.scss b/src/sass/components/hero/_social.scss new file mode 100644 index 0000000..8cf7c4a --- /dev/null +++ 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; + } + } + } +} diff --git a/src/sass/components/hero/_stats.scss b/src/sass/components/hero/_stats.scss new file mode 100644 index 0000000..0c44eb1 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/components/hero/_title.scss b/src/sass/components/hero/_title.scss new file mode 100644 index 0000000..e6f13c3 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/components/search/_icon.scss b/src/sass/components/search/_icon.scss new file mode 100644 index 0000000..9570f3d --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/search/_result.scss b/src/sass/components/search/_result.scss new file mode 100644 index 0000000..103a7f7 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/search/_search.scss b/src/sass/components/search/_search.scss new file mode 100644 index 0000000..9444781 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/subscribe/_subscribe-section.scss b/src/sass/components/subscribe/_subscribe-section.scss new file mode 100644 index 0000000..eef7317 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/ui/_back.scss b/src/sass/components/ui/_back.scss new file mode 100644 index 0000000..c32a11c --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/ui/_button.scss b/src/sass/components/ui/_button.scss new file mode 100644 index 0000000..5989f64 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/ui/_icon-button.scss b/src/sass/components/ui/_icon-button.scss new file mode 100644 index 0000000..7212966 --- /dev/null +++ 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); + } + } + } +} diff --git a/src/sass/components/ui/_input.scss b/src/sass/components/ui/_input.scss new file mode 100644 index 0000000..6c35738 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/ui/_no-found.scss b/src/sass/components/ui/_no-found.scss new file mode 100644 index 0000000..bccfa0c --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/components/ui/_pagination.scss b/src/sass/components/ui/_pagination.scss new file mode 100644 index 0000000..a18a266 --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/ui/_section-title.scss b/src/sass/components/ui/_section-title.scss new file mode 100644 index 0000000..061610a --- /dev/null +++ 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; + } +} diff --git a/src/sass/components/ui/_small-text.scss b/src/sass/components/ui/_small-text.scss new file mode 100644 index 0000000..595b944 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/layouts/.gitkeep b/src/sass/layouts/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/layouts/_content.scss b/src/sass/layouts/_content.scss new file mode 100644 index 0000000..63ecce0 --- /dev/null +++ b/src/sass/layouts/_content.scss @@ -0,0 +1,7 @@ +.l-content { + padding: 40px 0 20px; + + @include respond-to('medium') { + padding: 60px 0 40px; + } +} diff --git a/src/sass/layouts/_fullscreen.scss b/src/sass/layouts/_fullscreen.scss new file mode 100644 index 0000000..a64fa40 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/layouts/_grid.scss b/src/sass/layouts/_grid.scss new file mode 100644 index 0000000..01b7cb0 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/layouts/_post-content.scss b/src/sass/layouts/_post-content.scss new file mode 100644 index 0000000..834f704 --- /dev/null +++ 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; + } + } + } + +} diff --git a/src/sass/layouts/_wrapper.scss b/src/sass/layouts/_wrapper.scss new file mode 100644 index 0000000..32c3a88 --- /dev/null +++ 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; + } + } +} diff --git a/src/sass/libs/_slick.scss b/src/sass/libs/_slick.scss new file mode 100644 index 0000000..3423648 --- /dev/null +++ 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; +} diff --git a/src/sass/libs/aos/_animations.scss b/src/sass/libs/aos/_animations.scss new file mode 100644 index 0000000..7fd3ef7 --- /dev/null +++ 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); +} diff --git a/src/sass/libs/aos/_aos.scss b/src/sass/libs/aos/_aos.scss new file mode 100644 index 0000000..e5f178a --- /dev/null +++ b/src/sass/libs/aos/_aos.scss @@ -0,0 +1,3 @@ +@import 'core'; +@import 'easing'; +@import 'animations'; diff --git a/src/sass/libs/aos/_core.scss b/src/sass/libs/aos/_core.scss new file mode 100644 index 0000000..d931e8b --- /dev/null +++ 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; + } + } + } +} diff --git a/src/sass/libs/aos/_easing.scss b/src/sass/libs/aos/_easing.scss new file mode 100644 index 0000000..b9619ee --- /dev/null +++ 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; + } + } +}