jekyll-text-theme 2.2.2 → 2.2.3

data/_sass/common/_variables.scss

@@ -3,6 +3,7 @@ $base: (
   font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
 
   font-size-root:         16px,
+  font-size-root-sm:      14px,
 
   font-size-xl:           1.5rem,
   font-size-lg:           1.25rem,
@@ -48,7 +49,7 @@ $base: (
   font-weight:            400,
   font-weight-bold:       700,
 
-  line-height-xl:         2.1,
+  line-height-xl:         2,
   line-height-lg:         1.8,
   line-height:            1.6,
   line-height-sm:         1.4,
@@ -56,9 +57,6 @@ $base: (
 
   spacer:                 1rem,
 
-  vertical-space:         .5rem,
-  vertical-space-lg:      1.4rem,
-
   border-radius-lg:       .8rem,
   border-radius:          .4rem,
   border-radius-sm:       .2rem

data/_sass/common/classes/_clickable.scss

@@ -126,4 +126,25 @@
       }
     }
   }
+  @include disabled() {
+    @if $theme == "light" {
+      color: rgba($clr, .2) !important;
+    }
+    @if $theme == "dark" {
+      color: rgba($clr, .4) !important;
+    }
+    @if $bg-clr {
+      background-color: $bg-clr !important;
+    }
+    @if $ignore-path == false {
+      svg path {
+        @if $theme == "light" {
+          fill: rgba($clr, .2) !important;
+        }
+        @if $theme == "dark" {
+          fill: rgba($clr, .4) !important;
+        }
+      }
+    }
+  }
 }

data/_sass/common/classes/_display.scss

@@ -1,3 +1,14 @@
-.d-none {
-  display: none !important;
-}
+@each $breakpoint in map-keys($responsive) {
+  @include media-breakpoint-up($breakpoint) {
+    .d-#{breakpoint-infix($breakpoint)}none {
+      display: none !important;
+    }
+  }
+}
+
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}
+

data/_sass/common/classes/_grid.scss

@@ -3,67 +3,29 @@ $grid-columns: 12;
 .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;
-    }
-  }
+.cell {
+  min-width: 0;
 }
 
-@mixin make-md-cell($columns) {
-  @include media-breakpoint-down(lg) {
-    .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-cell($columns) {
+  @if $columns == "auto" {
+    @include flex(1 1 0);
+    width: auto;
+  } @else if $columns == "shrink" {
+    @include flex(0 0 auto);
+    width: auto;
+  } @else if $columns == "stretch" {
+    @include flex(1);
+  } @else {
+    @include flex(none);
+    width: percentage($columns / $grid-columns);
   }
 }
 
-@mixin make-sm-cell($columns) {
-  @include media-breakpoint-down(md) {
-    .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;
-      }
+@mixin make-grid-cell($columns, $breakpoint) {
+  @include media-breakpoint-up($breakpoint) {
+    .cell--#{breakpoint-infix($breakpoint)}#{$columns} {
+      @include make-cell($columns);
     }
   }
 }
@@ -72,27 +34,14 @@ $grid-columns: 12;
   @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);
+    @each $breakpoint in map-keys($responsive) {
+      @for $i from 1 through $grid-columns {
+        @include make-grid-cell($i, $breakpoint);
+      }
+      @include make-grid-cell("auto", $breakpoint);
+      @include make-grid-cell("shrink", $breakpoint);
+      @include make-grid-cell("stretch", $breakpoint);
     }
-
-    @include make-sm-cell("auto");
-    @include make-sm-cell("shrink");
-    @include make-sm-cell("stretch");
   }
 }
 

data/_sass/common/classes/_media.scss

@@ -2,7 +2,7 @@
   @if $breakpoints == default {
     $breakpoints: $responsive;
   }
-  @media screen and (max-width: map-get($breakpoints, $name) - 1) {
+  @media (max-width: map-get($breakpoints, $name) - 1) {
     @content;
   }
 }
