Css refactoring (#218)

assets/css/404.css

@@ -0,0 +1 @@
+.l-fullscreen{display:flex;align-items:center;justify-content:center;height:100vh}.l-fullscreen__content{text-align:center;padding:0 20px}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}}@media only screen and (min-width:48rem){.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-404-title{color:var(--primary-foreground-color);letter-spacing:3px;line-height:1;font-size:9rem;font-weight:700;margin:0 0 10px}@media only screen and (min-width:48rem){.m-404-title{letter-spacing:4px;font-size:12rem;margin-bottom:5px}}.m-404-subtitle{color:var(--primary-foreground-color);letter-spacing:.4px;line-height:1;font-size:1.25rem;font-weight:600;margin-bottom:20px}@media only screen and (min-width:48rem){.m-404-subtitle{letter-spacing:.5px;font-size:1.5rem}}.m-404-text{letter-spacing:.3px;line-height:1.4;font-size:.875em;padding:0 20px;margin-bottom:25px}@media only screen and (min-width:48rem){.m-404-text{font-size:1rem;padding:0;margin-bottom:30px}}

assets/css/home.css

@@ -0,0 +1 @@
+.m-featured-slider{position:relative;overflow:hidden!important;height:350px;margin:-40px -20px 40px;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider:hover{transform:translateY(-5px);box-shadow:var(--article-shadow-hover),0 0 0 transparent}}@media only screen and (min-width:48rem){.m-featured-slider{width:100%;height:420px;margin:-40px 10px 20px;border-radius:10px}}@media only screen and (min-width:64rem){.m-featured-slider{width:calc(66.66667% - 40px);margin:0 20px 40px;overflow:unset}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{list-style-type:none;padding:0;margin:0;height:100%}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px;overflow:hidden}}.m-featured-slider__list .slick-list,.m-featured-slider__list .slick-slide>div,.m-featured-slider__list .slick-track,.m-featured-slider__list__item{height:100%}.m-featured-article{position:relative;height:100%;overflow:hidden;background-color:var(--primary-subtle-color);z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--link-color)}.m-featured-article__picture{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1}.m-featured-article__picture img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;opacity:.7}.m-featured-article__meta{position:absolute;top:20px;left:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{top:40px;left:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{display:block;width:35px;height:35px;background-color:#fff;border:2px solid #fff;border-radius:50%;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-featured-article__author div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:50%}.m-featured-article__tag{color:#fff;letter-spacing:.3px;font-weight:700;font-size:1rem}.m-featured-article__ribbon{display:flex;align-items:center;justify-content:center;position:absolute;top:26px;right:20px;width:24px;height:24px;color:#000;background-color:#fff;border-radius:50%;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{justify-content:flex-start;top:47px;right:40px;width:auto;height:22px;padding:0 7px;font-size:.875rem;font-weight:600;border-radius:15px}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{right:auto;left:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{right:auto;left:40px}}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon span:first-of-type{margin-right:0;margin-left:4px}}.m-featured-article__content{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:120px 20px 20px;position:relative;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;letter-spacing:.4px;line-height:1.3;font-size:1.625rem;font-weight:600;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{letter-spacing:.5px;font-size:2.25em;max-width:80%}}.m-featured-article__timestamp{display:flex;align-items:center;color:#fff;letter-spacing:.2px;font-size:.875rem;font-weight:600}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}

assets/css/listing.css

@@ -0,0 +1 @@
+.l-grid{padding-bottom:20px}@media only screen and (min-width:48rem){.l-grid{display:flex;flex-wrap:wrap;margin:0 -10px}}@media only screen and (min-width:80rem){.l-grid{margin:0 -20px}}@media only screen and (min-width:48rem){.l-grid.centered{justify-content:center}}.m-pagination{display:flex;align-items:center;justify-content:center;margin:0 auto 40px}.m-pagination__text{display:inline-block;color:var(--titles-color);letter-spacing:.2px;text-align:center;font-size:.875rem}@media only screen and (min-width:48rem){.m-pagination__text{letter-spacing:.3px;font-size:1rem}}

assets/css/newsletter.css

@@ -0,0 +1 @@
+.l-fullscreen{display:flex;align-items:center;justify-content:center;height:100vh}.l-fullscreen__content{text-align:center;padding:0 20px}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}}@media only screen and (min-width:48rem){.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-back{display:flex;align-items:center;position:absolute;top:20px;left:20px;color:var(--titles-color);letter-spacing:.2px;font-size:.875rem;font-weight:600;cursor:pointer;z-index:2}@media only screen and (min-width:48rem){.m-back{top:40px;letter-spacing:.3px;font-size:1rem}}.m-back span{color:inherit;display:inline-block}.rtl .m-back span:first-of-type{order:2}.m-back__icon{font-size:.75rem;margin-right:10px}@media only screen and (min-width:48rem){.m-back__icon{font-size:.875rem}}.rtl .m-back__icon{order:1}.m-subscribe-section{padding:50px 0;background-color:var(--secondary-subtle-color)}@media only screen and (min-width:48rem){.m-subscribe-section{padding:80px 0}}@media only screen and (min-width:48rem){.m-subscribe-section__content{display:flex;align-items:center;justify-content:space-between}}.m-subscribe-section__text{text-align:center;margin-bottom:30px}@media only screen and (min-width:48rem){.m-subscribe-section__text{flex:1;text-align:left;padding-right:75px;margin-bottom:0}}@media only screen and (min-width:48rem){.rtl .m-subscribe-section__text{text-align:right;padding-right:0;padding-left:75px}}.m-subscribe-section__title{color:var(--titles-color);letter-spacing:.3px;line-height:1.3;font-size:1.25rem;font-weight:600;margin:0 0 20px}@media only screen and (min-width:48rem){.m-subscribe-section__title{letter-spacing:.3px;font-size:1.5rem;margin-bottom:15px}}.m-subscribe-section__description{letter-spacing:.2px;line-height:1.4}@media only screen and (min-width:48rem){.m-subscribe-section__description{font-size:1.125rem}}@media only screen and (min-width:48rem){.m-subscribe-section__form{width:300px;margin:0 auto}}.m-subscribe-section__container.loading .m-button{pointer-events:none}.m-subscribe-section__container.success .m-subscribe__success{display:block}.m-subscribe-section__container.success .m-subscribe__error,.m-subscribe-section__container.success .m-subscribe__form,.m-subscribe-section__container.success .m-subscribe__invalid{display:none}.m-subscribe-section__container.error .m-subscribe__error,.m-subscribe-section__container.invalid .m-subscribe__invalid{display:block}.m-subscribe-section__container.error .m-subscribe__form{margin-bottom:20px}.m-subscribe-section__container .m-subscribe__error,.m-subscribe-section__container .m-subscribe__invalid,.m-subscribe-section__container .m-subscribe__success{display:none}.m-subscribe__success_icon{display:block;width:64px;height:64px;margin:0 auto 25px}.m-subscribe__error{text-align:center}

assets/js/helpers.js

@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},l=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},12:function(e,t,n){n(1),e.exports=n(22)},22:function(e,t){}},[[12,0,1]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return c})),n.d(t,"adjustImageGallery",(function(){return s})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},l=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),c="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=c}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},12:function(e,t,n){n(1),n(22),n(27),n(29),n(31),n(33),e.exports=n(35)},22:function(e,t){},27:function(e,t){},29:function(e,t){},31:function(e,t){},33:function(e,t){},35:function(e,t){}},[[12,0,1]]]);

