overkyll-jekyll-theme 0.4 → 0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 060edfa7e7416af3ec0a4b83d77ed28e3d237daa
-  data.tar.gz: 2a83764686d8fc58fcf830bc53b44f1a84c9379e
+  metadata.gz: bf000749f0f0d801143b9d2d8d5b87f0a61d0d28
+  data.tar.gz: cadfc3b06ded63c4082f6ae272ce22021e7232a0
 SHA512:
-  metadata.gz: 20c36eb17303419cc3aabc43a86c301e1b039b0d3212e1cf961298b4fdbede7ade8edbc5db87ec63fe65c9458ba32d6162203ad4dfadb9483232fe07d0c16a88
-  data.tar.gz: 6a9499d05f4ffc61a0558d2f14366f8f93316efc2b2e6ae0ccbdda2e113ce3eab97d45238213b96b06fb5b1341c05c55dc7a022bf2def87cd9fc0227dc746c7e
+  metadata.gz: 716ad7b3a34d7e8d77d2f9c6c937c9e4436059cc8c090523017cc667d47b741cce316fb79c975b75113578795e7fca0bd662e949e3e351d3a8d74888537d916a
+  data.tar.gz: 7a462259b9f206919d3f6e13be32886437306ab64c4223195514672e9a78bea1938a2e42fb1f1906740c0e21375b1d32b26d6dddfe7939597cb6c4c126fef9fd

data/README.md

@@ -1,19 +1,18 @@
 # Overkyll Jekyll Theme
 
-# Install as Gem Theme
+## Install as Gem Theme
+
 Jekyll requires Ruby so make sure Ruby is installed before you begin.
 
 ### Start a New Site
 - Install Jekyll and Bundler
-  - `gem install bundler`
+  - `gem install jekyll bundler`
 - Create a New Site
   - `jekyl new mysite`
 - Move into that directory
   - `cd mysite`
-- Install Required Gems
-  - `bundle install`
 - Verify