@@ -11,7 +11,7 @@
   @if $breakpoints == default {
     $breakpoints: $responsive;
   }
-  @media screen and (min-width: map-get($breakpoints, $name)) {
+  @media (min-width: map-get($breakpoints, $name)) {
     @content;
   }
 }

data/_sass/common/classes/_pseudo.scss

@@ -1,7 +1,7 @@
 @mixin plain() {
   &,
   &:link,
-  &:visited{
+  &:visited {
     @content;
   }
 }
@@ -23,4 +23,11 @@
   .root[data-is-touch] &.focus {
     @content;
   }
+}
+
+@mixin disabled() {
+  &.disabled,
+  &:disabled {
+    @content;
+  }
 }

data/_sass/common/classes/_shadow.scss

@@ -6,10 +6,10 @@
     box-shadow: none;
   }
   @if $level == 1 or $level == default {
-    box-shadow: 0 4px 6px rgba($color, .11), 0 1px 3px rgba($color, .08);
+    box-shadow: 0 4px 8px rgba($color, .23), 0 1px 3px rgba($color, .08), 0 6px 12px rgba($color, .02);
   }
   @if $level == 2 {
-    box-shadow: 0 7px 14px rgba($color, .1), 0 3px 6px rgba($color, .08);
+    box-shadow: 0 8px 16px rgba($color, .23), 0 2px 6px rgba($color, .08), 0 12px 24px rgba($color, .02);
   }
 }
 

data/_sass/common/components/_button.scss

@@ -15,14 +15,8 @@
       @include transition(map-get($button, transition));
     }
   }
-  &.disabled,
-  &:disabled {
-    color: rgba($text-color-3, .2) !important;
+  @include disabled() {
     cursor: not-allowed;
-    background-color: $main-color-3 !important;
-    svg path {
-      fill: rgba($text-color-3, .2) !important;
-    }
   }
 }
 

data/_sass/common/components/_card.scss

