Add source files
This commit is contained in:
parent
755eb3f29e
commit
5187b7377a
234
src/js/app.js
Normal file
234
src/js/app.js
Normal 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
20
src/js/home.js
Normal 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
34
src/js/page.js
Normal 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
90
src/js/polyfill.js
Normal 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
176
src/js/post.js
Normal 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
65
src/sass/app.scss
Normal 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"
|
71
src/sass/common/_global.scss
Normal file
71
src/sass/common/_global.scss
Normal 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;
|
||||
}
|
102
src/sass/common/_helpers.scss
Normal file
102
src/sass/common/_helpers.scss
Normal 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;
|
||||
}
|
||||
}
|
65
src/sass/common/_icons.scss
Normal file
65
src/sass/common/_icons.scss
Normal 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";
|
||||
}
|
141
src/sass/common/_mixins.scss
Normal file
141
src/sass/common/_mixins.scss
Normal 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
586
src/sass/common/_reset.scss
Normal 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;
|
||||
}
|
17
src/sass/common/_variables.scss
Normal file
17
src/sass/common/_variables.scss
Normal 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;
|
0
src/sass/components/.gitkeep
Normal file
0
src/sass/components/.gitkeep
Normal file
13
src/sass/components/404/_subtitle.scss
Normal file
13
src/sass/components/404/_subtitle.scss
Normal 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;
|
||||
}
|
||||
}
|
13
src/sass/components/404/_text.scss
Normal file
13
src/sass/components/404/_text.scss
Normal 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;
|
||||
}
|
||||
}
|
14
src/sass/components/404/_title.scss
Normal file
14
src/sass/components/404/_title.scss
Normal 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;
|
||||
}
|
||||
}
|
56
src/sass/components/_footer.scss
Normal file
56
src/sass/components/_footer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
318
src/sass/components/articles/_article-card.scss
Normal file
318
src/sass/components/articles/_article-card.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
165
src/sass/components/articles/_featured-article.scss
Normal file
165
src/sass/components/articles/_featured-article.scss
Normal 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;
|
||||
}
|
||||
}
|
64
src/sass/components/articles/_featured-slider.scss
Normal file
64
src/sass/components/articles/_featured-slider.scss
Normal 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%;
|
||||
}
|
8
src/sass/components/articles/_recommended-articles.scss
Normal file
8
src/sass/components/articles/_recommended-articles.scss
Normal file
|
@ -0,0 +1,8 @@
|
|||
.m-recommended-articles {
|
||||
margin: 0 -20px;
|
||||
|
||||
@include respond-to('large') {
|
||||
padding: 0 40px;
|
||||
margin: 0 -30px;
|
||||
}
|
||||
}
|
35
src/sass/components/articles/_recommended-slider.scss
Normal file
35
src/sass/components/articles/_recommended-slider.scss
Normal 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;
|
||||
}
|
59
src/sass/components/articles/_share.scss
Normal file
59
src/sass/components/articles/_share.scss
Normal 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;
|
||||
}
|
||||
}
|
65
src/sass/components/author/_author.scss
Normal file
65
src/sass/components/author/_author.scss
Normal 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;
|
||||
}
|
||||
}
|
23
src/sass/components/author/_links.scss
Normal file
23
src/sass/components/author/_links.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
19
src/sass/components/author/_picture.scss
Normal file
19
src/sass/components/author/_picture.scss
Normal 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;
|
||||
}
|
||||
}
|
24
src/sass/components/comments/_load-comments.scss
Normal file
24
src/sass/components/comments/_load-comments.scss
Normal 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;
|
||||
}
|
41
src/sass/components/header/_header.scss
Normal file
41
src/sass/components/header/_header.scss
Normal 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;
|
||||
}
|
||||
}
|
15
src/sass/components/header/_logo.scss
Normal file
15
src/sass/components/header/_logo.scss
Normal 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;
|
||||
}
|
||||
}
|
42
src/sass/components/header/_menu.scss
Normal file
42
src/sass/components/header/_menu.scss
Normal 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;
|
||||
}
|
||||
}
|
12
src/sass/components/header/_mobile-topbar.scss
Normal file
12
src/sass/components/header/_mobile-topbar.scss
Normal 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;
|
||||
}
|
||||
}
|
54
src/sass/components/header/_nav.scss
Normal file
54
src/sass/components/header/_nav.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
54
src/sass/components/header/_recent-article.scss
Normal file
54
src/sass/components/header/_recent-article.scss
Normal 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;
|
||||
}
|
12
src/sass/components/header/_recent-articles.scss
Normal file
12
src/sass/components/header/_recent-articles.scss
Normal 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;
|
||||
}
|
||||
}
|
15
src/sass/components/header/_submenu-title.scss
Normal file
15
src/sass/components/header/_submenu-title.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
65
src/sass/components/header/_submenu.scss
Normal file
65
src/sass/components/header/_submenu.scss
Normal 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;
|
||||
}
|
||||
}
|
22
src/sass/components/header/_tags.scss
Normal file
22
src/sass/components/header/_tags.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
17
src/sass/components/heading/_description.scss
Normal file
17
src/sass/components/heading/_description.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
14
src/sass/components/heading/_heading.scss
Normal file
14
src/sass/components/heading/_heading.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
27
src/sass/components/heading/_meta.scss
Normal file
27
src/sass/components/heading/_meta.scss
Normal 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;
|
||||
}
|
29
src/sass/components/heading/_title.scss
Normal file
29
src/sass/components/heading/_title.scss
Normal 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;
|
||||
}
|
||||
}
|
16
src/sass/components/hero/_avatar.scss
Normal file
16
src/sass/components/hero/_avatar.scss
Normal 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;
|
||||
}
|
||||
}
|
24
src/sass/components/hero/_description.scss
Normal file
24
src/sass/components/hero/_description.scss
Normal 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;
|
||||
}
|
||||
}
|
72
src/sass/components/hero/_hero.scss
Normal file
72
src/sass/components/hero/_hero.scss
Normal 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;
|
||||
}
|
||||
}
|
29
src/sass/components/hero/_social.scss
Normal file
29
src/sass/components/hero/_social.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
27
src/sass/components/hero/_stats.scss
Normal file
27
src/sass/components/hero/_stats.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
24
src/sass/components/hero/_title.scss
Normal file
24
src/sass/components/hero/_title.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
15
src/sass/components/search/_icon.scss
Normal file
15
src/sass/components/search/_icon.scss
Normal 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;
|
||||
}
|
||||
}
|
48
src/sass/components/search/_result.scss
Normal file
48
src/sass/components/search/_result.scss
Normal 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;
|
||||
}
|
||||
}
|
51
src/sass/components/search/_search.scss
Normal file
51
src/sass/components/search/_search.scss
Normal 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;
|
||||
}
|
||||
}
|
59
src/sass/components/subscribe/_subscribe-section.scss
Normal file
59
src/sass/components/subscribe/_subscribe-section.scss
Normal 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;
|
||||
}
|
||||
}
|
33
src/sass/components/ui/_back.scss
Normal file
33
src/sass/components/ui/_back.scss
Normal 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;
|
||||
}
|
||||
}
|
46
src/sass/components/ui/_button.scss
Normal file
46
src/sass/components/ui/_button.scss
Normal 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;
|
||||
}
|
||||
}
|
216
src/sass/components/ui/_icon-button.scss
Normal file
216
src/sass/components/ui/_icon-button.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
26
src/sass/components/ui/_input.scss
Normal file
26
src/sass/components/ui/_input.scss
Normal 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;
|
||||
}
|
||||
}
|
14
src/sass/components/ui/_no-found.scss
Normal file
14
src/sass/components/ui/_no-found.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
19
src/sass/components/ui/_pagination.scss
Normal file
19
src/sass/components/ui/_pagination.scss
Normal 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;
|
||||
}
|
||||
}
|
18
src/sass/components/ui/_section-title.scss
Normal file
18
src/sass/components/ui/_section-title.scss
Normal 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;
|
||||
}
|
||||
}
|
17
src/sass/components/ui/_small-text.scss
Normal file
17
src/sass/components/ui/_small-text.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
0
src/sass/layouts/.gitkeep
Normal file
0
src/sass/layouts/.gitkeep
Normal file
7
src/sass/layouts/_content.scss
Normal file
7
src/sass/layouts/_content.scss
Normal file
|
@ -0,0 +1,7 @@
|
|||
.l-content {
|
||||
padding: 40px 0 20px;
|
||||
|
||||
@include respond-to('medium') {
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
}
|
25
src/sass/layouts/_fullscreen.scss
Normal file
25
src/sass/layouts/_fullscreen.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
19
src/sass/layouts/_grid.scss
Normal file
19
src/sass/layouts/_grid.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
377
src/sass/layouts/_post-content.scss
Normal file
377
src/sass/layouts/_post-content.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
49
src/sass/layouts/_wrapper.scss
Normal file
49
src/sass/layouts/_wrapper.scss
Normal 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
103
src/sass/libs/_slick.scss
Normal 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;
|
||||
}
|
51
src/sass/libs/aos/_animations.scss
Normal file
51
src/sass/libs/aos/_animations.scss
Normal 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);
|
||||
}
|
3
src/sass/libs/aos/_aos.scss
Normal file
3
src/sass/libs/aos/_aos.scss
Normal file
|
@ -0,0 +1,3 @@
|
|||
@import 'core';
|
||||
@import 'easing';
|
||||
@import 'animations';
|
18
src/sass/libs/aos/_core.scss
Normal file
18
src/sass/libs/aos/_core.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
34
src/sass/libs/aos/_easing.scss
Normal file
34
src/sass/libs/aos/_easing.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue