Add source files

This commit is contained in:
Eduardo 2019-05-21 21:50:29 +02:00
parent 755eb3f29e
commit 5187b7377a
70 changed files with 4336 additions and 0 deletions

234
src/js/app.js Normal file
View file

@ -0,0 +1,234 @@
import $ from 'jquery'
import slick from 'slick-carousel'
import tippy from 'tippy.js'
import AOS from 'aos'
import GhostContentAPI from '@tryghost/content-api'
import Fuse from 'fuse.js'
$(document).ready(() => {
const $body = $('body')
const $header = $('.js-header')
const $openMenu = $('.js-open-menu')
const $closeMenu = $('.js-close-menu')
const $menu = $('.js-menu')
const $toggleSubmenu = $('.js-toggle-submenu')
const $submenuOption = $('.js-submenu-option')[0]
const $submenu = $('.js-submenu')
const $recentArticles = $('.js-recent-articles')
const $openSearch = $('.js-open-search')
const $closeSearch = $('.js-close-search')
const $search = $('.js-search')
const $inputSearch = $('.js-input-search')
const $searchResults = $('.js-search-results')
const headerHeight = $header.outerHeight()
let fuse = null
let lastScrollY = window.pageYOffset
let ticking = false
let submenuIsOpen = false
function onScroll() {
requestTick()
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(toggleHeader)
}
ticking = true
}
function toggleHeader() {
const scrollTop = window.pageYOffset
if (scrollTop >= headerHeight) {
$header.addClass('fixed')
if (submenuIsOpen) {
$header.addClass('fixed-active')
}
if (scrollTop >= lastScrollY) {
if (!submenuIsOpen) {
$header.removeClass('fixed-active')
}
} else {
$header.addClass('fixed-active')
}
} else {
if (!submenuIsOpen) {
$header.removeClass('fixed-active')
}
$header.removeClass('fixed')
}
lastScrollY = scrollTop
ticking = false
}
function showSubmenu() {
$header.addClass('submenu-is-active')
$toggleSubmenu.addClass('active')
$submenu.removeClass('closed').addClass('opened')
}
function hideSubmenu() {
$header.removeClass('submenu-is-active')
$toggleSubmenu.removeClass('active')
$submenu.removeClass('opened').addClass('closed')
}
function toggleScrollVertical() {
$body.toggleClass('no-scroll-y')
}
function trySearchFeature() {
if (typeof ghostSearchApiKey !== 'undefined') {
getAllPosts(ghostHost, ghostSearchApiKey)
} else {
$openSearch.remove()
$closeSearch.remove()
$search.remove()
}
}
function getAllPosts(host, key) {
const api = new GhostContentAPI({
host,
key,
version: 'v2'
})
const allPosts = []
const fuseOptions = {
shouldSort: true,
threshold: 0,
location: 0,
distance: 100,
tokenize: true,
matchAllTokens: true,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: ['title']
}
api.posts.browse({
limit: 'all',
fields: 'id, title, url, published_at'
})
.then((posts) => {
for (var i = 0, len = posts.length; i < len; i++) {
allPosts.push(posts[i])
}
fuse = new Fuse(allPosts, fuseOptions)
})
.catch((err) => {
console.log(err)
})
}
function formatDate(date) {
if (date) {
return new Date(date).toLocaleDateString(
document.documentElement.lang,
{
year: 'numeric',
month: 'long',
day: 'numeric'
}
)
}
return ''
}
$openMenu.click(() => {
$menu.addClass('opened')
toggleScrollVertical()
})
$closeMenu.click(() => {
$menu.removeClass('opened')
toggleScrollVertical()
})
$toggleSubmenu.click(() => {
submenuIsOpen = !submenuIsOpen
if (submenuIsOpen) {
showSubmenu()
} else {
hideSubmenu()
}
})
$openSearch.click(() => {
$search.addClass('opened')
setTimeout(() => {
$inputSearch.focus()
}, 400);
toggleScrollVertical()
})
$closeSearch.click(() => {
$inputSearch.blur()
$search.removeClass('opened')
toggleScrollVertical()
})
$inputSearch.keyup(() => {
if ($inputSearch.val().length > 0 && fuse) {
const results = fuse.search($inputSearch.val())
if (results.length > 0) {
for (var i = 0, len = results.length; i < len; i++) {
$searchResults.html(`
<article class="m-result">\
<a href="${results[i].url}" class="m-result__link">\
<h3 class="m-result__title">${results[i].title}</h3>\
<span class="m-result__date">${formatDate(results[i].published_at)}</span>\
</a>\
</article>
`)
}
} else {
$searchResults.html('<p class="m-no-found align-center">0 results for your search, try something different.</>')
}
} else {
$searchResults.html('')
}
})
$(window).click((e) => {
if (submenuIsOpen) {
if ($submenuOption && !$submenuOption.contains(e.target)) {
submenuIsOpen = false
hideSubmenu()
}
}
})
if ($recentArticles.length > 0) {
$recentArticles.slick({
adaptiveHeight: true,
arrows: false,
infinite: false,
mobileFirst: true,
variableWidth: true
})
}
AOS.init({
once: true,
startEvent: 'DOMContentLoaded',
})
tippy('.js-tooltip')
trySearchFeature()
window.addEventListener('scroll', onScroll, { passive: true })
})

20
src/js/home.js Normal file
View file

@ -0,0 +1,20 @@
import $ from 'jquery'
import slick from 'slick-carousel'
$(document).ready(() => {
const $featuredArticles = $('.js-featured-articles')
if ($featuredArticles.length > 0) {
$featuredArticles.slick({
arrows: true,
infinite: true,
prevArrow: '<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',
nextArrow: '<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',
mobileFirst: true
})
setTimeout(() => {
$featuredArticles.slick('setPosition')
}, 350)
}
})