-  - Run `jekyll serve`
+  - Run `bundle exec jekyll serve`
   - Browse to [http://localhost:4000](http://localhost:4000)
 - Download Overkyll Theme
   - Replace the line `gem "minima"` with this:
@@ -22,13 +21,10 @@ Jekyll requires Ruby so make sure Ruby is installed before you begin.
 - Tell Jekyll to use Overkyll Theme
   - Open `_config.yml` and change the line `theme: minima` to this:
     - `theme: overkyll-jekyll-theme`
-- Import the Overkyll CSS
-  - Open your `css/main.scss` and change the line `@import "minima;"` to this:
-    - `@import "overkyll";`
 
 
 ### Migrate an Existing Site
-**NOTE** This requires you to be upgraded to at least Jekyll 3.2 which added support for themes.
+**NOTE** This requires you to be upgraded to at least Jekyll 3.3 which added support for themes and assets.
 
 - Download Overkyll Theme
   - Replace the line `gem "minima"` with this:
@@ -37,9 +33,6 @@ Jekyll requires Ruby so make sure Ruby is installed before you begin.
 - Tell Jekyll to use Overkyll Theme
   - Open `_config.yml` and change the line `theme: minima` to this:
     - `theme: overkyll-jekyll-theme`
-- Import the overkyll CSS
-  - Open your `css/main.scss` and change the line `@import "minima;"` to this:
-    - `@import "overkyll";`
 
 # Jekyll 2.x Method
 Jekyll requires Ruby so make sure Ruby is installed before you begin.
@@ -51,5 +44,5 @@ Jekyll requires Ruby so make sure Ruby is installed before you begin.
 - Install Required Gems
   - `bundle install`
 - Verify
-  - Run `jekyll serve`
+  - Run `bundle exec jekyll serve`
   - Browse to [http://localhost:4000](http://localhost:4000)

data/_includes/base.scss

@@ -8,4 +8,5 @@
 @import "config/typography";
 @import "base/normalize";
 @import "base/base";
+@import "base/layout";
 

data/_includes/favicons.html

@@ -1,20 +1,19 @@
-<link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/assets/favicons/apple-icon-57x57.png">
-<link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/assets/favicons/apple-icon-60x60.png">
-<link rel="apple-touch-icon" sizes="72x72" href="{{ site.baseurl }}/assets/favicons/apple-icon-72x72.png">
-<link rel="apple-touch-icon" sizes="76x76" href="{{ site.baseurl }}/assets/favicons/apple-icon-76x76.png">
-<link rel="apple-touch-icon" sizes="114x114" href="{{ site.baseurl }}/assets/favicons/apple-icon-114x114.png">
-<link rel="apple-touch-icon" sizes="120x120" href="{{ site.baseurl }}/assets/favicons/apple-icon-120x120.png">
-<link rel="apple-touch-icon" sizes="144x144" href="{{ site.baseurl }}/assets/favicons/apple-icon-144x144.png">
-<link rel="apple-touch-icon" sizes="152x152" href="{{ site.baseurl }}/assets/favicons/apple-icon-152x152.png">
-<link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/assets/favicons/apple-icon-180x180.png">
-<link rel="icon" type="image/png" href="{{ site.baseurl }}/assets/favicons/favicon-32x32.png" sizes="32x32">
-<link rel="icon" type="image/png" href="{{ site.baseurl }}/assets/favicons/android-chrome-192x192.png" sizes="192x192">
-<link rel="icon" type="image/png" href="{{ site.baseurl }}/assets/favicons/favicon-96x96.png" sizes="96x96">
-<link rel="icon" type="image/png" href="{{ site.baseurl }}/assets/favicons/favicon-16x16.png" sizes="16x16">
-<link rel="manifest" href="{{ site.baseurl }}/manifest.json">
-<link rel="mask-icon" href="{{ site.baseurl }}/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
-<link rel="shortcut icon" href="{{ site.baseurl }}/assets/favicons/favicon.ico">
+<link rel="apple-touch-icon" sizes="57x57" href={{ "/assets/favicons/apple-icon-57x57.png" | relative_url }}>
+<link rel="apple-touch-icon" sizes="60x60" href={{ "/assets/favicons/apple-icon-60x60.png" | relative_url }}>
+<link rel="apple-touch-icon" sizes="72x72" href={{ "/assets/favicons/apple-icon-72x72.png" | relative_url }}>
+<link rel="apple-touch-icon" sizes="76x76" href={{ "/assets/favicons/apple-icon-76x76.png" | relative_url }}>
+<link rel="apple-touch-icon" sizes="114x114" href={{ "/assets/favicons/apple-icon-114x114.png" | relative_url }}>
+<link rel="apple-touch-icon" sizes="120x120" href={{ "/assets/favicons/apple-icon-120x120.png" | relative_url }}>
+<link rel="apple-touch-icon" sizes="144x144" href={{ "/assets/favicons/apple-icon-144x144.png" | relative_url }}>
+<link rel="apple-touch-icon" sizes="152x152" href={{ "/assets/favicons/apple-icon-152x152.png" | relative_url }}>
+<link rel="apple-touch-icon" sizes="180x180" href={{ "/assets/favicons/apple-icon-180x180.png" | relative_url }}>
+<link rel="icon" type="image/png" href={{ "/assets/favicons/favicon-32x32.png" sizes="32x32" | relative_url }}>
+<link rel="icon" type="image/png" href={{ "/assets/favicons/android-chrome-192x192.png" sizes="192x192" | relative_url }}>
+<link rel="icon" type="image/png" href={{ "/assets/favicons/favicon-96x96.png" sizes="96x96" | relative_url }}>
+<link rel="icon" type="image/png" href={{ "/assets/favicons/favicon-16x16.png" sizes="16x16" | relative_url }}>
+<link rel="manifest" href={{ "/assets/favicons/manifest.json" | relative_url }}>
+<link rel="shortcut icon" href={{ "/assets/favicons/favicon.ico" | relative_url }}>
 <meta name="msapplication-TileColor" content="#000">
-<meta name="msapplication-TileImage" content="{{ site.baseurl }}/assets/favicons/mstile-144x144.png">
-<meta name="msapplication-config" content="{{ site.baseurl }}/browserconfig.xml">
+<meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png" | relative_url }}>
+<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml" | relative_url }}>
 <meta name="theme-color" content="#000">

data/_includes/head.html

@@ -3,7 +3,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="alternate" type="application/rss+xml" title="{{ site.title }} RSS Feed" href="/feed/"/>
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }} RSS Feed" href="{{ "/feed/" | absolute_url }}"/>
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
@@ -16,9 +17,9 @@
   </style>
   <script>
     {% include loadCSS.js %}
