Add better support for local fonts and update documentation (#60)

404.html

@@ -11,6 +11,10 @@
   <title>{{ site.name }} | Page not found</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  {% if site.local_fonts %}
+    {% stylesheet fonts %}
+  {% endif %}
+
   {% if site.blog_theme == "light" %}
     {% stylesheet notfound-light %}
   {% else %}
@@ -26,5 +30,16 @@ <h1><a href="{{ '/' | relative_url }}" title="Back to homepage">{{ site.name }}<
       </p>
     </div>
   </main>
+
+  {% unless site.local_fonts %}
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+    <script>
+      WebFont.load({
+        google: {
+          families: ['Cormorant Garamond:700', 'Lato:300,400,700']
+        }
+      });
+    </script>
+  {% endunless %}
 </body>
 </html>

Gemfile.lock

@@ -1,26 +1,24 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (4.2.7.1)
+    activesupport (4.2.8)
       i18n (~> 0.7)
-      json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     addressable (2.5.0)
       public_suffix (~> 2.0, >= 2.0.2)
-    autoprefixer-rails (6.7.2)
+    autoprefixer-rails (6.7.6)
       execjs
     colorator (1.1.0)
     colored (1.2)
-    concurrent-ruby (1.0.4)
+    concurrent-ruby (1.0.5)
     ethon (0.10.1)
       ffi (>= 1.3.0)
     execjs (2.7.0)
     extras (0.1.0)
       forwardable-extended (~> 2.5)
-    fastimage (2.0.1)
-      addressable (~> 2)
+    fastimage (2.1.0)
     ffi (1.9.17)
     forwardable-extended (2.6.0)
     gemoji (3.0.0)
@@ -36,7 +34,7 @@ GEM
       parallel (~> 1.3)
       typhoeus (~> 0.7)
       yell (~> 2.0)
-    i18n (0.8.0)
+    i18n (0.8.1)
     jekyll (3.4.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
@@ -67,7 +65,6 @@ GEM
       gemoji (~> 3.0)
       html-pipeline (~> 2.2)
       jekyll (>= 3.0)
-    json (1.8.6)
     kramdown (1.13.2)
     liquid (3.0.6)
     listen (3.0.8)
@@ -93,12 +90,12 @@ GEM
     sprockets (3.6.3)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    thread_safe (0.3.5)
+    thread_safe (0.3.6)
     typhoeus (0.8.0)
       ethon (>= 0.8.0)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
-    uglifier (3.0.4)
+    uglifier (3.1.2)
       execjs (>= 0.3.0, < 3)
     yell (2.0.7)
 
@@ -118,4 +115,4 @@ DEPENDENCIES
   uglifier
 
 BUNDLED WITH
-   1.13.7
+   1.14.5

README.md

@@ -18,6 +18,7 @@ Features:
   - Cross browser support (supports all modern browsers).
   - Media embed for videos.
   - Enlarge images on click (like Medium).
+  - Support for local fonts
 
 Integrations
   - [Google Analytics](https://analytics.google.com/analytics/web/)
@@ -63,12 +64,14 @@ Run Jekyll:
 
     bundle exec jekyll serve
 
-### Deploy to GitHub Pages
+## Deploy to GitHub Pages
 
-Run this in the root project folder in your console:
+Before you deploy, commit your changes to any working branch except the `gh-pages` one then run the following command:
 
     bin/deploy
 
+**Important note**: Chalk does not support the standard way of Jekyll hosting on GitHub Pages. You need to deploy your working branch with the `bin/deploy` script. This is because Chalk uses Jekyll plugins that aren't supported by GitHub pages.
+
 You can find more info on how to use the gh-pages branch and a custom domain [here](https://help.github.com/articles/quick-start-setting-up-a-custom-domain/).
 
 [View this](https://github.com/nielsenramon/kickster#automated-deployment-with-circle-ci) for more info about automated deployment with Circle CI.

_assets/stylesheets/dark.scss

@@ -68,4 +68,3 @@ $article-paginator-color-hover: $gray-lightest;
 @import "modules/header";
 @import "modules/highlights-dark";
 @import "modules/icons";
-@import "modules/fonts";

_assets/stylesheets/fonts.scss

@@ -0,0 +1,63 @@
+// =============================================================================
+// Fonts
+// =============================================================================
+
+@charset "UTF-8";
+
+// Cormorant Garamond
+// =============================================================================
+
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  src: url(asset_path('cormorant-garamond/Cormorant-Garamond-700.eot'));
+  src: url(asset_path('cormorant-garamond/Cormorant-Garamond-700.eot?#iefix')) format('embedded-opentype'),
+  local('Cormorant Garamond Medium'),
+  local('Cormorant-Garamond-600'),
+  url(asset_path('cormorant-garamond/Cormorant-Garamond-700.woff2')) format('woff2'),
+  url(asset_path('cormorant-garamond/Cormorant-Garamond-700.woff')) format('woff'),
+  url(asset_path('cormorant-garamond/Cormorant-Garamond-700.ttf')) format('truetype'),
+}
+
+// Lato
+// =============================================================================
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 300;
+  src: url(asset_path('lato/Lato-300.eot'));
+  src: url(asset_path('lato/Lato-300.eot?#iefix')) format('embedded-opentype'),
+  local('Lato Light'),
+  local('Lato-300'),
+  url(asset_path('lato/Lato-300.woff2')) format('woff2'),
+  url(asset_path('lato/Lato-300.woff')) format('woff'),
+  url(asset_path('lato/Lato-300.ttf')) format('truetype'),
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(asset_path('lato/Lato-regular.eot'));
+  src: url(asset_path('lato/Lato-regular.eot?#iefix')) format('embedded-opentype'),
+  local('Lato Regular'),
+  local('Lato-regular'),
+  url(asset_path('lato/Lato-regular.woff2')) format('woff2'),
+  url(asset_path('lato/Lato-regular.woff')) format('woff'),
+  url(asset_path('lato/Lato-regular.ttf')) format('truetype'),
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url(asset_path('lato/Lato-700.eot'));
+  src: url(asset_path('lato/Lato-700.eot?#iefix')) format('embedded-opentype'),
+  local('Lato Bold'),
+  local('Lato-700'),
+  url(asset_path('lato/Lato-700.woff2')) format('woff2'),
+  url(asset_path('lato/Lato-700.woff')) format('woff'),
+  url(asset_path('lato/Lato-700.ttf')) format('truetype'),
+}

_assets/stylesheets/light.scss

@@ -68,4 +68,3 @@ $article-paginator-color-hover: $gray-darkest;
 @import "modules/header";
 @import "modules/highlights-light";
 @import "modules/icons";
-@import "modules/fonts";

_assets/stylesheets/modules/_embed.scss

@@ -25,6 +25,7 @@
 }
 
 // Modifier class for 16:9 aspect ratio
+
 .embed-responsive-16by9 {
   padding-bottom: 56.25%;
 }

_assets/stylesheets/modules/_header.scss

@@ -12,7 +12,7 @@
   display: inline-block;
   font-family: $serif;
   font-size: 36px;
-  font-weight: 900;
+  font-weight: 700;
   color: $header-logo-color;
   text-decoration: none;
 }

_assets/stylesheets/modules/_icons.scss

@@ -9,9 +9,9 @@
 
 @font-face {
   font-family: ionicons;
-  src: url(asset_path("ionicons.eot?#iefix")) format("embedded-opentype"),
-  url(asset_path("ionicons.woff")) format("woff"),
-  url(asset_path("ionicons.ttf"))  format("truetype");
+  src: url(asset_path("ionicons/ionicons.eot?#iefix")) format("embedded-opentype"),
+  url(asset_path("ionicons/ionicons.woff")) format("woff"),
+  url(asset_path("ionicons/ionicons.ttf"))  format("truetype");
 }
 
 // Component

_config.yml

@@ -2,16 +2,16 @@
 
 name: Chalk
 paginate: 25
-paginate_path: "/posts/page/:num/"
-url: # add site url http://example.com/
+url: # add your site url (format: http://example.com/)
 blog_theme: light # Or use dark
 
 # Optional settings
 
+about_enabled: false # Change to true if you wish to show an icon in the navigation that redirects to the about page
 discus_identifier: # Add your Disqus identifier
 ga_analytics: # Add your GA Tracking Id
+local_fonts: false # Change to true if you wish to use local fonts
 rss_enabled: true # Change to false if not
-about_enabled: false # Change to true if you wish to show an icon in the navigation that redirects to the about page
 social:
   dribbble: # Add your Dribbble handle
   facebook: # Add your Facebook handle
@@ -25,9 +25,6 @@ social:
 # Important settings (change at own risk)
 
 assets:
-  compress:
-    css: true
-    js: true
   features:
     automatic_img_size: false
   sources:
@@ -63,4 +60,5 @@ gems:
   - jekyll-paginate
   - jekyll-sitemap
   - jemoji
+paginate_path: "/posts/page/:num/"
 permalink: posts/:slug

_includes/head.html

@@ -21,6 +21,10 @@
   <link rel="apple-touch-icon" href="{% asset_path apple-touch-icon.png %}">
   <link href="{{ 'feed.xml' | absolute_url }}" type="application/rss+xml" rel="alternate" title="{{ site.name }} Last 10 blog posts" />
 
+  {% if site.local_fonts %}
+    {% stylesheet fonts %}
+  {% endif %}
+
   {% if site.blog_theme == "light" %}
     {% stylesheet light %}
   {% else %}

_includes/javascripts.html

@@ -1,3 +1,14 @@
+{% unless site.local_fonts %}
+  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+  <script>
+    WebFont.load({
+      google: {
+        families: ['Cormorant Garamond:700', 'Lato:300,400,700']
+      }
+    });
+  </script>
+{% endunless %}
+
 {% if site.ga_analytics %}
   <script>
     window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;