overkyll-jekyll-theme 0.8 → 0.9

data/_sass/overkyll/generic/_skiplink.scss

@@ -0,0 +1,27 @@
+
+//
+// Skiplink
+//
+
+/* styling skip links */
+.skip-links {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  & a {
+    position: absolute;
+    overflow: hidden;
+    display: inline-block;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0.5em;
+    background: black;
+    color: white;
+    text-decoration: none;
+
+    &:focus {
+      position: static;
+      overflow: visible;
+      clip: auto;
+    }
+  }
+}

data/_sass/overkyll/generic/_syntax-highlighting.scss

@@ -0,0 +1,73 @@
+/**
+ * Syntax highlighting styles
+ */
+ 
+.highlight {
+    margin: 0 0 $base_line / 2;
+    text-align: left !important; // override .post .figure 
+    background: #fff;
+
+    .highlighter-rouge & {
+      background: #eef;
+    }
+
+    .c     { color: #998; font-style: italic } // Comment
+    .err   { color: #a61717; background-color: #e3d2d2 } // Error
+    .k     { font-weight: bold } // Keyword
+    .o     { font-weight: bold } // Operator
+    .cm    { color: #998; font-style: italic } // Comment.Multiline
+    .cp    { color: #999; font-weight: bold } // Comment.Preproc
+    .c1    { color: #998; font-style: italic } // Comment.Single
+    .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+    .gd    { color: #000; background-color: #fdd } // Generic.Deleted
+    .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+    .ge    { font-style: italic } // Generic.Emph
+    .gr    { color: #a00 } // Generic.Error
+    .gh    { color: #999 } // Generic.Heading
+    .gi    { color: #000; background-color: #dfd } // Generic.Inserted
+    .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+    .go    { color: #888 } // Generic.Output
+    .gp    { color: #555 } // Generic.Prompt
+    .gs    { font-weight: bold } // Generic.Strong
+    .gu    { color: #aaa } // Generic.Subheading
+    .gt    { color: #a00 } // Generic.Traceback
+    .kc    { font-weight: bold } // Keyword.Constant
+    .kd    { font-weight: bold } // Keyword.Declaration
+    .kp    { font-weight: bold } // Keyword.Pseudo
+    .kr    { font-weight: bold } // Keyword.Reserved
+    .kt    { color: #458; font-weight: bold } // Keyword.Type
+    .m     { color: #099 } // Literal.Number
+    .s     { color: #d14 } // Literal.String
+    .na    { color: #008080 } // Name.Attribute
+    .nb    { color: #0086B3 } // Name.Builtin
+    .nc    { color: #458; font-weight: bold } // Name.Class
+    .no    { color: #008080 } // Name.Constant
+    .ni    { color: #800080 } // Name.Entity
+    .ne    { color: #900; font-weight: bold } // Name.Exception
+    .nf    { color: #900; font-weight: bold } // Name.Function
+    .nn    { color: #555 } // Name.Namespace
+    .nt    { color: #000080 } // Name.Tag
+    .nv    { color: #008080 } // Name.Variable
+    .ow    { font-weight: bold } // Operator.Word
+    .w     { color: #bbb } // Text.Whitespace
+    .mf    { color: #099 } // Literal.Number.Float
+    .mh    { color: #099 } // Literal.Number.Hex
+    .mi    { color: #099 } // Literal.Number.Integer
+    .mo    { color: #099 } // Literal.Number.Oct
+    .sb    { color: #d14 } // Literal.String.Backtick
+    .sc    { color: #d14 } // Literal.String.Char
+    .sd    { color: #d14 } // Literal.String.Doc
+    .s2    { color: #d14 } // Literal.String.Double
+    .se    { color: #d14 } // Literal.String.Escape
+    .sh    { color: #d14 } // Literal.String.Heredoc
+    .si    { color: #d14 } // Literal.String.Interpol
+    .sx    { color: #d14 } // Literal.String.Other
+    .sr    { color: #009926 } // Literal.String.Regex
+    .s1    { color: #d14 } // Literal.String.Single
+    .ss    { color: #990073 } // Literal.String.Symbol
+    .bp    { color: #999 } // Name.Builtin.Pseudo
+    .vc    { color: #008080 } // Name.Variable.Class
+    .vg    { color: #008080 } // Name.Variable.Global
+    .vi    { color: #008080 } // Name.Variable.Instance
+    .il    { color: #099 } // Literal.Number.Integer.Long
+}

data/_sass/overkyll/object/_header.scss

@@ -0,0 +1,154 @@
+////
+/// Header
+////
+
+// Site Header
+//------------------------
+
+// Site header :: general container
+.site-header {
+  position: relative;
+  margin-bottom: $base-line*2;
+  padding: 0;
+  text-align: center;
+  color: #fff;
+  z-index: 0;
+  .wrapper {
+    @media #{$small-only} {
+      max-width: 100%;
+    }
+  }
+  .wrapper--flex {
+    @media #{$medium-up} {
+      display: flex;
+      align-content: center;
+      align-items: center;
+    }
+  }
+}
+
+// Site header top :: logo and menu
+.site-header-top {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: $base-line/2;
+  width: 100%;
+  background: transparent;
+  @media #{$medium-up} {
+    flex-direction: row;
+  }
+}
+
+// Site header hero :: class on general container for hero header
+.site-header-hero {
+  padding: 0;
+  background-size: cover;
+  background-position: center center;
+  background: $color-grey;
+  background-image: linear-gradient(to top, $color-grey 0%, $color-grey-dark 100%);
+  .wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 40vmin;
+  }
+  a {
+    text-decoration: none;
+    color: currentColor;
+    &:visited {
+      color: currentColor;
+    }
+  }
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    content: '';
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.3);
+    z-index: -1;
+    opacity: 1;
+    transition: opacity 1500ms ease-in-out;
+    
+    @at-root {
+      .site-header.b-lazy::after {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Site header img TAG for responsives images
+.site-header-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: cover;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    transition: opacity 200ms ease-in-out;
+}
+
+// Site title :: container for a text
+.site-title {
+  display: block;
+  margin: 0;
+  font-size: $base-em * $ms3;
+  line-height: 1;
+  color: currentColor;
+  text-decoration: none;
+}
+
+// Site title hero :: class on site-title for hero title
+.site-title-hero {
+  display: inline-block;
+  padding: $base-line/2;
+  font-size: $title1;
+  font-weight: 300;
+}
+
+// Site title link :: class when site-title is a link (inside pages)
+.site-title-link {
+  color: currentColor;
+  text-decoration: none;
+  &,&:visited {
+    color: currentColor;
+  }
+}
+
+// Site information :: scope site-title + site-logo
+.site-information {
+  margin: 0;
+}
+
+// Site slogan
+.site-slogan {
+  text-align: center;
+  color: #fff;
+}
+
+// Exergue :: zone just after the header
+.exergue {
+  margin-top: -2*$base-line;
+  padding: $base-line;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  background: $color-grey-dark;
+  small {
+    display: block;
+    clear: both;
+    width: 100%;
+  }
+  a {
+    color: #fff;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

data/_sass/overkyll/object/_navigation.scss

@@ -0,0 +1,56 @@
+////
+/// Navigation
+////
+
+// Navigation main
+// inspired https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8#.hg6g5yhtd
+
+nav {
+  ul {
+    list-style: none;
+  }
+  a {
+    text-decoration: none;
+  }
+}
+
+.nav-main {
+  flex: 1;
+  @media #{$small-only} {
+    overflow-y: hidden !important;
+    height: 40px !important;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+  }
+  ul {
+    margin: 0;
+    padding: 0.3em 0;
+    min-width: 100%;
+    list-style: none;
+    text-align: center;
+    @media #{$small-only} {
+      display: block;
+      white-space: nowrap;
+      padding-bottom: 100px !important;
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+    @media #{$medium-up} {
+      .wrapper--flex & {
+        text-align: right;
+      }
+    }
+  }
+  li {
+    display: inline-block;
+    text-align: center;
+    margin: 0;
+    padding: 0.2rem 1.6rem 0;
+  }
+  a {
+    font-weight: bold;
+    & + & {
+       margin-left: 1em;
+    }
+  }
+}

data/_sass/overkyll/object/_pagination.scss

@@ -0,0 +1,46 @@
+////
+/// Pagination
+////
+
+.pagination--prevnext {
+  clear: both;
+  @media #{$medium-up} {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 2vmin;
+  }
+  margin: 3rem auto;
+}
+
+.pagination--prev {
+  padding-left: 1em;
+  a:before {
+    left: -1em;
+    content:"< ";
+  }
+}
+
+.pagination--next {
+  padding-right: 1em;
+  text-align: right;
+  a:before {
+    right: -1em;
+    content:" >";
+  }
+}
+
+.pagination--item {
+  position: relative;
+  display: block;
+  padding: 1em 0;
+  font-size: $smaller;
+  color: #333;
+  &:before {
+    position: absolute;
+    
+  }
+}
+
+.pagination--item:active {
+  background: $color-grey-light;
+}

data/_sass/overkyll/object/_posts.scss

@@ -0,0 +1,22 @@
+////
+/// Post
+////
+
+.post {
+  padding-bottom: $base-line;
+  figure {
+    text-align: center;
+  }
+  img {
+    margin: 0.5em auto 1.5em;
+  }
+}
+
+.posts-archive {
+  @include list-inline();
+  > li {
+    &:not(:last-child):after {
+      content: ' - ';
+    }
+ }
+}

data/_sass/overkyll/overkyll.scss

@@ -0,0 +1,29 @@
+@charset "utf-8";
+
+// Import partials from `sass_dir` (defaults to `_sass`)
+
+// Configuration
+@import "config/open-color";
+@import "config/colors";
+@import "config/mediaqueries";
+@import "config/typography";
+
+// Tool
+@import "tool/utilities";
+
+// Base
+@import "base/normalize";
+@import "base/base";
+@import "base/layout";
+
+// Generic
+@import "generic/normalize-opentype";
+@import "generic/syntax-highlighting";
+@import "generic/skiplink";
+@import "generic/print";
+
+// Object
+@import "object/header";
+@import "object/pagination";
+@import "object/posts";
+@import "object/navigation";

data/_sass/overkyll/tool/_utilities.scss

@@ -0,0 +1,97 @@
+//
+// Utility classes
+// --------------------------------------------------
+
+
+// Floats
+// -------------------------
+
+.clearfix {
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+.center {
+  margin: 0 auto $line-height-base;
+  text-align: center;
+}
+
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+
+ // List
+ // -------------------------
+
+@mixin list-inline {
+  padding: 0;
+  margin: 0 0 $base-line;
+  li {
+    display: inline-block;
+  }
+}
+
+
+// Toggling content
+// -------------------------
+// Note: Deprecated .hide in favor of .invisible
+
+.hide {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+.invisible {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// For Affix plugin
+// -------------------------
+
+.affix {
+  position: fixed;
+}
+
+
+// Icons
+// -------------------------
+
+.icon {
+  > svg {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    path {
+      fill: $color-grey;
+    }
+  }
+}