jekyll-text-theme 1.5.0 → 2.0.0

data/_sass/common/_variables.scss

@@ -1,64 +1,120 @@
 $base: (
   font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
-  code-font-family:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
+  font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
 
   font-size-root:         16px,
+
+  font-size-xl:           1.6rem,
+  font-size-lg:           1.25rem,
   font-size:              1rem,
+  font-size-sm:           .875rem,
+  font-size-xs:           .75rem,
+
+  font-size-h1-lg:        3rem,
+  font-size-h2-lg:        2rem,
+  font-size-h3-lg:        1.75rem,
+  font-size-h4-lg:        1.5rem,
+  font-size-h5-lg:        1.25rem,
+  font-size-h6-lg:        1.25rem,
 
-  font-size-h1:           2.3rem,
-  font-size-h2:           1.8rem,
+  font-size-h1:           2.5rem,
+  font-size-h2:           1.9rem,
   font-size-h3:           1.5rem,
   font-size-h4:           1.2rem,
   font-size-h5:           1rem,
   font-size-h6:           1rem,
-  font-size-sub:          .9rem,
-  font-size-tiny:         .8rem,
-
-  font-size-h1-small:     2rem,
-  font-size-h2-small:     1.5rem,
-  font-size-h3-small:     1.35rem,
-  font-size-h4-small:     1.15rem,
-
-  font-size-header-list:  1.4rem,
-  font-size-h1-excerpt:   1rem,
-  font-size-h2-excerpt:   .975rem,
-  font-size-h3-excerpt:   .95rem,
-  font-size-h4-excerpt:   .925rem,
-  font-size-h5-excerpt:   .9rem,
-  font-size-h6-excerpt:   .9rem,
+
+  font-size-h1-sm:        2rem,
+  font-size-h2-sm:        1.5rem,
+  font-size-h3-sm:        1.35rem,
+  font-size-h4-sm:        1.15rem,
+  font-size-h5-sm:        1rem,
+  font-size-h6-sm:        1rem,
+
+  font-size-h1-xs:        1rem,
+  font-size-h2-xs:        .9rem,
+  font-size-h3-xs:        .85rem,
+  font-size-h4-xs:        .8rem,
+  font-size-h5-xs:        .75rem,
+  font-size-h6-xs:        .75rem,
 
   font-weight:            400,
   font-weight-bold:       700,
 
-  line-height-small:      1.4,
+  line-height-xl:         2.1,
+  line-height-lg:         1.8,
   line-height:            1.6,
-  line-height-large:      1.8,
+  line-height-sm:         1.4,
+  line-height-xs:         1.2,
+
+  spacer:                 1rem,
 
   vertical-space:         .5rem,
-  vertical-space-large:   1.4rem,
-  horizontal-space:       .25rem,
-  horizontal-item-vertical-space: .2rem
+  vertical-space-lg:      1.4rem,
+
+  border-radius-lg:       .8rem,
+  border-radius:          .4rem,
+  border-radius-sm:       .2rem
 );
 
