Replaced SVG icons for HTML elements

_config.yml

@@ -33,14 +33,6 @@ linkedin_username: linkedin_username
 medium_username: medium_username
 
 
-# Theme Settings
-themeColor: "#ff0a16"
-primaryDark: "#141414"
-accentDark: "#ffffff"
-lightGray: "#f2f2f2"
-texts: "#333333"
-
-
 # Posts Settings
 show_time_bar: true
 show_modal_on_exit: false
@@ -82,6 +74,10 @@ paginate_content:
     single:
       is_generated: true
 
+# SASS
+sass:
+  style: compressed
+
 # Plugins
 plugins:
   - jekyll-paginate

_includes/head.html

@@ -71,19 +71,19 @@
 
     <!-- Windows 8 Tile Icons -->
     <meta name="application-name" content="{{ site.name }}">
-    <meta name="msapplication-TileColor" content="{{ site.themeColor }}">
+    <meta name="msapplication-TileColor" content="#141414">
     <meta name="msapplication-square70x70logo" content="smalltile.png" />
     <meta name="msapplication-square150x150logo" content="mediumtile.png" />
     <meta name="msapplication-wide310x150logo" content="widetile.png" />
     <meta name="msapplication-square310x310logo" content="largetile.png" />
 
     <!-- Android Lolipop Theme Color -->
-    <meta name="theme-color" content="{{ site.themeColor }}">
+    <meta name="theme-color" content="#141414">
 
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
 
-    <link rel="stylesheet" href="{{ '/assets/css/styles.min.css' | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ '/assets/css/styles.css' | prepend: site.baseurl }}">
     <link rel="canonical" href="{{ url }}">
     <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | prepend: site.baseurl | prepend: site.url }}" />
 

assets/img/icons/preloader.svg → _includes/loader.html

@@ -1,11 +1,9 @@
----
----
-<svg width="50" height="50" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+<svg width="50" height="50" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" class="loader">
     <defs>
         <linearGradient x1="0%" y1="100%" x2="100%" y2="100%" id="a">
-            <stop stop-color="{{ site.themeColor }}" stop-opacity="0" offset="0%"/>
-            <stop stop-color="{{ site.themeColor }}" stop-opacity=".631" offset="63.146%"/>
-            <stop stop-color="{{ site.themeColor }}" offset="100%"/>
+            <stop stop-color="currentColor" stop-opacity="0" offset="0%"/>
+            <stop stop-color="currentColor" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="currentColor" offset="100%"/>
         </linearGradient>
     </defs>
     <g fill="none" fill-rule="evenodd">
@@ -19,7 +17,7 @@
                     dur="1.9s"
                     repeatCount="indefinite" />
             </path>
-            <circle fill="{{ site.themeColor }}" cx="36" cy="18" r="1">
+            <circle fill="currentColor" cx="36" cy="18" r="1">
                 <animateTransform
                     attributeName="transform"
                     type="rotate"

_layouts/category.html

@@ -17,6 +17,10 @@ <h1 class="title-category">/{{page.title}}</h1>
                                         <div class="cover">
                                             {% include new-post-tag.html date=post.date %}
                                             <a href="{{ post.url | prepend: site.baseurl }}" {%if isnewpost %}class="new-post"{% endif %}>
+                                                {% include loader.html %}
+                                                <div class="read-icon">
+                                                    <svg><use xlink:href="#icon-read"></use></svg>
+                                                </div>
                                                 {% if post.optimized_image %}
                                                     <img src="/assets/img/placeholder.png" width="100%" data-url="{{ post.optimized_image }}" class="preload">
                                                     <noscript>

_layouts/home.html

@@ -27,7 +27,7 @@ <h1 class="title">{{ featured.title }}</h1>
                 <p class="description">{{ featured.subtitle }}</p>
                 <div class="buttons">
                     <a href="{{ featured.url }}" role="button" class="button">
-                        <img src="/assets/img/icons/read.svg">
+                        <svg><use xlink:href="#icon-read"></use></svg>
                         <span>Read Now</span>
                     </a>
                 </div>
@@ -47,6 +47,10 @@ <h1 class="title">{{ featured.title }}</h1>
                     <div class="cover">
                         {% include new-post-tag.html date=post.date %}
                         <a href="{{ post.url | prepend: site.baseurl }}" {%if isnewpost %}class="new-post"{% endif %}>