author.hbs

@@ -2,6 +2,11 @@
 This template is used for the author page.
 --}}
 
+{{!-- This block loads specific styles for the author page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}

default.hbs

@@ -27,6 +27,9 @@
     </style>
     <link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" media="screen" />
 
+    {{!-- This #block helper will inject a stylesheet for a specific page --}}
+    {{{block "styles"}}}
+
     {{!-- This #block helper will pull data from the hero partial 
     to inject styles of the hero image to make it responsive --}}
     {{{block "herobackground"}}}

error-404.hbs

@@ -2,6 +2,11 @@
 This error template is used for all 404 errors, which might occur on your site.
 --}}
 
+{{!-- This block loads specific styles for the 404 page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/404.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}

index.hbs

@@ -3,6 +3,12 @@ This template is used for the index page.
 It can be used also as the home page or the default page.
 --}}
 
+{{!-- This block loads specific styles for the index page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
+  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.7.3"
+  "version": "0.7.4"
 }

page-authors.hbs

@@ -3,6 +3,11 @@ This template is used for the authors page.
 You must first create a page called Authors in the dashboard to enable it.
 --}}
 
+{{!-- This block loads specific styles for the authors page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}

page-newsletter.hbs

@@ -2,6 +2,11 @@
 This template is used for the subscription page.
 --}}
 
