jekyll-text-theme 2.0.2 → 2.1.0

data/_sass/common/classes/_transform.scss

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

data/_sass/common/classes/_transition.scss

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

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

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

data/_sass/common/components/_button.scss

@@ -1,10 +1,11 @@
 @mixin button() {
-  font-weight: map-get($button, font-weight);
-  line-height: map-get($base, line-height);
-  outline: none;
   display: inline-block;
-  cursor: pointer;
+  font-weight: map-get($button, font-weight);
+  line-height: 1 !important;
+
   text-decoration: none !important;
+  cursor: pointer;
+  outline: none;
   @include user-select(none);
   @include transition(map-get($button, transition));
   svg {
@@ -16,8 +17,8 @@
   }
   &.disabled,
   &:disabled {
-    cursor: not-allowed;
     color: rgba($text-color-3, .2) !important;
+    cursor: not-allowed;
     background-color: $main-color-3 !important;
     svg path {
       fill: rgba($text-color-3, .2) !important;
@@ -100,7 +101,7 @@
 }
 
 .button--circle {
-  @include flexbox();
+  @include inline-flex();
   @include justify-content(center);
   @include align-items(center);
   border-radius: 50%;
@@ -108,17 +109,26 @@
 }
 
 .button--md {
-  font-size: map-get($base, font-size);
   padding: map-get($button, padding-y) map-get($button, padding-x);
+  font-size: map-get($base, font-size);
   &.button--circle {
     width: map-get($button, circle-diameter);
     height: map-get($button, circle-diameter);
   }
 }
 
+.button--xs {
+  padding: map-get($button, padding-y-xs) map-get($button, padding-x-xs);
+  font-size: map-get($base, font-size-xs);
+  &.button--circle {
+    width: map-get($button, circle-diameter-xs);
+    height: map-get($button, circle-diameter-xs);
+  }
+}
+
 .button--sm {
-  font-size: map-get($base, font-size-sm);
   padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm);
+  font-size: map-get($base, font-size-sm);
   &.button--circle {
     width: map-get($button, circle-diameter-sm);
     height: map-get($button, circle-diameter-sm);
@@ -126,8 +136,8 @@
 }
 
 .button--lg {
-  font-size: map-get($base, font-size-lg);
   padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg);
+  font-size: map-get($base, font-size-lg);
   &.button--circle {
     width: map-get($button, circle-diameter-lg);
     height: map-get($button, circle-diameter-lg);

data/_sass/common/components/_card.scss

@@ -1,9 +1,9 @@
 @mixin card($has-shadow: default) {
   @if $has-shadow == default {
-    $has-shadow: true
+    $has-shadow: true;
   }
-  border-radius: map-get($base, border-radius);
   padding: .5rem 1rem;
+  border-radius: map-get($base, border-radius);
   @if $has-shadow {
     @include box-shadow();
   }

data/_sass/common/components/_item.scss

@@ -0,0 +1,90 @@
+.item {
+  @include flexbox();
+  @include media-breakpoint-down(md) {
+    @include flex-direction(row);
+  }
+  &:not(:last-child) {
+    margin-bottom: map-get($base, vertical-space);
+  }
+  list-style-type: none;
+}
+
+.item__image {
+  margin-right: map-get($spacers, 3);
+  @include media-breakpoint-down(md) {
+    margin-right: 0;
+  }
+}
+
+.item__content {
+  @include flex(1);
+  max-width: 100%;
+}
+
+.item__header {
+  margin: 0 0 map-get($base, vertical-space) * 1.6 0;
+  & > a {
+    @include link-colors($text-color-d, $main-color-1);
+  }
+}
+a.item__header {
+  @include link-colors($text-color-d, $main-color-1);
+}
+
+.item__meta {
+  color: $text-color-l;
+}
+
+.item__description {
+  &, .article__content {
+    font-size: map-get($base, font-size-sm);
+    line-height: map-get($base, line-height);
+    @include block-elements() {
+      margin-top: map-get($base, vertical-space);
+      margin-bottom: map-get($base, vertical-space);
+    }
+    @include heading-elements() {
+      margin-top: map-get($base, vertical-space) * 1.5;
+    }
+    h1, h2, h3 {
+      color: $text-color;
+    }
+    h1, h2 {
+      padding: 0;
+      border: none;
+    }
+    h1 {
+      font-size: map-get($base, font-size-h1-xs);
+    }
+    h2 {
+      font-size: map-get($base, font-size-h2-xs);
+    }
+    h3 {
+      font-size: map-get($base, font-size-h3-xs);
+    }
+    h4 {
+      font-size: map-get($base, font-size-h4-xs);
+    }
+    h5 {
+      font-size: map-get($base, font-size-h5-xs);
+    }
+    h6 {
+      font-size: map-get($base, font-size-h6-xs);
+    }
+    img {
+      max-height: 12rem;
+    }
+  }
+}
+
+.items--divided {
+  .item {
+    &:not(:first-child) {
+      padding-top: map-get($spacers, 4);
+    }
+    &:not(:last-child) {
+      padding-bottom: map-get($spacers, 4);
+      @include split-line(bottom);
+    }
+  }
+}

data/_sass/common/components/_menu.scss

@@ -1,8 +1,8 @@
 @mixin menu-direction($direction: default) {
   @if $direction == default {
-    $direction: 'horizontal';
+    $direction: "horizontal";
   }
-  @if $direction == 'vertical' {
+  @if $direction == "vertical" {
     @include flex-direction(column);
   } @else {
     @include flex-direction(row);
@@ -28,8 +28,8 @@
       margin-top: map-get($spacers, $horizontal-item-vertical-spacer);
       margin-bottom: map-get($spacers, $horizontal-item-vertical-spacer);
     }
-    list-style-type: none;
     margin-right: map-get($spacers, $horizontal-spacer);
+    list-style-type: none;
     &:last-child {
       margin-right: 0;
     }
@@ -43,13 +43,17 @@
 }
 
 .menu--vertical {
-  @include menu-direction('vertical');
+  @include menu-direction("vertical");
   @include align-items(normal);
   & > li {
     margin-right: 0;
   }
 }
 
+.menu--inline {
+  @include inline-flex();
+}
+
 .menu--center {
   @include justify-content(center);
 }

data/_sass/common/components/_toc.scss

@@ -16,8 +16,8 @@ ul.toc {
   a {
     display: inline-block;
     padding: .2rem .8rem .2rem .8rem;
-    border-radius: map-get($base, border-radius);
     text-decoration: none !important;
+    border-radius: map-get($base, border-radius);
     @include clickable($text-color, null, $text-color-3, $main-color-3);
   }
 
@@ -84,13 +84,18 @@ ul.toc {
 
 ul.toc--navigator {
   & > li {
+    @include active() {
+      a {
+        background-color: transparent;
+      }
+    }
     &.active {
       a {
+        margin-left: -4px;
         background-color: transparent;
         box-shadow: none;
         @include link-colors($main-color-1);
         @include split-line(left, 4px, $main-color-1);
-        margin-left: -4px;
       }
     }
   }

data/_sass/components/_article-content.scss

@@ -1,6 +1,6 @@
 .article__content {
-  word-wrap: break-word;
   line-height: map-get($base, line-height-lg);
+  word-wrap: break-word;
   @include block-elements() {
     margin: map-get($base, vertical-space-lg) 0;
   }
@@ -10,8 +10,8 @@
     & > .anchor {
       @include link-colors($border-color, $main-color-1);
       margin-left: .2rem;
-      visibility: hidden;
       text-decoration: none;
+      visibility: hidden;
       opacity: 0;
       & > i {
         font-size: map-get($base, font-size-sm);
@@ -19,9 +19,9 @@
     }
     @include hover() {
       & > .anchor {
+        cursor: pointer;
         visibility: visible;
         opacity: 1;
-        cursor: pointer;
       }
     }
   }
@@ -35,9 +35,9 @@
   }
   blockquote {
     padding-left: 1rem;
-    @include split-line(left, 4px, $border-color);
     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;
     }
@@ -51,18 +51,18 @@
   }
   .emoji {
     display: inline-block;
-    vertical-align: text-bottom;
     width: map-get($base, line-height-lg) * .7rem;
     height: map-get($base, line-height-lg) * .7rem;
+    vertical-align: text-bottom;
   }
   .footnotes {
     @include split-line();
     margin-top: map-get($base, vertical-space-lg) * 2;
   }
   code {
-    border-radius: map-get($base, border-radius);
     padding: .2rem .5rem;
     background-color: $text-background-color;
+    border-radius: map-get($base, border-radius);
     span {
       padding: 0;
       margin: 0;
@@ -72,8 +72,8 @@
     @include overflow(auto);
     & > code {
       padding: 0;
-      background-color: transparent;
       word-wrap: normal;
+      background-color: transparent;
       &.language-mermaid, &.language-chart {
         svg {
           width: 100%;
@@ -87,27 +87,27 @@
   }
   .highlighter-rouge > .highlight, figure.highlight {
     & > pre {
-      border-radius: map-get($base, border-radius);
       padding: 1rem 0 1rem 1rem;
       margin: 0;
       background-color: $text-background-color;
+      border-radius: map-get($base, border-radius);
       & > code {
         display: block;
       }
     }
   }
   figure.highlight {
-    &:before {
-      content: attr(data-lang);
+    &::before {
       display: block;
-      border-top-left-radius: map-get($base, border-radius);
-      border-top-right-radius: map-get($base, border-radius);
       padding: .5rem 1rem .5rem 0;
-      color: $decorate-color;
-      background-color: $text-background-color;
       font-weight: map-get($base, font-weight-bold);
+      color: $decorate-color;
       text-align: right;
       text-transform: uppercase;
+      content: attr(data-lang);
+      background-color: $text-background-color;
+      border-top-left-radius: map-get($base, border-radius);
+      border-top-right-radius: map-get($base, border-radius);
     }
     & > pre {
       padding-top: 0;
@@ -118,9 +118,9 @@
           width: auto;
           margin: 0 0 -1rem -1rem;
           tbody, tr, td {
-            border: none;
             padding-top: 0;
             padding-bottom: 0;
+            border: none;
           }
           & > tbody {
             @include flexbox;
@@ -138,10 +138,10 @@
               padding-left: 1rem;
             }
             & > pre {
-              border-radius: 0;
               display: block;
-              @include overflow(auto);
               margin: 0;
+              border-radius: 0;
+              @include overflow(auto);
               &.lineno {
                 color: $text-color-l;
                 @include user-select(none);
@@ -177,6 +177,13 @@
       margin-left: 2rem;
     }
   }
+  ul.task-list {
+    margin-left: 0;
+    list-style-type: none;
+    ul, ol {
+      margin-left: 1.5rem;
+    }
+  }
   table {
     display: block;
     width: 100%;
@@ -186,8 +193,8 @@
       background-color: $text-background-color;
     }
     th, td {
-      border: 1px solid $border-color-l;
       padding: .5rem;
+      border: 1px solid $border-color-l;
     }
     th {
       font-weight: map-get($base, font-weight-bold);

data/_sass/components/_article-info.scss

@@ -8,17 +8,17 @@
   }
   .right-col {
     float: right;
-    color: $text-color-l;
     margin-left: map-get($button, padding-x-sm);
+    color: $text-color-l;
     @include media-breakpoint-down(md) {
       float: none;
     }
     & > li {
       &:not(:last-child) {
         @include split-line(right, default, $text-color-l);
-        line-height: map-get($base, line-height-xs);
         padding-right: .7rem;
         margin-right: .7rem;
+        line-height: map-get($base, line-height-xs);
       }
     }
   }

data/_sass/components/_article-list.scss

@@ -0,0 +1,3 @@
+.article-list__group-header {
+  margin-top: map-get($base, vertical-space) * 2;
+}

data/_sass/components/_author-links.scss

@@ -25,6 +25,9 @@
       }
       .douban-button {
         @include clickable($text-color-1, $douban-color);
+      }      
+      .npm-button {
+        @include clickable($text-color-1, $npm-color);
       }
     }
   }