jekyll-theme-future-imperfect 0.1.0

data/_sass/layout/_intro.scss

@@ -0,0 +1,87 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Intro */
+
+#intro {
+  .logo {
+    border-bottom: 0;
+    display: inline-block;
+    margin: 0 0 (_size(element-margin) * 0.5) 0;
+    overflow: hidden;
+    position: relative;
+    width: 4em;
+
+    &:before {
+      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none" zoomAndPan="disable"><polygon points="0,0 100,0 100,25 50,0 0,25" style="fill:#{_palette(bg-alt)}" /><polygon points="0,100 100,100 100,75 50,100 0,75"  style="fill:#{_palette(bg-alt)}" /></svg>');
+      background-position: top left;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      content: '';
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    img {
+      display: block;
+      margin-left: -0.25em;
+      width: 4.5em;
+    }
+  }
+
+  header {
+    h2 {
+      font-size: 2em;
+      font-weight: _font(weight-heading-extrabold);
+    }
+
+    p {
+      font-size: 0.8em;
+    }
+  }
+
+  @include breakpoint('<=large') {
+    margin: 0 0 _size(section-spacing) 0;
+    text-align: center;
+
+    header {
+      h2 {
+        font-size: 2em;
+      }
+
+      p {
+        font-size: 0.7em;
+      }
+    }
+  }
+
+  @include breakpoint('<=small') {
+    margin: 0 0 _size(section-spacing-small) 0;
+    padding: 1.25em 0;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    .logo {
+      margin: 0 0 (_size(element-margin) * 0.25) 0;
+    }
+
+    header {
+      h2 {
+        font-size: 1.25em;
+      }
+
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

data/_sass/layout/_main.scss

@@ -0,0 +1,13 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Main */
+
+#main {
+  @include vendor('flex-grow', '1');
+  -ms-flex: 1;
+  width: 100%;
+}

data/_sass/layout/_menu.scss

@@ -0,0 +1,96 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Menu */
+
+#menu {
+  @include vendor('transform', 'translateX(#{_size(menu)})');
+  @include vendor('transition', ('transform #{_duration(menu)} ease',
+      'visibility #{_duration(menu)}'
+    ));
+  -webkit-overflow-scrolling: touch;
+  background: _palette(bg);
+  border-left: solid 1px _palette(border);
+  box-shadow: none;
+  height: 100%;
+  max-width: 80%;
+  overflow-y: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+  width: _size(menu);
+  z-index: _misc(z-index-base) + 2;
+
+  >* {
+    border-top: solid 1px _palette(border);
+    padding: _size(section-spacing);
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  > :first-child {
+    border-top: 0;
+  }
+
+  .links {
+    list-style: none;
+    padding: 0;
+
+    >li {
+      border: 0;
+      border-top: dotted 1px _palette(border);
+      margin: 1.5em 0 0 0;
+      padding: 1.5em 0 0 0;
+
+      a {
+        display: block;
+        border-bottom: 0;
+
+        h3 {
+          @include vendor('transition', 'color #{_duration(transition)} ease');
+          font-size: 0.7em;
+        }
+
+        p {
+          font-family: _font(family-heading);
+          font-size: 0.6em;
+          font-weight: _font(weight-heading);
+          letter-spacing: _font(kerning-heading);
+          letter-spacing: _size(letter-spacing-alt);
+          margin-bottom: 0;
+          text-decoration: none;
+          text-transform: uppercase;
+        }
+
+        &:hover {
+          h3 {
+            color: _palette(accent);
+          }
+        }
+      }
+
+      &:first-child {
+        border-top: 0;
+        margin-top: 0;
+        padding-top: 0;
+      }
+    }
+  }
+
+  body.is-menu-visible & {
+    @include vendor('transform', 'translateX(0)');
+    visibility: visible;
+  }
+
+  @include breakpoint('<=small') {
+    >* {
+      padding: _size(section-spacing-small);
+    }
+  }
+}

data/_sass/layout/_sidebar.scss

@@ -0,0 +1,34 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Sidebar */
+
+#sidebar {
+  margin-right: _size(section-spacing);
+  min-width: 22em;
+  width: 22em;
+
+  >* {
+    border-top: solid 1px _palette(border);
+    margin: _size(section-spacing) 0 0 0;
+    padding: _size(section-spacing) 0 0 0;
+  }
+
+  > :first-child {
+    border-top: 0;
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  @include breakpoint('<=large') {
+    border-top: solid 1px _palette(border);
+    margin: _size(section-spacing) 0 0 0;
+    min-width: 0;
+    padding: _size(section-spacing) 0 0 0;
+    width: 100%;
+    overflow-x: hidden;
+  }
+}

data/_sass/layout/_wrapper.scss

@@ -0,0 +1,38 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper */
+
+#wrapper {
+  @include vendor('display', 'flex');
+  @include vendor('flex-direction', 'row-reverse');
+  @include vendor('transition', 'opacity #{_duration(menu)} ease');
+  margin: 0 auto;
+  max-width: 100%;
+  opacity: 1;
+  padding: (_size(section-spacing) * 1.5);
+  width: 90em;
+
+  body.is-menu-visible & {
+    opacity: 0.15;
+  }
+
+  @include breakpoint('<=xlarge') {
+    padding: _size(section-spacing);
+  }
+
+  @include breakpoint('<=large') {
+    display: block;
+  }
+
+  @include breakpoint('<=small') {
+    padding: _size(section-spacing-small);
+  }
+
+  body.single & {
+    display: block;
+  }
+}

data/_sass/libs/_breakpoints.scss

@@ -0,0 +1,223 @@
+// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+/// Breakpoints.
+/// @var {list}
+$breakpoints: () !global;
+
+// Mixins.
+
+/// Sets breakpoints.
+/// @param {map} $x Breakpoints.
+@mixin breakpoints($x: ()) {
+  $breakpoints: $x !global;
+}
+
+/// Wraps @content in a @media block targeting a specific orientation.
+/// @param {string} $orientation Orientation.
+@mixin orientation($orientation) {
+  @media screen and (orientation: #{$orientation}) {
+    @content;
+  }
+}
+
+/// Wraps @content in a @media block using a given query.
+/// @param {string} $query Query.
+@mixin breakpoint($query: null) {
+
+  $breakpoint: null;
+  $op: null;
+  $media: null;
+
+  // Determine operator, breakpoint.
+
+  // Greater than or equal.
+  @if (str-slice($query, 0, 2)=='>=') {
+
+    $op: 'gte';
+    $breakpoint: str-slice($query, 3);
+
+  }
+
+  // Less than or equal.
+  @elseif (str-slice($query, 0, 2)=='<=') {
+
+    $op: 'lte';
+    $breakpoint: str-slice($query, 3);
+
+  }
+
+  // Greater than.
+  @elseif (str-slice($query, 0, 1)=='>') {
+
+    $op: 'gt';
+    $breakpoint: str-slice($query, 2);
+
+  }
+
+  // Less than.
+  @elseif (str-slice($query, 0, 1)=='<') {
+
+    $op: 'lt';
+    $breakpoint: str-slice($query, 2);
+
+  }
+
+  // Not.
+  @elseif (str-slice($query, 0, 1)=='!') {
+
+    $op: 'not';
+    $breakpoint: str-slice($query, 2);
+
+  }
+
+  // Equal.
+  @else {
+
+    $op: 'eq';
+    $breakpoint: $query;
+
+  }
+
+  // Build media.
+  @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+
+    $a: map-get($breakpoints, $breakpoint);
+
+    // Range.
+    @if (type-of($a)=='list') {
+
+      $x: nth($a, 1);
+      $y: nth($a, 2);
+
+      // Max only.
+      @if ($x==null) {
+
+        // Greater than or equal (>= 0 / anything)
+        @if ($op=='gte') {
+          $media: 'screen';
+        }
+
+        // Less than or equal (<= y)
+        @elseif ($op=='lte') {
+          $media: 'screen and (max-width: '+ $y + ')';
+        }
+
+        // Greater than (> y)
+        @elseif ($op=='gt') {
+          $media: 'screen and (min-width: '+ ($y + 1) + ')';
+        }
+
+        // Less than (< 0 / invalid)
+        @elseif ($op=='lt') {
+          $media: 'screen and (max-width: -1px)';
+        }
+
+        // Not (> y)
+        @elseif ($op=='not') {
+          $media: 'screen and (min-width: '+ ($y + 1) + ')';
+        }
+
+        // Equal (<= y)
+        @else {
+          $media: 'screen and (max-width: '+ $y + ')';
+        }
+
+      }
+
+      // Min only.
+      @else if ($y==null) {
+
+        // Greater than or equal (>= x)
+        @if ($op=='gte') {
+          $media: 'screen and (min-width: '+ $x + ')';
+        }
+
+        // Less than or equal (<= inf / anything)
+        @elseif ($op=='lte') {
+          $media: 'screen';
+        }
+
+        // Greater than (> inf / invalid)
+        @elseif ($op=='gt') {
+          $media: 'screen and (max-width: -1px)';
+        }
+
+        // Less than (< x)
+        @elseif ($op=='lt') {
+          $media: 'screen and (max-width: '+ ($x - 1) + ')';
+        }
+
+        // Not (< x)
+        @elseif ($op=='not') {
+          $media: 'screen and (max-width: '+ ($x - 1) + ')';
+        }
+
+        // Equal (>= x)
+        @else {
+          $media: 'screen and (min-width: '+ $x + ')';
+        }
+
+      }
+
+      // Min and max.
+      @else {
+
+        // Greater than or equal (>= x)
+        @if ($op=='gte') {
+          $media: 'screen and (min-width: '+ $x + ')';
+        }
+
+        // Less than or equal (<= y)
+        @elseif ($op=='lte') {
+          $media: 'screen and (max-width: '+ $y + ')';
+        }
+
+        // Greater than (> y)
+        @elseif ($op=='gt') {
+          $media: 'screen and (min-width: '+ ($y + 1) + ')';
+        }
+
+        // Less than (< x)
+        @elseif ($op=='lt') {
+          $media: 'screen and (max-width: '+ ($x - 1) + ')';
+        }
+
+        // Not (< x and > y)
+        @elseif ($op=='not') {
+          $media: 'screen and (max-width: '+ ($x - 1) + '), screen and (min-width: '+ ($y + 1) + ')';
+        }
+
+        // Equal (>= x and <= y)
+        @else {
+          $media: 'screen and (min-width: '+ $x + ') and (max-width: '+ $y + ')';
+        }
+
+      }
+
+    }
+
+    // String.
+    @else {
+
+      // Missing a media type? Prefix with "screen".
+      @if (str-slice($a, 0, 1)=='(') {
+        $media: 'screen and '+ $a;
+      }
+
+      // Otherwise, use as-is.
+      @else {
+        $media: $a;
+      }
+
+    }
+
+  }
+
+  // Output.
+  @media #{$media} {
+    @content;
+  }
+
+}