+                            {% include loader.html %}
+                            <div class="read-icon">
+                                <svg><use xlink:href="#icon-read"></use></svg>
+                            </div>
                             {% if post.optimized_image %}
                                 <img src="/assets/img/placeholder.png" width="100%" data-url="{{ post.optimized_image }}" class="preload">
                                 <noscript>

_sass/_hero.scss

@@ -92,11 +92,12 @@
         box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
       }
 
-      img {
+      svg {
         width: rem(25px);
         height: rem(25px);
         margin-right: rem(10px);
         vertical-align: middle;
+        color: $themeColor;
       }
 
       span {

_sass/_home.scss

@@ -79,7 +79,7 @@
       }
 
       .cover {
-        a:before {
+        .read-icon {
           opacity: 1;
         }
       }
@@ -156,7 +156,7 @@
     .new-post {
       position: relative;
 
-      &:after {
+      &::after {
         content: "New post";
         text-transform: uppercase;
         display: inline-block;
@@ -175,15 +175,13 @@
     .cover {
       position: relative;
 
-      a:before {
+      .read-icon {
         opacity: 0;
         background-color: rgba(0, 0, 0, 0.7);
-        background-image: url(../../assets/img/icons/read.svg);
-        background-size: 48px;
-        background-repeat: no-repeat;
-        background-position: center center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         content: "";
-        display: block;
         width: rem(80px);
         height: rem(80px);
         border-radius: 40px;
@@ -193,11 +191,26 @@
         margin-top: rem(-40px);
         margin-left: rem(-40px);
         border: 2px solid #fff;
+        color: $themeColor;
         z-index: 1000;
+
+        svg {
+          width: rem(48px);
+        }
+      }
+
+      .loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        color: $themeColor;
+        z-index: 1;
       }
 
-      .preload {
-        background: url(../../assets/img/icons/preloader.svg) center center no-repeat;
+      img {
+        position: relative;
+        z-index: 2;
       }
     }
   }

_sass/_variables.scss

@@ -2,13 +2,11 @@
  * Set up here the general appearance of the theme.
  */
 
-// Theme
-@import "theme";
-$themeColor: map-get($theme, themeColor);
-$primaryDark: map-get($theme, primaryDark);
-$accentDark: map-get($theme, accentDark);
-$lightGray: map-get($theme, lightGray);
-$texts: map-get($theme, texts);
+$themeColor: map-get($theme, themeColor) !default;
+$primaryDark: map-get($theme, primaryDark) !default;
+$accentDark: map-get($theme, accentDark) !default;
+$lightGray: map-get($theme, lightGray) !default;
+$texts: map-get($theme, texts) !default;
 
 // Breakpoints
 $breakpoints: (

_sass/main.scss

@@ -1,5 +1,6 @@
 @import "include-media";
 @import "normalize";
+@import "theme";
 @import "variables";
 @import "functions";
 @import "mixins";

_sass/preview.scss

@@ -1,9 +1,7 @@
-@import "normalize.css/normalize";
-@import "include-media/dist/include-media";
-@import "jeet/jeet";
-
-@import "variables";
+@import "include-media";
 @import "normalize";
+@import "theme";
+@import "variables";
 @import "functions";
 @import "mixins";
 @import "typo";

assets/css/styles.scss

@@ -0,0 +1,3 @@
+---
+---
+@import "jekflix";

gulpfile.js

@@ -243,7 +243,7 @@ function watch() {
   gulp.watch(['src/yml/theme.yml'], gulp.series(theme, css, config, jekyll, reload));
 
   // Watch SASS files for changes & rebuild styles
-  gulp.watch(['_sass/**/*.scss', '!_sass/preview.scss'], mainCss);
+  gulp.watch(['_sass/**/*.scss', '!_sass/preview.scss'], gulp.series(mainCss, jekyll, reload));
 
   // Watch preview style file for changes, rebuild styles & reload
   gulp.watch('_sass/preview.scss', gulp.series(theme, previewCss, reload));

src/yml/_config.yml

@@ -5,9 +5,6 @@
 # Remove the item if you don't need it
 #=include social.yml
 
-# Theme Settings
-#=include theme.yml
-
 # Posts Settings
 #=include posts.yml
 
@@ -41,6 +38,10 @@ paginate_content:
     single:
       is_generated: true
 
+# SASS
+sass:
+  style: compressed
+
 # Plugins
 plugins:
   - jekyll-paginate