From d5a01e103a0d876b88314cdd69042658bc1740f6 Mon Sep 17 00:00:00 2001 From: Publii <24809704+GetPublii@users.noreply.github.com> Date: Fri, 22 Dec 2017 07:45:56 +0100 Subject: [PATCH] Added support for Photoswipe gallery --- README.md | 2 +- assets/css/main.css | 87 ++- assets/css/main.css.map | 2 +- assets/css/photoswipe.css | 790 +++++++++++++++++++++++++ assets/css/style.css | 2 +- assets/js/photoswipe-ui-default.min.js | 4 + assets/js/photoswipe.min.js | 4 + assets/js/scripts.js.min.map | 2 +- assets/js/svg-fix.js | 17 + assets/js/svg2js.js | 1 + assets/sass/layout/_gallery.scss | 104 ++++ assets/sass/main.scss | 1 + assets/sass/themes/_core.scss | 16 + assets/svg/gallery-icons-dark.svg | 49 ++ assets/svg/gallery-icons-light.svg | 54 ++ config.json | 207 ++++++- partials/footer.hbs | 13 + partials/head.hbs | 34 +- partials/photoswipe.hbs | 70 +++ visual-override.js | 10 + 20 files changed, 1455 insertions(+), 14 deletions(-) create mode 100644 assets/css/photoswipe.css create mode 100644 assets/js/photoswipe-ui-default.min.js create mode 100644 assets/js/photoswipe.min.js create mode 100644 assets/js/svg-fix.js create mode 100644 assets/js/svg2js.js create mode 100644 assets/sass/layout/_gallery.scss create mode 100644 assets/svg/gallery-icons-dark.svg create mode 100644 assets/svg/gallery-icons-light.svg create mode 100644 partials/photoswipe.hbs diff --git a/README.md b/README.md index 670c72d..4fe57d6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Publii Starter Theme -Version: 1.0.2.0 +Version: 1.0.3.0 ![Starter theme screenshot](starter-publii-theme.png) diff --git a/assets/css/main.css b/assets/css/main.css index 7a831ae..31d95aa 100755 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -243,6 +243,12 @@ sub, sup { font-size: 65%; } +hr { + border: 0; + height: 0; + border-top: 1px solid #e3e3e3; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); } + .btn, [type=button], [type=submit], button { @@ -471,10 +477,6 @@ textarea { grid-template-columns: repeat(6, 1fr); } .main--grid > .article { grid-column: span 3; } } - @media all and (min-width: 37.5em) { - .main--no-grid > .article { - margin: -webkit-calc(1.86667rem + 0.5vw) 0; - margin: calc(1.86667rem + 0.5vw) 0; } } .sidebar { grid-column: 2/3; } @@ -935,6 +937,19 @@ textarea { text-align: center; } .post__image--full { text-align: center; } + .post__video { + height: 0; + overflow: hidden; + padding-top: 1.6rem; + padding-bottom: 56.25%; + position: relative; } + .post__video > iframe { + border: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; } .post__entry { margin-top: -webkit-calc(1.86667rem + 1vw); margin-top: calc(1.86667rem + 1vw); } @@ -1192,4 +1207,68 @@ textarea { .footer__copyright + .footer__social { margin-top: 1.6rem; } +.gallery { + margin: -webkit-calc(1.6rem + 1vw) -0.53333rem; + margin: calc(1.6rem + 1vw) -0.53333rem; } + @media all and (min-width: 20em) { + .gallery { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } } + @media all and (min-width: 20em) { + .gallery[data-columns="1"] .gallery__item { + width: 100%; } } + @media all and (min-width: 30em) { + .gallery[data-columns="2"] .gallery__item { + width: 50%; } } + @media all and (min-width: 37.5em) { + .gallery[data-columns="3"] .gallery__item { + width: 33%; } } + @media all and (min-width: 56.25em) { + .gallery[data-columns="4"] .gallery__item { + width: 25%; } } + @media all and (min-width: 56.25em) { + .gallery[data-columns="5"] .gallery__item { + width: 20%; } } + @media all and (min-width: 56.25em) { + .gallery[data-columns="6"] .gallery__item { + width: 16.666%; } } + @media all and (min-width: 56.25em) { + .gallery[data-columns="7"] .gallery__item { + width: 14.285%; } } + @media all and (min-width: 56.25em) { + .gallery[data-columns="8"] .gallery__item { + width: 12.5%; } } + .gallery__item { + margin: 0; + padding: 0.53333rem; } + @media all and (min-width: 20em) { + .gallery__item { + width: 50%; } } + @media all and (min-width: 30em) { + .gallery__item { + width: 33.333%; } } + @media all and (min-width: 37.5em) { + .gallery__item { + width: 25%; } } + .gallery__item img { + display: block; + width: 100%; } + +.pswp--dark .pswp__bg { + background: black; } + +.pswp--light .pswp__bg { + background: white; } + +.pswp--light .pswp__counter { + color: #343434; } + +.pswp--light .pswp__caption__center { + color: #343434; } + /*# sourceMappingURL=main.css.map */ diff --git a/assets/css/main.css.map b/assets/css/main.css.map index 17d0565..f9f9177 100644 --- a/assets/css/main.css.map +++ b/assets/css/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.css","base/_reset.scss","helpers/_mixins.scss","helpers/_variables.scss","base/_typography.scss","vendors/modular-scale/_calc.scss","helpers/_functions.scss","vendors/_mappy-breakpoints.scss","components/_buttons.scss","components/_forms.scss","layout/_grid.scss","layout/_header.scss","layout/_logo.scss","layout/_menu.scss","layout/_sidebar.scss","themes/_core.scss","layout/_pagination.scss","layout/_footer.scss"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["@charset \"UTF-8\";\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n margin: 0;\n padding: 0; }\n\narticle,\naside,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n display: block; }\n\nli {\n list-style: none; }\n\nimg {\n height: auto;\n max-width: 100%;\n vertical-align: top; }\n\nbutton,\ninput,\nselect,\ntextarea {\n font: inherit; }\n\nhtml {\n font-size: 1rem; }\n @media screen and (min-width: 20rem) {\n html {\n font-size: calc(1rem + 0.2 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n html {\n font-size: 1.2rem; } }\n\nbody {\n background: #ffffff;\n color: #343434;\n font-family: \"PT Serif\", serif;\n font-weight: 400;\n line-height: 1.6; }\n\na {\n color: #343434;\n text-decoration: none;\n transition: all 0.24s ease-out; }\n\na:hover {\n color: #3949ab; }\n\na:active {\n color: #3949ab; }\n\na:focus {\n color: #3949ab; }\n\np,\nul,\nol,\ndl,\ntable {\n margin-top: calc(1.33333rem + 0.5vw); }\n\nblockquote,\nfigure {\n margin-top: calc(1.86667rem + 0.5vw);\n margin-bottom: calc(1.86667rem + 0.5vw); }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n color: #343434;\n font-family: \"Roboto\", sans-serif;\n font-weight: 700;\n line-height: 1.2;\n margin-top: calc(1.86667rem + 0.5vw); }\n\nh1 {\n margin: 0; }\n h1 {\n font-size: 1.67583rem; }\n @media screen and (min-width: 20rem) {\n h1 {\n font-size: calc(1.67583rem + 0.4936 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h1 {\n font-size: 2.16943rem; } }\n\nh2 {\n font-size: 1.29454rem; }\n @media screen and (min-width: 20rem) {\n h2 {\n font-size: calc(1.29454rem + 0.27655 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h2 {\n font-size: 1.57109rem; } }\n\nh3 {\n font-size: 1.13778rem; }\n @media screen and (min-width: 20rem) {\n h3 {\n font-size: calc(1.13778rem + 0.24306 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h3 {\n font-size: 1.38084rem; } }\n\nh4 {\n font-size: 1.06667rem; }\n @media screen and (min-width: 20rem) {\n h4 {\n font-size: calc(1.06667rem + 0.14696 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h4 {\n font-size: 1.21363rem; } }\n\nh5 {\n font-size: 0.9375rem; }\n @media screen and (min-width: 20rem) {\n h5 {\n font-size: calc(0.9375rem + 0.12917 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h5 {\n font-size: 1.06667rem; } }\n\nh6 {\n font-size: 0.87891rem; }\n @media screen and (min-width: 20rem) {\n h6 {\n font-size: calc(0.87891rem + 0.12109 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h6 {\n font-size: 1rem; } }\n\nh2 + p,\nh3 + p,\nh4 + p,\nh5 + p,\nh6 + p {\n margin-top: calc(0.8rem + 0.25vw); }\n\nb,\nstrong {\n font-weight: 700; }\n\nblockquote {\n font-family: \"Roboto\", sans-serif;\n font-weight: 700;\n padding: 0 15%; }\n blockquote cite {\n color: #343434;\n display: block;\n font-family: \"PT Serif\", serif;\n font-size: 0.87891rem;\n font-style: normal;\n padding-top: 0.53333rem; }\n blockquote > :nth-child(1) {\n margin-top: 0; }\n blockquote:before {\n display: block;\n height: 0;\n content: \"“\";\n margin-left: -.55em;\n font: normal 400%/0.9 \"Roboto\", sans-serif;\n color: #e3e3e3; }\n @media all and (min-width: 37.5em) {\n blockquote:before {\n margin-left: -.85em; } }\n\nul,\nol {\n margin-left: 2rem; }\n ul > li,\n ol > li {\n list-style: inherit;\n padding: 0.26667rem 0 0 1.06667rem; }\n\ndl dt {\n font-weight: 700; }\n\npre {\n margin: calc(1.06667rem + 0.25vw) 0 0;\n padding: 1.6rem 3.2rem;\n white-space: pre-wrap;\n word-wrap: break-word; }\n\ncode,\npre {\n background-color: #f6f6f6;\n font-family: \"Monaco\", \"Courier New\", monospace;\n font-size: 0.9375rem; }\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n display: block;\n max-width: 100%;\n overflow-x: auto;\n vertical-align: top;\n text-align: left;\n white-space: nowrap; }\n table th {\n border-bottom: 2px solid #e3e3e3;\n padding: 0.8rem 1.33333rem; }\n table tr:nth-child(2n) {\n background: whitesmoke; }\n table td {\n padding: 0.8rem 1.33333rem; }\n\nfigcaption {\n color: #908e98;\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.77248rem;\n margin: 1.06667rem 0 0;\n text-align: center; }\n\nsub,\nsup {\n font-size: 65%; }\n\n.btn, [type=button],\n[type=submit],\nbutton {\n background: #3949ab;\n border: none;\n border-radius: 50px;\n color: #ffffff;\n cursor: pointer;\n display: inline-block;\n font: 700 0.7242rem \"Roboto\", sans-serif;\n letter-spacing: 0.15rem;\n padding: 0.8rem 1.6rem;\n vertical-align: middle;\n text-align: center;\n text-transform: lowercase;\n transition: all 0.24s ease;\n width: 100%; }\n @media all and (min-width: 37.5em) {\n .btn, [type=button],\n [type=submit],\n button {\n width: auto; } }\n .btn:hover, [type=button]:hover,\n [type=submit]:hover,\n button:hover, .btn:focus, [type=button]:focus,\n [type=submit]:focus,\n button:focus, .btn:active, [type=button]:active,\n [type=submit]:active,\n button:active {\n background: #343434;\n color: #ffffff; }\n .btn:focus, [type=button]:focus,\n [type=submit]:focus,\n button:focus {\n outline: 2px dotted #343434; }\n .btn:disabled, [type=button]:disabled,\n [type=submit]:disabled,\n button:disabled {\n background-color: whitesmoke;\n border-color: #cccccc;\n color: #717171;\n cursor: not-allowed; }\n\n[type=button],\n[type=submit],\nbutton {\n -webkit-appearance: none;\n -moz-appearance: none; }\n\nfieldset {\n border: 1px solid #d6d6d6;\n border-radius: 6px;\n margin: 0 0 1.6rem;\n padding: 1.6rem; }\n fieldset > legend {\n margin-left: -1rem;\n padding: 0 1rem; }\n\nlegend {\n font-weight: 700; }\n\nlabel {\n font-weight: 700;\n margin: 0 1.06667rem 0.8rem 0; }\n\noption {\n font-weight: 400; }\n\n[type=text],\n[type=url],\n[type=tel],\n[type=number],\n[type=email],\n[type=search],\ntextarea,\nselect {\n background-color: #ffffff;\n border: 1px solid #d6d6d6;\n border-radius: 50px;\n font-size: 1rem;\n outline: none;\n padding: 0.53333rem 0.8rem;\n width: 100%;\n transition: all 0.24s ease-out;\n -webkit-appearance: none;\n -moz-appearance: none; }\n @media all and (min-width: 37.5em) {\n [type=text],\n [type=url],\n [type=tel],\n [type=number],\n [type=email],\n [type=search],\n textarea,\n select {\n width: auto; } }\n [type=text]:focus,\n [type=url]:focus,\n [type=tel]:focus,\n [type=number]:focus,\n [type=email]:focus,\n [type=search]:focus,\n textarea:focus,\n select:focus {\n box-shadow: inset 0 0 2px #3949ab; }\n\n[type=checkbox],\n[type=radio] {\n display: none; }\n [type=checkbox] + label,\n [type=radio] + label {\n display: inline-block;\n cursor: pointer;\n top: 0;\n margin-right: 1.6rem; }\n\n.checkbox:before,\n.radio:before {\n border: 1px solid #d6d6d6;\n border-radius: 2px;\n content: \"\";\n display: inline-block;\n height: 1.33333rem;\n line-height: 1.33333rem;\n margin-right: 1.06667rem;\n vertical-align: middle;\n text-align: center;\n width: 1.33333rem; }\n\n.radio:before {\n border-radius: 50%; }\n\n[type=checkbox]:checked + .checkbox:before {\n content: \"\\2713\";\n color: #3949ab;\n font-weight: 700; }\n\n[type=radio]:checked + .radio:before {\n box-shadow: inset 0 0 0 4px #ffffff;\n content: \"\";\n background: #3949ab;\n border: 1px solid #d6d6d6; }\n\n[type=file] {\n margin-bottom: 1.6rem;\n width: 100%; }\n\nselect {\n max-width: 100%;\n width: auto;\n position: relative; }\n select:not([multiple]) {\n background: url('data:image/svg+xml;utf8,') no-repeat 90% 50%;\n background-size: 8px;\n padding-right: 3.2rem; }\n\nselect[multiple] {\n border-radius: 6px;\n padding: 1.6rem;\n width: 100%; }\n select[multiple]:hover {\n border-color: #d6d6d6; }\n select[multiple]:focus {\n border-color: #3949ab; }\n select[multiple]:disabled {\n background-color: whitesmoke;\n cursor: not-allowed; }\n select[multiple]:disabled:hover {\n border-color: #d6d6d6; }\n\ntextarea {\n border-radius: 6px;\n display: block;\n overflow: auto;\n resize: vertical;\n max-width: 100%; }\n\n.container {\n display: grid;\n grid-gap: calc(1.86667rem + 0.5vw);\n grid-template-columns: 1fr auto 1fr; }\n @media all and (min-width: 56.25em) {\n .container {\n grid-template-columns: 1fr minmax(auto, 42rem) 20rem 1fr; } }\n\n.top {\n grid-column: 2/3; }\n @media all and (min-width: 56.25em) {\n .top {\n grid-column: 2/4; } }\n\n.footer {\n grid-column: 2/3; }\n @media all and (min-width: 56.25em) {\n .footer {\n grid-column: 2/4; } }\n\n.main {\n grid-column: 2/3; }\n .main--full {\n grid-column: 2/4; }\n .main--grid {\n align-content: start;\n display: grid;\n grid-gap: calc(1.86667rem + 0.5vw); }\n @media all and (min-width: 37.5em) {\n .main--grid {\n grid-template-columns: repeat(6, 1fr); }\n .main--grid > .article {\n grid-column: span 3; } }\n\n.sidebar {\n grid-column: 2/3; }\n @media all and (min-width: 56.25em) {\n .sidebar {\n grid-column: 3/4; } }\n\n@media all and (min-width: 37.5em) {\n .hero,\n .page-header--listing {\n grid-column: span 6; } }\n\n@media all and (min-width: 37.5em) {\n .featured-posts {\n grid-column: span 6;\n display: grid;\n grid-column-gap: calc(1.86667rem + 0.5vw);\n grid-template-columns: repeat(3, 1fr); }\n .featured-posts > h3 {\n grid-column: span 3; } }\n\n@media all and (min-width: 37.5em) {\n .pagination {\n grid-column: span 6; } }\n\n.top {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: calc(1.86667rem + 0.5vw);\n position: relative; }\n\n.logo {\n color: #343434 !important;\n font-family: \"Roboto\", sans-serif;\n font-weight: 800; }\n .logo {\n font-size: 1.4729rem; }\n @media screen and (min-width: 20rem) {\n .logo {\n font-size: calc(1.4729rem + 0.43382 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n .logo {\n font-size: 1.90672rem; } }\n @media all and (min-width: 56.25em) {\n .logo {\n margin: 0; } }\n\n.navbar__menu {\n font-family: \"Roboto\", sans-serif;\n font-weight: 700;\n margin: 0;\n padding: 0;\n overflow: hidden;\n padding: 0; }\n @media all and (max-width: 56.1875em) {\n .navbar__menu {\n background: #ffffff;\n height: 100vh;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 2.99rem;\n transition: all 0.3s ease-out;\n visibility: hidden;\n transform: translateY(-5%);\n width: 100%;\n z-index: 1; }\n .navbar__menu > li {\n transition: all 0.3s ease-out;\n border-bottom: 1px solid #e3e3e3;\n padding: 0; } }\n @media all and (min-width: 56.25em) {\n .navbar__menu {\n max-height: none;\n overflow: visible; } }\n .navbar__menu li {\n color: #343434;\n padding: 0;\n text-align: center; }\n @media all and (min-width: 56.25em) {\n .navbar__menu li {\n display: inline-block;\n margin: 0 0 0 1.6rem;\n position: relative; } }\n .navbar__menu li:hover, .navbar__menu li[aria-expanded=\"true\"] {\n cursor: pointer; }\n @media all and (min-width: 56.25em) {\n .navbar__menu li:hover > ul, .navbar__menu li[aria-expanded=\"true\"] > ul {\n display: block; }\n .navbar__menu li:hover > ul li, .navbar__menu li[aria-expanded=\"true\"] > ul li {\n margin: 0;\n display: block; } }\n .navbar__menu li a,\n .navbar__menu li span {\n display: block;\n color: #343434;\n white-space: nowrap; }\n @media all and (max-width: 56.1875em) {\n .navbar__menu li a,\n .navbar__menu li span {\n padding: 1.06667rem 0; } }\n .navbar__menu li a:after,\n .navbar__menu li span:after {\n content: \"\";\n display: block;\n margin: 0 auto; }\n .navbar__menu li a:hover:not(span),\n .navbar__menu li span:hover:not(span) {\n color: #3949ab; }\n\n@media all and (max-width: 56.1875em) {\n .navbar__submenu {\n margin: 0; } }\n\n@media all and (min-width: 56.25em) {\n .navbar__submenu {\n background: #ffffff;\n box-shadow: 0 0 6px rgba(52, 52, 52, 0.15);\n display: none;\n left: auto;\n margin: 15px 0 0;\n padding: 0.53333rem 0;\n position: absolute;\n top: 100%;\n width: auto;\n z-index: 2000; }\n .navbar__submenu:before {\n content: '';\n display: block;\n height: 15px;\n left: 0;\n position: absolute;\n top: -15px;\n width: 100%; }\n .navbar__submenu li {\n border: none;\n font-weight: normal;\n margin: 0; }\n .navbar__submenu li > a {\n padding: 0.53333rem 2.66667rem; } }\n @media all and (min-width: 56.25em) and (max-width: 56.1875em) {\n .navbar__submenu li > a {\n padding: 0.26667rem 0; } }\n\n@media all and (min-width: 56.25em) {\n .navbar__submenu li:hover > a {\n background: #f7f7f8; }\n .navbar__submenu li ul {\n left: 90%;\n top: 0;\n transform: translate(-10%, 0); }\n .navbar__submenu li ul.navbar__submenu--reversed {\n left: auto;\n right: 90%;\n top: 0; } }\n\n.navbar__toggle {\n background: none;\n border: none;\n border-top: 2px solid #343434;\n border-radius: 0;\n display: block;\n height: 14px;\n padding: 0;\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n right: 0;\n text-indent: -99999rem;\n width: 1.6rem;\n z-index: 3; }\n @media all and (min-width: 56.25em) {\n .navbar__toggle {\n display: none; } }\n .navbar__toggle:before {\n border-top: 2px solid #343434;\n content: \"\";\n left: 0;\n position: absolute;\n top: 4px;\n width: 100%; }\n .navbar__toggle:after {\n border-bottom: 2px solid #343434;\n content: \"\";\n left: 0;\n position: absolute;\n bottom: 0;\n width: 100%; }\n .navbar__toggle:focus {\n background: none;\n outline: none;\n border: none;\n border-top: 2px solid #343434; }\n .navbar__toggle:hover {\n background: none; }\n\n.is-opened > ul {\n opacity: 1;\n overflow: auto;\n visibility: visible;\n transform: translateY(0); }\n .is-opened > ul li {\n padding: 0;\n transform: translateY(0); }\n .is-opened > ul li ul {\n height: 0;\n opacity: 0;\n transition: all 0.3s ease-out;\n transform: translateY(-10%); }\n .is-opened > ul li ul li {\n border-top: 1px solid #e3e3e3; }\n .is-opened > ul li:hover > ul {\n height: auto;\n opacity: 1;\n transform: translateX(0); }\n .is-opened > ul li[aria-expanded=\"true\"] > ul {\n display: block; }\n\n@media all and (max-width: 56.1875em) {\n .has-submenu:after {\n background: #ffffff;\n border-right: 1px solid #343434;\n border-bottom: 1px solid #343434;\n content: '';\n display: block;\n height: 8px;\n position: absolute;\n right: 10px;\n top: 1rem;\n transform: rotate(45deg);\n width: 8px; } }\n\n.sidebar input {\n width: 100%; }\n .sidebar input + input {\n margin-top: 0.53333rem; }\n\n.box {\n margin-bottom: calc(3.2rem + 1vw); }\n .box--gray {\n background: #f7f7f8;\n padding: calc(1.86667rem + 0.5vw); }\n .box--gray > .box__title {\n border-top: none;\n padding-top: 0; }\n .box__title {\n color: #3949ab;\n margin: 0 0 calc(1.86667rem + 0.5vw); }\n .box ul {\n margin-left: 0; }\n\n.owner {\n text-align: center; }\n .owner > img {\n border-radius: 50%;\n max-width: 7rem; }\n .owner > p {\n font-size: 0.87891rem; }\n .owner__email {\n display: block;\n margin-top: 0.8rem;\n text-decoration: underline; }\n\n.authors {\n list-style: none; }\n .authors > li {\n align-items: center;\n clear: both;\n display: flex;\n margin: 0 0 calc(1.6rem + 0.75vw);\n padding: 0; }\n .authors__img {\n margin-right: 2rem; }\n .authors__title {\n display: block;\n font-family: \"Roboto\", sans-serif;\n font-weight: 700; }\n\n.tags > li {\n display: flex;\n justify-content: space-between;\n padding-left: 0; }\n\n.newsletter__note {\n color: #908e98;\n font-size: 0.77248rem;\n margin: 0 0 1.06667rem; }\n\n.u-small {\n color: #908e98;\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.77248rem; }\n\n.u-icon {\n fill: rgba(52, 52, 52, 0.8);\n height: 1rem;\n width: 1rem;\n transition: all 0.24s ease-out; }\n\n.hero {\n height: 29rem;\n position: relative; }\n .hero__image {\n height: 29rem;\n object-fit: cover;\n opacity: 0.9;\n position: relative;\n width: 100%; }\n .hero__text {\n color: #ffffff;\n text-align: center;\n width: 80%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%); }\n .hero__text > h1 {\n color: #ffffff; }\n .hero__text > .btn, .hero__text > [type=button], .hero__text >\n [type=submit], .hero__text >\n button {\n margin-top: 1.6rem; }\n\n.page-header {\n border-top: 3px solid #343434;\n padding-top: calc(1.86667rem + 0.5vw); }\n .page-header__title {\n color: #3949ab; }\n .page-header__desc {\n margin-top: calc(0.26667rem + 0.5vw); }\n\n.article {\n margin-bottom: calc(1.6rem + 0.5vw); }\n .article__title {\n font-size: 1.13778rem; }\n @media screen and (min-width: 20rem) {\n .article__title {\n font-size: calc(1.13778rem + 0.07585 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n .article__title {\n font-size: 1.21363rem; } }\n .article__meta {\n display: flex;\n align-items: center;\n justify-content: space-between; }\n .article__meta__avatar {\n border-radius: 50%;\n height: 2.13333rem;\n margin-right: 0.8rem;\n width: 2.13333rem;\n display: inline-block;\n vertical-align: middle; }\n\n.post {\n border-top: 3px solid #343434;\n padding-top: calc(1.86667rem + 0.5vw); }\n .post__meta {\n margin: calc(1.06667rem + 0.25vw) 0 0 0; }\n .post__meta > li {\n display: inline-block;\n list-style: none;\n padding: 0.26667rem 1.06667rem 0 0; }\n .post__meta > li > svg {\n fill: #ffc400;\n vertical-align: top; }\n .post__image--left {\n float: left;\n margin-right: calc(1.86667rem + 0.5vw);\n max-width: 50%; }\n .post__image--right {\n float: right;\n margin-left: calc(1.86667rem + 0.5vw);\n max-width: 50%; }\n .post__image--center {\n display: block;\n margin-left: auto;\n margin-right: auto;\n text-align: center; }\n .post__image--wide {\n text-align: center; }\n .post__image--full {\n text-align: center; }\n .post__entry {\n margin-top: calc(1.86667rem + 1vw); }\n @media all and (max-width: 56.1875em) {\n .post__entry {\n max-width: 36rem;\n margin-left: auto;\n margin-right: auto; } }\n .post__entry > :nth-child(1) {\n margin-top: 0; }\n .post__entry a {\n color: #3949ab;\n text-decoration: none;\n transition: all 0.24s ease-out; }\n .post__entry a:hover {\n color: #343434; }\n .post__entry a:active {\n color: #343434; }\n .post__entry a:focus {\n color: #343434; }\n .post__entry a:hover {\n text-decoration: underline; }\n .post__footer {\n margin-top: calc(1.86667rem + 0.5vw); }\n @media all and (max-width: 37.4375em) {\n .post__footer {\n text-align: center; } }\n .post__footer > .box {\n border-top: 1px solid #e3e3e3;\n padding-top: calc(1.86667rem + 0.5vw);\n text-align: center; }\n .post__last-updated {\n color: #908e98;\n font-size: 0.77248rem;\n margin-bottom: calc(1.86667rem + 0.5vw); }\n .post__share > a {\n background: #f7f7f8;\n border-radius: 50px;\n display: inline-block;\n font-family: \"Roboto\", sans-serif;\n font-size: 0.77248rem;\n padding: 0.53333rem 1.6rem;\n margin: 0.53333rem 0.53333rem 0; }\n .post__share > a > .u-icon {\n pointer-events: none;\n display: inline-block;\n margin-right: 0.53333rem;\n vertical-align: middle; }\n .post__tag {\n margin-left: 0;\n margin-top: 0; }\n .post__tag li {\n display: inline-block; }\n .post__tag li > a {\n background: #f7f7f8;\n border-radius: 50px;\n display: inline-block;\n font-family: \"Roboto\", sans-serif;\n font-size: 0.77248rem;\n padding: 0.53333rem 1.6rem; }\n .post__bio > img {\n border-radius: 50%;\n height: 4.8rem;\n width: 4.8rem; }\n .post__nav {\n color: #908e98;\n display: flex;\n font-size: 0.77248rem;\n justify-content: space-between;\n margin-bottom: calc(1.86667rem + 0.5vw); }\n .post__nav__link {\n color: #717171; }\n @media all and (min-width: 37.5em) {\n .post__nav__link {\n align-items: flex-start;\n display: flex;\n justify-content: space-around; } }\n .post__nav__link > img {\n width: 100px; }\n @media all and (max-width: 37.4375em) {\n .post__nav__link > img {\n display: none; } }\n .post__nav__link:hover h5 {\n transition: all 0.12s linear;\n color: #3949ab; }\n .post__nav h5 {\n font-size: 0.87891rem;\n margin: 0.26667rem 0 0;\n position: relative; }\n .post__nav__prev {\n flex-basis: 50%;\n text-align: left; }\n .post__nav__next {\n flex-basis: 50%;\n margin-left: auto;\n text-align: right; }\n @media all and (min-width: 37.5em) {\n .post__nav__text {\n width: 55%; } }\n .post__related__wrap {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: calc(1.86667rem + 0.5vw) -2% 0;\n width: 104%; }\n @media all and (min-width: 56.25em) {\n .post__related__wrap {\n flex-wrap: no-wrap; } }\n .post__related__wrap figure {\n margin: 0;\n flex-basis: 50%;\n padding: 0.8rem 2%; }\n @media all and (min-width: 37.5em) {\n .post__related__wrap figure {\n flex-basis: 33.333%; } }\n .post__related__wrap figcaption > time {\n color: #908e98;\n font-size: 0.82397rem;\n margin: 0 0 0.8rem; }\n .post__related__wrap h4 {\n font-size: 0.87891rem;\n margin: 1.6rem 0 0.53333rem; }\n\n.comments {\n border-top: 1px solid #e3e3e3;\n padding-top: calc(1.86667rem + 0.5vw);\n text-align: center; }\n .comments > h3 {\n margin-bottom: calc(1.86667rem + 0.5vw); }\n\n.author__avatar {\n border-radius: 50%;\n height: 4.8rem;\n margin-bottom: calc(0.93333rem + 0.5vw);\n width: 4.8rem; }\n\n.search__form {\n margin-top: calc(1.86667rem + 0.5vw); }\n\n.search__input {\n width: 100%; }\n\n.gs-webResult {\n border-top: 1px solid #e3e3e3;\n padding-top: 1rem; }\n\n.gsc-table-result {\n margin-top: 0.53333rem;\n white-space: initial; }\n .gsc-table-result td {\n padding: 0; }\n\n.align-left {\n text-align: left; }\n\n.align-right {\n text-align: right; }\n\n.align-center {\n text-align: center; }\n\n.align-justify {\n text-align: justify; }\n\n.msg {\n padding: 1.06667rem 1.6rem; }\n .msg--highlight {\n background-color: #fff7e5; }\n .msg--info {\n background-color: #d9edf7; }\n .msg--success {\n background: #d5efc2; }\n\n.dropcap:first-letter {\n color: #343434;\n float: left;\n font-family: \"Roboto\", sans-serif;\n line-height: 0.6;\n margin-right: 0.53333rem;\n padding: 0.53333rem 0.53333rem 0.53333rem 0; }\n .dropcap:first-letter {\n font-size: 2.8084rem; }\n @media screen and (min-width: 20rem) {\n .dropcap:first-letter {\n font-size: calc(2.8084rem + 1.898 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n .dropcap:first-letter {\n font-size: 4.70641rem; } }\n\n@media all and (min-width: 37.5em) {\n .pagination > a {\n margin: 0 0.53333rem 0 0; } }\n\n.footer {\n border-top: 1px solid #e3e3e3;\n font-family: \"Roboto\", sans-serif;\n margin-top: calc(1.86667rem + 0.5vw);\n padding: calc(1.86667rem + 0.5vw) 0;\n text-align: center; }\n .footer__social > a {\n display: inline-block;\n padding: 0 0.53333rem; }\n .footer__copyright + .footer__social {\n margin-top: 1.6rem; }\n","*,\n*:before,\n*:after {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n\narticle,\naside,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n\tdisplay: block;\n}\n\nli {\n\tlist-style: none\n}\n\nimg {\n\theight: auto;\n\tmax-width: 100%;\n\tvertical-align: top;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n\tfont: inherit;\n}\n","// Links\n@mixin links ($link, $hover, $active, $focus) {\n\t& {\n\t\tcolor: $link;\n\t\ttext-decoration: none;\n\t\ttransition: all 0.24s ease-out;\n\t}\n\t&:hover {\n\t\tcolor: $hover;\n\t}\n\t&:active {\n\t\tcolor: $active;\n\t}\n\t&:focus {\n\t\tcolor: $focus;\n\t}\n}\n\n// Horizontal and vertical centering helper\n@mixin centerXY($horizontal: true, $vertical: true) {\n\tposition: absolute;\n\t@if ($horizontal and $vertical) {\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t}\n\t@else if ($horizontal) {\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t}\n\t@else if ($vertical) {\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t}\n}\n\n// Fluid typography\n@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {\n\t& {\n\t\t@each $property in $properties {\n\t\t\t#{$property}: $min-value;\n\t\t}\n\t\t@media screen and (min-width: $min-vw) {\n\t\t\t@each $property in $properties {\n\t\t\t\t#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));\n\t\t\t}\n\t\t}\n\t\t@media screen and (min-width: $max-vw) {\n\t\t\t@each $property in $properties {\n\t\t\t\t#{$property}: $max-value;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// Appearance property\n@mixin appearance-none {\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n}\n\n@function strip-unit($value) {\n\t@return $value / ($value * 0 + 1);\n}\n","// Breakpoints - Media queries map ------------------------------------\n\n$breakpoints: ( \n sm: 600px,\n md: 900px,\n\t lg: 1200px,\n xl: 1600px \t\n); \n\n\n// Widths ---------------------------------------------------------\n\n$main-col-width: 42rem;\n$sidebar-width: 20rem;\n$hero-height: 29rem;\n\n\n// Typography ---------------------------------------------------------\n\n// Font families \n\n$font-1: 'PT Serif', serif;\n$font-2: 'Roboto', sans-serif;\n$monospace-font: 'Monaco', 'Courier New', monospace;\n\n$body: $font-1;\n$heading: $font-2;\n$logo: $font-2;\n$monospace: $monospace-font;\n\n$font-weight-normal: 400;\n$font-weight-bold: 700;\n\n$letter-spacing: 0.05rem;\n\n// Modular scale\n\n$ms-base: 1rem;\n$ms-ratio: $minor-second; // the list of all available ratios you can find here: /vendors/modular-scale/_ratios.scss\n\n// Min and Max screen width for Fluid Typography\n\n$minScreen: 20rem;\n$maxScreen: 133rem;\n\n\n// Baseline\n\n$line-height: 1.6;\n$baseline: 1.6rem / 6; \n\n\n// Font size map\n\n$font: ( \n\tmin: 1rem,\n\tmax: 1.2rem \n);\n\n$h1: ( \n\tmin: (ms(8)), \n\tmax: (ms(12))\n); \n$h2: ( \n\tmin: (ms(4)),\n\tmax: (ms(7))\n);\n$h3: ( \n\tmin: (ms(2)),\n\tmax: (ms(5))\n);\n$h4: ( \n\tmin: (ms(1)),\n\tmax: (ms(3))\n);\n$h5: ( \n\tmin: (ms(-1)),\n\tmax: (ms(1))\n);\n$h6: ( \n\tmin: (ms(-2)),\n\tmax: (ms(0)) \n);\n\n\n// Colors -------------------------------------------------------------\n\n// main colors\n$dark: #343434;\n$color: #3949ab;\n$color-light: #f5f6ff;\n$gray: #908e98;\n$gray-light: #f7f7f8; \n$white: #ffffff;\n\n// secondary colors\n$color-bg: $white;\n$color-logo: $dark;\n$color-grey-light: tint($dark, 95%); \n\n// text \n$color-text: $dark;\n$color-text-light: tint($dark, 30%);\n$color-text-color: $color;\n$color-headings: $dark;\n\n// menu \n$color-menu: $white;\n$color-menu-link: $dark;\n$color-menu-link-hover: $color;\n$color-menu-border-separator: tint($dark, 90%);\n\n// links \n$color-link: $dark;\n$color-link-hover: $color;\n$color-link-active: $color;\n$color-link-focus: $color;\n\n// borders \n$color-border: $dark;\n$color-border-dark: tint($dark, 65%);\n$color-border-light: tint($dark, 86%);\n$color-border-color: $color;\n\n// buttons \n$color-button-txt: $white;\n$color-button-txt-hover: $white;\n$color-button-border: $dark;\n$color-button-border-hover: $dark;\n$color-button-bg: $color;\n$color-button-bg-hover: $dark;\n$color-button-disabled-bg: tint($dark, 95%);\n$color-button-disabled-border: tint($dark, 75%);\n\n// forms \n$color-input-bg: $white;\n$color-input-bg-color: $color;\n$color-input-border: tint($dark, 80%);\n$color-input-border-focus: $color;\n\n// social share icons \n$share_icons: ( \n\tfacebook: #3b5998, \n\ttwitter: #55acee, \n\tgplus: #dd4b39, \t \n\tinstagram: #405de6, \n\tvimeo: #1ab7ea, \n\tpinterest: #bd081c,\n\tyoutube: #cd201f,\n\tlinkedin: #0077B5,\n\tbuffer: #222222,\n\tstumbleupon:#eb4924\n); \n\n","// Typography ----------------------------------------------------------------- \n\nhtml {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($font, min), map-get($font, max));\n}\n\nbody {\n\tbackground: $color-bg;\n\tcolor: $color-text;\n\tfont-family: $body;\n\tfont-weight: $font-weight-normal;\n\tline-height: $line-height;\n}\n\na {\n\t@include links ($color-link, $color-link-hover, $color-link-active, $color-link-focus);\n}\n\np,\nul,\nol,\ndl,\ntable {\n\tmargin-top: calc(#{baseline(5)} + 0.5vw);\n}\n\nblockquote,\nfigure {\n\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\tmargin-bottom: calc(#{baseline(7)} + 0.5vw);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tcolor: $color-headings;\n\tfont-family: $heading;\n\tfont-weight: $font-weight-bold;\n\tline-height: 1.2;\n\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n}\n\nh1 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h1, min), map-get($h1, max));\n\tmargin: 0;\n}\n\nh2 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h2, min), map-get($h2, max));\n}\n\nh3 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h3, min), map-get($h3, max));\n}\n\nh4 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h4, min), map-get($h4, max));\n}\n\nh5 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h5, min), map-get($h5, max));\n}\n\nh6 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h6, min), map-get($h6, max));\n}\n\nh2,\nh3,\nh4,\nh5,\nh6 {\n\t&+p {\n\t\tmargin-top: calc(#{baseline(3)} + 0.25vw);\n\t}\n}\n\nb,\nstrong {\n\tfont-weight: $font-weight-bold;\n}\n\nblockquote {\n\tfont-family: $heading;\n\tfont-weight: $font-weight-bold;\n\tpadding: 0 15%;\n\tcite {\n\t\tcolor: $color-text;\n\t\tdisplay: block;\n\t\tfont-family: $body;\n\t\tfont-size: ms(-2);\n\t\tfont-style: normal;\n\t\tpadding-top: baseline(2);\n\t}\n\t&> :nth-child(1) {\n\t\tmargin-top: 0;\n\t}\n\t&:before {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\tcontent: \"“\";\n\t\tmargin-left: -.55em;\n\t\t@include mappy-bp(sm) {\n\t\t\tmargin-left: -.85em;\n\t\t}\n\t\tfont: normal 400%/0.9 $heading;\n\t\tcolor: $color-border-light;\n\t}\n}\n\nul,\nol {\n\tmargin-left: 2rem;\n\t&>li {\n\t\tlist-style: inherit;\n\t\tpadding: baseline(1) 0 0 baseline(4);\n\t}\n}\n\ndl {\n\tdt {\n\t\tfont-weight: $font-weight-bold;\n\t}\n}\n\npre {\n\tmargin: calc(#{baseline(4)} + 0.25vw) 0 0;\n\tpadding: baseline(6) baseline(12);\n\twhite-space: pre-wrap;\n\tword-wrap: break-word;\n}\n\ncode,\npre {\n\tbackground-color: #f6f6f6;\n\tfont-family: $monospace;\n\tfont-size: ms(-1);\n}\n\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n\tdisplay: block;\n\tmax-width: 100%;\n\toverflow-x: auto;\n\tvertical-align: top;\n\ttext-align: left;\n\twhite-space: nowrap;\n\tth {\n\t\tborder-bottom: 2px solid $color-border-light;\n\t\tpadding: baseline(3) baseline(5);\n\t}\n\ttr {\n\t\t&:nth-child(2n) {\n\t\t\tbackground: $color-grey-light;\n\t\t}\n\t}\n\ttd {\n\t\tpadding: baseline(3) baseline(5);\n\t}\n}\n\nfigcaption {\n\tcolor: $gray;\n\tfont-family: $font-2;\n\tfont-weight: $font-weight-normal;\n\tfont-size: ms(-4);\n\tmargin: baseline(4) 0 0;\n\ttext-align: center;\n}\n\nsub,\nsup {\n\tfont-size: 65%;\n}\n","@function ms-calc($Value, $Base: $ms-base, $Ratio: $ms-ratio) {\n \n // If pow exists use it.\n // It supports non-interger values!\n @if $MS-pow-exists {\n\n // The formula for figuring out modular scales is:\n // (r^v)*b\n @return pow($Ratio, $Value) * $Base;\n }\n\n // If not, use ms-pow().\n // Not as fast or capable of non-integer exponents.\n @else {\n @return ms-pow($Ratio, $Value) * $Base;\n }\n}","// Darken & Lighten color \n\n@function tint($color, $percentage) {\n\t@return mix(white, $color, $percentage);\n}\n\n@function shade($color, $percentage) {\n\t@return mix(black, $color, $percentage);\n}\n\n// Baseline for Vertical Rhythm\n\n@function baseline($value){\n @return ($baseline) * $value\n}\n\n\n","// Mappy breakpoints\n// -----------------\n// Output media query with focus on min-width, max-width, min-height and max-height.\n// Other media rules are passed as the second argument in a map\n//\n// @author Zell Liew\n// =================\n$breakpoints: () !default;\n$mappy-queries: () !default;\n\n// Mappy BP [Mixin]\n// ----------------\n// - $queries : or in the format:\n// h \n// - $type : \n// - $query-fallback : selector class\n// - $breakpoints : \n@mixin mappy-bp($queries, $type: all, $query-fallback: null, $breakpoints: $breakpoints) {\n\n // Gets mappy map through mappy-bp fn\n $mappy-map: mappy-bp($queries, $type, $query-fallback, $breakpoints);\n\n // Outputs media string\n @media #{map-get($mappy-map, type)} and #{map-get($mappy-map, media-string)} {\n @content;\n }\n\n // If a query fallback is provided\n @if $query-fallback {\n #{$query-fallback} & {\n @content;\n }\n }\n}\n\n// Mappy Query [Mixin]\n// -------------------\n// Output query from $mappy-queries map.\n// $query : from $mappy-queries key\n@mixin mappy-query($query, $mappy-queries: $mappy-queries) {\n @if not map-has-key($mappy-queries, $query) {\n @error \"#{$mappy-queries} does not contain #{$query}\";\n }\n\n $mappy-map: map-get($mappy-queries, $query);\n\n @media #{map-get($mappy-map, type)} and #{map-get($mappy-map, media-string)} {\n @content;\n }\n\n // If a query fallback is provided\n @if map-get($mappy-map, query-fallback) {\n #{map-get($mappy-map, query-fallback)} & {\n @content;\n }\n }\n}\n\n// Mappy BP [Function]\n// -------------------\n// Returns a map with 3 keys\n// - type : Media type\n// - media-string : media query string\n// - query-fallback : query fallback (if any)\n@function mappy-bp($queries, $type: all, $query-fallback: null, $breakpoints: $breakpoints) {\n $media-string: ();\n $_return: ();\n $media-map: parse-bp($queries, $breakpoints);\n\n @each $key, $value in $media-map {\n @if $value and $value != 0 {\n @if $media-string == (()) {\n $media-string: append($media-string, unquote(\"(#{$key}: #{$value})\"));\n }\n\n @else {\n $media-string: append($media-string, unquote(\"and (#{$key}: #{$value})\"));\n }\n }\n }\n $_return: (\n type: $type,\n media-string: implode($media-string),\n query-fallback: $query-fallback\n );\n\n @return $_return;\n}\n\n// BP [Mixin]\n// ----------\n// Convenience mixin for Mappy Breakpoints\n@mixin bp($queries, $type: all, $query-fallback: null, $breakpoints: $breakpoints) {\n @include mappy-bp($queries, $type, $query-fallback, $breakpoints) {\n @content;\n }\n}\n\n// Parse BP [function]\n// -------------------\n// Parses arguments and returns a map with 4 keys\n@function parse-bp($queries, $breakpoints) {\n $_return: ();\n $_i: 1;\n $_minw: null;\n $_maxw: null;\n $_minh: null;\n $_maxh: null;\n $_length: length($queries);\n\n // Checks for width queries\n $_minw: nth($queries, 1);\n $_minw: mappy-validate($_minw, $breakpoints);\n\n // Check for width queries\n @if $_minw {\n $_minw: mappy-convert-to-em($_minw);\n $_return: map-merge($_return, (min-width: $_minw));\n $queries: set-nth($queries, 1, null);\n }\n\n // Checks if there is a max width query\n @if $_minw and $_length >= 2 {\n $_maxw: nth($queries, 2);\n $_maxw: mappy-validate($_maxw, $breakpoints);\n }\n\n @if $_maxw {\n $_maxw: mappy-convert-to-em($_maxw - 1px);\n $_return: map-merge($_return, (max-width: $_maxw));\n $queries: set-nth($queries, 2, null);\n }\n\n // Checks for height queries\n $_h: index($queries, h) or index($queries, height);\n\n @if $_h {\n $_minh: nth($queries, $_h + 1);\n $_minh: mappy-validate($_minh, $breakpoints);\n\n @if $_minh {\n $_minh: mappy-convert-to-em($_minh);\n $_return: map-merge($_return, (min-height: $_minh));\n $queries: set-nth($queries, $_h + 1, null);\n }\n\n // Checks if there is a max height query\n @if $_length - $_h >= 2 {\n $_maxh: nth($queries, $_h + 2);\n $_maxh: mappy-validate($_maxh, $breakpoints);\n }\n\n @if $_maxh {\n $_maxh: mappy-convert-to-em($_maxh - 1px);\n $_return: map-merge($_return, (max-height: $_maxh));\n $queries: set-nth($queries, $_h + 2, null);\n }\n // Reset h marker\n $queries: set-nth($queries, $_h, null);\n }\n\n // Checks for other queries\n @while $_i <= length($queries) {\n $_key: nth($queries, $_i);\n\n @if $_key and $_length - $_i >= 1 {\n $_val: nth($queries, $_i + 1);\n $_return: map-merge($_return, (#{$_key}: $_val));\n $queries: set-nth($queries, $_i, null);\n $queries: set-nth($queries, $_i + 1, null);\n }\n\n @else if $_key {\n @warn unquote('\"Mappy Breakpoints is missing value for media feature \"#{$_key}\"\"');\n }\n $_i: $_i + 1;\n }\n @return $_return;\n}\n\n// Mappy Validate [Function]\n// -------------------------\n// Checks if $query given is one of the following:\n// 1) Is a $key in the $breakpoints map\n// 2) Is a number\n// 3) Is a \"max\", \"max-width\" or \"max-height\" string\n@function mappy-validate($query, $breakpoints) {\n $_return: null;\n\n @if map-has-key($breakpoints, $query) {\n $_return: map-get($breakpoints, $query);\n }\n\n @else if type-of($query) == number {\n $_return: $query;\n }\n\n @else if $query == \"max\" or $query == \"max-height\" or $query == \"max-width\" {\n $_return: 0;\n }\n\n @else {\n $_return: null;\n }\n @return $_return;\n}\n\n// Mappy Convert To Em [Function]\n// -------------------------------\n// Checks and converts px values to em. Leave other units untouched.\n\n@function mappy-convert-to-em($val) {\n @if unit($val) == \"px\" or $val == 0 {\n @return mappy-em($val);\n } @else if unit($val) == \"em\" {\n @return $val;\n } @else if unit($val) == \"rem\" {\n @return mappy-strip-unit($val) * 1em;\n } @else {\n @error unquote(\"Breakpoint value must have a unit if it's a number\");\n }\n}\n\n// Mappy Em [Function]\n// --------------------\n// Converts pixels to em with $base-font-size\n// - https://gist.github.com/ijy/1441967\n@function mappy-em($target, $context: 16px) {\n @if $target == 0 {\n @return 0;\n }\n @return $target / $context * 1em;\n}\n\n@function mappy-strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n// Implode [Function]\n// --------------------\n// Implode a list into a string\n@function implode($list, $glue: ' ') {\n $res: null;\n $len: length($list);\n\n @for $i from 1 through $len {\n $e: nth($list, $i);\n @if $i == $len {\n $res: unquote(\"#{$res}#{$e}\");\n }\n @else {\n $res: unquote(\"#{$res}#{$e}#{$glue}\");\n }\n }\n\n @return $res;\n}\n","// Buttons ----------------------------------------------------------------- \n\n.btn {\n\tbackground: $color-button-bg;\n\tborder: none;\n\tborder-radius: 50px;\n\tcolor: $color-button-txt;\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tfont: $font-weight-bold ms(-5) $heading;\n\tletter-spacing: $letter-spacing * 3;\n\tpadding: baseline(3) baseline(6);\n\tvertical-align: middle;\n\ttext-align: center;\n\ttext-transform: lowercase;\n\ttransition: all 0.24s ease;\n\twidth: 100%;\n\t@include mappy-bp(sm) {\n\t\twidth: auto\n\t}\t\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tbackground: $color-button-bg-hover;\n\t\t\n\t\tcolor: $color-button-txt-hover;\n\t}\n\t&:focus {\n\t\toutline: 2px dotted $color-button-border-hover;\n\t}\n\t&:disabled {\n\t\tbackground-color: $color-button-disabled-bg;\n\t\tborder-color: $color-button-disabled-border;\n\t\tcolor: $color-text-light;\n\t\tcursor: not-allowed;\n\t}\n}\n\n[type=button],\n[type=submit],\nbutton {\n\t@extend .btn;\n\t@include appearance-none;\n}\n","// Forms ----------------------------------------------------------------- \n\nfieldset {\n\tborder: 1px solid $color-input-border;\n\tborder-radius: 6px;\n\tmargin: 0 0 baseline(6);\n\tpadding: baseline(6);\n\t&>legend {\n\t\tmargin-left: -1rem;\n\t\tpadding: 0 1rem;\n\t}\n}\n\nlegend {\n\tfont-weight: $font-weight-bold;\n}\n\nlabel {\n\tfont-weight: $font-weight-bold;\n\tmargin: 0 baseline(4) baseline(3) 0;\n}\n\noption {\n\tfont-weight: $font-weight-normal;\n}\n\n[type=text],\n[type=url],\n[type=tel],\n[type=number],\n[type=email],\n[type=search],\ntextarea,\nselect {\n\tbackground-color: $color-input-bg;\n\tborder: 1px solid $color-input-border;\n\tborder-radius: 50px;\n\tfont-size: 1rem;\n\toutline: none;\n\tpadding: baseline(2) baseline(3);\n\twidth: 100%;\n\ttransition: all 0.24s ease-out;\n\t@include mappy-bp(sm) {\n\t\twidth: auto\n\t}\n\t@include appearance-none;\n\t&:focus {\n\t\tbox-shadow:inset 0 0 2px $color;\n\t}\n}\n\n[type=checkbox],\n[type=radio] {\n\tdisplay: none;\n\t+label {\n\t\tdisplay: inline-block;\n\t\tcursor: pointer;\n\t\ttop: 0;\n\t\tmargin-right: baseline(6);\n\t}\n}\n\n.checkbox,\n.radio {\n\t&:before {\n\t\tborder: 1px solid $color-input-border;\n\t\tborder-radius: 2px;\n\t\tcontent: \"\";\n\t\tdisplay: inline-block;\n\t\theight: baseline(5);\n\t\tline-height: baseline(5);\n\t\tmargin-right: baseline(4);\n\t\tvertical-align: middle;\n\t\ttext-align: center;\n\t\twidth: baseline(5);\n\t}\n}\n\n.radio:before {\n\tborder-radius: 50%;\n}\n\n[type=checkbox]:checked+.checkbox:before {\n\tcontent: \"\\2713\";\n\tcolor: $color-input-bg-color;\n\tfont-weight: $font-weight-bold;\n}\n\n[type=radio]:checked+.radio:before {\n\tbox-shadow: inset 0 0 0 4px $color-input-bg;\n\tcontent: \"\";\n\tbackground: $color-input-bg-color;\n\tborder: 1px solid $color-input-border;\n}\n\n[type=file] {\n\tmargin-bottom: baseline(6);\n\twidth: 100%;\n}\n\nselect {\n\tmax-width: 100%;\n\twidth: auto;\n\tposition: relative;\n\t&:not([multiple]) {\n\t\tbackground: url('data:image/svg+xml;utf8,') no-repeat 90% 50%;\n\t\tbackground-size: 8px;\n\t\tpadding-right: baseline(12);\n\t}\n}\n\nselect[multiple] {\n\tborder-radius: 6px;\n\tpadding: baseline(6);\n\twidth: 100%;\n\t&:hover {\n\t\tborder-color: $color-input-border;\n\t}\n\t&:focus {\n\t\tborder-color: $color-input-border-focus;\n\t}\n\t&:disabled {\n\t\tbackground-color: $color-button-disabled-bg;\n\t\tcursor: not-allowed;\n\t\t&:hover {\n\t\t\tborder-color: $color-input-border;\n\t\t}\n\t}\n}\n\ntextarea {\n\tborder-radius: 6px;\n\tdisplay: block;\n\toverflow: auto;\n\tresize: vertical;\n\tmax-width: 100%;\n}\n","// CSS Grid Layout ----------------------------------------------------------------- \n\n// Main columns\n.container {\n\tdisplay: grid;\n\tgrid-gap: calc(#{baseline(7)} + 0.5vw);\n\tgrid-template-columns: 1fr auto 1fr;\n\t@include mappy-bp(md) {\n\t\tgrid-template-columns: 1fr minmax(auto, $main-col-width) $sidebar-width 1fr;\n\t}\n}\n\n.top {\n\tgrid-column: 2/3;\n\t@include mappy-bp(md) {\n\t\tgrid-column: 2/4;\n\t}\n}\n\n.footer {\n\tgrid-column: 2/3;\n\t@include mappy-bp(md) {\n\t\tgrid-column: 2/4;\n\t}\n}\n\n.main {\n\tgrid-column: 2/3;\n\t&--full {\n\t\tgrid-column: 2/4;\n\t}\n\t&--grid {\n\t\talign-content: start;\n\t\tdisplay: grid;\n\t\tgrid-gap: calc(#{baseline(7)} + 0.5vw);\n\t\t@include mappy-bp(sm) {\n\t\t\tgrid-template-columns: repeat(6, 1fr);\n\t\t\t&>.article {\n\t\t\t\tgrid-column: span 3;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.sidebar {\n\tgrid-column: 2/3;\n\t@include mappy-bp(md) {\n\t\tgrid-column: 3/4;\n\t}\n}\n\n// Content sections \n.hero,\n.page-header--listing {\n\t@include mappy-bp(sm) {\n\t\tgrid-column: span 6;\n\t}\n}\n\n.featured-posts {\n\t@include mappy-bp(sm) {\n\t\tgrid-column: span 6;\n\t\tdisplay: grid;\n\t\tgrid-column-gap: calc(#{baseline(7)} + 0.5vw);\n\t\tgrid-template-columns: repeat(3, 1fr);\n\t\t&>h3 {\n\t\t\tgrid-column: span 3;\n\t\t}\n\t}\n}\n\n.pagination {\n\t@include mappy-bp(sm) {\n\t\tgrid-column: span 6;\n\t}\n}\n","// Header ----------------------------------------------------------------- \n\n.top {\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\tposition: relative;\n}\n","// Logo ----------------------------------------------------------------- \n\n.logo {\n\tcolor: $color-logo !important;\n\tfont-family: $logo;\n\tfont-weight: 800;\n\t\n\t@include fluid-type(font-size, $minScreen, $maxScreen, ms(6), ms(10));\n\t@include mappy-bp(md) {\n\t\tmargin: 0;\n\t}\n}\n","// Menu ----------------------------------------------------------------- \n\n.navbar {\n\t&__menu {\n\t\t// before \"is opened\"\n\t\tfont-family: $font-2;\n\t\tfont-weight: $font-weight-bold;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\t@include mappy-bp(max md) {\n\t\t\tbackground: $color-menu;\n\t\t\theight: 100vh;\n\t\t\tleft: 0;\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 2.99rem;\n\t\t\ttransition: all 0.3s ease-out;\n\t\t\tvisibility: hidden;\n\t\t\ttransform: translateY(-5%);\n\t\t\twidth: 100%;\n\t\t\tz-index: 1;\n\t\t\t&>li {\n\t\t\t\ttransition: all 0.3s ease-out;\n\t\t\t\tborder-bottom: 1px solid $color-border-light;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\t\t@include mappy-bp(md) {\n\t\t\tmax-height: none;\n\t\t\toverflow: visible;\n\t\t}\n\t\tpadding: 0;\n\t\tli {\n\t\t\tcolor: $color-menu-link;\n\t\t\tpadding: 0;\n\t\t\ttext-align: center;\n\t\t\t@include mappy-bp(md) {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmargin: 0 0 0 baseline(6);\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t&:hover,\n\t\t\t&[aria-expanded=\"true\"] {\n\t\t\t\tcursor: pointer;\n\t\t\t\t&>ul {\n\t\t\t\t\t@include mappy-bp(md) {\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\tli {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\ta,\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tcolor: $color-menu-link;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\t@include mappy-bp(max md) {\n\t\t\t\t\tpadding: baseline(4) 0;\n\t\t\t\t}\n\t\t\t\t&:after {\n\t\t\t\t\tcontent: \"\";\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tmargin: 0 auto;\n\t\t\t\t}\n\t\t\t\t&:hover:not(span) {\n\t\t\t\t\tcolor: $color-menu-link-hover;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&__submenu {\n\t\t@include mappy-bp(max md) {\n\t\t\tmargin: 0;\n\t\t}\n\t\t@include mappy-bp(md) {\n\t\t\tbackground: $color-menu;\n\t\t\tbox-shadow: 0 0 6px rgba($dark, 0.15);\n\t\t\tdisplay: none;\n\t\t\tleft: auto;\n\t\t\tmargin: 15px 0 0;\n\t\t\tpadding: baseline(2) 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\twidth: auto;\n\t\t\tz-index: 2000;\n\t\t\t&:before {\n\t\t\t\t// submenu top space\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 15px;\n\t\t\t\tleft: 0;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: -15px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\tli {\n\t\t\t\tborder: none;\n\t\t\t\tfont-weight: normal;\n\t\t\t\tmargin: 0;\n\t\t\t\t&>a {\n\t\t\t\t\tpadding: baseline(2) baseline(10);\n\t\t\t\t\t@include mappy-bp(max md) {\n\t\t\t\t\t\tpadding: baseline(1) 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&:hover {\n\t\t\t\t\t&>a {\n\t\t\t\t\t\tbackground: $gray-light;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tul {\n\t\t\t\t\t// second and the next lavel\n\t\t\t\t\tleft: 90%;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\ttransform: translate(-10%, 0);\n\t\t\t\t\t&.navbar__submenu--reversed {\n\t\t\t\t\t\tleft: auto;\n\t\t\t\t\t\tright: 90%;\n\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&__toggle {\n\t\tbackground: none;\n\t\tborder: none;\n\t\tborder-top: 2px solid $dark;\n\t\tborder-radius: 0;\n\t\tdisplay: block;\n\t\t@include mappy-bp(md) {\n\t\t\tdisplay: none;\n\t\t}\n\t\theight: 14px;\n\t\tpadding: 0;\n\t\t@include centerXY(false, true);\n\t\tright: 0;\n\t\ttext-indent: -99999rem;\n\t\twidth: 1.6rem;\n\t\tz-index: 3;\n\t\t&:before {\n\t\t\tborder-top: 2px solid $dark;\n\t\t\tcontent: \"\";\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\twidth: 100%;\n\t\t}\n\t\t&:after {\n\t\t\tborder-bottom: 2px solid $dark;\n\t\t\tcontent: \"\";\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\t&:focus {\n\t\t\tbackground: none;\n\t\t\toutline: none;\n\t\t\tborder: none;\n\t\t\tborder-top: 2px solid $color-border;\n\t\t}\n\t\t&:hover {\n\t\t\tbackground: none;\n\t\t}\n\t}\n}\n\n.is-opened {\n\t&>ul {\n\t\topacity: (1);\n\t\toverflow: auto;\n\t\tvisibility: visible;\n\t\ttransform: translateY(0);\n\t\tli {\n\t\t\tpadding: 0;\n\t\t\ttransform: translateY(0);\n\t\t\tul {\n\t\t\t\theight: 0;\n\t\t\t\topacity: (0);\n\t\t\t\ttransition: all 0.3s ease-out;\n\t\t\t\ttransform: translateY(-10%);\n\t\t\t\t& li {\n\t\t\t\t\tborder-top: 1px solid $color-border-light;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:hover>ul {\n\t\t\t\theight: auto;\n\t\t\t\topacity: (1);\n\t\t\t\ttransform: translateX(0);\n\t\t\t}\n\t\t\t&[aria-expanded=\"true\"]>ul {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\t}\n}\n\n@include mappy-bp(max md) {\n\t.has-submenu {\n\t\t&:after {\n\t\t\tbackground: $white;\n\t\t\tborder-right: 1px solid $color-border;\n\t\t\tborder-bottom: 1px solid $color-border;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 8px;\n\t\t\tposition: absolute;\n\t\t\tright: 10px;\n\t\t\ttop: 1rem;\n\t\t\ttransform: rotate(45deg);\n\t\t\twidth: 8px;\n\t\t}\n\t}\n}\n","// Sidebar ----------------------------------------------------------------- \n\n.sidebar {\n\tinput {\n\t\twidth: 100%;\n\t\t&+input {\n\t\t\tmargin-top: baseline(2);\n\t\t}\n\t}\n}\n\n.box {\n\tmargin-bottom: calc(#{baseline(12)} + 1vw);\n\t&--gray {\n\t\tbackground: $gray-light;\n\t\tpadding: calc(#{baseline(7)} + 0.5vw);\n\t\t&>.box__title {\n\t\t\tborder-top: none;\n\t\t\tpadding-top: 0;\n\t\t}\n\t}\n\t&__title {\n\t\tcolor: $color-text-color;\n\t\tmargin: 0 0 calc(#{baseline(7)} + 0.5vw);\n\t}\n\tul {\n\t\tmargin-left: 0;\n\t}\n}\n\n.owner {\n\ttext-align: center;\n\t&>img {\n\t\tborder-radius: 50%;\n\t\tmax-width: 7rem;\n\t}\n\t&>p {\n\t\tfont-size: ms(-2);\n\t}\n\t&__email {\n\t\tdisplay: block;\n\t\tmargin-top: baseline(3);\n\t\ttext-decoration: underline\n\t}\n}\n\n.authors {\n\tlist-style: none;\n\t&>li {\n\t\talign-items: center;\n\t\tclear: both;\n\t\tdisplay: flex;\n\t\tmargin: 0 0 calc(#{baseline(6)} + 0.75vw);\n\t\tpadding: 0;\n\t}\n\t&__img {\n\t\tmargin-right: 2rem;\n\t}\n\t&__title {\n\t\tdisplay: block;\n\t\tfont-family: $heading;\n\t\tfont-weight: $font-weight-bold;\n\t}\n}\n\n.tags {\n\t&>li {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tpadding-left: 0;\n\t}\n}\n\n.newsletter {\n\t&__note {\n\t\tcolor: $gray;\n\t\tfont-size: ms(-4);\n\t\tmargin: 0 0 baseline(4);\n\t}\n}\n","// Utility classes ----------------------------------------------------------\n\n.u-small {\n\tcolor: $gray;\n\tfont-family: $font-2;\n\tfont-weight: $font-weight-normal;\n\tfont-size: ms(-4);\n}\n\n.u-icon {\n\tfill: rgba($dark, 0.8);\n\theight: ms(0);\n\twidth: ms(0);\n\ttransition: all 0.24s ease-out;\n}\n\n\n// Hero ----------------------------------------------------------\n\n.hero {\n\theight: $hero-height;\n\tposition: relative;\n\t&__image {\n\t\theight: $hero-height;\n\t\tobject-fit: cover;\n\t\topacity: 0.9;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\t&__text {\n\t\tcolor: $white;\n\t\ttext-align: center;\n\t\twidth: 80%;\n\t\t@include centerXY(true, true);\n\t\t&>h1 {\n\t\t\tcolor: $white;\n\t\t}\n\t\t&>.btn {\n\t\t\tmargin-top: baseline(6);\n\t\t}\n\t}\n}\n\n\n// Post listing (index, author, tag) ------------------------------\n\n.page-header {\n\tborder-top: 3px solid $color-border;\n\tpadding-top: calc(#{baseline(7)} + 0.5vw);\n\t&__title {\n\t\tcolor: $color-text-color;\n\t}\n\t&__desc {\n\t\tmargin-top: calc(#{baseline(1)} + 0.5vw);\n\t}\n}\n\n.article {\n\tmargin-bottom: calc(#{baseline(6)} + 0.5vw);\n\t&__title {\n\t\t@include fluid-type(font-size, $minScreen, $maxScreen, ms(2), ms(3));\n\t}\n\t&__meta {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\t&__avatar {\n\t\t\tborder-radius: 50%;\n\t\t\theight: baseline(8);\n\t\t\tmargin-right: baseline(3);\n\t\t\twidth: baseline(8);\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n}\n\n\n// Post page ----------------------------------------------------------\n\n.post {\n\tborder-top: 3px solid $color-border;\n\tpadding-top: calc(#{baseline(7)} + 0.5vw);\n\t&__meta {\n\t\tmargin: calc(#{baseline(4)} + 0.25vw) 0 0 0;\n\t\t&>li {\n\t\t\tdisplay: inline-block;\n\t\t\tlist-style: none;\n\t\t\tpadding: baseline(1) baseline(4) 0 0;\n\t\t\t&>svg {\n\t\t\t\tfill: #ffc400;\n\t\t\t\tvertical-align: top;\n\t\t\t}\n\t\t}\n\t}\n\t&__image {\n\t\t&--left {\n\t\t\tfloat: left;\n\t\t\tmargin-right: calc(#{baseline(7)} + 0.5vw);\n\t\t\tmax-width: 50%;\n\t\t}\n\t\t&--right {\n\t\t\tfloat: right;\n\t\t\tmargin-left: calc(#{baseline(7)} + 0.5vw);\n\t\t\tmax-width: 50%;\n\t\t}\n\t\t&--center {\n\t\t\tdisplay: block;\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t\ttext-align: center;\n\t\t}\n\t\t&--wide {\n\t\t\ttext-align: center;\n\t\t}\n\t\t&--full {\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\t&__entry {\n\t\tmargin-top: calc(#{baseline(7)} + 1vw);\n\t\t@include mappy-bp(max md) {\n\t\t\tmax-width: 36rem;\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t}\n\t\t&>:nth-child(1) {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\ta {\n\t\t\t@include links ($color-link-hover, $color-link, $color-link, $color-link);\n\t\t}\n\t\ta:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\t&__footer {\n\t\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\t\t@include mappy-bp(max sm) {\n\t\t\ttext-align: center;\n\t\t}\n\t\t&>.box {\n\t\t\tborder-top: 1px solid $color-border-light;\n\t\t\tpadding-top: calc(#{baseline(7)} + 0.5vw);\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\t&__last-updated {\n\t\tcolor: $gray;\n\t\tfont-size: ms(-4);\n\t\tmargin-bottom: calc(#{baseline(7)} + 0.5vw);\n\t}\n\t&__share {\n\t\t&>a {\n\t\t\tbackground: $gray-light;\n\t\t\tborder-radius: 50px;\n\t\t\tdisplay: inline-block;\n\t\t\tfont-family: $font-2;\n\t\t\tfont-size: ms(-4);\n\t\t\tpadding: baseline(2) baseline(6);\n\t\t\tmargin: baseline(2) baseline(2) 0;\n\t\t\t&>.u-icon {\n\t\t\t\tpointer-events: none;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmargin-right: baseline(2);\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\t&__tag {\n\t\tmargin-left: 0;\n\t\tmargin-top: 0;\n\t\tli {\n\t\t\tdisplay: inline-block;\n\t\t\t&>a {\n\t\t\t\tbackground: $gray-light;\n\t\t\t\tborder-radius: 50px;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-family: $font-2;\n\t\t\t\tfont-size: ms(-4);\n\t\t\t\tpadding: baseline(2) baseline(6);\n\t\t\t}\n\t\t}\n\t}\n\t&__bio {\n\t\t&>img {\n\t\t\tborder-radius: 50%;\n\t\t\theight: baseline(18);\n\t\t\twidth: baseline(18);\n\t\t}\n\t}\n\t&__nav {\n\t\tcolor: $gray;\n\t\tdisplay: flex;\n\t\tfont-size: ms(-4);\n\t\tjustify-content: space-between;\n\t\tmargin-bottom: calc(#{baseline(7)} + 0.5vw);\n\t\t&__link {\n\t\t\tcolor: $color-text-light;\n\t\t\t@include mappy-bp(sm) {\n\t\t\t\talign-items: flex-start;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-around;\n\t\t\t}\n\t\t\t&>img {\n\t\t\t\twidth: 100px;\n\t\t\t\t@include mappy-bp(max sm) {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\th5 {\n\t\t\t\t\ttransition: all 0.12s linear;\n\t\t\t\t\tcolor: $color-link-hover;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\th5 {\n\t\t\tfont-size: ms(-2);\n\t\t\tmargin: baseline(1) 0 0;\n\t\t\tposition: relative;\n\t\t}\n\t\t&__prev {\n\t\t\tflex-basis: 50%;\n\t\t\ttext-align: left;\n\t\t}\n\t\t&__next {\n\t\t\tflex-basis: 50%;\n\t\t\tmargin-left: auto;\n\t\t\ttext-align: right;\n\t\t}\n\t\t&__text {\n\t\t\t@include mappy-bp( sm) {\n\t\t\t\twidth: 55%;\n\t\t\t}\n\t\t}\n\t}\n\t&__related {\n\t\t&__wrap {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t\tmargin: calc(#{baseline(7)} + 0.5vw) -2% 0;\n\t\t\twidth: 104%;\n\t\t\t@include mappy-bp(md) {\n\t\t\t\tflex-wrap: no-wrap;\n\t\t\t}\n\t\t\tfigure {\n\t\t\t\tmargin: 0;\n\t\t\t\tflex-basis: 50%;\n\t\t\t\tpadding: baseline(3) 2%;\n\t\t\t\t@include mappy-bp(sm) {\n\t\t\t\t\tflex-basis: 33.333%;\n\t\t\t\t}\n\t\t\t}\n\t\t\tfigcaption {\n\t\t\t\t&>time {\n\t\t\t\t\tcolor: $gray;\n\t\t\t\t\tfont-size: ms(-3);\n\t\t\t\t\tmargin: 0 0 baseline(3);\n\t\t\t\t}\n\t\t\t}\n\t\t\th4 {\n\t\t\t\tfont-size: ms(-2);\n\t\t\t\tmargin: baseline(6) 0 baseline(2);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n// Comments ----------------------------------------------------------\n\n.comments {\n\tborder-top: 1px solid $color-border-light;\n\tpadding-top: calc(#{baseline(7)} + 0.5vw);\n\ttext-align: center;\n\t&>h3 {\n\t\tmargin-bottom: calc(#{baseline(7)} + 0.5vw);\n\t}\n}\n\n\n// Author page ----------------------------------------------------------\n\n.author {\n\t&__avatar {\n\t\tborder-radius: 50%;\n\t\theight: baseline(18);\n\t\tmargin-bottom: calc(#{baseline(7/2)} + 0.5vw);\n\t\twidth: baseline(18);\n\t}\n}\n\n\n// Search page ----------------------------------------------------------\n\n.search {\n\t&__form {\n\t\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\t}\n\t&__input {\n\t\twidth: 100%;\n\t}\n}\n\n\n// Google Custom Search -------------------------------------------------\n\n.gs-webResult {\n\tborder-top: 1px solid $color-border-light;\n\tpadding-top: 1rem;\n}\n\n.gsc-table-result {\n\tmargin-top: baseline(2);\n\twhite-space: initial;\n\ttd {\n\t\tpadding: 0;\n\t}\n}\n\n\n// Required by WYSIWYG editor --------------------------------------------\n\n.align-left {\n\ttext-align: left;\n}\n\n.align-right {\n\ttext-align: right;\n}\n\n.align-center {\n\ttext-align: center;\n}\n\n.align-justify {\n\ttext-align: justify;\n}\n\n.msg {\n\tpadding: baseline(4) baseline(6);\n\t&--highlight {\n\t\tbackground-color: #fff7e5;\n\t}\n\t&--info {\n\t\tbackground-color: #d9edf7;\n\t}\n\t&--success {\n\t\tbackground: #d5efc2;\n\t}\n}\n\n.dropcap {\n\t&:first-letter {\n\t\tcolor: $color-headings;\n\t\tfloat: left;\n\t\tfont-family: $heading;\n\t\tline-height: 0.6;\n\t\tmargin-right: baseline(2);\n\t\tpadding: baseline(2) baseline(2) baseline(2) 0;\n\t\t@include fluid-type(font-size, $minScreen, $maxScreen, ms(16), ms(24));\n\t}\n}\n","// Pagination ----------------------------------------------------------------- \n\n.pagination {\n\t&>a {\n\t\t\n\t\t@include mappy-bp(sm) {\n\t\t\tmargin: 0 baseline(2) 0 0;\n\t\t}\n\t}\n}\n","// Footer ----------------------------------------------------------------- \n\n.footer {\n\tborder-top: 1px solid $color-border-light;\n\tfont-family: $font-2;\n\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\tpadding: calc(#{baseline(7)} + 0.5vw) 0;\n\ttext-align: center;\n\t&__copyright {}\n\t&__social {\n\t\t&>a {\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 0 baseline(2);\n\t\t}\n\t}\n\t&__copyright+&__social {\n\t\tmargin-top: baseline(6);\n\t}\n}\n"]} \ No newline at end of file +{"version":3,"sources":["main.css","base/_reset.scss","helpers/_mixins.scss","helpers/_variables.scss","base/_typography.scss","vendors/modular-scale/_calc.scss","helpers/_functions.scss","vendors/_mappy-breakpoints.scss","components/_buttons.scss","components/_forms.scss","layout/_grid.scss","layout/_header.scss","layout/_logo.scss","layout/_menu.scss","layout/_sidebar.scss","themes/_core.scss","layout/_pagination.scss","layout/_footer.scss","layout/_gallery.scss"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["@charset \"UTF-8\";\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n margin: 0;\n padding: 0; }\n\narticle,\naside,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n display: block; }\n\nli {\n list-style: none; }\n\nimg {\n height: auto;\n max-width: 100%;\n vertical-align: top; }\n\nbutton,\ninput,\nselect,\ntextarea {\n font: inherit; }\n\nhtml {\n font-size: 1rem; }\n @media screen and (min-width: 20rem) {\n html {\n font-size: calc(1rem + 0.2 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n html {\n font-size: 1.2rem; } }\n\nbody {\n background: #ffffff;\n color: #343434;\n font-family: \"PT Serif\", serif;\n font-weight: 400;\n line-height: 1.6; }\n\na {\n color: #343434;\n text-decoration: none;\n transition: all 0.24s ease-out; }\n\na:hover {\n color: #3949ab; }\n\na:active {\n color: #3949ab; }\n\na:focus {\n color: #3949ab; }\n\np,\nul,\nol,\ndl,\ntable {\n margin-top: calc(1.33333rem + 0.5vw); }\n\nblockquote,\nfigure {\n margin-top: calc(1.86667rem + 0.5vw);\n margin-bottom: calc(1.86667rem + 0.5vw); }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n color: #343434;\n font-family: \"Roboto\", sans-serif;\n font-weight: 700;\n line-height: 1.2;\n margin-top: calc(1.86667rem + 0.5vw); }\n\nh1 {\n margin: 0; }\n h1 {\n font-size: 1.67583rem; }\n @media screen and (min-width: 20rem) {\n h1 {\n font-size: calc(1.67583rem + 0.4936 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h1 {\n font-size: 2.16943rem; } }\n\nh2 {\n font-size: 1.29454rem; }\n @media screen and (min-width: 20rem) {\n h2 {\n font-size: calc(1.29454rem + 0.27655 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h2 {\n font-size: 1.57109rem; } }\n\nh3 {\n font-size: 1.13778rem; }\n @media screen and (min-width: 20rem) {\n h3 {\n font-size: calc(1.13778rem + 0.24306 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h3 {\n font-size: 1.38084rem; } }\n\nh4 {\n font-size: 1.06667rem; }\n @media screen and (min-width: 20rem) {\n h4 {\n font-size: calc(1.06667rem + 0.14696 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h4 {\n font-size: 1.21363rem; } }\n\nh5 {\n font-size: 0.9375rem; }\n @media screen and (min-width: 20rem) {\n h5 {\n font-size: calc(0.9375rem + 0.12917 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h5 {\n font-size: 1.06667rem; } }\n\nh6 {\n font-size: 0.87891rem; }\n @media screen and (min-width: 20rem) {\n h6 {\n font-size: calc(0.87891rem + 0.12109 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n h6 {\n font-size: 1rem; } }\n\nh2 + p,\nh3 + p,\nh4 + p,\nh5 + p,\nh6 + p {\n margin-top: calc(0.8rem + 0.25vw); }\n\nb,\nstrong {\n font-weight: 700; }\n\nblockquote {\n font-family: \"Roboto\", sans-serif;\n font-weight: 700;\n padding: 0 15%; }\n blockquote cite {\n color: #343434;\n display: block;\n font-family: \"PT Serif\", serif;\n font-size: 0.87891rem;\n font-style: normal;\n padding-top: 0.53333rem; }\n blockquote > :nth-child(1) {\n margin-top: 0; }\n blockquote:before {\n display: block;\n height: 0;\n content: \"“\";\n margin-left: -.55em;\n font: normal 400%/0.9 \"Roboto\", sans-serif;\n color: #e3e3e3; }\n @media all and (min-width: 37.5em) {\n blockquote:before {\n margin-left: -.85em; } }\n\nul,\nol {\n margin-left: 2rem; }\n ul > li,\n ol > li {\n list-style: inherit;\n padding: 0.26667rem 0 0 1.06667rem; }\n\ndl dt {\n font-weight: 700; }\n\npre {\n margin: calc(1.06667rem + 0.25vw) 0 0;\n padding: 1.6rem 3.2rem;\n white-space: pre-wrap;\n word-wrap: break-word; }\n\ncode,\npre {\n background-color: #f6f6f6;\n font-family: \"Monaco\", \"Courier New\", monospace;\n font-size: 0.9375rem; }\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n display: block;\n max-width: 100%;\n overflow-x: auto;\n vertical-align: top;\n text-align: left;\n white-space: nowrap; }\n table th {\n border-bottom: 2px solid #e3e3e3;\n padding: 0.8rem 1.33333rem; }\n table tr:nth-child(2n) {\n background: whitesmoke; }\n table td {\n padding: 0.8rem 1.33333rem; }\n\nfigcaption {\n color: #908e98;\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.77248rem;\n margin: 1.06667rem 0 0;\n text-align: center; }\n\nsub,\nsup {\n font-size: 65%; }\n\nhr {\n border: 0;\n height: 0;\n border-top: 1px solid #e3e3e3;\n border-bottom: 1px solid rgba(255, 255, 255, 0.3); }\n\n.btn, [type=button],\n[type=submit],\nbutton {\n background: #3949ab;\n border: none;\n border-radius: 50px;\n color: #ffffff;\n cursor: pointer;\n display: inline-block;\n font: 700 0.7242rem \"Roboto\", sans-serif;\n letter-spacing: 0.15rem;\n padding: 0.8rem 1.6rem;\n vertical-align: middle;\n text-align: center;\n text-transform: lowercase;\n transition: all 0.24s ease;\n width: 100%; }\n @media all and (min-width: 37.5em) {\n .btn, [type=button],\n [type=submit],\n button {\n width: auto; } }\n .btn:hover, [type=button]:hover,\n [type=submit]:hover,\n button:hover, .btn:focus, [type=button]:focus,\n [type=submit]:focus,\n button:focus, .btn:active, [type=button]:active,\n [type=submit]:active,\n button:active {\n background: #343434;\n color: #ffffff; }\n .btn:focus, [type=button]:focus,\n [type=submit]:focus,\n button:focus {\n outline: 2px dotted #343434; }\n .btn:disabled, [type=button]:disabled,\n [type=submit]:disabled,\n button:disabled {\n background-color: whitesmoke;\n border-color: #cccccc;\n color: #717171;\n cursor: not-allowed; }\n\n[type=button],\n[type=submit],\nbutton {\n -webkit-appearance: none;\n -moz-appearance: none; }\n\nfieldset {\n border: 1px solid #d6d6d6;\n border-radius: 6px;\n margin: 0 0 1.6rem;\n padding: 1.6rem; }\n fieldset > legend {\n margin-left: -1rem;\n padding: 0 1rem; }\n\nlegend {\n font-weight: 700; }\n\nlabel {\n font-weight: 700;\n margin: 0 1.06667rem 0.8rem 0; }\n\noption {\n font-weight: 400; }\n\n[type=text],\n[type=url],\n[type=tel],\n[type=number],\n[type=email],\n[type=search],\ntextarea,\nselect {\n background-color: #ffffff;\n border: 1px solid #d6d6d6;\n border-radius: 50px;\n font-size: 1rem;\n outline: none;\n padding: 0.53333rem 0.8rem;\n width: 100%;\n transition: all 0.24s ease-out;\n -webkit-appearance: none;\n -moz-appearance: none; }\n @media all and (min-width: 37.5em) {\n [type=text],\n [type=url],\n [type=tel],\n [type=number],\n [type=email],\n [type=search],\n textarea,\n select {\n width: auto; } }\n [type=text]:focus,\n [type=url]:focus,\n [type=tel]:focus,\n [type=number]:focus,\n [type=email]:focus,\n [type=search]:focus,\n textarea:focus,\n select:focus {\n box-shadow: inset 0 0 2px #3949ab; }\n\n[type=checkbox],\n[type=radio] {\n display: none; }\n [type=checkbox] + label,\n [type=radio] + label {\n display: inline-block;\n cursor: pointer;\n top: 0;\n margin-right: 1.6rem; }\n\n.checkbox:before,\n.radio:before {\n border: 1px solid #d6d6d6;\n border-radius: 2px;\n content: \"\";\n display: inline-block;\n height: 1.33333rem;\n line-height: 1.33333rem;\n margin-right: 1.06667rem;\n vertical-align: middle;\n text-align: center;\n width: 1.33333rem; }\n\n.radio:before {\n border-radius: 50%; }\n\n[type=checkbox]:checked + .checkbox:before {\n content: \"\\2713\";\n color: #3949ab;\n font-weight: 700; }\n\n[type=radio]:checked + .radio:before {\n box-shadow: inset 0 0 0 4px #ffffff;\n content: \"\";\n background: #3949ab;\n border: 1px solid #d6d6d6; }\n\n[type=file] {\n margin-bottom: 1.6rem;\n width: 100%; }\n\nselect {\n max-width: 100%;\n width: auto;\n position: relative; }\n select:not([multiple]) {\n background: url('data:image/svg+xml;utf8,') no-repeat 90% 50%;\n background-size: 8px;\n padding-right: 3.2rem; }\n\nselect[multiple] {\n border-radius: 6px;\n padding: 1.6rem;\n width: 100%; }\n select[multiple]:hover {\n border-color: #d6d6d6; }\n select[multiple]:focus {\n border-color: #3949ab; }\n select[multiple]:disabled {\n background-color: whitesmoke;\n cursor: not-allowed; }\n select[multiple]:disabled:hover {\n border-color: #d6d6d6; }\n\ntextarea {\n border-radius: 6px;\n display: block;\n overflow: auto;\n resize: vertical;\n max-width: 100%; }\n\n.container {\n display: grid;\n grid-gap: calc(1.86667rem + 0.5vw);\n grid-template-columns: 1fr auto 1fr; }\n @media all and (min-width: 56.25em) {\n .container {\n grid-template-columns: 1fr minmax(auto, 42rem) 20rem 1fr; } }\n\n.top {\n grid-column: 2/3; }\n @media all and (min-width: 56.25em) {\n .top {\n grid-column: 2/4; } }\n\n.footer {\n grid-column: 2/3; }\n @media all and (min-width: 56.25em) {\n .footer {\n grid-column: 2/4; } }\n\n.main {\n grid-column: 2/3; }\n .main--full {\n grid-column: 2/4; }\n .main--grid {\n align-content: start;\n display: grid;\n grid-gap: calc(1.86667rem + 0.5vw); }\n @media all and (min-width: 37.5em) {\n .main--grid {\n grid-template-columns: repeat(6, 1fr); }\n .main--grid > .article {\n grid-column: span 3; } }\n\n.sidebar {\n grid-column: 2/3; }\n @media all and (min-width: 56.25em) {\n .sidebar {\n grid-column: 3/4; } }\n\n@media all and (min-width: 37.5em) {\n .hero,\n .page-header--listing {\n grid-column: span 6; } }\n\n@media all and (min-width: 37.5em) {\n .featured-posts {\n grid-column: span 6;\n display: grid;\n grid-column-gap: calc(1.86667rem + 0.5vw);\n grid-template-columns: repeat(3, 1fr); }\n .featured-posts > h3 {\n grid-column: span 3; } }\n\n@media all and (min-width: 37.5em) {\n .pagination {\n grid-column: span 6; } }\n\n.top {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: calc(1.86667rem + 0.5vw);\n position: relative; }\n\n.logo {\n color: #343434 !important;\n font-family: \"Roboto\", sans-serif;\n font-weight: 800; }\n .logo {\n font-size: 1.4729rem; }\n @media screen and (min-width: 20rem) {\n .logo {\n font-size: calc(1.4729rem + 0.43382 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n .logo {\n font-size: 1.90672rem; } }\n @media all and (min-width: 56.25em) {\n .logo {\n margin: 0; } }\n\n.navbar__menu {\n font-family: \"Roboto\", sans-serif;\n font-weight: 700;\n margin: 0;\n padding: 0;\n overflow: hidden;\n padding: 0; }\n @media all and (max-width: 56.1875em) {\n .navbar__menu {\n background: #ffffff;\n height: 100vh;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 2.99rem;\n transition: all 0.3s ease-out;\n visibility: hidden;\n transform: translateY(-5%);\n width: 100%;\n z-index: 1; }\n .navbar__menu > li {\n transition: all 0.3s ease-out;\n border-bottom: 1px solid #e3e3e3;\n padding: 0; } }\n @media all and (min-width: 56.25em) {\n .navbar__menu {\n max-height: none;\n overflow: visible; } }\n .navbar__menu li {\n color: #343434;\n padding: 0;\n text-align: center; }\n @media all and (min-width: 56.25em) {\n .navbar__menu li {\n display: inline-block;\n margin: 0 0 0 1.6rem;\n position: relative; } }\n .navbar__menu li:hover, .navbar__menu li[aria-expanded=\"true\"] {\n cursor: pointer; }\n @media all and (min-width: 56.25em) {\n .navbar__menu li:hover > ul, .navbar__menu li[aria-expanded=\"true\"] > ul {\n display: block; }\n .navbar__menu li:hover > ul li, .navbar__menu li[aria-expanded=\"true\"] > ul li {\n margin: 0;\n display: block; } }\n .navbar__menu li a,\n .navbar__menu li span {\n display: block;\n color: #343434;\n white-space: nowrap; }\n @media all and (max-width: 56.1875em) {\n .navbar__menu li a,\n .navbar__menu li span {\n padding: 1.06667rem 0; } }\n .navbar__menu li a:after,\n .navbar__menu li span:after {\n content: \"\";\n display: block;\n margin: 0 auto; }\n .navbar__menu li a:hover:not(span),\n .navbar__menu li span:hover:not(span) {\n color: #3949ab; }\n\n@media all and (max-width: 56.1875em) {\n .navbar__submenu {\n margin: 0; } }\n\n@media all and (min-width: 56.25em) {\n .navbar__submenu {\n background: #ffffff;\n box-shadow: 0 0 6px rgba(52, 52, 52, 0.15);\n display: none;\n left: auto;\n margin: 15px 0 0;\n padding: 0.53333rem 0;\n position: absolute;\n top: 100%;\n width: auto;\n z-index: 2000; }\n .navbar__submenu:before {\n content: '';\n display: block;\n height: 15px;\n left: 0;\n position: absolute;\n top: -15px;\n width: 100%; }\n .navbar__submenu li {\n border: none;\n font-weight: normal;\n margin: 0; }\n .navbar__submenu li > a {\n padding: 0.53333rem 2.66667rem; } }\n @media all and (min-width: 56.25em) and (max-width: 56.1875em) {\n .navbar__submenu li > a {\n padding: 0.26667rem 0; } }\n\n@media all and (min-width: 56.25em) {\n .navbar__submenu li:hover > a {\n background: #f7f7f8; }\n .navbar__submenu li ul {\n left: 90%;\n top: 0;\n transform: translate(-10%, 0); }\n .navbar__submenu li ul.navbar__submenu--reversed {\n left: auto;\n right: 90%;\n top: 0; } }\n\n.navbar__toggle {\n background: none;\n border: none;\n border-top: 2px solid #343434;\n border-radius: 0;\n display: block;\n height: 14px;\n padding: 0;\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n right: 0;\n text-indent: -99999rem;\n width: 1.6rem;\n z-index: 3; }\n @media all and (min-width: 56.25em) {\n .navbar__toggle {\n display: none; } }\n .navbar__toggle:before {\n border-top: 2px solid #343434;\n content: \"\";\n left: 0;\n position: absolute;\n top: 4px;\n width: 100%; }\n .navbar__toggle:after {\n border-bottom: 2px solid #343434;\n content: \"\";\n left: 0;\n position: absolute;\n bottom: 0;\n width: 100%; }\n .navbar__toggle:focus {\n background: none;\n outline: none;\n border: none;\n border-top: 2px solid #343434; }\n .navbar__toggle:hover {\n background: none; }\n\n.is-opened > ul {\n opacity: 1;\n overflow: auto;\n visibility: visible;\n transform: translateY(0); }\n .is-opened > ul li {\n padding: 0;\n transform: translateY(0); }\n .is-opened > ul li ul {\n height: 0;\n opacity: 0;\n transition: all 0.3s ease-out;\n transform: translateY(-10%); }\n .is-opened > ul li ul li {\n border-top: 1px solid #e3e3e3; }\n .is-opened > ul li:hover > ul {\n height: auto;\n opacity: 1;\n transform: translateX(0); }\n .is-opened > ul li[aria-expanded=\"true\"] > ul {\n display: block; }\n\n@media all and (max-width: 56.1875em) {\n .has-submenu:after {\n background: #ffffff;\n border-right: 1px solid #343434;\n border-bottom: 1px solid #343434;\n content: '';\n display: block;\n height: 8px;\n position: absolute;\n right: 10px;\n top: 1rem;\n transform: rotate(45deg);\n width: 8px; } }\n\n.sidebar input {\n width: 100%; }\n .sidebar input + input {\n margin-top: 0.53333rem; }\n\n.box {\n margin-bottom: calc(3.2rem + 1vw); }\n .box--gray {\n background: #f7f7f8;\n padding: calc(1.86667rem + 0.5vw); }\n .box--gray > .box__title {\n border-top: none;\n padding-top: 0; }\n .box__title {\n color: #3949ab;\n margin: 0 0 calc(1.86667rem + 0.5vw); }\n .box ul {\n margin-left: 0; }\n\n.owner {\n text-align: center; }\n .owner > img {\n border-radius: 50%;\n max-width: 7rem; }\n .owner > p {\n font-size: 0.87891rem; }\n .owner__email {\n display: block;\n margin-top: 0.8rem;\n text-decoration: underline; }\n\n.authors {\n list-style: none; }\n .authors > li {\n align-items: center;\n clear: both;\n display: flex;\n margin: 0 0 calc(1.6rem + 0.75vw);\n padding: 0; }\n .authors__img {\n margin-right: 2rem; }\n .authors__title {\n display: block;\n font-family: \"Roboto\", sans-serif;\n font-weight: 700; }\n\n.tags > li {\n display: flex;\n justify-content: space-between;\n padding-left: 0; }\n\n.newsletter__note {\n color: #908e98;\n font-size: 0.77248rem;\n margin: 0 0 1.06667rem; }\n\n.u-small {\n color: #908e98;\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.77248rem; }\n\n.u-icon {\n fill: rgba(52, 52, 52, 0.8);\n height: 1rem;\n width: 1rem;\n transition: all 0.24s ease-out; }\n\n.hero {\n height: 29rem;\n position: relative; }\n .hero__image {\n height: 29rem;\n object-fit: cover;\n opacity: 0.9;\n position: relative;\n width: 100%; }\n .hero__text {\n color: #ffffff;\n text-align: center;\n width: 80%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%); }\n .hero__text > h1 {\n color: #ffffff; }\n .hero__text > .btn, .hero__text > [type=button], .hero__text >\n [type=submit], .hero__text >\n button {\n margin-top: 1.6rem; }\n\n.page-header {\n border-top: 3px solid #343434;\n padding-top: calc(1.86667rem + 0.5vw); }\n .page-header__title {\n color: #3949ab; }\n .page-header__desc {\n margin-top: calc(0.26667rem + 0.5vw); }\n\n.article {\n margin-bottom: calc(1.6rem + 0.5vw); }\n .article__title {\n font-size: 1.13778rem; }\n @media screen and (min-width: 20rem) {\n .article__title {\n font-size: calc(1.13778rem + 0.07585 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n .article__title {\n font-size: 1.21363rem; } }\n .article__meta {\n display: flex;\n align-items: center;\n justify-content: space-between; }\n .article__meta__avatar {\n border-radius: 50%;\n height: 2.13333rem;\n margin-right: 0.8rem;\n width: 2.13333rem;\n display: inline-block;\n vertical-align: middle; }\n\n.post {\n border-top: 3px solid #343434;\n padding-top: calc(1.86667rem + 0.5vw); }\n .post__meta {\n margin: calc(1.06667rem + 0.25vw) 0 0 0; }\n .post__meta > li {\n display: inline-block;\n list-style: none;\n padding: 0.26667rem 1.06667rem 0 0; }\n .post__meta > li > svg {\n fill: #ffc400;\n vertical-align: top; }\n .post__image--left {\n float: left;\n margin-right: calc(1.86667rem + 0.5vw);\n max-width: 50%; }\n .post__image--right {\n float: right;\n margin-left: calc(1.86667rem + 0.5vw);\n max-width: 50%; }\n .post__image--center {\n display: block;\n margin-left: auto;\n margin-right: auto;\n text-align: center; }\n .post__image--wide {\n text-align: center; }\n .post__image--full {\n text-align: center; }\n .post__video {\n height: 0;\n overflow: hidden;\n padding-top: 1.6rem;\n padding-bottom: 56.25%;\n position: relative; }\n .post__video > iframe {\n border: none;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%; }\n .post__entry {\n margin-top: calc(1.86667rem + 1vw); }\n @media all and (max-width: 56.1875em) {\n .post__entry {\n max-width: 36rem;\n margin-left: auto;\n margin-right: auto; } }\n .post__entry > :nth-child(1) {\n margin-top: 0; }\n .post__entry a {\n color: #3949ab;\n text-decoration: none;\n transition: all 0.24s ease-out; }\n .post__entry a:hover {\n color: #343434; }\n .post__entry a:active {\n color: #343434; }\n .post__entry a:focus {\n color: #343434; }\n .post__entry a:hover {\n text-decoration: underline; }\n .post__footer {\n margin-top: calc(1.86667rem + 0.5vw); }\n @media all and (max-width: 37.4375em) {\n .post__footer {\n text-align: center; } }\n .post__footer > .box {\n border-top: 1px solid #e3e3e3;\n padding-top: calc(1.86667rem + 0.5vw);\n text-align: center; }\n .post__last-updated {\n color: #908e98;\n font-size: 0.77248rem;\n margin-bottom: calc(1.86667rem + 0.5vw); }\n .post__share > a {\n background: #f7f7f8;\n border-radius: 50px;\n display: inline-block;\n font-family: \"Roboto\", sans-serif;\n font-size: 0.77248rem;\n padding: 0.53333rem 1.6rem;\n margin: 0.53333rem 0.53333rem 0; }\n .post__share > a > .u-icon {\n pointer-events: none;\n display: inline-block;\n margin-right: 0.53333rem;\n vertical-align: middle; }\n .post__tag {\n margin-left: 0;\n margin-top: 0; }\n .post__tag li {\n display: inline-block; }\n .post__tag li > a {\n background: #f7f7f8;\n border-radius: 50px;\n display: inline-block;\n font-family: \"Roboto\", sans-serif;\n font-size: 0.77248rem;\n padding: 0.53333rem 1.6rem; }\n .post__bio > img {\n border-radius: 50%;\n height: 4.8rem;\n width: 4.8rem; }\n .post__nav {\n color: #908e98;\n display: flex;\n font-size: 0.77248rem;\n justify-content: space-between;\n margin-bottom: calc(1.86667rem + 0.5vw); }\n .post__nav__link {\n color: #717171; }\n @media all and (min-width: 37.5em) {\n .post__nav__link {\n align-items: flex-start;\n display: flex;\n justify-content: space-around; } }\n .post__nav__link > img {\n width: 100px; }\n @media all and (max-width: 37.4375em) {\n .post__nav__link > img {\n display: none; } }\n .post__nav__link:hover h5 {\n transition: all 0.12s linear;\n color: #3949ab; }\n .post__nav h5 {\n font-size: 0.87891rem;\n margin: 0.26667rem 0 0;\n position: relative; }\n .post__nav__prev {\n flex-basis: 50%;\n text-align: left; }\n .post__nav__next {\n flex-basis: 50%;\n margin-left: auto;\n text-align: right; }\n @media all and (min-width: 37.5em) {\n .post__nav__text {\n width: 55%; } }\n .post__related__wrap {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: calc(1.86667rem + 0.5vw) -2% 0;\n width: 104%; }\n @media all and (min-width: 56.25em) {\n .post__related__wrap {\n flex-wrap: no-wrap; } }\n .post__related__wrap figure {\n margin: 0;\n flex-basis: 50%;\n padding: 0.8rem 2%; }\n @media all and (min-width: 37.5em) {\n .post__related__wrap figure {\n flex-basis: 33.333%; } }\n .post__related__wrap figcaption > time {\n color: #908e98;\n font-size: 0.82397rem;\n margin: 0 0 0.8rem; }\n .post__related__wrap h4 {\n font-size: 0.87891rem;\n margin: 1.6rem 0 0.53333rem; }\n\n.comments {\n border-top: 1px solid #e3e3e3;\n padding-top: calc(1.86667rem + 0.5vw);\n text-align: center; }\n .comments > h3 {\n margin-bottom: calc(1.86667rem + 0.5vw); }\n\n.author__avatar {\n border-radius: 50%;\n height: 4.8rem;\n margin-bottom: calc(0.93333rem + 0.5vw);\n width: 4.8rem; }\n\n.search__form {\n margin-top: calc(1.86667rem + 0.5vw); }\n\n.search__input {\n width: 100%; }\n\n.gs-webResult {\n border-top: 1px solid #e3e3e3;\n padding-top: 1rem; }\n\n.gsc-table-result {\n margin-top: 0.53333rem;\n white-space: initial; }\n .gsc-table-result td {\n padding: 0; }\n\n.align-left {\n text-align: left; }\n\n.align-right {\n text-align: right; }\n\n.align-center {\n text-align: center; }\n\n.align-justify {\n text-align: justify; }\n\n.msg {\n padding: 1.06667rem 1.6rem; }\n .msg--highlight {\n background-color: #fff7e5; }\n .msg--info {\n background-color: #d9edf7; }\n .msg--success {\n background: #d5efc2; }\n\n.dropcap:first-letter {\n color: #343434;\n float: left;\n font-family: \"Roboto\", sans-serif;\n line-height: 0.6;\n margin-right: 0.53333rem;\n padding: 0.53333rem 0.53333rem 0.53333rem 0; }\n .dropcap:first-letter {\n font-size: 2.8084rem; }\n @media screen and (min-width: 20rem) {\n .dropcap:first-letter {\n font-size: calc(2.8084rem + 1.898 * ((100vw - 20rem) / 113)); } }\n @media screen and (min-width: 133rem) {\n .dropcap:first-letter {\n font-size: 4.70641rem; } }\n\n@media all and (min-width: 37.5em) {\n .pagination > a {\n margin: 0 0.53333rem 0 0; } }\n\n.footer {\n border-top: 1px solid #e3e3e3;\n font-family: \"Roboto\", sans-serif;\n margin-top: calc(1.86667rem + 0.5vw);\n padding: calc(1.86667rem + 0.5vw) 0;\n text-align: center; }\n .footer__social > a {\n display: inline-block;\n padding: 0 0.53333rem; }\n .footer__copyright + .footer__social {\n margin-top: 1.6rem; }\n\n.gallery {\n margin: calc(1.6rem + 1vw) -0.53333rem; }\n @media all and (min-width: 20em) {\n .gallery {\n display: flex;\n flex-wrap: wrap; } }\n @media all and (min-width: 20em) {\n .gallery[data-columns=\"1\"] .gallery__item {\n width: 100%; } }\n @media all and (min-width: 30em) {\n .gallery[data-columns=\"2\"] .gallery__item {\n width: 50%; } }\n @media all and (min-width: 37.5em) {\n .gallery[data-columns=\"3\"] .gallery__item {\n width: 33%; } }\n @media all and (min-width: 56.25em) {\n .gallery[data-columns=\"4\"] .gallery__item {\n width: 25%; } }\n @media all and (min-width: 56.25em) {\n .gallery[data-columns=\"5\"] .gallery__item {\n width: 20%; } }\n @media all and (min-width: 56.25em) {\n .gallery[data-columns=\"6\"] .gallery__item {\n width: 16.666%; } }\n @media all and (min-width: 56.25em) {\n .gallery[data-columns=\"7\"] .gallery__item {\n width: 14.285%; } }\n @media all and (min-width: 56.25em) {\n .gallery[data-columns=\"8\"] .gallery__item {\n width: 12.5%; } }\n .gallery__item {\n margin: 0;\n padding: 0.53333rem; }\n @media all and (min-width: 20em) {\n .gallery__item {\n width: 50%; } }\n @media all and (min-width: 30em) {\n .gallery__item {\n width: 33.333%; } }\n @media all and (min-width: 37.5em) {\n .gallery__item {\n width: 25%; } }\n .gallery__item img {\n display: block;\n width: 100%; }\n\n.pswp--dark .pswp__bg {\n background: black; }\n\n.pswp--light .pswp__bg {\n background: white; }\n\n.pswp--light .pswp__counter {\n color: #343434; }\n\n.pswp--light .pswp__caption__center {\n color: #343434; }\n","*,\n*:before,\n*:after {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n\narticle,\naside,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n\tdisplay: block;\n}\n\nli {\n\tlist-style: none\n}\n\nimg {\n\theight: auto;\n\tmax-width: 100%;\n\tvertical-align: top;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n\tfont: inherit;\n}\n","// Links\n@mixin links ($link, $hover, $active, $focus) {\n\t& {\n\t\tcolor: $link;\n\t\ttext-decoration: none;\n\t\ttransition: all 0.24s ease-out;\n\t}\n\t&:hover {\n\t\tcolor: $hover;\n\t}\n\t&:active {\n\t\tcolor: $active;\n\t}\n\t&:focus {\n\t\tcolor: $focus;\n\t}\n}\n\n// Horizontal and vertical centering helper\n@mixin centerXY($horizontal: true, $vertical: true) {\n\tposition: absolute;\n\t@if ($horizontal and $vertical) {\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t}\n\t@else if ($horizontal) {\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t}\n\t@else if ($vertical) {\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t}\n}\n\n// Fluid typography\n@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {\n\t& {\n\t\t@each $property in $properties {\n\t\t\t#{$property}: $min-value;\n\t\t}\n\t\t@media screen and (min-width: $min-vw) {\n\t\t\t@each $property in $properties {\n\t\t\t\t#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));\n\t\t\t}\n\t\t}\n\t\t@media screen and (min-width: $max-vw) {\n\t\t\t@each $property in $properties {\n\t\t\t\t#{$property}: $max-value;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// Appearance property\n@mixin appearance-none {\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n}\n\n@function strip-unit($value) {\n\t@return $value / ($value * 0 + 1);\n}\n","// Breakpoints - Media queries map ------------------------------------\n\n$breakpoints: ( \n sm: 600px,\n md: 900px,\n\t lg: 1200px,\n xl: 1600px \t\n); \n\n\n// Widths ---------------------------------------------------------\n\n$main-col-width: 42rem;\n$sidebar-width: 20rem;\n$hero-height: 29rem;\n\n\n// Typography ---------------------------------------------------------\n\n// Font families \n\n$font-1: 'PT Serif', serif;\n$font-2: 'Roboto', sans-serif;\n$monospace-font: 'Monaco', 'Courier New', monospace;\n\n$body: $font-1;\n$heading: $font-2;\n$logo: $font-2;\n$monospace: $monospace-font;\n\n$font-weight-normal: 400;\n$font-weight-bold: 700;\n\n$letter-spacing: 0.05rem;\n\n// Modular scale\n\n$ms-base: 1rem;\n$ms-ratio: $minor-second; // the list of all available ratios you can find here: /vendors/modular-scale/_ratios.scss\n\n// Min and Max screen width for Fluid Typography\n\n$minScreen: 20rem;\n$maxScreen: 133rem;\n\n\n// Baseline\n\n$line-height: 1.6;\n$baseline: 1.6rem / 6; \n\n\n// Font size map\n\n$font: ( \n\tmin: 1rem,\n\tmax: 1.2rem \n);\n\n$h1: ( \n\tmin: (ms(8)), \n\tmax: (ms(12))\n); \n$h2: ( \n\tmin: (ms(4)),\n\tmax: (ms(7))\n);\n$h3: ( \n\tmin: (ms(2)),\n\tmax: (ms(5))\n);\n$h4: ( \n\tmin: (ms(1)),\n\tmax: (ms(3))\n);\n$h5: ( \n\tmin: (ms(-1)),\n\tmax: (ms(1))\n);\n$h6: ( \n\tmin: (ms(-2)),\n\tmax: (ms(0)) \n);\n\n\n// Colors -------------------------------------------------------------\n\n// main colors\n$dark: #343434;\n$color: #3949ab;\n$color-light: #f5f6ff;\n$gray: #908e98;\n$gray-light: #f7f7f8; \n$white: #ffffff;\n\n// secondary colors\n$color-bg: $white;\n$color-logo: $dark;\n$color-grey-light: tint($dark, 95%); \n\n// text \n$color-text: $dark;\n$color-text-light: tint($dark, 30%);\n$color-text-color: $color;\n$color-headings: $dark;\n\n// menu \n$color-menu: $white;\n$color-menu-link: $dark;\n$color-menu-link-hover: $color;\n$color-menu-border-separator: tint($dark, 90%);\n\n// links \n$color-link: $dark;\n$color-link-hover: $color;\n$color-link-active: $color;\n$color-link-focus: $color;\n\n// borders \n$color-border: $dark;\n$color-border-dark: tint($dark, 65%);\n$color-border-light: tint($dark, 86%);\n$color-border-color: $color;\n\n// buttons \n$color-button-txt: $white;\n$color-button-txt-hover: $white;\n$color-button-border: $dark;\n$color-button-border-hover: $dark;\n$color-button-bg: $color;\n$color-button-bg-hover: $dark;\n$color-button-disabled-bg: tint($dark, 95%);\n$color-button-disabled-border: tint($dark, 75%);\n\n// forms \n$color-input-bg: $white;\n$color-input-bg-color: $color;\n$color-input-border: tint($dark, 80%);\n$color-input-border-focus: $color;\n\n// social share icons \n$share_icons: ( \n\tfacebook: #3b5998, \n\ttwitter: #55acee, \n\tgplus: #dd4b39, \t \n\tinstagram: #405de6, \n\tvimeo: #1ab7ea, \n\tpinterest: #bd081c,\n\tyoutube: #cd201f,\n\tlinkedin: #0077B5,\n\tbuffer: #222222,\n\tstumbleupon:#eb4924\n); \n\n","// Typography ----------------------------------------------------------------- \n\nhtml {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($font, min), map-get($font, max));\n}\n\nbody {\n\tbackground: $color-bg;\n\tcolor: $color-text;\n\tfont-family: $body;\n\tfont-weight: $font-weight-normal;\n\tline-height: $line-height;\n}\n\na {\n\t@include links ($color-link, $color-link-hover, $color-link-active, $color-link-focus);\n}\n\np,\nul,\nol,\ndl,\ntable {\n\tmargin-top: calc(#{baseline(5)} + 0.5vw);\n}\n\nblockquote,\nfigure {\n\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\tmargin-bottom: calc(#{baseline(7)} + 0.5vw);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tcolor: $color-headings;\n\tfont-family: $heading;\n\tfont-weight: $font-weight-bold;\n\tline-height: 1.2;\n\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n}\n\nh1 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h1, min), map-get($h1, max));\n\tmargin: 0;\n}\n\nh2 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h2, min), map-get($h2, max));\n}\n\nh3 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h3, min), map-get($h3, max));\n}\n\nh4 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h4, min), map-get($h4, max));\n}\n\nh5 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h5, min), map-get($h5, max));\n}\n\nh6 {\n\t@include fluid-type(font-size, $minScreen, $maxScreen, map-get($h6, min), map-get($h6, max));\n}\n\nh2,\nh3,\nh4,\nh5,\nh6 {\n\t&+p {\n\t\tmargin-top: calc(#{baseline(3)} + 0.25vw);\n\t}\n}\n\nb,\nstrong {\n\tfont-weight: $font-weight-bold;\n}\n\nblockquote {\n\tfont-family: $heading;\n\tfont-weight: $font-weight-bold;\n\tpadding: 0 15%;\n\tcite {\n\t\tcolor: $color-text;\n\t\tdisplay: block;\n\t\tfont-family: $body;\n\t\tfont-size: ms(-2);\n\t\tfont-style: normal;\n\t\tpadding-top: baseline(2);\n\t}\n\t&> :nth-child(1) {\n\t\tmargin-top: 0;\n\t}\n\t&:before {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\tcontent: \"“\";\n\t\tmargin-left: -.55em;\n\t\t@include mappy-bp(sm) {\n\t\t\tmargin-left: -.85em;\n\t\t}\n\t\tfont: normal 400%/0.9 $heading;\n\t\tcolor: $color-border-light;\n\t}\n}\n\nul,\nol {\n\tmargin-left: 2rem;\n\t&>li {\n\t\tlist-style: inherit;\n\t\tpadding: baseline(1) 0 0 baseline(4);\n\t}\n}\n\ndl {\n\tdt {\n\t\tfont-weight: $font-weight-bold;\n\t}\n}\n\npre {\n\tmargin: calc(#{baseline(4)} + 0.25vw) 0 0;\n\tpadding: baseline(6) baseline(12);\n\twhite-space: pre-wrap;\n\tword-wrap: break-word;\n}\n\ncode,\npre {\n\tbackground-color: #f6f6f6;\n\tfont-family: $monospace;\n\tfont-size: ms(-1);\n}\n\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n\tdisplay: block;\n\tmax-width: 100%;\n\toverflow-x: auto;\n\tvertical-align: top;\n\ttext-align: left;\n\twhite-space: nowrap;\n\tth {\n\t\tborder-bottom: 2px solid $color-border-light;\n\t\tpadding: baseline(3) baseline(5);\n\t}\n\ttr {\n\t\t&:nth-child(2n) {\n\t\t\tbackground: $color-grey-light;\n\t\t}\n\t}\n\ttd {\n\t\tpadding: baseline(3) baseline(5);\n\t}\n}\n\nfigcaption {\n\tcolor: $gray;\n\tfont-family: $font-2;\n\tfont-weight: $font-weight-normal;\n\tfont-size: ms(-4);\n\tmargin: baseline(4) 0 0;\n\ttext-align: center;\n}\n\nsub,\nsup {\n\tfont-size: 65%;\n}\n\nhr {\n\tborder: 0;\n\theight: 0;\n\tborder-top: 1px solid $color-border-light;\n\tborder-bottom: 1px solid rgba($white, 0.3);\n}","@function ms-calc($Value, $Base: $ms-base, $Ratio: $ms-ratio) {\n \n // If pow exists use it.\n // It supports non-interger values!\n @if $MS-pow-exists {\n\n // The formula for figuring out modular scales is:\n // (r^v)*b\n @return pow($Ratio, $Value) * $Base;\n }\n\n // If not, use ms-pow().\n // Not as fast or capable of non-integer exponents.\n @else {\n @return ms-pow($Ratio, $Value) * $Base;\n }\n}","// Darken & Lighten color \n\n@function tint($color, $percentage) {\n\t@return mix(white, $color, $percentage);\n}\n\n@function shade($color, $percentage) {\n\t@return mix(black, $color, $percentage);\n}\n\n// Baseline for Vertical Rhythm\n\n@function baseline($value){\n @return ($baseline) * $value\n}\n\n\n","// Mappy breakpoints\n// -----------------\n// Output media query with focus on min-width, max-width, min-height and max-height.\n// Other media rules are passed as the second argument in a map\n//\n// @author Zell Liew\n// =================\n$breakpoints: () !default;\n$mappy-queries: () !default;\n\n// Mappy BP [Mixin]\n// ----------------\n// - $queries : or in the format:\n// h \n// - $type : \n// - $query-fallback : selector class\n// - $breakpoints : \n@mixin mappy-bp($queries, $type: all, $query-fallback: null, $breakpoints: $breakpoints) {\n\n // Gets mappy map through mappy-bp fn\n $mappy-map: mappy-bp($queries, $type, $query-fallback, $breakpoints);\n\n // Outputs media string\n @media #{map-get($mappy-map, type)} and #{map-get($mappy-map, media-string)} {\n @content;\n }\n\n // If a query fallback is provided\n @if $query-fallback {\n #{$query-fallback} & {\n @content;\n }\n }\n}\n\n// Mappy Query [Mixin]\n// -------------------\n// Output query from $mappy-queries map.\n// $query : from $mappy-queries key\n@mixin mappy-query($query, $mappy-queries: $mappy-queries) {\n @if not map-has-key($mappy-queries, $query) {\n @error \"#{$mappy-queries} does not contain #{$query}\";\n }\n\n $mappy-map: map-get($mappy-queries, $query);\n\n @media #{map-get($mappy-map, type)} and #{map-get($mappy-map, media-string)} {\n @content;\n }\n\n // If a query fallback is provided\n @if map-get($mappy-map, query-fallback) {\n #{map-get($mappy-map, query-fallback)} & {\n @content;\n }\n }\n}\n\n// Mappy BP [Function]\n// -------------------\n// Returns a map with 3 keys\n// - type : Media type\n// - media-string : media query string\n// - query-fallback : query fallback (if any)\n@function mappy-bp($queries, $type: all, $query-fallback: null, $breakpoints: $breakpoints) {\n $media-string: ();\n $_return: ();\n $media-map: parse-bp($queries, $breakpoints);\n\n @each $key, $value in $media-map {\n @if $value and $value != 0 {\n @if $media-string == (()) {\n $media-string: append($media-string, unquote(\"(#{$key}: #{$value})\"));\n }\n\n @else {\n $media-string: append($media-string, unquote(\"and (#{$key}: #{$value})\"));\n }\n }\n }\n $_return: (\n type: $type,\n media-string: implode($media-string),\n query-fallback: $query-fallback\n );\n\n @return $_return;\n}\n\n// BP [Mixin]\n// ----------\n// Convenience mixin for Mappy Breakpoints\n@mixin bp($queries, $type: all, $query-fallback: null, $breakpoints: $breakpoints) {\n @include mappy-bp($queries, $type, $query-fallback, $breakpoints) {\n @content;\n }\n}\n\n// Parse BP [function]\n// -------------------\n// Parses arguments and returns a map with 4 keys\n@function parse-bp($queries, $breakpoints) {\n $_return: ();\n $_i: 1;\n $_minw: null;\n $_maxw: null;\n $_minh: null;\n $_maxh: null;\n $_length: length($queries);\n\n // Checks for width queries\n $_minw: nth($queries, 1);\n $_minw: mappy-validate($_minw, $breakpoints);\n\n // Check for width queries\n @if $_minw {\n $_minw: mappy-convert-to-em($_minw);\n $_return: map-merge($_return, (min-width: $_minw));\n $queries: set-nth($queries, 1, null);\n }\n\n // Checks if there is a max width query\n @if $_minw and $_length >= 2 {\n $_maxw: nth($queries, 2);\n $_maxw: mappy-validate($_maxw, $breakpoints);\n }\n\n @if $_maxw {\n $_maxw: mappy-convert-to-em($_maxw - 1px);\n $_return: map-merge($_return, (max-width: $_maxw));\n $queries: set-nth($queries, 2, null);\n }\n\n // Checks for height queries\n $_h: index($queries, h) or index($queries, height);\n\n @if $_h {\n $_minh: nth($queries, $_h + 1);\n $_minh: mappy-validate($_minh, $breakpoints);\n\n @if $_minh {\n $_minh: mappy-convert-to-em($_minh);\n $_return: map-merge($_return, (min-height: $_minh));\n $queries: set-nth($queries, $_h + 1, null);\n }\n\n // Checks if there is a max height query\n @if $_length - $_h >= 2 {\n $_maxh: nth($queries, $_h + 2);\n $_maxh: mappy-validate($_maxh, $breakpoints);\n }\n\n @if $_maxh {\n $_maxh: mappy-convert-to-em($_maxh - 1px);\n $_return: map-merge($_return, (max-height: $_maxh));\n $queries: set-nth($queries, $_h + 2, null);\n }\n // Reset h marker\n $queries: set-nth($queries, $_h, null);\n }\n\n // Checks for other queries\n @while $_i <= length($queries) {\n $_key: nth($queries, $_i);\n\n @if $_key and $_length - $_i >= 1 {\n $_val: nth($queries, $_i + 1);\n $_return: map-merge($_return, (#{$_key}: $_val));\n $queries: set-nth($queries, $_i, null);\n $queries: set-nth($queries, $_i + 1, null);\n }\n\n @else if $_key {\n @warn unquote('\"Mappy Breakpoints is missing value for media feature \"#{$_key}\"\"');\n }\n $_i: $_i + 1;\n }\n @return $_return;\n}\n\n// Mappy Validate [Function]\n// -------------------------\n// Checks if $query given is one of the following:\n// 1) Is a $key in the $breakpoints map\n// 2) Is a number\n// 3) Is a \"max\", \"max-width\" or \"max-height\" string\n@function mappy-validate($query, $breakpoints) {\n $_return: null;\n\n @if map-has-key($breakpoints, $query) {\n $_return: map-get($breakpoints, $query);\n }\n\n @else if type-of($query) == number {\n $_return: $query;\n }\n\n @else if $query == \"max\" or $query == \"max-height\" or $query == \"max-width\" {\n $_return: 0;\n }\n\n @else {\n $_return: null;\n }\n @return $_return;\n}\n\n// Mappy Convert To Em [Function]\n// -------------------------------\n// Checks and converts px values to em. Leave other units untouched.\n\n@function mappy-convert-to-em($val) {\n @if unit($val) == \"px\" or $val == 0 {\n @return mappy-em($val);\n } @else if unit($val) == \"em\" {\n @return $val;\n } @else if unit($val) == \"rem\" {\n @return mappy-strip-unit($val) * 1em;\n } @else {\n @error unquote(\"Breakpoint value must have a unit if it's a number\");\n }\n}\n\n// Mappy Em [Function]\n// --------------------\n// Converts pixels to em with $base-font-size\n// - https://gist.github.com/ijy/1441967\n@function mappy-em($target, $context: 16px) {\n @if $target == 0 {\n @return 0;\n }\n @return $target / $context * 1em;\n}\n\n@function mappy-strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n// Implode [Function]\n// --------------------\n// Implode a list into a string\n@function implode($list, $glue: ' ') {\n $res: null;\n $len: length($list);\n\n @for $i from 1 through $len {\n $e: nth($list, $i);\n @if $i == $len {\n $res: unquote(\"#{$res}#{$e}\");\n }\n @else {\n $res: unquote(\"#{$res}#{$e}#{$glue}\");\n }\n }\n\n @return $res;\n}\n","// Buttons ----------------------------------------------------------------- \n\n.btn {\n\tbackground: $color-button-bg;\n\tborder: none;\n\tborder-radius: 50px;\n\tcolor: $color-button-txt;\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tfont: $font-weight-bold ms(-5) $heading;\n\tletter-spacing: $letter-spacing * 3;\n\tpadding: baseline(3) baseline(6);\n\tvertical-align: middle;\n\ttext-align: center;\n\ttext-transform: lowercase;\n\ttransition: all 0.24s ease;\n\twidth: 100%;\n\t@include mappy-bp(sm) {\n\t\twidth: auto\n\t}\t\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tbackground: $color-button-bg-hover;\n\t\t\n\t\tcolor: $color-button-txt-hover;\n\t}\n\t&:focus {\n\t\toutline: 2px dotted $color-button-border-hover;\n\t}\n\t&:disabled {\n\t\tbackground-color: $color-button-disabled-bg;\n\t\tborder-color: $color-button-disabled-border;\n\t\tcolor: $color-text-light;\n\t\tcursor: not-allowed;\n\t}\n}\n\n[type=button],\n[type=submit],\nbutton {\n\t@extend .btn;\n\t@include appearance-none;\n}\n","// Forms ----------------------------------------------------------------- \n\nfieldset {\n\tborder: 1px solid $color-input-border;\n\tborder-radius: 6px;\n\tmargin: 0 0 baseline(6);\n\tpadding: baseline(6);\n\t&>legend {\n\t\tmargin-left: -1rem;\n\t\tpadding: 0 1rem;\n\t}\n}\n\nlegend {\n\tfont-weight: $font-weight-bold;\n}\n\nlabel {\n\tfont-weight: $font-weight-bold;\n\tmargin: 0 baseline(4) baseline(3) 0;\n}\n\noption {\n\tfont-weight: $font-weight-normal;\n}\n\n[type=text],\n[type=url],\n[type=tel],\n[type=number],\n[type=email],\n[type=search],\ntextarea,\nselect {\n\tbackground-color: $color-input-bg;\n\tborder: 1px solid $color-input-border;\n\tborder-radius: 50px;\n\tfont-size: 1rem;\n\toutline: none;\n\tpadding: baseline(2) baseline(3);\n\twidth: 100%;\n\ttransition: all 0.24s ease-out;\n\t@include mappy-bp(sm) {\n\t\twidth: auto\n\t}\n\t@include appearance-none;\n\t&:focus {\n\t\tbox-shadow:inset 0 0 2px $color;\n\t}\n}\n\n[type=checkbox],\n[type=radio] {\n\tdisplay: none;\n\t+label {\n\t\tdisplay: inline-block;\n\t\tcursor: pointer;\n\t\ttop: 0;\n\t\tmargin-right: baseline(6);\n\t}\n}\n\n.checkbox,\n.radio {\n\t&:before {\n\t\tborder: 1px solid $color-input-border;\n\t\tborder-radius: 2px;\n\t\tcontent: \"\";\n\t\tdisplay: inline-block;\n\t\theight: baseline(5);\n\t\tline-height: baseline(5);\n\t\tmargin-right: baseline(4);\n\t\tvertical-align: middle;\n\t\ttext-align: center;\n\t\twidth: baseline(5);\n\t}\n}\n\n.radio:before {\n\tborder-radius: 50%;\n}\n\n[type=checkbox]:checked+.checkbox:before {\n\tcontent: \"\\2713\";\n\tcolor: $color-input-bg-color;\n\tfont-weight: $font-weight-bold;\n}\n\n[type=radio]:checked+.radio:before {\n\tbox-shadow: inset 0 0 0 4px $color-input-bg;\n\tcontent: \"\";\n\tbackground: $color-input-bg-color;\n\tborder: 1px solid $color-input-border;\n}\n\n[type=file] {\n\tmargin-bottom: baseline(6);\n\twidth: 100%;\n}\n\nselect {\n\tmax-width: 100%;\n\twidth: auto;\n\tposition: relative;\n\t&:not([multiple]) {\n\t\tbackground: url('data:image/svg+xml;utf8,') no-repeat 90% 50%;\n\t\tbackground-size: 8px;\n\t\tpadding-right: baseline(12);\n\t}\n}\n\nselect[multiple] {\n\tborder-radius: 6px;\n\tpadding: baseline(6);\n\twidth: 100%;\n\t&:hover {\n\t\tborder-color: $color-input-border;\n\t}\n\t&:focus {\n\t\tborder-color: $color-input-border-focus;\n\t}\n\t&:disabled {\n\t\tbackground-color: $color-button-disabled-bg;\n\t\tcursor: not-allowed;\n\t\t&:hover {\n\t\t\tborder-color: $color-input-border;\n\t\t}\n\t}\n}\n\ntextarea {\n\tborder-radius: 6px;\n\tdisplay: block;\n\toverflow: auto;\n\tresize: vertical;\n\tmax-width: 100%;\n}\n","// CSS Grid Layout ----------------------------------------------------------------- \n\n// Main columns\n.container {\n\tdisplay: grid;\n\tgrid-gap: calc(#{baseline(7)} + 0.5vw);\n\tgrid-template-columns: 1fr auto 1fr;\n\t@include mappy-bp(md) {\n\t\tgrid-template-columns: 1fr minmax(auto, $main-col-width) $sidebar-width 1fr;\n\t}\n}\n\n.top {\n\tgrid-column: 2/3;\n\t@include mappy-bp(md) {\n\t\tgrid-column: 2/4;\n\t}\n}\n\n.footer {\n\tgrid-column: 2/3;\n\t@include mappy-bp(md) {\n\t\tgrid-column: 2/4;\n\t}\n}\n\n.main {\n\tgrid-column: 2/3;\n\t&--full {\n\t\tgrid-column: 2/4;\n\t}\n\t&--grid {\n\t\talign-content: start;\n\t\tdisplay: grid;\n\t\tgrid-gap: calc(#{baseline(7)} + 0.5vw);\n\t\t@include mappy-bp(sm) {\n\t\t\tgrid-template-columns: repeat(6, 1fr);\n\t\t\t&>.article {\n\t\t\t\tgrid-column: span 3;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.sidebar {\n\tgrid-column: 2/3;\n\t@include mappy-bp(md) {\n\t\tgrid-column: 3/4;\n\t}\n}\n\n// Content sections \n.hero,\n.page-header--listing {\n\t@include mappy-bp(sm) {\n\t\tgrid-column: span 6;\n\t}\n}\n\n.featured-posts {\n\t@include mappy-bp(sm) {\n\t\tgrid-column: span 6;\n\t\tdisplay: grid;\n\t\tgrid-column-gap: calc(#{baseline(7)} + 0.5vw);\n\t\tgrid-template-columns: repeat(3, 1fr);\n\t\t&>h3 {\n\t\t\tgrid-column: span 3;\n\t\t}\n\t}\n}\n\n.pagination {\n\t@include mappy-bp(sm) {\n\t\tgrid-column: span 6;\n\t}\n}\n","// Header ----------------------------------------------------------------- \n\n.top {\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\tposition: relative;\n}\n","// Logo ----------------------------------------------------------------- \n\n.logo {\n\tcolor: $color-logo !important;\n\tfont-family: $logo;\n\tfont-weight: 800;\n\t\n\t@include fluid-type(font-size, $minScreen, $maxScreen, ms(6), ms(10));\n\t@include mappy-bp(md) {\n\t\tmargin: 0;\n\t}\n}\n","// Menu ----------------------------------------------------------------- \n\n.navbar {\n\t&__menu {\n\t\t// before \"is opened\"\n\t\tfont-family: $font-2;\n\t\tfont-weight: $font-weight-bold;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\t@include mappy-bp(max md) {\n\t\t\tbackground: $color-menu;\n\t\t\theight: 100vh;\n\t\t\tleft: 0;\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 2.99rem;\n\t\t\ttransition: all 0.3s ease-out;\n\t\t\tvisibility: hidden;\n\t\t\ttransform: translateY(-5%);\n\t\t\twidth: 100%;\n\t\t\tz-index: 1;\n\t\t\t&>li {\n\t\t\t\ttransition: all 0.3s ease-out;\n\t\t\t\tborder-bottom: 1px solid $color-border-light;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\t\t@include mappy-bp(md) {\n\t\t\tmax-height: none;\n\t\t\toverflow: visible;\n\t\t}\n\t\tpadding: 0;\n\t\tli {\n\t\t\tcolor: $color-menu-link;\n\t\t\tpadding: 0;\n\t\t\ttext-align: center;\n\t\t\t@include mappy-bp(md) {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmargin: 0 0 0 baseline(6);\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t&:hover,\n\t\t\t&[aria-expanded=\"true\"] {\n\t\t\t\tcursor: pointer;\n\t\t\t\t&>ul {\n\t\t\t\t\t@include mappy-bp(md) {\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\tli {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\ta,\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tcolor: $color-menu-link;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\t@include mappy-bp(max md) {\n\t\t\t\t\tpadding: baseline(4) 0;\n\t\t\t\t}\n\t\t\t\t&:after {\n\t\t\t\t\tcontent: \"\";\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tmargin: 0 auto;\n\t\t\t\t}\n\t\t\t\t&:hover:not(span) {\n\t\t\t\t\tcolor: $color-menu-link-hover;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&__submenu {\n\t\t@include mappy-bp(max md) {\n\t\t\tmargin: 0;\n\t\t}\n\t\t@include mappy-bp(md) {\n\t\t\tbackground: $color-menu;\n\t\t\tbox-shadow: 0 0 6px rgba($dark, 0.15);\n\t\t\tdisplay: none;\n\t\t\tleft: auto;\n\t\t\tmargin: 15px 0 0;\n\t\t\tpadding: baseline(2) 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\twidth: auto;\n\t\t\tz-index: 2000;\n\t\t\t&:before {\n\t\t\t\t// submenu top space\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 15px;\n\t\t\t\tleft: 0;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: -15px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\tli {\n\t\t\t\tborder: none;\n\t\t\t\tfont-weight: normal;\n\t\t\t\tmargin: 0;\n\t\t\t\t&>a {\n\t\t\t\t\tpadding: baseline(2) baseline(10);\n\t\t\t\t\t@include mappy-bp(max md) {\n\t\t\t\t\t\tpadding: baseline(1) 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&:hover {\n\t\t\t\t\t&>a {\n\t\t\t\t\t\tbackground: $gray-light;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tul {\n\t\t\t\t\t// second and the next lavel\n\t\t\t\t\tleft: 90%;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\ttransform: translate(-10%, 0);\n\t\t\t\t\t&.navbar__submenu--reversed {\n\t\t\t\t\t\tleft: auto;\n\t\t\t\t\t\tright: 90%;\n\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&__toggle {\n\t\tbackground: none;\n\t\tborder: none;\n\t\tborder-top: 2px solid $dark;\n\t\tborder-radius: 0;\n\t\tdisplay: block;\n\t\t@include mappy-bp(md) {\n\t\t\tdisplay: none;\n\t\t}\n\t\theight: 14px;\n\t\tpadding: 0;\n\t\t@include centerXY(false, true);\n\t\tright: 0;\n\t\ttext-indent: -99999rem;\n\t\twidth: 1.6rem;\n\t\tz-index: 3;\n\t\t&:before {\n\t\t\tborder-top: 2px solid $dark;\n\t\t\tcontent: \"\";\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\twidth: 100%;\n\t\t}\n\t\t&:after {\n\t\t\tborder-bottom: 2px solid $dark;\n\t\t\tcontent: \"\";\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\t&:focus {\n\t\t\tbackground: none;\n\t\t\toutline: none;\n\t\t\tborder: none;\n\t\t\tborder-top: 2px solid $color-border;\n\t\t}\n\t\t&:hover {\n\t\t\tbackground: none;\n\t\t}\n\t}\n}\n\n.is-opened {\n\t&>ul {\n\t\topacity: (1);\n\t\toverflow: auto;\n\t\tvisibility: visible;\n\t\ttransform: translateY(0);\n\t\tli {\n\t\t\tpadding: 0;\n\t\t\ttransform: translateY(0);\n\t\t\tul {\n\t\t\t\theight: 0;\n\t\t\t\topacity: (0);\n\t\t\t\ttransition: all 0.3s ease-out;\n\t\t\t\ttransform: translateY(-10%);\n\t\t\t\t& li {\n\t\t\t\t\tborder-top: 1px solid $color-border-light;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:hover>ul {\n\t\t\t\theight: auto;\n\t\t\t\topacity: (1);\n\t\t\t\ttransform: translateX(0);\n\t\t\t}\n\t\t\t&[aria-expanded=\"true\"]>ul {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\t}\n}\n\n@include mappy-bp(max md) {\n\t.has-submenu {\n\t\t&:after {\n\t\t\tbackground: $white;\n\t\t\tborder-right: 1px solid $color-border;\n\t\t\tborder-bottom: 1px solid $color-border;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 8px;\n\t\t\tposition: absolute;\n\t\t\tright: 10px;\n\t\t\ttop: 1rem;\n\t\t\ttransform: rotate(45deg);\n\t\t\twidth: 8px;\n\t\t}\n\t}\n}\n","// Sidebar ----------------------------------------------------------------- \n\n.sidebar {\n\tinput {\n\t\twidth: 100%;\n\t\t&+input {\n\t\t\tmargin-top: baseline(2);\n\t\t}\n\t}\n}\n\n.box {\n\tmargin-bottom: calc(#{baseline(12)} + 1vw);\n\t&--gray {\n\t\tbackground: $gray-light;\n\t\tpadding: calc(#{baseline(7)} + 0.5vw);\n\t\t&>.box__title {\n\t\t\tborder-top: none;\n\t\t\tpadding-top: 0;\n\t\t}\n\t}\n\t&__title {\n\t\tcolor: $color-text-color;\n\t\tmargin: 0 0 calc(#{baseline(7)} + 0.5vw);\n\t}\n\tul {\n\t\tmargin-left: 0;\n\t}\n}\n\n.owner {\n\ttext-align: center;\n\t&>img {\n\t\tborder-radius: 50%;\n\t\tmax-width: 7rem;\n\t}\n\t&>p {\n\t\tfont-size: ms(-2);\n\t}\n\t&__email {\n\t\tdisplay: block;\n\t\tmargin-top: baseline(3);\n\t\ttext-decoration: underline\n\t}\n}\n\n.authors {\n\tlist-style: none;\n\t&>li {\n\t\talign-items: center;\n\t\tclear: both;\n\t\tdisplay: flex;\n\t\tmargin: 0 0 calc(#{baseline(6)} + 0.75vw);\n\t\tpadding: 0;\n\t}\n\t&__img {\n\t\tmargin-right: 2rem;\n\t}\n\t&__title {\n\t\tdisplay: block;\n\t\tfont-family: $heading;\n\t\tfont-weight: $font-weight-bold;\n\t}\n}\n\n.tags {\n\t&>li {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tpadding-left: 0;\n\t}\n}\n\n.newsletter {\n\t&__note {\n\t\tcolor: $gray;\n\t\tfont-size: ms(-4);\n\t\tmargin: 0 0 baseline(4);\n\t}\n}\n","// Utility classes ----------------------------------------------------------\n\n.u-small {\n\tcolor: $gray;\n\tfont-family: $font-2;\n\tfont-weight: $font-weight-normal;\n\tfont-size: ms(-4);\n}\n\n.u-icon {\n\tfill: rgba($dark, 0.8);\n\theight: ms(0);\n\twidth: ms(0);\n\ttransition: all 0.24s ease-out;\n}\n\n\n// Hero ----------------------------------------------------------\n\n.hero {\n\theight: $hero-height;\n\tposition: relative;\n\t&__image {\n\t\theight: $hero-height;\n\t\tobject-fit: cover;\n\t\topacity: 0.9;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\t&__text {\n\t\tcolor: $white;\n\t\ttext-align: center;\n\t\twidth: 80%;\n\t\t@include centerXY(true, true);\n\t\t&>h1 {\n\t\t\tcolor: $white;\n\t\t}\n\t\t&>.btn {\n\t\t\tmargin-top: baseline(6);\n\t\t}\n\t}\n}\n\n\n// Post listing (index, author, tag) ------------------------------\n\n.page-header {\n\tborder-top: 3px solid $color-border;\n\tpadding-top: calc(#{baseline(7)} + 0.5vw);\n\t&__title {\n\t\tcolor: $color-text-color;\n\t}\n\t&__desc {\n\t\tmargin-top: calc(#{baseline(1)} + 0.5vw);\n\t}\n}\n\n.article {\n\tmargin-bottom: calc(#{baseline(6)} + 0.5vw);\n\t&__title {\n\t\t@include fluid-type(font-size, $minScreen, $maxScreen, ms(2), ms(3));\n\t}\n\t&__meta {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\t&__avatar {\n\t\t\tborder-radius: 50%;\n\t\t\theight: baseline(8);\n\t\t\tmargin-right: baseline(3);\n\t\t\twidth: baseline(8);\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n}\n\n\n// Post page ----------------------------------------------------------\n\n.post {\n\tborder-top: 3px solid $color-border;\n\tpadding-top: calc(#{baseline(7)} + 0.5vw);\n\t&__meta {\n\t\tmargin: calc(#{baseline(4)} + 0.25vw) 0 0 0;\n\t\t&>li {\n\t\t\tdisplay: inline-block;\n\t\t\tlist-style: none;\n\t\t\tpadding: baseline(1) baseline(4) 0 0;\n\t\t\t&>svg {\n\t\t\t\tfill: #ffc400;\n\t\t\t\tvertical-align: top;\n\t\t\t}\n\t\t}\n\t}\n\t&__image {\n\t\t&--left {\n\t\t\tfloat: left;\n\t\t\tmargin-right: calc(#{baseline(7)} + 0.5vw);\n\t\t\tmax-width: 50%;\n\t\t}\n\t\t&--right {\n\t\t\tfloat: right;\n\t\t\tmargin-left: calc(#{baseline(7)} + 0.5vw);\n\t\t\tmax-width: 50%;\n\t\t}\n\t\t&--center {\n\t\t\tdisplay: block;\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t\ttext-align: center;\n\t\t}\n\t\t&--wide {\n\t\t\ttext-align: center;\n\t\t}\n\t\t&--full {\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\t&__video {\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\tpadding-top: baseline(6);\n\t\tpadding-bottom: 56.25%;\n\t\tposition: relative;\n\n\t\t& > iframe {\n\t\t\tborder: none;\n\t\t\theight: 100%;\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t} \n\t&__entry {\n\t\tmargin-top: calc(#{baseline(7)} + 1vw);\n\t\t@include mappy-bp(max md) {\n\t\t\tmax-width: 36rem;\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t}\n\t\t&>:nth-child(1) {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\ta {\n\t\t\t@include links ($color-link-hover, $color-link, $color-link, $color-link);\n\t\t}\n\t\ta:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\t&__footer {\n\t\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\t\t@include mappy-bp(max sm) {\n\t\t\ttext-align: center;\n\t\t}\n\t\t&>.box {\n\t\t\tborder-top: 1px solid $color-border-light;\n\t\t\tpadding-top: calc(#{baseline(7)} + 0.5vw);\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\t&__last-updated {\n\t\tcolor: $gray;\n\t\tfont-size: ms(-4);\n\t\tmargin-bottom: calc(#{baseline(7)} + 0.5vw);\n\t}\n\t&__share {\n\t\t&>a {\n\t\t\tbackground: $gray-light;\n\t\t\tborder-radius: 50px;\n\t\t\tdisplay: inline-block;\n\t\t\tfont-family: $font-2;\n\t\t\tfont-size: ms(-4);\n\t\t\tpadding: baseline(2) baseline(6);\n\t\t\tmargin: baseline(2) baseline(2) 0;\n\t\t\t&>.u-icon {\n\t\t\t\tpointer-events: none;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmargin-right: baseline(2);\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\t&__tag {\n\t\tmargin-left: 0;\n\t\tmargin-top: 0;\n\t\tli {\n\t\t\tdisplay: inline-block;\n\t\t\t&>a {\n\t\t\t\tbackground: $gray-light;\n\t\t\t\tborder-radius: 50px;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-family: $font-2;\n\t\t\t\tfont-size: ms(-4);\n\t\t\t\tpadding: baseline(2) baseline(6);\n\t\t\t}\n\t\t}\n\t}\n\t&__bio {\n\t\t&>img {\n\t\t\tborder-radius: 50%;\n\t\t\theight: baseline(18);\n\t\t\twidth: baseline(18);\n\t\t}\n\t}\n\t&__nav {\n\t\tcolor: $gray;\n\t\tdisplay: flex;\n\t\tfont-size: ms(-4);\n\t\tjustify-content: space-between;\n\t\tmargin-bottom: calc(#{baseline(7)} + 0.5vw);\n\t\t&__link {\n\t\t\tcolor: $color-text-light;\n\t\t\t@include mappy-bp(sm) {\n\t\t\t\talign-items: flex-start;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-around;\n\t\t\t}\n\t\t\t&>img {\n\t\t\t\twidth: 100px;\n\t\t\t\t@include mappy-bp(max sm) {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\th5 {\n\t\t\t\t\ttransition: all 0.12s linear;\n\t\t\t\t\tcolor: $color-link-hover;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\th5 {\n\t\t\tfont-size: ms(-2);\n\t\t\tmargin: baseline(1) 0 0;\n\t\t\tposition: relative;\n\t\t}\n\t\t&__prev {\n\t\t\tflex-basis: 50%;\n\t\t\ttext-align: left;\n\t\t}\n\t\t&__next {\n\t\t\tflex-basis: 50%;\n\t\t\tmargin-left: auto;\n\t\t\ttext-align: right;\n\t\t}\n\t\t&__text {\n\t\t\t@include mappy-bp( sm) {\n\t\t\t\twidth: 55%;\n\t\t\t}\n\t\t}\n\t}\n\t&__related {\n\t\t&__wrap {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t\tmargin: calc(#{baseline(7)} + 0.5vw) -2% 0;\n\t\t\twidth: 104%;\n\t\t\t@include mappy-bp(md) {\n\t\t\t\tflex-wrap: no-wrap;\n\t\t\t}\n\t\t\tfigure {\n\t\t\t\tmargin: 0;\n\t\t\t\tflex-basis: 50%;\n\t\t\t\tpadding: baseline(3) 2%;\n\t\t\t\t@include mappy-bp(sm) {\n\t\t\t\t\tflex-basis: 33.333%;\n\t\t\t\t}\n\t\t\t}\n\t\t\tfigcaption {\n\t\t\t\t&>time {\n\t\t\t\t\tcolor: $gray;\n\t\t\t\t\tfont-size: ms(-3);\n\t\t\t\t\tmargin: 0 0 baseline(3);\n\t\t\t\t}\n\t\t\t}\n\t\t\th4 {\n\t\t\t\tfont-size: ms(-2);\n\t\t\t\tmargin: baseline(6) 0 baseline(2);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n// Comments ----------------------------------------------------------\n\n.comments {\n\tborder-top: 1px solid $color-border-light;\n\tpadding-top: calc(#{baseline(7)} + 0.5vw);\n\ttext-align: center;\n\t&>h3 {\n\t\tmargin-bottom: calc(#{baseline(7)} + 0.5vw);\n\t}\n}\n\n\n// Author page ----------------------------------------------------------\n\n.author {\n\t&__avatar {\n\t\tborder-radius: 50%;\n\t\theight: baseline(18);\n\t\tmargin-bottom: calc(#{baseline(7/2)} + 0.5vw);\n\t\twidth: baseline(18);\n\t}\n}\n\n\n// Search page ----------------------------------------------------------\n\n.search {\n\t&__form {\n\t\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\t}\n\t&__input {\n\t\twidth: 100%;\n\t}\n}\n\n\n// Google Custom Search -------------------------------------------------\n\n.gs-webResult {\n\tborder-top: 1px solid $color-border-light;\n\tpadding-top: 1rem;\n}\n\n.gsc-table-result {\n\tmargin-top: baseline(2);\n\twhite-space: initial;\n\ttd {\n\t\tpadding: 0;\n\t}\n}\n\n\n// Required by WYSIWYG editor --------------------------------------------\n\n.align-left {\n\ttext-align: left;\n}\n\n.align-right {\n\ttext-align: right;\n}\n\n.align-center {\n\ttext-align: center;\n}\n\n.align-justify {\n\ttext-align: justify;\n}\n\n.msg {\n\tpadding: baseline(4) baseline(6);\n\t&--highlight {\n\t\tbackground-color: #fff7e5;\n\t}\n\t&--info {\n\t\tbackground-color: #d9edf7;\n\t}\n\t&--success {\n\t\tbackground: #d5efc2;\n\t}\n}\n\n.dropcap {\n\t&:first-letter {\n\t\tcolor: $color-headings;\n\t\tfloat: left;\n\t\tfont-family: $heading;\n\t\tline-height: 0.6;\n\t\tmargin-right: baseline(2);\n\t\tpadding: baseline(2) baseline(2) baseline(2) 0;\n\t\t@include fluid-type(font-size, $minScreen, $maxScreen, ms(16), ms(24));\n\t}\n}\n","// Pagination ----------------------------------------------------------------- \n\n.pagination {\n\t&>a {\n\t\t\n\t\t@include mappy-bp(sm) {\n\t\t\tmargin: 0 baseline(2) 0 0;\n\t\t}\n\t}\n}\n","// Footer ----------------------------------------------------------------- \n\n.footer {\n\tborder-top: 1px solid $color-border-light;\n\tfont-family: $font-2;\n\tmargin-top: calc(#{baseline(7)} + 0.5vw);\n\tpadding: calc(#{baseline(7)} + 0.5vw) 0;\n\ttext-align: center;\n\t&__copyright {}\n\t&__social {\n\t\t&>a {\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 0 baseline(2);\n\t\t}\n\t}\n\t&__copyright+&__social {\n\t\tmargin-top: baseline(6);\n\t}\n}\n","// Grid gallery\r\n.gallery {\r\n\tmargin: calc(#{baseline(6)} + 1vw) baseline(-2);\r\n\t@include mappy-bp(320px) {\r\n\t\tdisplay: flex;\r\n\t\tflex-wrap: wrap;\r\n\t}\r\n\t&[data-columns=\"1\"] {\r\n\t\t.gallery__item {\r\n\t\t\t@include mappy-bp(320px) {\r\n\t\t\t\twidth: 100%;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&[data-columns=\"2\"] {\r\n\t\t.gallery__item {\r\n\t\t\t@include mappy-bp(480px) {\r\n\t\t\t\twidth: 50%\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&[data-columns=\"3\"] {\r\n\t\t.gallery__item {\r\n\t\t\t@include mappy-bp(sm) {\r\n\t\t\t\twidth: 33%\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&[data-columns=\"4\"] {\r\n\t\t.gallery__item {\r\n\t\t\t@include mappy-bp(md) {\r\n\t\t\t\twidth: 25%;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&[data-columns=\"5\"] {\r\n\t\t.gallery__item {\r\n\t\t\t@include mappy-bp(md) {\r\n\t\t\t\twidth: 20%;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&[data-columns=\"6\"] {\r\n\t\t.gallery__item {\r\n\t\t\t@include mappy-bp(md) {\r\n\t\t\t\twidth: 16.666%;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&[data-columns=\"7\"] {\r\n\t\t.gallery__item { \r\n\t\t\t@include mappy-bp(md) {\r\n\t\t\t\twidth: 14.285%;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&[data-columns=\"8\"] {\r\n\t\t.gallery__item {\r\n\t\t\t@include mappy-bp(md) {\r\n\t\t\t\twidth: 12.5%;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&__item {\r\n\t\tmargin: 0;\r\n\t\tpadding: baseline(2);\r\n\r\n\t\t@include mappy-bp(320px) {\r\n\t\t\twidth: 50%\r\n\t\t}\r\n\t\t@include mappy-bp(480px) {\r\n\t\t\twidth: 33.333%\r\n\t\t}\r\n\t\t@include mappy-bp(sm) {\r\n\t\t\twidth: 25%\r\n\t\t}\r\n\t\timg {\r\n\t\t\tdisplay: block;\r\n\t\t\twidth: 100%; \r\n\t\t}\t\t\r\n\t}\r\n}\r\n\r\n// Photoswipe lightbox\r\n.pswp {\r\n\t&--dark { \r\n\t\t.pswp__bg {\r\n\t\t\tbackground: black;\r\n\t\t}\r\n\t}\r\n\r\n\t&--light {\r\n\t\t.pswp__bg {\r\n\t\t\tbackground: white;\r\n\t\t}\r\n\t\t.pswp__counter {\r\n\t\t\tcolor: $dark;\r\n\t\t}\r\n\t\t.pswp__caption__center {\r\n\t\t\tcolor: $color-text;\r\n\t\t}\t\t\r\n\t}\r\n}\r\n\r\n"]} \ No newline at end of file diff --git a/assets/css/photoswipe.css b/assets/css/photoswipe.css new file mode 100644 index 0000000..52f5600 --- /dev/null +++ b/assets/css/photoswipe.css @@ -0,0 +1,790 @@ +/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ + +/* + Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) +*/ + +/* pswp = photoswipe */ + +.pswp { + display: none; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + overflow: hidden; + -ms-touch-action: none; + touch-action: none; + z-index: 1500; + -webkit-text-size-adjust: 100%; + /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ + -webkit-backface-visibility: hidden; + outline: none; +} + +.pswp * { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +.pswp img { + max-width: none; +} + +/* style is added when JS option showHideOpacity is set to true */ + +.pswp--animate_opacity { + /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ + opacity: 0.001; + will-change: opacity; + /* for open/close transition */ + -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); + transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); +} + +.pswp--open { + display: block; +} + +.pswp--zoom-allowed .pswp__img { + /* autoprefixer: off */ + cursor: -webkit-zoom-in; + cursor: -moz-zoom-in; + cursor: zoom-in; +} + +.pswp--zoomed-in .pswp__img { + /* autoprefixer: off */ + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: grab; +} + +.pswp--dragging .pswp__img { + /* autoprefixer: off */ + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + cursor: grabbing; +} + +/* + Background is added as a separate element. + As animating opacity is much faster than animating rgba() background-color. +*/ + +.pswp__bg { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-backface-visibility: hidden; + will-change: opacity; +} + +.pswp__scroll-wrap { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.pswp__container, +.pswp__zoom-wrap { + -ms-touch-action: none; + touch-action: none; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +/* Prevent selection and tap highlights */ + +.pswp__container, +.pswp__img { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; +} + +.pswp__zoom-wrap { + position: absolute; + width: 100%; + -webkit-transform-origin: left top; + transform-origin: left top; + /* for open/close transition */ + -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); + transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); + transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); + transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); +} + +.pswp__bg { + will-change: opacity; + /* for open/close transition */ + -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); + transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); +} + +.pswp--animated-in .pswp__bg, +.pswp--animated-in .pswp__zoom-wrap { + -webkit-transition: none; + transition: none; +} + +.pswp__container, +.pswp__zoom-wrap { + -webkit-backface-visibility: hidden; +} + +.pswp__item { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + overflow: hidden; +} + +.pswp__img { + position: absolute; + width: auto; + height: auto; + top: 0; + left: 0; +} + +/* + stretched thumbnail or div placeholder element (see below) + style is added to avoid flickering in webkit/blink when layers overlap +*/ + +.pswp__img--placeholder { + -webkit-backface-visibility: hidden; +} + +/* + div element that matches size of large image + large image loads on top of it +*/ + +.pswp__img--placeholder--blank { + background: #222; +} + +.pswp--ie .pswp__img { + width: 100% !important; + height: auto !important; + left: 0; + top: 0; +} + +/* + Error message appears when image is not loaded + (JS option errorMsg controls markup) +*/ + +.pswp__error-msg { + position: absolute; + left: 0; + top: 50%; + width: 100%; + text-align: center; + font-size: 14px; + line-height: 16px; + margin-top: -8px; + color: #CCC; +} + +.pswp__error-msg a { + color: #CCC; + text-decoration: underline; +} + +/* + + 1. Buttons + + */ + +/* + + + +
+
+
+
+
+
+
+ + + + +
+
+
+ + + \ No newline at end of file diff --git a/visual-override.js b/visual-override.js index ce403a0..598d681 100755 --- a/visual-override.js +++ b/visual-override.js @@ -187,6 +187,16 @@ var generateOverride = function (params) { color: ${params.textHeroColor}; }`; } + + if(params.galleryItemGap !== '0.53333rem') { + output += ` + gallery__item { + padding: ${params.galleryItemGap}; + } + gallery { + margin: calc(1.6rem + 1vw) -${params.galleryItemGap}; + }`; + } return output; }