+{{!-- This block loads specific styles for the newsletter page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}

page.hbs

@@ -2,6 +2,11 @@
 This template is used for the posts that are marked as pages.
 --}}
 
+{{!-- This block loads specific styles for the post page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}

post.hbs

@@ -2,6 +2,11 @@
 This template is used for the post page.
 --}}
 
+{{!-- This block loads specific styles for the post page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}

src/package.json

@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@glidejs/glide": "^3.4.1",
-    "aos": "git://github.com/eddiesigner/aos.git#v2",
+    "aos": "eddiesigner/aos.git#v2",
     "fitvids": "^2.0.0",
     "fuse.js": "^6.3.0",
     "headroom.js": "^0.10.3",

src/sass/404.scss

@@ -0,0 +1,8 @@
+@import "common/mixins";
+@import "common/variables";
+
+@import "layouts/fullscreen";
+
+@import"components/404/title";
+@import"components/404/subtitle";
+@import"components/404/text";

src/sass/app.scss

@@ -1,5 +1,3 @@
-// @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700');
-
 @import "common/reset";
 @import "common/mixins";
 @import "common/variables";
@@ -10,16 +8,11 @@
 
 @import "layouts/wrapper";
 @import "layouts/content";
-@import "layouts/post-content";
-@import "layouts/grid";
-@import "layouts/fullscreen";
 
 @import "components/ui/button";
 @import "components/ui/icon-button";
 @import "components/ui/input";
-@import "components/ui/pagination";
 @import "components/ui/section-title";
-@import "components/ui/back";
 @import "components/ui/small-text";
 @import "components/ui/not-found";
 @import "components/ui/alert";
@@ -47,26 +40,10 @@
 @import "components/heading/description";
 @import "components/heading/meta";
 @import "components/articles/article-card";
-@import "components/articles/featured-slider";
-@import "components/articles/featured-article";
-@import "components/articles/recommended";
-@import "components/articles/recommended-articles";
-@import "components/articles/recommended-slider";
-@import "components/articles/share";
-@import "components/subscribe/subscribe-section";
-@import "components/author/author";
-@import "components/author/picture";
-@import "components/author/links";
-@import "components/comments/comments";
-@import "components/comments/load-comments";
 @import "components/search/search";
 @import "components/search/icon";
 @import "components/search/result";
 @import "components/footer";
 
-@import"components/404/title";
-@import"components/404/subtitle";
-@import"components/404/text";
-
 @import "libs/aos/aos";
-@import "libs/glide/glide.core.scss";
+@import "libs/glide/glide.core";

src/sass/common/_helpers.scss

@@ -5,11 +5,13 @@
 }
 
 .sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
   position: absolute;
-  left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .clearfix:before,
@@ -35,9 +37,6 @@
 
 .no-appearance {
   -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  -o-appearance: none !important;
-  -ms-appearance: none !important;
   appearance: none !important;
 }
 

src/sass/common/_mixins.scss

@@ -30,7 +30,6 @@ $break-largest: 90rem; // >= 1440px @ 16px
 @mixin bs($bsval: 0 0 0.83em #333, $due: 0 0 0 transparent) {
   -moz-box-shadow: $bsval, $due;
   -webkit-box-shadow: $bsval, $due;
-  -o-box-shadow: $bsval, $due;
   box-shadow: $bsval, $due;
 }
 
@@ -51,7 +50,6 @@ $break-largest: 90rem; // >= 1440px @ 16px
 
 // Transforms
 @mixin transform($transform: translate3d(0, 0, 0)) {
-  -webkit-transform: $transform;
   -moz-transform: $transform;
   -ms-transform: $transform;
   -o-transform: $transform;

src/sass/common/_reset.scss

@@ -52,10 +52,7 @@ html {
     /* Linux emoji */ "Noto Color Emoji"; /* 2 */
 
   line-height: 1.15; /* 3 */
-  -moz-tab-size: 4; /* 4 */
   tab-size: 4; /* 4 */
-  -ms-text-size-adjust: 100%; /* 5 */
-  -webkit-text-size-adjust: 100%; /* 5 */
   word-break: break-word; /* 6 */
 }
 

src/sass/components/header/_nav.scss

@@ -21,51 +21,51 @@
       display: flex;
       align-items: center;
     }