-    loadCSS("{{ "/css/main.css" | prepend: site.baseurl }}");
+    loadCSS("{{ '/assets/css/main.css' | relative_url }}");
     {% include localfont.js %}
   </script>
-  <noscript><link rel="stylesheet" href="/assets/css/font.css"></noscript>
+  <noscript><link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}"></noscript>
   {% include favicons.html %}
 </head>

data/_includes/header.html

@@ -13,7 +13,7 @@
       <ul>
         {% for page in site.pages %}
           {% if page.navigation %}
-          <li><a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
+          <li><a class="page-link" href="{{ page.url | relative_url }}">{{ page.title }}</a></li>
           {% endif %}
         {% endfor %}
       </ul>

data/_includes/pagination.html

@@ -19,4 +19,4 @@
   {% endif %}
 
 </nav>
-{% endif %}
+{% endif %}

data/_layouts/default.html

@@ -1,9 +1,9 @@
 ---
-layout: deafault
+layout: default
 ---
 
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
 
   {% include head.html %}
 
@@ -16,7 +16,7 @@ layout: deafault
         {{ content }}
       </div>
     </main>
-    <script src="{{ site.baseurl }}/assets/js/instantclick.min.js" data-no-instant></script>
+    <script src={{ "/assets/js/instantclick.min.js" | relative_url }}  data-no-instant></script>
     <script data-no-instant>
       InstantClick.init();
     </script>

data/_layouts/post.html

@@ -9,4 +9,3 @@ layout: default
 </article>
 
 {% include pagination.html %}
-

data/_sass/base/_base.scss

@@ -1,5 +1,5 @@
 ////
-/// Very basic style
+/// Very basic styles
 ////
 
 html,
@@ -13,12 +13,6 @@ body {
   box-sizing: inherit;
 }
 