@@ -21,7 +21,7 @@
 }
 
 .card__content {
-  padding: .5rem 1rem;
+  padding: map-get($spacers, 2) map-get($spacers, 3);
 }
 
 a.card__header, .card__header > a {
@@ -41,7 +41,7 @@ a.card__header, .card__header > a {
     position: absolute;
     width: 100%;
     max-height: 100%;
-    padding: .5rem;
+    padding: map-get($spacers, 2);
     a {
       text-decoration: none !important;
     }

data/_sass/common/components/_hero.scss

@@ -58,7 +58,7 @@
 }
 
 .heros {
-  .hero {
+  & > .hero {
     margin: map-get($spacers, 5);
     @include media-breakpoint-down(lg) {
       margin: map-get($spacers, 3);

data/_sass/common/components/_item.scss

@@ -3,10 +3,6 @@
   @include media-breakpoint-down(md) {
     @include flex-direction(column);
   }
-  &:not(:last-child) {
-    margin-bottom: map-get($base, vertical-space);
-  }
-  list-style-type: none;
 }
 
 .item__image {
@@ -39,14 +35,14 @@ a.item__header, .item__header > a {
 
 .item__description {
   &, .article__content {
-    font-size: map-get($base, font-size-sm);
+    font-size: map-get($base, font-size-xs);
     line-height: map-get($base, line-height);
     @include block-elements() {
-      margin-top: map-get($base, vertical-space);
-      margin-bottom: map-get($base, vertical-space);
+      margin-top: map-get($spacers, 2);
+      margin-bottom: map-get($spacers, 2);
     }
     @include heading-elements() {
-      margin-top: map-get($base, vertical-space) * 1.5;
+      margin-top: map-get($spacers, 3);
     }
     h1, h2, h3 {
       color: $text-color;
@@ -82,8 +78,16 @@ a.item__header, .item__header > a {
   }
 }
 
+.items {
+  & > .item {
+    &:not(:last-child) {
+      margin-bottom: map-get($spacers, 2);
+    }
+  }
+}
+
 .items--divided {
-  .item {
+  & > .item {
     &:not(:first-child) {
       padding-top: map-get($spacers, 4);
     }
@@ -91,5 +95,6 @@ a.item__header, .item__header > a {
       padding-bottom: map-get($spacers, 4);
       @include split-line(bottom);
     }
+    list-style-type: none;
   }
 }

data/_sass/common/components/_swiper.scss

@@ -0,0 +1,45 @@
+.swiper {
+  position: relative;
+  overflow: hidden;
+}
+
+.swiper__wrapper, .swiper__slide {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper__wrapper {
+  @include flexbox();
+}
+
+.swiper__wrapper--animation {
+  @include transition(transform map-get($animation, duration) map-get($animation, timing-function));
+}
+
+.swiper__slide {
+  @include flex-shrink(0);
+}
+
+.swiper__button {
+  position: absolute;
+  top: 50%;
+  @extend .button, .button--circle;
+  @include transform(translate(0, -50%));
+  @include clickable($text-color-d, rgba($main-color-3, .5));
+}
+
+.swiper--light .swiper__button {
+  @include clickable($text-color-theme-light, rgba(#fff, .15));
+}
+
+.swiper--dark .swiper__button {
+  @include clickable($text-color-theme-dark, rgba(#000, .15));
+}
+
+.swiper__button--prev {
+  left: 10px;
+}
+
+.swiper__button--next {
+  right: 10px;
+}

data/_sass/common/components/_toc.scss

@@ -3,7 +3,7 @@ ul.toc {
   margin: 0;
   list-style-type: none;
   & > li {
-    margin: .2rem 0;
+    margin: map-get($spacers, 1) 0;
     &.active {
       a {
         color: $text-color-3;
@@ -15,7 +15,7 @@ ul.toc {
 
   a {
     display: inline-block;
-    padding: .2rem .8rem .2rem .8rem;
+    padding: map-get($spacers, 1) map-get($spacers, 2) map-get($spacers, 1) map-get($spacers, 2);
     text-decoration: none !important;
     border-radius: map-get($base, border-radius);
     @include clickable($text-color, null, $text-color-3, $main-color-3);
@@ -23,8 +23,8 @@ ul.toc {
 
   .toc-h1 {
     @include split-line(bottom);
-    padding: .8rem 0 .3rem 0;
-    margin-bottom: .6rem;
+    padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
+    margin-bottom: map-get($spacers, 2);
     a {
       @include link-colors($text-color-d);
     }
@@ -50,13 +50,13 @@ ul.toc {
     }
   }
   .toc-h3 {
-    margin-left: 1rem;
+    margin-left: map-get($spacers, 3);
   }
   .toc-h4 {
-    margin-left: 2rem;
+    margin-left: map-get($spacers, 3) * 2;
   }
   .toc-h5, .toc-h6 {
-    margin-left: 3rem;
+    margin-left: map-get($spacers, 3) * 3;
   }
 
   .toc-h1 {
@@ -109,8 +109,8 @@ ul.toc--navigator {
   }
 
   a {
-    padding: 0 0 0 .5rem;
-    margin: .2rem 0;
+    padding: 0 0 0 map-get($spacers, 2);
+    margin: map-get($spacers, 1) 0;
     border-radius: 0;
     @include hover() {
       background-color: transparent;

data/_sass/components/_article-content.scss

@@ -1,15 +1,24 @@
 .article__content {
   line-height: map-get($base, line-height-lg);
   word-wrap: break-word;
+  @media print {
+    line-height: map-get($base, line-height);
+  }
   @include block-elements() {
-    margin: map-get($base, vertical-space-lg) 0;
+    margin: map-get($spacers, 3) 0;
+    @media print {
+      margin: map-get($spacers, 2) 0;
+    }
   }
   @include heading-elements() {
     position: relative;
-    margin-top: map-get($base, vertical-space-lg) * 1.5;
+    margin-top: map-get($spacers, 4);
+    @media print {
+      margin-top: map-get($spacers, 3);
+    }
     & > .anchor {
       @include link-colors($border-color, $main-color-1);
-      margin-left: .2rem;
+      margin-left: map-get($spacers, 1);
       text-decoration: none;
       visibility: hidden;
       opacity: 0;
@@ -34,12 +43,12 @@
     @include horizontal-rules();
   }
   blockquote {
-    padding-left: 1rem;
+    padding-left: map-get($spacers, 3);
     font-size: map-get($base, font-size-sm);
     color: $text-color-l;
     @include split-line(left, 4px, $border-color);
     p {
-      margin: map-get($base, vertical-space) 0;
+      margin: map-get($spacers, 2) 0;
     }
     & > :last-child {
       margin-bottom: 0;
@@ -57,10 +66,13 @@
   }
   .footnotes {
     @include split-line();
-    margin-top: map-get($base, vertical-space-lg) * 2;
+    margin-top: map-get($spacers, 5);
+    @media print {
+      margin-top: map-get($spacers, 2) * 2;
+    }
   }
   code {
-    padding: .2rem .5rem;
+    padding: map-get($spacers, 1) map-get($spacers, 2);
     background-color: $text-background-color;
     border-radius: map-get($base, border-radius);
     span {
@@ -87,7 +99,7 @@
   }
   .highlighter-rouge > .highlight, figure.highlight {
     & > pre {
-      padding: 1rem 0 1rem 1rem;
+      padding: map-get($spacers, 3) 0 map-get($spacers, 3) map-get($spacers, 3);
       margin: 0;
       background-color: $text-background-color;
       border-radius: map-get($base, border-radius);
@@ -99,7 +111,7 @@
   figure.highlight {
     &::before {
       display: block;
-      padding: .5rem 1rem .5rem 0;
+      padding: map-get($spacers, 2) map-get($spacers, 3) map-get($spacers, 2) 0;
       font-weight: map-get($base, font-weight-bold);
       color: $decorate-color;
       text-align: right;
@@ -116,7 +128,7 @@
       & > code {
         & > .rouge-table {
           width: auto;
-          margin: 0 0 -1rem -1rem;
+          margin: 0 0 - map-get($spacers, 3) - map-get($spacers, 3);
           tbody, tr, td {
             padding-top: 0;
             padding-bottom: 0;
@@ -128,14 +140,14 @@
               width: 100%;
               @include flexbox;
               & > .code {
-                padding: 0 0 1rem .5rem;
+                padding: 0 0 map-get($spacers, 3) map-get($spacers, 2);
                 @include overflow(auto);
               }
             }
           }
           tbody td {
             &.gl {
-              padding-left: 1rem;
+              padding-left: map-get($spacers, 3);
             }
             & > pre {
               display: block;
@@ -153,21 +165,27 @@
     }
   }
   ul, ol {
-    margin-left: 1.5rem;
+    margin-left: map-get($spacers, 4);
     ul, ol {
       margin-top: 0;
       margin-bottom: 0;
     }
     li {
       p {
-        margin: map-get($base, vertical-space);
+        margin: map-get($spacers, 2);
+        @media print {
+          margin: map-get($spacers, 1);
+        }
       }
     }
   }
   dl {
     dt, dd {
       p {
-        margin: map-get($base, vertical-space);
+        margin: map-get($spacers, 2);
+        @media print {
+          margin: map-get($spacers, 1);
+        }
       }
     }
     dt {
@@ -181,7 +199,7 @@
     margin-left: 0;
     list-style-type: none;
     ul, ol {
-      margin-left: 1.5rem;
+      margin-left: map-get($spacers, 4);
     }
   }
   table {
@@ -193,7 +211,7 @@
       background-color: $text-background-color;
     }
     th, td {
-      padding: .5rem;
+      padding: map-get($spacers, 2);
       border: 1px solid $border-color-l;
     }
     th {