34
src/js/page.js Normal file
View file

@ -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')
})

90
src/js/polyfill.js Normal file
View file

@ -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);
}
};
}

176
src/js/post.js Normal file
View file

@ -0,0 +1,176 @@
import $ from 'jquery'
import slick from 'slick-carousel'
import stickybits from 'stickybits'
import mediumZoom from 'medium-zoom'
import fitvids from 'fitvids'
$(document).ready(() => {
fitvids('.js-post-content')
const $aosWrapper = $('.js-aos-wrapper')
const $progressCircle = $('.js-progress')
const $scrollButton = $('.js-scrolltop')
const $loadComments = $('.js-load-comments')
const $commentsIframe = $('.js-comments-iframe')
const $recommendedArticles = $('.js-recommended-articles')
let lastScrollingY = window.pageYOffset
let lastWindowHeight = 0
let lastDocumentHeight = 0
let circumference = 0
let isTicking = false
function isMobile(width = '768px') {
return window.matchMedia(`(max-width: ${width})`).matches
}
function onScrolling() {
lastScrollingY = window.pageYOffset
requestTicking()
}
function onResizing() {
setHeights()
adjustShare(100)
setTimeout(() => {
setCircleStyles()
requestTicking()
}, 200)
}
function requestTicking() {
if (!isTicking) {
requestAnimationFrame(updating)
}
isTicking = true
}
function updating() {
const progressMax = lastDocumentHeight - lastWindowHeight
const percent = Math.ceil((lastScrollingY / progressMax) * 100)
if (percent <= 100) {
setProgress(percent * 1.5)
}
isTicking = false
}
function setHeights() {
lastWindowHeight = window.innerHeight
lastDocumentHeight = $(document).height()
}
function setCircleStyles() {
const radiusCircle = $progressCircle.parent().width() / 2
const borderWidth = isMobile() ? 2 : 3
$progressCircle.attr('stroke-width', borderWidth)
$progressCircle.attr('r', radiusCircle - (borderWidth - 1))
$progressCircle.attr('cx', radiusCircle)
$progressCircle.attr('cy', radiusCircle)
circumference = radiusCircle * 2 * Math.PI
$progressCircle[0].style.strokeDasharray = `${circumference} ${circumference}`
$progressCircle[0].style.strokeDashoffset = circumference
}
function setProgress(percent) {
if (percent <= 100) {
const offset = circumference - percent / 100 * circumference
$progressCircle[0].style.strokeDashoffset = offset
}
}
function adjustImageGallery() {
const images = document.querySelectorAll('.kg-gallery-image img')
for (var i = 0, len = images.length; i < len; i++) {
const container = images[i].closest('.kg-gallery-image')
const width = images[i].attributes.width.value
const height = images[i].attributes.height.value
const ratio = width / height
container.style.flex = `${ratio} 1 0%`
}
}
function adjustShare(timeout) {
if (!isMobile('1023px')) {
stickybits('.js-sticky', { stickyBitStickyOffset: 100 })
$('body').removeClass('share-menu-displayed')
} else {
$('body').addClass('share-menu-displayed')
setTimeout(() => {
$aosWrapper.removeAttr('data-aos')
}, timeout)
}
}
adjustImageGallery()
adjustShare(1000)
if ($recommendedArticles.length > 0) {
$recommendedArticles.on('init', function() {
setHeights()
setCircleStyles()
updating()
})
$recommendedArticles.slick({
arrows: true,
infinite: true,
prevArrow: '<button class="m-icon-button filled in-recommended-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',
nextArrow: '<button class="m-icon-button filled in-recommended-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',
mobileFirst: true,
responsive: [
{
breakpoint: 720,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 1023,
settings: {
arrows: false,
slidesToShow: 3
}
}
]
})
} else {
setHeights()
setCircleStyles()
updating()
}
$scrollButton.click(() => {
$('html, body').animate({
scrollTop: 0
}, 500)
})
$loadComments.click(() => {
$loadComments.parent().hide()
$commentsIframe.fadeIn('slow')
})
$('.js-post-content').find('img').each(function() {
$(this).addClass('js-zoomable')
const $figcaption = $(this).parent().find('figcaption')
if ($figcaption) {
$(this).attr('alt', $figcaption.text())
} else {
$this.attr('alt', '')
}
})
mediumZoom('.js-zoomable')
window.addEventListener('scroll', onScrolling, { passive: true })
window.addEventListener('resize', onResizing, { passive: true })
})

65
src/sass/app.scss Normal file
View file

@ -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"

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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";
}

View file

@ -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;
}
}

586
src/sass/common/_reset.scss Normal file
View file

@ -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;
}

View file

@ -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;

View file

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}
}
}

View file

@ -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;
}
}

View file

@ -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%;
}

View file

@ -0,0 +1,8 @@
.m-recommended-articles {
margin: 0 -20px;
@include respond-to('large') {
padding: 0 40px;
margin: 0 -30px;
}
}

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}
}

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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);
}
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}

View file

View file

@ -0,0 +1,7 @@
.l-content {
padding: 40px 0 20px;
@include respond-to('medium') {
padding: 60px 0 40px;
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}
}
}

View file

@ -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;
}
}
}

103
src/sass/libs/_slick.scss Normal file
View file

@ -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;
}

View file

@ -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);
}

View file

@ -0,0 +1,3 @@
@import 'core';
@import 'easing';
@import 'animations';

View file

@ -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;
}
}
}
}

View file

@ -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;
}
}
}