overkyll-jekyll-theme 0.1 → 0.2

data/_sass/config/_colors.scss

@@ -0,0 +1,61 @@
+////
+/// Colors
+////
+
+// better color for development
+//-------------------------------------
+
+$navy:                    #001F3F;
+$blue:                    #0074D9;
+$aqua:                    #7FDBFF;
+$teal:                    #39CCCC;
+$olive:                   #3D9970;
+$green:                   #2ECC40;
+$lime:                    #01FF70;
+$yellow:                  #FFDC00;
+$orange:                  #FF851B;
+$red:                     #FF4136;
+$fuchsia:                 #F012BE;
+$purple:                  #B10DC9;
+$maroon:                  #85144B;
+
+// Site color
+//-------------------------------------
+$text-color:              #111;
+$background-color:        #fdfdfd;
+$brand-color:             #111;
+$color-primary:           $brand-color;
+$color-secondary:         $aqua;
+
+$grey-color:              #828282;
+$grey-color-light:        lighten($grey-color, 40%);
+$grey-color-dark:         darken($grey-color, 25%);
+
+
+// Color palette
+//-------------------------------------
+
+$palettes: (
+    primary: (
+        base:   $color-primary,
+        light:  mix(white, $color-primary, 30%),
+        dark:   mix(black, $color-primary, 30%)
+    ),
+    secondary: (
+        base:   #ffa900,
+        light:  mix(white, $color-secondary, 30%),
+        dark:   mix(black, $color-secondary, 30%)
+    ),
+    grey: (
+        base:   #595959,
+        light:  rgba(0,0,0,0.12),
+        dark:   #353535
+    )
+);
+
+// Mixin for color palette
+//-------------------------------------
+
+@function palette($palette, $tone: 'base') {
+  @return map-get(map-get($palettes, $palette), $tone);
+}

data/_sass/config/_mediaqueries.scss

@@ -0,0 +1,102 @@
+////
+/// Media queries
+////
+
+// Media Query Ranges
+//-------------------------------------
+
+$tiny-range                 : (0em, 30em) !default;
+$small-range                : (0em, 48em) !default;
+$medium-range               : (48.063em, 64em) !default;
+$large-range                : (64.063em, 90em) !default;
+$xlarge-range               : (90.063em, 120em) !default;
+$xxlarge-range              : (120.063em, 99999999em) !default;
+
+
+// Media Query breakpoint
+//-------------------------------------
+
+$screen:                    "only screen";
+$small:                     0;
+$tiny:                      30.063em;  /*480px */
+$medium:                    48.063em;  /*768px */
+$large:                     64.063em;  /*1025px*/
+$xlarge:                    90.063em;  /*1441px*/
+$xxlarge:                   120em;     /*1921px*/
+
+
+// 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)";
+$small-up     : $screen;
+$tiny-only    : "#{$screen} and (max-width:#{upper-bound($tiny-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
+//-------------------------------------
+
+// config
+$debug: false;
+
+// Unison media
+$mq-sync:
+usn-small           $small,
+usn-medium          $medium,
+usn-large           $large
+;
+// 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/config/_typography.scss

@@ -0,0 +1,154 @@
+////
+/// Typography
+////
+
+// 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;
+$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 */
+
+$small:                   $base-em / $ms1;
+$normal:                  $base-em * $ms0;
+$big:                     $base-em * $ms1;
+$bigger:                  $base-em * $ms2;
+$title2:                  $base-em * $ms3;
+$title1:                  $base-em * $ms4;
+
+$line-height-base:        $base * $ms2;
+$line-height-computed:    floor(($base-em * $line-height-base));
+$base-line:               $line-height-computed;
+
+body {
+  font-family: $base-font-family;
+  font-weight: 400;
+  font-size: $base-em * $ms0;
+  line-height: $base * $ms2;
+}
+
+h3,
+h2 { line-height: $base * $ms1; }
+h1 { line-height: $base * $ms0; }
+
+h6, .h6 { font-size: $small; }
+h5, .h5 { font-size: $normal; }
+h4, .h4 { font-size: $big; }
+h3, .h3 { font-size: $bigger; }
+h2, .h2 { font-size: $title2; }
+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; }
+}
+
+@media #{$xlarge-up} {
+  h1, .h1 { font-size: $base-em * $ms7; }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  word-wrap: break-word;
+  margin-top: $line-height-computed;
+  margin-bottom: ($line-height-computed / 2);
+
+  small,
+  .small {
+    font-size: 65%;
+  }
+}
+
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: ($line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
+
+  small,
+  .small {
+    font-size: 75%;
+  }
+}
+
+h1,h2,h3,h4,h5,h6 {
+  &,a {
+    text-decoration: none;
+  }
+}
+
+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/_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/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. */
+}