Css refactoring (#218)

eddiesigner · Jul 2, 2020 · cd14b23 · cd14b23
1 parent 58eeb4f
commit cd14b23
Show file tree

Hide file tree

Showing 37 changed files with 163 additions and 121 deletions.
diff --git a/assets/css/404.css b/assets/css/404.css
diff --git a/assets/css/app.css b/assets/css/app.css
diff --git a/assets/css/home.css b/assets/css/home.css
diff --git a/assets/css/listing.css b/assets/css/listing.css
diff --git a/assets/css/newsletter.css b/assets/css/newsletter.css
diff --git a/assets/css/post.css b/assets/css/post.css
diff --git a/assets/js/helpers.js b/assets/js/helpers.js
diff --git a/author.hbs b/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}}

diff --git a/default.hbs b/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"}}}

diff --git a/error-404.hbs b/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}}

diff --git a/index.hbs b/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}}

diff --git a/package.json b/package.json
@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.7.3"
+  "version": "0.7.4"
 }
diff --git a/page-authors.hbs b/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}}

diff --git a/page-newsletter.hbs b/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}}

diff --git a/page.hbs b/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}}

diff --git a/post.hbs b/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}}

diff --git a/src/package.json b/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",

diff --git a/src/sass/404.scss b/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";
diff --git a/src/sass/app.scss b/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";
diff --git a/src/sass/common/_helpers.scss b/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;
 }
 

diff --git a/src/sass/common/_mixins.scss b/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;