overkyll-jekyll-theme 0.8 → 0.9

data/_sass/overkyll/config/_mediaqueries.scss

@@ -0,0 +1,103 @@
+////
+/// Media queries
+////
+
+// Media Query breakpoint
+// https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862#.59e713wwa
+//-------------------------------------
+
+$screen:                    "only screen";
+$tiny:                      20;     /* 320px  */
+$small:                     37.5;   /* 600px  */
+$medium:                    56.25;  /* 900px  */
+$large:                     75;     /* 1200px */
+$xlarge:                    112.5;  /* 1800px */
+$xxlarge:                   150;    /* 2400px */
+
+
+// Media Query Ranges
+//-------------------------------------
+
+$tiny-range                 : (0em, $tiny * 1em) !default;
+$small-range                : (0em, $small * 1em - 0.063em) !default;
+$medium-range               : ($medium * 1em + 0.063em, $large * 1em) !default;
+$large-range                : ($large * 1em + 0.063em, $xlarge * 1em) !default;
+$xlarge-range               : ($xlarge * 1em + 0.063em, $xxlarge * 1em) !default;
+$xxlarge-range              : ($xxlarge * 1em + 0.063em, 99999999em) !default;
+
+
+// Media Query Ranges :: Mixin (from Foundation CSS)
+//-------------------------------------
+
+// functions
+
+@function lower-bound($range){
+  @if length($range) <= 0 {
+    @return 0;
+  }
+  @return nth($range,1);
+}
+
+@function upper-bound($range) {
+  @if length($range) < 2 {
+    @return 999999999999;
+  }
+  @return nth($range, 2);
+}
+
+// Call functions and declare media range variable
+
+$landscape    : "#{$screen} and (orientation: landscape)";
+$portrait     : "#{$screen} and (orientation: portrait)";
+$tiny-only    : "#{$screen} and (max-width:#{upper-bound($tiny-range)})";
+$small-up     : "#{$screen} and (min-width:#{lower-bound($small-range)})";
+$small-only   : "#{$screen} and (max-width:#{upper-bound($small-range)})";
+$medium-up    : "#{$screen} and (min-width:#{lower-bound($medium-range)})";
+$medium-only  : "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
+$large-up     : "#{$screen} and (min-width:#{lower-bound($large-range)})";
+$large-only   : "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
+$xlarge-up    : "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
+$xlarge-only  : "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
+$xxlarge-up   : "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
+$xxlarge-only : "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
+
+
+// Unison
+// speaking with JS with unison.js
+// http://bjork24.github.io/Unison/
+//-------------------------------------
+
+// config
+$debug: false;
+
+// Unison media
+$mq-sync:
+usn-small           0,
+usn-medium          $medium * 1em
+;
+// usn-large          $large,
+// usn-x-large        $xlarge,
+// usn-xx-large       $xxlarge
+
+// build each media query for js ingestion
+@each $mq in $mq-sync {
+  @media screen and (min-width: nth($mq, 2)) {
+    head { font-family: "#{nth($mq, 1)} #{nth($mq, 2)}"; }
+    body:after { content: "#{nth($mq, 1)} - min-width: #{nth($mq, 2)}"; }
+  }
+}
+head {
+// set clear on head to show Unison is set up correctly
+clear: both;
+// store hash of all breakpoints
+title { font-family: "#{$mq-sync}"; }
+}
+// debug styles to see breakpoint info
+body:after {
+  display: none;
+}
+// hide elements for conditional loading
+// only used for responsive comments plugin
+*[data-usn-if] { display: none; }
+
+

data/_sass/overkyll/config/_open-color.scss