+  }
 
-    li {
+  li {
-      color: var(--titles-color);
+    color: var(--titles-color);
-      letter-spacing: 0.3px;
+    letter-spacing: 0.3px;
-      font-size: 1.125rem;
+    font-size: 1.125rem;
-      margin-bottom: 15px;
+    margin-bottom: 15px;
+
+    @include respond-to('medium') {
+      margin-bottom: 0;
+      margin-right: 35px;
+      position: relative;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
 
       @include respond-to('medium') {
-        margin-bottom: 0;
+        margin-right: 0;
-        margin-right: 35px;
-        position: relative;
       }
+    }
 
-      &:last-of-type {
+    &.nav-current {
-        margin-bottom: 0;
+      font-weight: 600;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    &.more {
+      a {
+        display: inline-flex;
+        align-items: center;
 
         @include respond-to('medium') {
-          margin-right: 0;
+          display: flex;
         }
-      }
 
-      &.nav-current {
+        span {
-        font-weight: 600;
+          display: inline-block;
-      }
+          color: inherit;
-
+          font-size: 0.375rem;
-      a {
+          margin-left: 8px;
-        color: inherit;
+          @include transform(translateY(1px));
-      }
-
-      &.more {
-        a {
-          display: inline-flex;
-          align-items: center;
-
-          @include respond-to('medium') {
-            display: flex;
-          }
-
-          span {
-            display: inline-block;
-            color: inherit;
-            font-size: 0.375rem;
-            margin-left: 8px;
-            @include transform(translateY(1px));
-          }
         }
       }
     }
@@ -79,7 +79,7 @@
 }
 
 .rtl {
-  .m-nav__left ul li {
+  .m-nav__left li {
     @include respond-to('medium') {
       margin-right: 0;
       margin-left: 35px;

src/sass/components/header/_recent-article.scss

@@ -47,7 +47,6 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
-    -webkit-backface-visibility: visible !important;
     backface-visibility: visible !important;
     @include transition(transform .5s cubic-bezier(0.165, 0.84, 0.44, 1));
   }

src/sass/components/header/_submenu.scss

@@ -21,7 +21,6 @@
   &.opened {
     @include respond-to('medium') {
       visibility: visible;
-      -webkit-backface-visibility: visible !important;
       backface-visibility: visible !important;
       @include animation('openSubmenuAnimation 0.3s both');
       @include keyframes(openSubmenuAnimation) {
@@ -39,7 +38,6 @@
 
   &.closed {
     @include respond-to('medium') {
-      -webkit-backface-visibility: visible !important;
       backface-visibility: visible !important;
       @include animation('closeSubmenuAnimation 0.3s both');
       @include keyframes(closeSubmenuAnimation) {

src/sass/components/header/_tags.scss

@@ -2,21 +2,21 @@
   ul {
     display: flex;
     flex-wrap: wrap;
+  }
 
-    li {
+  li {
-      letter-spacing: 0.2px;
+    letter-spacing: 0.2px;
-      font-size: 0.875rem;
+    font-size: 0.875rem;
-      font-weight: 600;
+    font-weight: 600;
-      margin-right: 30px;
+    margin-right: 30px;
-      margin-bottom: 10px !important;
+    margin-bottom: 10px !important;
 
-      &:last-of-type {
+    &:last-of-type {
-        margin-right: 0;
+      margin-right: 0;
-      }
+    }
 
-      a {
+    a {
-        color: var(--link-color);
+      color: var(--link-color);
-      }
     }
   }
 }

src/sass/home.scss

@@ -0,0 +1,5 @@
+@import "common/mixins";
+@import "common/variables";
+
+@import "components/articles/featured-slider";
+@import "components/articles/featured-article";

src/sass/layouts/_post-content.scss

@@ -117,10 +117,10 @@
       padding-left: 40px;
       margin-bottom: 30px;
     }
+  }
 
-    li {
+  li {
-      margin-bottom: 20px;
+    margin-bottom: 20px;
-    }
   }
 
   img,

src/sass/libs/aos/_animations.scss

@@ -4,8 +4,7 @@ $aos-distance: 100px !default;
 /**
  * Fade animations:
  * fade
- * fade-up, fade-down, fade-left, fade-right
+ * fade-up, fade-down
- * fade-up-right, fade-up-left, fade-down-right, fade-down-left
  */
 
 [data-aos^='fade'][data-aos^='fade']:not(.no-aos-animation) {
@@ -25,27 +24,3 @@ $aos-distance: 100px !default;
 [data-aos='fade-down']:not(.no-aos-animation) {
   transform: translate3d(0, -$aos-distance, 0);
 }
-
-[data-aos='fade-right']:not(.no-aos-animation) {
-  transform: translate3d(-$aos-distance, 0, 0);
-}
-
-[data-aos='fade-left']:not(.no-aos-animation) {
-  transform: translate3d($aos-distance, 0, 0);
-}
-
-[data-aos='fade-up-right']:not(.no-aos-animation) {
-  transform: translate3d(-$aos-distance, $aos-distance, 0);
-}
-
-[data-aos='fade-up-left']:not(.no-aos-animation) {
-  transform: translate3d($aos-distance, $aos-distance, 0);
-}
-
-[data-aos='fade-down-right']:not(.no-aos-animation) {
-  transform: translate3d(-$aos-distance, -$aos-distance, 0);
-}
-
-[data-aos='fade-down-left']:not(.no-aos-animation) {
-  transform: translate3d($aos-distance, -$aos-distance, 0);
-}

src/sass/libs/aos/_easing.scss

@@ -26,7 +26,7 @@ $aos-easing: (
 
 [data-aos] {
   @each $key, $val in $aos-easing {
-    body[data-aos-easing="#{$key}"] &,
+    [data-aos-easing="#{$key}"] &,
     &[data-aos][data-aos-easing="#{$key}"] {
       transition-timing-function: $val;
     }

src/sass/libs/glide/_glide.core.scss

@@ -49,7 +49,6 @@
     a {
       user-select: none;
       -webkit-user-drag: none;
-      -moz-user-select: none;
       -ms-user-select: none;
     }
   }

src/sass/listing.scss

@@ -0,0 +1,4 @@
+@import "common/mixins";
+
+@import "layouts/grid";
+@import "components/ui/pagination";

src/sass/newsletter.scss

@@ -0,0 +1,7 @@
+@import "common/mixins";
+@import "common/variables";
+
+@import "layouts/fullscreen";
+
+@import "components/ui/back";
+@import "components/subscribe/subscribe-section";

src/sass/post.scss

@@ -0,0 +1,18 @@
+@import "common/mixins";
+@import "common/variables";
+@import "common/helpers";
+
+@import "layouts/post-content";
+
+@import "components/ui/button";
+@import "components/ui/input";
+@import "components/articles/share";
+@import "components/subscribe/subscribe-section";
+@import "components/author/author";
+@import "components/author/picture";
+@import "components/author/links";
+@import "components/comments/comments";
+@import "components/comments/load-comments";
+@import "components/articles/recommended";
+@import "components/articles/recommended-articles";
+@import "components/articles/recommended-slider";

src/webpack.mix.js

@@ -25,6 +25,11 @@ mix.js('js/helpers.js', 'js/')
   .setResourceRoot('/assets')
   .setPublicPath('../assets')
   .sass('sass/app.scss', 'css/')
+  .sass('sass/home.scss', 'css/')
+  .sass('sass/listing.scss', 'css/')
+  .sass('sass/post.scss', 'css/')
+  .sass('sass/newsletter.scss', 'css/')
+  .sass('sass/404.scss', 'css/')
   .options({
     processCssUrls: false
   })

subscribe.hbs

@@ -2,6 +2,11 @@
 This template is used for the subscription page.
 --}}
 
+{{!-- This block loads specific styles for the newsletter page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}

tag.hbs

@@ -2,6 +2,11 @@
 This template is used for the tag page.
 --}}
 
+{{!-- This block loads specific styles for the tag page --}}
+{{#contentFor "styles"}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
+{{/contentFor}}
+
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}