jekyll-text-theme 2.1.0 → 2.2.0

data/_sass/additional/_alert.scss

@@ -1,25 +1,29 @@
 .article__content {
   p.success {
-    @include card(false);
+    padding: .5rem 1rem;
     background-color: rgba($green, .1);
     border: 1px solid $green;
+    border-radius: map-get($base, border-radius);
   }
 
   p.info {
-    @include card(false);
+    padding: .5rem 1rem;
     background-color: rgba($blue, .1);
     border: 1px solid $blue;
+    border-radius: map-get($base, border-radius);
   }
 
   p.warning {
-    @include card(false);
+    padding: .5rem 1rem;
     background-color: rgba($yellow, .1);
     border: 1px solid $yellow;
+    border-radius: map-get($base, border-radius);
   }
 
   p.error {
-    @include card(false);
+    padding: .5rem 1rem;
     background-color: rgba($red, .1);
     border: 1px solid $red;
+    border-radius: map-get($base, border-radius);
   }
 }

data/_sass/additional/_tag.scss

@@ -0,0 +1,21 @@
+.article__content {
+  code.success {
+    color: $text-color-function;
+    background-color: $green;
+  }
+
+  code.info {
+    color: $text-color-function;
+    background-color: $blue;
+  }
+
+  code.warning {
+    color: $text-color-function;
+    background-color: $yellow;
+  }
+
+  code.error {
+    color: $text-color-function;
+    background-color: $red;
+  }
+}

data/_sass/common/_classes.scss

@@ -9,6 +9,7 @@
   "common/classes/horizontal-rules",
   "common/classes/pseudo",
   "common/classes/link",
+  "common/classes/text",
   "common/classes/media",
   "common/classes/overflow",
   "common/classes/shadow",

data/_sass/common/_variables.scss