@@ -0,0 +1,42 @@
+//
+//
+//  𝗖 𝗢 𝗟 𝗢 𝗥
+//  v 1.4.0
+//
+//  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+//  Gray
+$gray-list:    ( "0": #f8f9fa, "1": #f1f3f5, "2": #e9ecef, "3": #dee2e6, "4": #ced4da, "5": #adb5bd, "6": #868e96, "7": #495057, "8": #343a40, "9": #212529);
+$red-list:     ( "0": #fff5f5, "1": #ffe3e3, "2": #ffc9c9, "3": #ffa8a8, "4": #ff8787, "5": #ff6b6b, "6": #fa5252, "7": #f03e3e, "8": #e03131, "9": #c92a2a);
+$pink-list:    ( "0": #fff0f6, "1": #ffdeeb, "2": #fcc2d7, "3": #faa2c1, "4": #f783ac, "5": #f06595, "6": #e64980, "7": #d6336c, "8": #c2255c, "9": #a61e4d);
+$grape-list:   ( "0": #f8f0fc, "1": #f3d9fa, "2": #eebefa, "3": #e599f7, "4": #da77f2, "5": #cc5de8, "6": #be4bdb, "7": #ae3ec9, "8": #9c36b5, "9": #862e9c);
+$violet-list:  ( "0": #f3f0ff, "1": #e5dbff, "2": #d0bfff, "3": #b197fc, "4": #9775fa, "5": #845ef7, "6": #7950f2, "7": #7048e8, "8": #6741d9, "9": #5f3dc4);
+$indigo-list:  ( "0": #edf2ff, "1": #dbe4ff, "2": #bac8ff, "3": #91a7ff, "4": #748ffc, "5": #5c7cfa, "6": #4c6ef5, "7": #4263eb, "8": #3b5bdb, "9": #364fc7);
+$blue-list:    ( "0": #e8f7ff, "1": #ccedff, "2": #a3daff, "3": #72c3fc, "4": #4dadf7, "5": #329af0, "6": #228ae6, "7": #1c7cd6, "8": #1b6ec2, "9": #1862ab);
+$cyan-list:    ( "0": #e3fafc, "1": #c5f6fa, "2": #99e9f2, "3": #66d9e8, "4": #3bc9db, "5": #22b8cf, "6": #15aabf, "7": #1098ad, "8": #0c8599, "9": #0b7285);
+$teal-list:    ( "0": #e6fcf5, "1": #c3fae8, "2": #96f2d7, "3": #63e6be, "4": #38d9a9, "5": #20c997, "6": #12b886, "7": #0ca678, "8": #099268, "9": #087f5b);
+$green-list:   ( "0": #ebfbee, "1": #d3f9d8, "2": #b2f2bb, "3": #8ce99a, "4": #69db7c, "5": #51cf66, "6": #40c057, "7": #37b24d, "8": #2f9e44, "9": #2b8a3e);
+$lime-list:    ( "0": #f4fce3, "1": #e9fac8, "2": #d8f5a2, "3": #c0eb75, "4": #a9e34b, "5": #94d82d, "6": #82c91e, "7": #74b816, "8": #66a80f, "9": #5c940d);
+$yellow-list:  ( "0": #fff9db, "1": #fff3bf, "2": #ffec99, "3": #ffe066, "4": #ffd43b, "5": #fcc419, "6": #fab005, "7": #f59f00, "8": #f08c00, "9": #e67700);
+$orange-list:  ( "0": #fff4e6, "1": #ffe8cc, "2": #ffd8a8, "3": #ffc078, "4": #ffa94d, "5": #ff922b, "6": #fd7e14, "7": #f76707, "8": #e8590c, "9": #d9480f);
+
+
+$color-list: (
+  "gray": $gray-list,
+  "red": $red-list,
+  "pink": $pink-list,
+  "grape": $grape-list,
+  "violet": $violet-list,
+  "indigo": $indigo-list,
+  "blue": $blue-list,
+  "cyan": $cyan-list,
+  "teal": $teal-list,
+  "green": $green-list,
+  "lime": $lime-list,
+  "yellow": $yellow-list,
+  "orange": $orange-list
+);
+
+@function color($color, $spectrum) {
+  @return map-get(map-get($color-list, "#{$color}"),"#{$spectrum}");
+}

data/_sass/overkyll/config/_typography.scss

@@ -0,0 +1,136 @@
+////
+/// Typography
+////
+
+// Our variables
+//-------------------------------------
+$base-font-name:          -apple-system !default;
+$title-font-name:         -apple-system !default; 
+$base-font-family:        $base-font-name, system, sans-serif !default;
+$title-font-family:       $title-font-name, system, sans-serif !default;
+
+$ratio:                   1.20;
+$base:                    1;
+$base-em:                 $base * 1em;
+$base-px:                 $base * 16px;
+
+$ms0:                     1;
+$ms1:                     $ratio;        /* 1.2   */
+$ms2:                     $ratio * $ms1; /* 1.44  */
+$ms3:                     $ratio * $ms2; /* 1.728 */
+$ms4:                     $ratio * $ms3; /* 2.074 */
+$ms5:                     $ratio * $ms4; /* 2.488 */
+$ms6:                     $ratio * $ms5; /* 2.986 */
+$ms7:                     $ratio * $ms6; /* 3.583 */
+
+$smaller:                 $base-em / $ms1;
+$normal:                  $base-em * $ms0;
+$bigger:                  $base-em * $ms1;
+$title3:                  $base-em * $ms2;
+$title2:                  $base-em * $ms3;
+$title1:                  $base-em * $ms4;
+
+$line-height-base:        $base * $ms2;
+$base-line:               floor(($base-em * $line-height-base));
+
+body {
+  font-family: $base-font-family;
+  font-size: $base-em * $ms0;
+  line-height: $base * $ms3;
+  //font-size: calc(4vw + 4vh + 2vmin)
+}
+
+h3,
+h2 { line-height: $base * $ms1; }
+h1 { line-height: $base * $ms0; }
+
+h6, .h6 { font-size: $smaller; }
+h5, .h5 { font-size: $normal; }
+h4, .h4 { font-size: $bigger; }
+h3, .h3 { font-size: $title3; }
+h2, .h2 { font-size: $title2; }
+h1, .h1 { font-size: $title1; }
+
+// Calculate progressive fontsize between 2 breapoint :: insert the value of your breakpoint and of your 2 fontsize value for each breakpoint
+// from https://fvsch.com/code/css-locks/
+// https://css-tricks.com/between-the-lines/
+@mixin csslock-fontsize($breakpoint-down:$breakpoint-down, $breakpoint-up:$breakpoint-up, $size-down:$size-down, $size-up:$size-up) {
+  font-size: calc( #{$size-down}em + ( (#{$size-up} - #{$size-down}) / #{$size-down} ) * (100vw - #{$breakpoint-down}rem) / (#{$breakpoint-up} - #{$breakpoint-down}) );
+}
+
+@media #{$medium-up} {
+  body {
+    font-size: $base-em * $ms0;
+    @include csslock-fontsize($medium,$large,$ms0,$ms1);
+  }
+}
+
+@media #{$large-up} {
+  body {
+    font-size: $base-em * $ms2;
+    @include csslock-fontsize($large,$xlarge,$ms1,$ms2);
+  }
+}
+
+@media #{$xlarge-up} {
+  body {
+    font-size: $base-em * $ms3;
+    @include csslock-fontsize($xlarge,$xxlarge,$ms2,$ms4);
+  }
+}
+
+@media #{$xxlarge-up} {
+  body {
+    font-size: $base-em * $ms4;
+    @include csslock-fontsize($xxlarge,200,$ms4,$ms5);
+  }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+label, legend {
+  @if $title-font-name {
+    font-family: $title-font-family;
+  }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  word-wrap: break-word;
+  margin-top: $base-line;
+  margin-bottom: ($base-line / 2);
+
+  small,
+  .small {
+    font-size: 65%;
+  }
+}
+
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: ($base-line / 2);
+  margin-bottom: ($base-line / 2);
+
+  small,
+  .small {
+    font-size: 75%;
+  }
+}
+
+h1,h2,h3,h4,h5,h6 {
+  color: currentColor;
+  &,a,a:visited {
+    color: currentColor;
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+p {
+  margin: 0 0 ($base-line / 2);
+}

data/_sass/overkyll/generic/_broken-images.scss

@@ -0,0 +1,36 @@
+// Code from
+// http://bitsofco.de/styling-broken-images/
+
+img {
+  /* Same as first example */
+  min-height: 50px;
+}
+
+img:before {
+  content: " ";
+  display: block;
+
+  position: absolute;
+  top: -10px;
+  left: 0;
+  height: calc(100% + 10px);
+  width: 100%;
+  background-color: rgb(230, 230, 230);
+  border: 2px dotted rgb(200, 200, 200);
+  border-radius: 5px;
+}
+
+img:after {
+  content: "\f127" " Image indisponible " attr(alt);
+  display: block;
+  font-size: 16px;
+  font-style: normal;
+  font-family: FontAwesome;
+  color: rgb(100, 100, 100);
+
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}

data/_sass/overkyll/generic/_normalize-opentype.scss

@@ -0,0 +1,112 @@
+//! normalize-opentype.css v0.2.4 | MIT License | kennethormandy.com/journal/normalize-opentype-css */
+
+//**
+// 1. Inherit style issues with custom selections, per robsterlini.co.uk/journal/opentype-and-selection-dont-mix
+// 2. Turn on kerning, standard ligatures, and proportional, oldstyle numerals
+//    Turn off all other ligatures, tabular, lining numerals, and alternates
+//    Uses same settings for tables
+// 3. Hard-codes fallback text selection for issue #18, color is Chrome’s per via http://stackoverflow.com/a/16094931/864799
+////
+
+::selection {
+  color: inherit; // 1.
+  text-shadow: inherit; // 2.
+  background-color: #ACCEF7; // 3.
+}
+
+html,
+body,
+table {
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; /* 2. */
+}
+
+// Headings
+//========================================================================== //
+
+//
+// 1. Turn on discretionary ligatures for larger headings
+////
+
+h1,
+h2,
+h3 {
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1; /* 1. */
+}
+
+// Text-level semantics
+//========================================================================== //
+
+//
+// 1. Change all letters to uppercase
+// 2. Turn on small caps for upper and lowercase letters
+////
+
+abbr {
+  text-transform: uppercase; /* 1 */
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; /* 2 */
+}
+
+time {
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
+}
+
+//
+// 1. Turn off kerning and ligatures,
+//    Turn on lining, tabular numerals, slashed zero
+/////
+
+pre,
+kbd,
+samp,
+code {
+  font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1; /* 1. */
+}
+
+mark {
+}
+
+small {
+}
+
+cite {
+}
+
+//
+// 1. Turn on proper supercript numerals
+////
+
+sup {
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; /* 1. */
+}
+
+//
+// 1. Turn on proper subscript numerals
+////
+
+sub {
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; /* 1. */
+}
+
+// Forms
+//========================================================================== //
+
+input[type="color"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="number"],
+input[type="range"],
+input[type="tel"],
+input[type="week"] {
+  font-feature-settings: "kern" 0, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 1, "zero" 0; /* 1. */
+}
+
+
+//
+// 1. Turns on tabular, lining numerals and slashed zero
+////
+
+tbody,
+caption {
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1; /* 1. */
+}

data/_sass/overkyll/generic/_print.scss

@@ -0,0 +1,74 @@
+
+//
+// Print
+//
+// Quelques astuces trouvées chez Alsa :
+// http://www.alsacreations.com/tuto/lire/586-feuille-style-css-print-impression.html
+// http://www.alsacreations.com/astuce/lire/1160-une-feuille-de-styles-de-base-pour-le-media-print.html
+// https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6#.ad9m8zgbd
+////
+
+@media print {
+
+  // Reset
+  *,
+  *:before,
+  *:after,
+  *:first-letter,
+  p:first-line,
+  div:first-line,
+  blockquote:first-line,
+  li:first-line {
+      background: transparent !important;
+      color: #000 !important;
+      box-shadow: none !important;
+      text-shadow: none !important;
+  }
+
+  // Content
+  body > *:not(main) {
+      display: none;
+  }
+  a[href]:after {
+      content: " (" attr(href) ")";
+  }
+  abbr[title]:after {
+      content: " (" attr(title) ")";
+  }
+
+  @page {
+    margin: 1cm;
+  }
+  html{
+    font-size:13pt;
+  }
+  body{
+    color:#000;
+  }
+  a,
+  header a{
+    color:#000;
+  }
+  p, blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+  blockquote, ul, ol {
+    page-break-inside: avoid;
+  }
+  h1, h2, h3, caption {
+    page-break-after: avoid;
+  }
+  .wrapper{
+    max-width: none;
+    margin:0;
+  }
+  header{
+    background: none;
+  }
+  nav,
+  .breadcrumb{
+    display:none;
+  }
+
+}