-// *, :after, :before {
-//   -webkit-box-sizing: border-box;
-//   -moz-box-sizing: border-box;
-//   box-sizing: border-box;
-// }
-
 a {
   text-decoration: underline;
   color: $color-primary;
@@ -30,9 +24,9 @@ a {
 // }
 
 
-/**
- * Images
- */
+
+// Images
+// -------------------------
 
 img {
   max-width: 100%;
@@ -40,22 +34,19 @@ img {
 }
 
 
-/**
- * Figures
- */
+// Figures
+// -------------------------
 
 figure > img {
   display: block;
 }
 
 figcaption {
-  font-size: $small-font-size;
+  font-size: $small;
 }
 
-
-/**
- * Links
- */
+// Links
+// -------------------------
 
 a {
   text-decoration: underline;
@@ -69,9 +60,8 @@ a {
   }
 }
 
-/**
- * Lists
- */
+// Lists
+// -------------------------
 
 ul,ol {
   margin-bottom: $base-line;
@@ -80,9 +70,47 @@ ul,ol {
   }
 }
 
-/**
- * Blockquotes
- */
+// List options
+// -------------------------
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @extend .list-unstyled;
+  margin-left: -5px;
+
+  > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+// Description Lists
+// -------------------------
+
+dl {
+  margin-top: 0; // Remove browser default
+  margin-bottom: $line-height-computed;
+}
+dt,
+dd {
+  line-height: $line-height-base;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: 0; // Undo browser default
+}
+
+// Blockquotes
+// -------------------------
 
 blockquote {
   padding-left: $base-line / 2;
@@ -96,9 +124,8 @@ blockquote {
 }
 
 
-/**
- * Code formatting
- */
+// Code formatting
+// -------------------------
 
 pre,
 code {

data/_sass/base/_font.scss

@@ -6,7 +6,8 @@
     font-weight: bold;
 }
 
-/* Webfont: Overpass-BoldItalic */@font-face {
+/* Webfont: Overpass-BoldItalic */
+@font-face {
     font-family: 'Overpass';
     src: url('../fonts/Overpass-Italic.woff2') format('woff2');
     font-style: italic;

data/_sass/base/_layout.scss

@@ -5,9 +5,8 @@
 $gutter: $base-em;
 $number: 4; // for equal columns
 
-/**
- * Page & Wrapper
- */
+// Page & Wrapper
+// -------------------------
 
 .page {
   padding-bottom: $base-line*4;
@@ -18,7 +17,7 @@ $number: 4; // for equal columns
   margin-left: auto;
   padding-right: $base-line / 2;
   padding-left: $base-line / 2;
-  max-width: 50rem;
+  max-width: 40em;
 }
 
 // Inspired from Raphaël Goetter Knacss grid
@@ -26,34 +25,62 @@ $number: 4; // for equal columns
 // n = number of columns (default = 4)
 // g = gutter value (default = 1em)
 // example : .grid { .grid(12, 10px); }
+// ---------------------------------------------------------------------------
 
 @mixin grid($number:$number, $gutter:$gutter) {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-left: -$gutter;
-  margin-bottom: $base-line;
-
   /* inline-block fallback for IE9 generation */
   letter-spacing: -0.31em;
   text-rendering: optimizespeed;
+
+  @supports (display: flex) {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  margin-left: -2vw;
+  margin-right: -2vw;
+  @media #{$medium-up} {
+    margin-left: -$gutter/2;
+    margin-right: -$gutter/2;
+  }
+  margin-bottom: $base-line;
+
   & > * {
-    flex: 0 0 auto;
-    width: calc(100% * 1 / #{$number} - #{$gutter} - .01px);
-    margin-left: $gutter;
+    margin-left: 2vw;
+    margin-right: 2vw;
+    @media #{$medium-up} {
+      margin-left: $gutter/2;
+      margin-right: $gutter/2;
+    }
     margin-bottom: $base-line;
 
     /* inline-block fallback for IE9 generation */
     display: inline-block;
+    width: calc(100% * 1 / #{$number} - #{$gutter} - .01px);
     vertical-align: top;
     letter-spacing: normal;
     text-rendering: auto;
+    @supports (display: flex) {
+      flex: 1 0 10em;
+      @media #{$medium-up} {
+        flex: 0 0 calc(100% * 1 / #{$number} - #{$gutter} - .01px);
+        width: auto;
+      }
+    }
   }
   & > .flexitem-double {
     width: calc(100% * 2 / #{$number} - #{$gutter});
+    @supports (display: flex) {
+      flex: 0 0 calc(100% * 2 / #{$number} - #{$gutter});
+      width: auto;
+    }
   }
   & > .flexitem-first {
     order: -1;
   }
 }
 
+.grid {
+  @include grid();
+}

data/_sass/config/_colors.scss

@@ -2,7 +2,7 @@
 /// Colors
 ////
 
-// better color for development
+// Better colors for development
 //-------------------------------------
 
 $navy:                    #001F3F;
@@ -19,8 +19,10 @@ $fuchsia:                 #F012BE;
 $purple:                  #B10DC9;
 $maroon:                  #85144B;
 
+
 // Site color
 //-------------------------------------
+
 $text-color:              #111;
 $background-color:        #fdfdfd;
 $brand-color:             #111;
@@ -53,6 +55,7 @@ $palettes: (
     )
 );
 
+
 // Mixin for color palette
 //-------------------------------------
 

data/_sass/config/_typography.scss

@@ -5,8 +5,6 @@
 // Our variables
 //-------------------------------------
 $base-font-family:        Overpass, Helvetica, Arial, sans-serif;
-$base-font-size:          16px;
-$small-font-size:         $base-font-size * 0.875;
 
 $ratio:                   1.20;
 $base:                    1;
@@ -53,18 +51,14 @@ h1, .h1 { font-size: $title1; }
 
 @media #{$medium-up} {
   body { font-size: $base-em * $ms1; }
-  h3, .h3 { font-size: $base-em * $ms3; }
-  h2, .h2 { font-size: $base-em * $ms4; }
-  h1, .h1 { font-size: $base-em * $ms5; }
 }
 
 @media #{$large-up} {
-  h2, .h2 { font-size: $base-em * $ms5; }
-  h1, .h1 { font-size: $base-em * $ms6; }
+  body { font-size: $base-em * $ms2; }
 }
 
 @media #{$xlarge-up} {
-  h1, .h1 { font-size: $base-em * $ms7; }
+  body { font-size: $base-em * $ms3; }
 }
 
 h1, .h1,
@@ -101,54 +95,3 @@ h1,h2,h3,h4,h5,h6 {
 p {
   margin: 0 0 ($line-height-computed / 2);
 }
-
-// Lists
-// -------------------------
-
-// Unordered and Ordered lists
-ul,
-ol {
-  margin-top: 0;
-  margin-bottom: ($line-height-computed / 2);
-  ul,
-  ol {
-    margin-bottom: 0;
-  }
-}
-
-// List options
-
-// Unstyled keeps list items block level, just removes default browser padding and list-style
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-
-// Inline turns list items into inline-block
-.list-inline {
-  @extend .list-unstyled;
-  margin-left: -5px;
-
-  > li {
-    display: inline-block;
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-}
-
-// Description Lists
-dl {
-  margin-top: 0; // Remove browser default
-  margin-bottom: $line-height-computed;
-}
-dt,
-dd {
-  line-height: $line-height-base;
-}
-dt {
-  font-weight: bold;
-}
-dd {
-  margin-left: 0; // Undo browser default
-}
-

data/_sass/generic/_syntax-highlighting.scss

@@ -1,6 +1,7 @@
 /**
  * Syntax highlighting styles
  */
+ 
 .highlight {
     margin: 0 0 $base_line / 2;
     text-align: left !important; // override .post .figure 

data/_sass/object/_header.scss

@@ -16,8 +16,8 @@
   }
   .site-title {
     display: block;
-    margin: 0 auto;
-    font-size: $base-em * $ms4;
+    margin: $base-line/2 auto;
+    font-size: $base-em * $ms5;
     @media #{$medium-up} {
       font-size: $base-em * $ms6;
     }
@@ -31,11 +31,15 @@
   }
 }
 
-.site-header nav a:hover,
-.site-header nav a:focus,
-.site-header nav a:active {
-  border-bottom: 2px solid #444;
-  text-decoration: none;
+.site-header {
+  nav {
+    a {
+      &:hover,&:focus,&:active {
+        text-decoration: none;
+        border-bottom: 2px solid #444;
+      }
+    }
+  }
 }
 
 

data/_sass/tool/_utilities.scss

@@ -52,7 +52,6 @@
 
 // Toggling content
 // -------------------------
-// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
 
 .hide {
   display: none !important;
@@ -66,17 +65,24 @@
   visibility: hidden;
 }
 
+// Class for hidding text but keep text accessible
+// --------------------------------------------------
+
+.sr-only,
 .visuallyhidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+          clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
 }
 
+
 // For Affix plugin
 // -------------------------
 
@@ -85,8 +91,8 @@
 }
 
 
- // Icons
- // -------------------------
+// Icons
+// -------------------------
 
 .icon {
   > svg {

data/assets/css/main.scss

@@ -0,0 +1,4 @@
+---
+---
+
+@import "{{ site.theme }}"; 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: overkyll-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: '0.4'
+  version: '0.5'
 platform: ruby
 authors:
 - bertrandkeller
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-10-07 00:00:00.000000000 Z
+date: 2016-10-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.2'
+        version: '3.3'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.2'
+        version: '3.3'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -91,9 +91,10 @@ files:
 - _sass/object/_header.scss
 - _sass/object/_pagination.scss
 - _sass/object/_posts.scss
-- _sass/overkyll.scss
+- _sass/overkyll-jekyll-theme.scss
 - _sass/tool/_utilities.scss
 - assets/css/font.css
+- assets/css/main.scss
 - assets/favicons/android-chrome-192x192.png
 - assets/favicons/android-icon-144x144.png
 - assets/favicons/android-icon-192x192.png