@@ -4,12 +4,19 @@ $base: (
 
   font-size-root:         16px,
 
-  font-size-xl:           1.6rem,
+  font-size-xl:           1.5rem,
   font-size-lg:           1.25rem,
   font-size:              1rem,
   font-size-sm:           .875rem,
   font-size-xs:           .75rem,
 
+  font-size-h1-xl:        3.5rem,
+  font-size-h2-xl:        2.5rem,
+  font-size-h3-xl:        2rem,
+  font-size-h4-xl:        1.75rem,
+  font-size-h5-xl:        1.5rem,
+  font-size-h6-xl:        1.5rem,
+
   font-size-h1-lg:        3rem,
   font-size-h2-lg:        2rem,
   font-size-h3-lg:        1.75rem,
@@ -102,28 +109,45 @@ $link: (
   transition:             all .2s ease-in-out
 );
 
+$button-height-xl:        2.8rem;
 $button-height-lg:        2.3rem;
 $button-height:           1.9rem;
 $button-height-sm:        1.5rem;
+$button-height-xs:        1.2rem;
 
 $button: (
+  padding-y-xl:           ($button-height-xl - map-get($base, font-size-xl)) / 2,
+  padding-x-xl:           $button-height-xl / 3,
   padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
   padding-x-lg:           $button-height-lg / 3,
   padding-y:              ($button-height - map-get($base, font-size)) / 2,
   padding-x:              $button-height / 3,
   padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
   padding-x-sm:           $button-height-sm / 3,
+  padding-y-xs:           ($button-height-xs - map-get($base, font-size-xs)) / 2,
+  padding-x-xs:           $button-height-xs / 3,
 
-  pill-radius:            4rem,
+  pill-radius:            6rem,
 
+  circle-diameter-xl:     $button-height-xl,
   circle-diameter-lg:     $button-height-lg,
   circle-diameter:        $button-height,
   circle-diameter-sm:     $button-height-sm,
+  circle-diameter-xs:     $button-height-xs,
+
   font-weight:            map-get($base, font-weight-bold),
 
   transition:             all .2s ease-in-out
 );
 
+$image: (
+  width-xl:  20em,
+  width-lg:  16rem,
+  width:     12rem,
+  width-sm:  8rem,
+  width-xs:  4rem
+);
+
 $menu: (
   horizontal-spacer:      1,
   horizontal-item-vertical-spacer: 1

data/_sass/common/classes/_grid.scss

@@ -1,48 +1,131 @@
 $grid-columns: 12;
 
-@mixin make-col($columns) {
-  .col-#{$columns} {
-    display: inline-block;
-    width: percentage($columns / $grid-columns);
-    letter-spacing: normal;
+.grid-container {
+  @include overflow(hidden);
+}
+
+@mixin make-cell($columns) {
+  .cell--#{$columns} {
+    @if $columns == "auto" {
+      @include flex(1 1 0);
+      width: auto;
+      min-width: 0;
+    } @else if $columns == "shrink" {
+      @include flex(0 0 auto);
+      width: auto;
+      min-width: 0;
+    } @else if $columns == "stretch" {
+      @include flex(1);
+    } @else {
+      @include flex(none);
+      width: percentage($columns / $grid-columns);
+      min-width: 0;
+    }
   }
 }
 
-@mixin make-md-col($columns) {
+@mixin make-md-cell($columns) {
   @include media-breakpoint-down(lg) {
-    .col-md-#{$columns} {
-      display: inline-block;
-      width: percentage($columns / $grid-columns);
-      letter-spacing: normal;
+    .cell--md-#{$columns} {
+      @if $columns == "auto" {
+        @include flex(1 1 0);
+        width: auto;
+        min-width: 0;
+      } @else if $columns == "shrink" {
+        @include flex(0 0 auto);
+        width: auto;
+        min-width: 0;
+      } @else if $columns == "stretch" {
+        @include flex(1);
+      } @else {
+        @include flex(none);
+        width: percentage($columns / $grid-columns);
+        min-width: 0;
+      }
     }
   }
 }
 
-@mixin make-sm-col($columns) {
+@mixin make-sm-cell($columns) {
   @include media-breakpoint-down(md) {
-    .col-sm-#{$columns} {
-      display: inline-block;
-      width: percentage($columns / $grid-columns);
-      letter-spacing: normal;
+    .cell--sm-#{$columns} {
+      @if $columns == "auto" {
+        @include flex(1 1 0);
+        width: auto;
+        min-width: 0;
+      } @else if $columns == "shrink" {
+        @include flex(0 0 auto);
+        width: auto;
+        min-width: 0;
+      } @else if $columns == "stretch" {
+        @include flex(1);
+      } @else {
+        @include flex(none);
+        width: percentage($columns / $grid-columns);
+        min-width: 0;
+      }
     }
   }
 }
 
 .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);
+  @include flexbox();
+  @include flex-wrap(wrap);
+  & > {
+    @for $i from 1 through $grid-columns {
+      @include make-cell($i);
+    }
+    @include make-cell("auto");
+    @include make-cell("shrink");
+    @include make-cell("stretch");
+
+    @for $i from 1 through $grid-columns {
+      @include make-md-cell($i);
+    }
+    @include make-md-cell("auto");
+    @include make-md-cell("shrink");
+    @include make-md-cell("stretch");
+
+    @for $i from 1 through $grid-columns {
+      @include make-sm-cell($i);
+    }
+
+    @include make-sm-cell("auto");
+    @include make-sm-cell("shrink");
+    @include make-sm-cell("stretch");
+  }
+}
+
+.grid--reverse {
+  flex-direction: row-reverse;
+}
+
+@mixin make-grid() {
+  $types: ("p");
+  $directions: ("x", "y", "");
+  $spacers: (0, 1, 2, 3, 4, 5);
+
+  @each $type in $types {
+    @each $direction in $directions {
+      @each $spacer in $spacers {
+        @if $direction == "" {
+          .grid--#{$type}-#{$spacer} {
+            @include make-spacing("m", "", $spacer, true);
+            .cell {
+              @include make-spacing($type, "", $spacer);
+            }
+          }
+        } @else {
+          .grid--#{$type}#{$direction}-#{$spacer} {
+            @include make-spacing("m", $direction, $spacer, true);
+            .cell {
+              @include make-spacing($type, $direction, $spacer);
+            }
+          }
+        }
       }
     }
   }
-}
+}
+
+@include make-grid();

data/_sass/common/classes/_spacing.scss