-$shape: (
-  round-length:           2rem,
-  round-rect-radius:      .4rem,
+$spacers: (
+  0:                      0,
+  1:                      map-get($base, spacer) * .25,
+  2:                      map-get($base, spacer) * .5,
+  3:                      map-get($base, spacer),
+  4:                      map-get($base, spacer) * 1.5,
+  5:                      map-get($base, spacer) * 3
 );
 
 $layout: (
   header-height:          5rem,
-  header-height-small:    3rem,
+  header-height-sm:       3rem,
   content-max-width:      850px,
+  sidebar-width:          250px,
+  sidebar-header-height:  3rem,
   aside-width:            220px,
-  footer-height:          12rem
+  footer-height:          10rem
 );
 
+//     sm       md       lg
+// | ------ | ------ | ------ |
+// 0       500      1024      ∞
+
 $responsive: (
-  s:                      500px,
-  l:                      1024px
+  sm:                      0px,
+  md:                      500px,
+  lg:                      1024px
 );
 
 $animation: (
   duration:               .6s,
-  timing-function:        ease
+  timing-function:        ease-in-out
+);
+
+$link: (
+  transition:             all .2s ease-in-out
+);
+
+$button: (
+  padding-y-lg:           .5rem,
+  padding-x-lg:           1.2rem,
+
+  padding-y:              .1rem,
+  padding-x:              .55rem,
+
+  padding-y-sm:           .06rem,
+  padding-x-sm:           .35rem,
+
+  font-weight:            map-get($base, font-weight-bold),
+
+  circle-diameter-lg:     3rem,
+  circle-diameter:        2rem,
+  circle-diameter-sm:     1.2rem,
+
+  transition:             all .2s ease-in-out
+);
+
+$menu: (
+  horizontal-spacer:      1,
+  horizontal-item-vertical-spacer: 1
 );

data/_sass/common/classes/_animation.scss

@@ -1,4 +1,13 @@
 @mixin animation($value) {
   -webkit-animation: $value;
           animation: $value;
+}
+
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
 }

data/_sass/common/classes/_clearfix.scss

@@ -4,4 +4,12 @@
     display: table;
     clear: both;
   }
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
 }

data/_sass/common/classes/_grid.scss

@@ -0,0 +1,48 @@
+$grid-columns: 12;
+
+@mixin make-col($columns) {
+  .col-#{$columns} {
+    display: inline-block;
+    letter-spacing: normal;
+    width: percentage($columns / $grid-columns);
+  }
+}
+
+@mixin make-md-col($columns) {
+  @include media-breakpoint-down(lg) {
+    .col-md-#{$columns} {
+      display: inline-block;
+      letter-spacing: normal;
+      width: percentage($columns / $grid-columns);
+    }
+  }
+}
+
+@mixin make-sm-col($columns) {
+  @include media-breakpoint-down(md) {
+    .col-sm-#{$columns} {
+      display: inline-block;
+      letter-spacing: normal;
+      width: percentage($columns / $grid-columns);
+    }
+  }
+}
+
+.grid {
+  & > .row {
+    @include flexbox();
+    @include flex-wrap(wrap);
+    letter-spacing: -.31em;
+    & > {
+      @for $i from 1 through $grid-columns {
+        @include make-col($i);
+      }
+      @for $i from 1 through $grid-columns {
+        @include make-md-col($i);
+      }
+      @for $i from 1 through $grid-columns {
+        @include make-sm-col($i);
+      }
+    }
+  }
+}

data/_sass/common/classes/_horizontal-rules.scss

@@ -0,0 +1,14 @@
+@mixin horizontal-rules() {
+  &::before {
+    content: '...';
+    font-size: map-get($base, font-size-h2);
+    color: $text-color-l;
+    display: block;
+    letter-spacing: map-get($spacers, 4);
+    text-align: center;
+  }
+}
+
+.horizontal-rules {
+  @include horizontal-rules();
+}

data/_sass/common/classes/_link.scss

