jekyll-text-theme 1.4.3 → 1.5.0

data/_sass/common/classes/_shape.scss

@@ -0,0 +1,19 @@
+@mixin round($length: default) {
+  @if $length == default {
+    $length: map-get($shape, round-length);
+  }
+  width: $length;
+  height: $length;
+  border-radius: 50%;
+}
+
+@mixin round-rect($radius: default, $padding: default) {
+  @if $radius == default {
+    $radius: map-get($shape, round-rect-radius);
+  }
+  @if $padding == default {
+    $padding: 0;
+  }
+  padding: $padding;
+  border-radius: $radius;
+}

data/_sass/common/classes/_space.scss

@@ -0,0 +1,40 @@
+@mixin horizontal-space($horizontal-space: default, $horizontal-item-vertical-space: default, $wrap: default) {
+  @if $horizontal-space == default {
+    $horizontal-space: map-get($base, horizontal-space);
+  }
+  @if $horizontal-item-vertical-space == default {
+    $horizontal-item-vertical-space: map-get($base, horizontal-item-vertical-space);
+  }
+  @if $wrap == default {
+    $wrap: wrap;
+  }
+  @include flexbox;
+  @include flex-wrap($wrap);
+  &>* {
+    @if $horizontal-item-vertical-space != none {
+      margin-top: $horizontal-item-vertical-space;
+      margin-bottom: $horizontal-item-vertical-space;
+    }
+    list-style-type: none;
+    margin-right: $horizontal-space;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+@mixin vertical-space($vertical-space: default) {
+  @if $vertical-space == default {
+    $vertical-space: map-get($base, vertical-space);
+  }
+  @include flexbox;
+  @include flex-direction(column);
+  @include flex-wrap(wrap);
+  &>* {
+    list-style-type: none;
+    margin-bottom: $vertical-space;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

data/_sass/common/classes/_split-line.scss

@@ -0,0 +1,24 @@
+@mixin split-line($direction: default, $width: default, $color: default) {
+  @if $direction == default {
+    $direction: top;
+  }
+  @if $color == default {
+    $color: $border-color-l;
+  }
+  @if $width == default {
+    $width: 1px;
+  }
+  border: 0 solid $color;
+  @if $direction == top {
+    border-top-width: $width;
+  }
+  @if $direction == right {
+    border-right-width: $width;
+  }
+  @if $direction == bottom {
+    border-bottom-width: $width;
+  }
+  @if $direction == left {
+    border-left-width: $width;
+  }
+}

data/_sass/common/classes/_transform.scss

@@ -0,0 +1,4 @@
+@mixin transform($value) {
+  -webkit-transform: $value;
+          transform: $value;
+}

data/_sass/common/classes/_transition.scss

@@ -0,0 +1,4 @@
+@mixin transition($value) {
+  -webkit-transition: $value;
+          transition: $value;
+}

data/_sass/common/classes/_user-select.scss

@@ -0,0 +1,6 @@
+@mixin user-select($value) {
+  -webkit-user-select: $value;
+     -moz-user-select: $value;
+      -ms-user-select: $value;
+          user-select: $value;
+}

data/_sass/common/components/_button.scss

@@ -0,0 +1,72 @@
+%button {
+  font-weight: map-get($base, font-weight-bold);
+  line-height: 1;
+  box-sizing: border-box;
+  display: block;
+  cursor: pointer;
+  @include link-normal() {
+    text-decoration: none;
+  }
+  .not-touch &, & {
+    @include link-hover() {
+      text-decoration: none;
+    }
+  }
+  @include link-active() {
+    text-decoration: none;
+  }
+  @include link-focus() {
+    text-decoration: none;
+  }
+  @include link-colors($text-color-3, $main-color-3, $text-color-1, $main-color-1, $text-color-1, $main-color-1);
+  @include link-animation();
+  svg {
+    width: 1rem;
+    height: 1rem;
+    path {
+      @include link-animation();
+    }
+  }
+  &.inactive {
+    cursor: not-allowed;
+    @include link-normal() {
+      color: rgba($text-color-3, .2) !important;
+      background-color: $main-color-3 !important;
+      svg path {
+        fill: rgba($text-color-3, .2) !important;
+      }
+    }
+    @include link-emphasize() {
+      color: rgba($text-color-3, .2) !important;
+      background-color: $main-color-3 !important;
+      svg path {
+        fill: rgba($text-color-3, .2) !important;
+      }
+    }
+  }
+}
+
+%floating-action {
+  @include box-shadow(2);
+  &:hover {
+    @include box-shadow(3);
+  }
+}
+
+.round-button {
+  @extend %button;
+  @include round;
+  @include flexbox;
+  @include justify-content(center);
+  @include align-items(center);
+}
+
+.floating-action-round-button {
+  @extend .round-button;
+  @extend %floating-action;
+}
+
+.pill-button {
+  @extend %button;
+  @include round-rect(2rem, .4rem .6rem);
+}

data/_sass/components/_article.content.extra.scss

@@ -0,0 +1,41 @@
+.m-article-content {
+  p.success {
+    @include round-rect(default, .5rem 1rem);
+    background-color: mix($green, $background-color, 10%);
+    border: 1px solid $green;
+  }
+
+  p.info {
+    @include round-rect(default, .5rem 1rem);
+    background-color: mix($blue, $background-color, 10%);
+    border: 1px solid $blue;
+  }
+
+  p.warning {
+    @include round-rect(default, .5rem 1rem);
+    background-color: mix($yellow, $background-color, 10%);
+    border: 1px solid $yellow;
+  }
+
+  p.error {
+    @include round-rect(default, .5rem 1rem);
+    background-color: mix($red, $background-color, 10%);
+    border: 1px solid $red;
+  }
+
+  img.shadow, .shadow > img {
+    @include box-shadow(3);
+  }
+
+  img.border, .border > img {
+    border: 1px solid $border-color-l;
+  }
+
+  img.rounded, .rounded > img {
+    border-radius: map-get($shape, round-rect-radius);
+  }
+
+  img.circle, .circle > img {
+    border-radius: 50%;
+  }
+}

data/_sass/components/_article.content.scss

@@ -1,102 +1,170 @@
 .m-article-content {
   word-wrap: break-word;
-  line-height: $article-line-height;
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: $content-gap * 2 0 $content-gap * .5 0;
+  line-height: map-get($base, line-height-large);
+  @include block-elements() {
+    margin: map-get($base, vertical-space-large) 0;
+  }
+  @include heading-elements() {
+    position: relative;
+    margin-top: map-get($base, vertical-space-large) * 1.5;
+    & > .anchor {
+      @include link-text-colors($border-color, $main-color-1, $main-color-1);
+      margin-left: .2rem;
+      visibility: hidden;
+      text-decoration: none;
+      opacity: 0;
+      & > svg {
+        width: map-get($base, font-size);
+        height: map-get($base, font-size);
+        margin-bottom: - .2 * map-get($base, font-size);
+      }
+    }
+    &:hover {
+      & > .anchor {
+        visibility: visible;
+        opacity: 1;
+        cursor: pointer;
+      }
+    }
   }
   h1,
   h2 {
-    padding: 0 0 $base-font-size * .3 0;
-    border: 0 dashed $border-color;
-    border-bottom-width: 2px;
-    margin-bottom: $content-gap;
+    @include split-line(bottom);
   }
-  p {
-    margin: $content-gap 0;
+  hr {
+    border: none;
+    &::before {
+      content: '...';
+      font-size: map-get($base, font-size-h3);
+      color: $text-color-l;
+      display: block;
+      letter-spacing: .8em;
+      text-align: center;
+    }
   }
   blockquote {
-    padding: 0 0 0 $spacing-unit / 2;
-    border: 0 solid $border-color;
-    border-left-width: 4px;
-    margin: $content-gap 0;
-    font-size: $small-font-size;
+    padding-left: 1rem;
+    @include split-line(left, 4px, $border-color);
+    font-size: map-get($base, font-size-sub);
     color: $text-color-l;
     p {
-      margin: $content-gap * .5 0;
+      margin: map-get($base, vertical-space) 0;
     }
-    > :last-child {
+    &>:last-child {
       margin-bottom: 0;
     }
   }
   img:not(.emoji) {
     max-width: 100%;
-    max-height: 600px;
+    max-height: 37rem;
     vertical-align: middle;
   }
   .emoji {
     display: inline-block;
     vertical-align: text-bottom;
-    width: $base-font-size * $article-line-height * .7;
-    height: $base-font-size * $article-line-height * .7;
+    width: map-get($base, line-height-large) * .7rem;
+    height: map-get($base, line-height-large) * .7rem;
+  }
+  .footnotes {
+    @include split-line();
+    margin-top: map-get($base, vertical-space-large) * 2;
   }
   code {
-    @include round-rect($round-rect-radius, $base-font-size * .2 $base-font-size * .5);
+    @include round-rect(default, .2rem .5rem);
+    background-color: $text-background-color;
     span {
       padding: 0;
       margin: 0;
     }
   }
-  div.highlighter-rouge, figure, pre {
-    margin: $content-gap 0;
-  }
-  code.language-mermaid {
-    background-color: $background-color;
-  }
   pre {
-    display: block;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    border-radius: $round-rect-radius;
     &>code {
-      padding-top: $code-font-size * 1.5;
-      padding-bottom: $code-font-size * 1.3;
-      font-size: $code-font-size;
+      padding: 0;
+      background-color: transparent;
       word-wrap: normal;
+      &.language-mermaid, &.language-chart {
+        display: none;
+        &[data-processed] {
+          display: block;
+        }
+      }
+    }
+  }
+  .highlighter-rouge>.highlight, figure.highlight {
+    &>pre {
+      @include round-rect(default, 1rem 0 1rem 1rem);
       margin: 0;
-      display: block;
-      line-height: $code-line-height;
+      background-color: $text-background-color;
+      &>code {
+        display: block;
+      }
     }
   }
-  figure {
+  figure.highlight {
     &:before {
       content: attr(data-lang);
       display: block;
-      border-top-left-radius: $round-rect-radius;
-      border-top-right-radius: $round-rect-radius;
-      padding: $code-font-size / 2 $code-font-size $code-font-size / 2 0;
+      border-top-left-radius: map-get($shape, round-rect-radius);
+      border-top-right-radius: map-get($shape, round-rect-radius);
+      padding: .5rem 1rem .5rem 0;
       color: $decorate-color;
-      font-weight: $bold-font-weight;
-      font-size: $base-font-size;
+      background-color: $text-background-color;
+      font-weight: map-get($base, font-weight-bold);
       text-align: right;
       text-transform: uppercase;
     }
     &>pre {
-      margin: 0;
+      padding-top: 0;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       &>code {
-        padding-top: 0;
+        &>.rouge-table {
+          width: auto;
+          margin: 0 0 -1rem -1rem;
+          tbody, tr, td {
+            border: none;
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+          &>tbody {
+            @include flexbox;
+            &>tr {
+              width: 100%;
+              @include flexbox;
+              &>.code {
+                padding: 0 0 1rem .5rem;
+                overflow: auto;
+                -webkit-overflow-scrolling: touch;
+              }
+            }
+          }
+          tbody td {
+            &.gl {
+              padding-left: 1rem;
+            }
+            &>pre {
+              @include round-rect(0);
+              display: block;
+              overflow: visible;
+              margin: 0;
+              &.lineno {
+                color: $text-color-l;
+                @include user-select(none);
+              }
+            }
+          }
+        }
       }
     }
   }
-  ul,
-  ol {
-    margin: $content-gap 0 $content-gap $spacing-unit;
+  ul, ol {
+    margin-left: 1.5rem;
+    ul, ol {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
     li {
       margin: 0;
       p {
@@ -105,19 +173,17 @@
     }
   }
   dl {
-    margin: $content-gap 0;
-    dt,
-    dd {
+    dt, dd {
       margin: 0;
       p {
         margin: 0;
       }
     }
     dt {
-      font-weight: $bold-font-weight;
+      font-weight: map-get($base, font-weight-bold);
     }
     dd {
-      margin-left: 2em;
+      margin-left: 2rem;
     }
   }
   table {
@@ -125,24 +191,16 @@
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    margin: $content-gap 0;
     border-collapse: collapse;
-    th,
-    td {
-      border: 1px solid $border-color;
-      padding: $base-font-size * .5;
+    thead, tfoot {
+      background-color: $text-background-color;
     }
-    thead,
-    tbody {
-      border: 1px solid $border-color;
+    th, td {
+      border: 1px solid $border-color-l;
+      padding: .5rem;
     }
-    tbody>tr:nth-child(even) {
-      background-color: $text-background-color;
+    th {
+      font-weight: map-get($base, font-weight-bold);
     }
   }
-  hr {
-    border: 0 dashed $border-color;
-    border-top-width: 2px;
-    margin: $base-font-size 0;
-  }
 }