@@ -1,70 +1,81 @@
-@mixin make-spacing($type, $direction, $spacer) {
+@mixin make-spacing($property, $side, $spacer, $negative: false) {
 
-  $_type: null;
-  $_dirs: null;
+  $css_property: null;
+  $css_sides: null;
 
-  @if ($type == "m") {
-    $_type: "margin";
-  } @else if ($type == "p") {
-    $_type: "padding";
+  @if ($property == "m") {
+    $css_property: "margin";
+  } @else if ($property == "p") {
+    $css_property: "padding";
   }
 
-  @if ($direction == "t") {
-    $_dirs: ("top");
+  @if ($side == "t") {
+    $css_sides: ("top");
   }
-  @else if ($direction == "b") {
-    $_dirs: ("bottom");
+  @else if ($side == "b") {
+    $css_sides: ("bottom");
   }
-  @else if ($direction == "l") {
-    $_dirs: ("left");
+  @else if ($side == "l") {
+    $css_sides: ("left");
   }
-  @else if ($direction == "r") {
-    $_dirs: ("right");
+  @else if ($side == "r") {
+    $css_sides: ("right");
   }
-  @else if ($direction == "x") {
-    $_dirs: ("left", "right");
+  @else if ($side == "x") {
+    $css_sides: ("left", "right");
   }
-  @else if ($direction == "y") {
-    $_dirs: ("top", "bottom");
+  @else if ($side == "y") {
+    $css_sides: ("top", "bottom");
   }
-  @else if ($direction == "") {
-    $_dirs: ("");
+  @else if ($side == "") {
+    $css_sides: ("");
   }
 
-  @each $dir in $_dirs {
+  @each $side in $css_sides {
     @if ($spacer == "auto") {
-      @if ($dir == "") {
-        #{$_type}: auto;
+      @if ($side == "") {
+        #{$css_property}: auto;
       } @else {
-        #{$_type}-#{$dir}: auto;
+        #{$css_property}-#{$side}: auto;
       }
     } @else {
-      @if ($dir == "") {
-        #{$_type}: map-get($spacers, $spacer);
+      @if ($side == "") {
+        @if ($negative == true) {
+          #{$css_property}: - map-get($spacers, $spacer);
+        } @else {
+          #{$css_property}: map-get($spacers, $spacer);
+        }
       } @else {
-        #{$_type}-#{$dir}: map-get($spacers, $spacer);
+        @if ($negative == true) {
+          #{$css_property}-#{$side}: - map-get($spacers, $spacer);
+        } @else {
+          #{$css_property}-#{$side}: map-get($spacers, $spacer);
+        }
       }
     }
   }
 }
 
+@mixin make-spacings() {
+  $propertys: ("m", "p");
+  $sides: ("t", "b", "l", "r", "x", "y", "");
+  $spacers: (0, 1, 2, 3, 4, 5);
 
-$_types: ("m", "p");
-$_directions: ("t", "b", "l", "r", "x", "y", "");
-$_spacers: (0, 1, 2, 3, 4, 5);
-
-@each $i in $_types {
-  @each $j in $_directions {
-    @each $k in $_spacers {
-      .#{$i}#{$j}-#{$k} {
-        @include make-spacing($i, $j, $k);
+  @each $property in $propertys {
+    @each $side in $sides {
+      @each $spacer in $spacers {
+        .#{$property}#{$side}-#{$spacer} {
+          @include make-spacing($property, $side, $spacer);
+        }
       }
     }
   }
-}
 
-@each $j in $_directions {
-  .m#{$j}-auto {
-    @include make-spacing("m", $j, "auto");
+  @each $side in $sides {
+    .m#{$side}-auto {
+      @include make-spacing("m", $side, "auto");
+    }
   }
-}
+}
+
+@include make-spacings();

data/_sass/common/classes/_text.scss

@@ -0,0 +1,37 @@
+@mixin text-light {
+  color: $text-color-theme-light;
+  h1, h2, h3 {
+    color: $text-color-theme-light-d;
+  }
+  h4, h5 {
+    color: $text-color-theme-light;
+  }
+  h6 {
+    color: $text-color-theme-light-l;
+  }
+  a:not(.button) {
+    @include link-colors($text-color-theme-light, $main-color-1);
+  }
+}
+@mixin text-dark {
+  color: $text-color-theme-dark;
+  h1, h2, h3 {
+    color: $text-color-theme-dark-d;
+  }
+  h4, h5 {
+    color: $text-color-theme-dark;
+  }
+  h6 {
+    color: $text-color-theme-dark-l;
+  }
+  a:not(.button) {
+    @include link-colors($text-color-theme-dark, $main-color-1);
+  }
+}
+
+.text--light {
+  @include text-light();
+}
+.text--dark {
+  @include text-dark();
+}