@@ -1,161 +1,34 @@
-@mixin link-animation {
-  @include transition(all map-get($animation, duration) map-get($animation, timing-function));
-}
-
-@mixin link-normal {
-  &,
-  &:link,
-  &:visited {
-    @content;
+@mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null) {
+  @if $hover-clr == default {
+    $hover-clr: $clr;
   }
-}
-
-@mixin link-hover {
-  &.hover,
-  &:hover {
-    @content;
+  @if $active-clr == default {
+    $active-clr: $clr;
   }
-}
-
-@mixin link-active {
-  &.active,
-  &:active {
-    @content;
-  }
-}
-
-@mixin link-emphasize {
-  @include link-hover() {
-    @content;
-  }
-  @include link-active() {
-    @content;
-  }
-}
-
-@mixin link-focus {
-  &.focus {
-    @content;
-  }
-}
-
-@mixin link-colors($nc, $nbc, $hc: default, $hbc: default, $ac: default, $abc: default, $fc: null, $fbc: null) {
-  @if $hc == default {
-    $hc: $nc
-  }
-  @if $ac == default {
-    $ac: $nc
-  }
-  @if $fc == default {
-    $fc: $nc
-  }
-  @if $hbc == default {
-    $hbc: $nbc
-  }
-  @if $abc == default {
-    $abc: $nbc
-  }
-  @if $fbc == default {
-    $fbc: $nbc
-  }
-  @include link-normal() {
-    color: $nc;
-    background-color: $nbc;
+  @include plain {
+    color: $clr;
     svg path {
-      fill: $nc;
+      fill: $clr;
     }
   }
-  .not-touch & {
-    @include link-hover() {
-      color: $hc;
-      background-color: $hbc;
-      svg path {
-        fill: $hc;
-      }
-    }
-  }
-  @include link-active() {
-    color: $ac;
-    background-color: $abc;
+  @include hover {
+    color: $hover-clr;
     svg path {
-      fill: $ac;
+      fill: $hover-clr;
     }
   }
-  @if $fc and $fbc {
-    @include link-focus() {
-      color: $fc;
-      background-color: $fbc;
-      svg path {
-        fill: $fc;
-      }
-    }
-  }
-}
-
-@mixin link-text-colors($nc, $hc: default, $ac: default, $fc: null) {
-  @if $hc == default {
-    $hc: $nc
-  }
-  @if $ac == default {
-    $ac: $nc
-  }
-  @if $fc == default {
-    $fc: $nc
-  }
-  @include link-normal() {
-    color: $nc;
-    svg path {
-      fill: $nc;
-    }
-  }
-  .not-touch & {
-    @include link-hover() {
-      color: $hc;
-      svg path {
-        fill: $hc;
-      }
-    }
-  }
-  @include link-active() {
-    color: $ac;
+  @include active {
+    color: $active-clr;
     svg path {
-      fill: $ac;
+      fill: $active-clr;
     }
   }
-  @if $fc {
-    @include link-focus() {
-      color: $fc;
+  @if $focus-clr {
+    @include focus {
+      color: $focus-clr;
       svg path {
-        fill: $fc;
+        fill: $focus-clr;
       }
     }
   }
-}
-
-@mixin link-background-colors($nbc, $hbc: default, $abc: default, $fbc: null) {
-  @if $hbc == default {
-    $hbc: $nbc
-  }
-  @if $abc == default {
-    $abc: $nbc
-  }
-  @if $fbc == default {
-    $fbc: $nbc
-  }
-  @include link-normal() {
-    background-color: $nbc;
-  }
-  .not-touch & {
-    @include link-hover() {
-      background-color: $hbc;
-    }
-  }
-  @include link-active() {
-    background-color: $abc;
-  }
-  @if $fbc {
-    @include link-focus() {
-      background-color: $fbc;
-    }
-  }
 }

data/_sass/common/classes/_media.scss

@@ -14,5 +14,4 @@
   @media screen and (min-width: map-get($breakpoints, $name)) {
     @content;
   }
-}
-
+}

data/_sass/common/classes/_overflow.scss

@@ -0,0 +1,8 @@
+@mixin overflow($overflow: auto) {
+  @if $overflow == auto {
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+  } @else {
+      overflow: $overflow;
+  }
+}

data/_sass/common/classes/_pseudo.scss

@@ -0,0 +1,26 @@
+@mixin plain() {
+  &,
+  &:link,
+  &:visited{
+    @content;
+  }
+}
+
+@mixin hover() {
+  &:hover {
+    @content;
+  }
+}
+
+@mixin active() {
+  &.active,
+  &:active {
+    @content;
+  }
+}
+
+@mixin focus() {
+  &.focus {
+    @content;
+  }
+}