jekyll-text-theme 1.5.0 → 2.0.0

data/_sass/components/_article.content.scss

@@ -1,22 +1,20 @@
-.m-article-content {
+.article__content {
   word-wrap: break-word;
-  line-height: map-get($base, line-height-large);
+  line-height: map-get($base, line-height-lg);
   @include block-elements() {
-    margin: map-get($base, vertical-space-large) 0;
+    margin: map-get($base, vertical-space-lg) 0;
   }
   @include heading-elements() {
     position: relative;
-    margin-top: map-get($base, vertical-space-large) * 1.5;
+    margin-top: map-get($base, vertical-space-lg) * 1.5;
     & > .anchor {
-      @include link-text-colors($border-color, $main-color-1, $main-color-1);
+      @include link-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);
+      & > i {
+        font-size: map-get($base, font-size-sm);
       }
     }
     &:hover {
@@ -33,44 +31,37 @@
   }
   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;
-    }
+    @include horizontal-rules();
   }
   blockquote {
     padding-left: 1rem;
     @include split-line(left, 4px, $border-color);
-    font-size: map-get($base, font-size-sub);
+    font-size: map-get($base, font-size-sm);
     color: $text-color-l;
     p {
       margin: map-get($base, vertical-space) 0;
     }
-    &>:last-child {
+    & > :last-child {
       margin-bottom: 0;
     }
   }
   img:not(.emoji) {
     max-width: 100%;
-    max-height: 37rem;
     vertical-align: middle;
   }
   .emoji {
     display: inline-block;
     vertical-align: text-bottom;
-    width: map-get($base, line-height-large) * .7rem;
-    height: map-get($base, line-height-large) * .7rem;
+    width: map-get($base, line-height-lg) * .7rem;
+    height: map-get($base, line-height-lg) * .7rem;
   }
   .footnotes {
     @include split-line();
-    margin-top: map-get($base, vertical-space-large) * 2;
+    margin-top: map-get($base, vertical-space-lg) * 2;
   }
   code {
-    @include round-rect(default, .2rem .5rem);
+    border-radius: map-get($base, border-radius);
+    padding: .2rem .5rem;
     background-color: $text-background-color;
     span {
       padding: 0;
@@ -78,13 +69,15 @@
     }
   }
   pre {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    &>code {
+    @include overflow(auto);
+    & > code {
       padding: 0;
       background-color: transparent;
       word-wrap: normal;
       &.language-mermaid, &.language-chart {
+        svg {
+          width: 100%;
+        }
         display: none;
         &[data-processed] {
           display: block;
@@ -92,12 +85,13 @@
       }
     }
   }
-  .highlighter-rouge>.highlight, figure.highlight {
-    &>pre {
-      @include round-rect(default, 1rem 0 1rem 1rem);
+  .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;
-      &>code {
+      & > code {
         display: block;
       }
     }
@@ -106,8 +100,8 @@
     &:before {
       content: attr(data-lang);
       display: block;
-      border-top-left-radius: map-get($shape, round-rect-radius);
-      border-top-right-radius: map-get($shape, round-rect-radius);
+      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;
@@ -115,12 +109,12 @@
       text-align: right;
       text-transform: uppercase;
     }
-    &>pre {
+    & > pre {
       padding-top: 0;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
-      &>code {
-        &>.rouge-table {
+      & > code {
+        & > .rouge-table {
           width: auto;
           margin: 0 0 -1rem -1rem;
           tbody, tr, td {
@@ -128,15 +122,14 @@
             padding-top: 0;
             padding-bottom: 0;
           }
-          &>tbody {
+          & > tbody {
             @include flexbox;
-            &>tr {
+            & > tr {
               width: 100%;
               @include flexbox;
-              &>.code {
+              & > .code {
                 padding: 0 0 1rem .5rem;
-                overflow: auto;
-                -webkit-overflow-scrolling: touch;
+                @include overflow(auto);
               }
             }
           }
@@ -144,8 +137,8 @@
             &.gl {
               padding-left: 1rem;
             }
-            &>pre {
-              @include round-rect(0);
+            & > pre {
+              border-radius: 0;
               display: block;
               overflow: visible;
               margin: 0;
@@ -189,9 +182,8 @@
   table {
     display: block;
     width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
     border-collapse: collapse;
+    @include overflow(auto);
     thead, tfoot {
       background-color: $text-background-color;
     }

data/_sass/components/_article.info.scss

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

data/_sass/components/_author-profile.scss

@@ -0,0 +1,43 @@
+.author-profile {
+  max-width: 25rem;
+  background-color: $text-background-color;
+  font-size: map-get($base, font-size-sm);
+  margin: map-get($base, vertical-space-lg) 0;
+  @include media-breakpoint-down(md) {
+    text-align: center;
+  }
+  img {
+    width: 5rem;
+    border-radius: 50%;
+    margin-top: map-get($base, vertical-space);
+  }
+  .author-profile__name {
+    font-size: map-get($base, font-size-lg);
+    font-weight: map-get($base, font-weight-bold);
+    a {
+      @include link-colors($text-color, $text-color, $text-color);
+    }
+  }
+  .left-col {
+    float: left;
+    @include media-breakpoint-down(md) {
+      float: none;
+    }
+  }
+  .right-col {
+    margin-left: 5rem;
+    padding-left: map-get($spacers, 4);
+    @include media-breakpoint-down(md) {
+      float: none;
+      margin-left: 0;
+      padding-left: 0;
+      margin-left: 0;
+    }
+    .follow-me {
+      float: left;
+      @include media-breakpoint-down(md) {
+        float: none;
+      }
+    }
+  }
+}

data/_sass/components/_follow-me.scss

@@ -1,33 +1,30 @@
 .follow-me {
-  text-align: center;
   & > ul {
     margin: 0;
-    justify-content: center;
-    @include horizontal-space();
     & > li > {
-      .mail {
-        @include link-colors($text-color-1, $mail-color);
+      .mail-button {
+        @include button-colors($text-color-1, $mail-color);
       }
-      .weibo {
-        @include link-colors($text-color-1, $weibo-color);
+      .weibo-button {
+        @include button-colors($text-color-1, $weibo-color);
       }
-      .facebook {
-        @include link-colors($text-color-1, $facebook-color);
+      .facebook-button {
+        @include button-colors($text-color-1, $facebook-color);
       }
-      .twitter {
-        @include link-colors($text-color-1, $twitter-color);
+      .twitter-button {
+        @include button-colors($text-color-1, $twitter-color);
       }
-      .googlepluse {
-        @include link-colors($text-color-1, $google-plus-color);
+      .googlepluse-button {
+        @include button-colors($text-color-1, $google-plus-color);
       }
-      .github {
-        @include link-colors($text-color-1, $github-color);
+      .github-button {
+        @include button-colors($text-color-1, $github-color, default, default, default, default, default, default, 'dark');
       }
-      .linkedin {
-        @include link-colors($text-color-1, $linkedin-color);
+      .linkedin-button {
+        @include button-colors($text-color-1, $linkedin-color);
       }
-      .douban {
-        @include link-colors($text-color-1, $douban-color);
+      .douban-button {
+        @include button-colors($text-color-1, $douban-color);
       }
     }
   }

data/_sass/components/_footer.scss

@@ -2,21 +2,31 @@
  * Site Info
  */
 
-.m-page-footer {
+.footer {
   @include flexbox;
   @include align-items(center);
-  height: map-get($layout, footer-height);
-  margin-top: - map-get($layout, footer-height);
   background-color: $main-color-3;
+  height: map-get($layout, footer-height);
+  .follow-me {
+    padding-top: 1rem;
+  }
   p {
     color: $text-color-3;
   }
   a {
-    @include link-text-colors ( $text-color-3, $main-color-1, $main-color-1);
+    @include link-colors ($text-color-3, $main-color-1, $main-color-1);
   }
   .site-info {
     text-align: center;
-    font-size: map-get($base, font-size-tiny);
-    margin: 0 auto;
+    font-size: map-get($base, font-size-xs);
+    margin: 1rem auto 0 auto;
+  }
+  .site-info__rss {
+    @include split-line(left, default, $text-color-3);
+    padding-left: .3rem;
+    margin-left: .1rem;
+  }
+  .site-info__copyright, .site-info__rss {
+    line-height: map-get($base, line-height-xs);
   }
 }

data/_sass/components/_header.scss

@@ -1,54 +1,62 @@
-.m-page-header {
-  background-color: $main-color-3;
+.header {
   a {
     font-weight: map-get($base, font-weight);
-    @include link-text-colors( $text-color-3, $main-color-1, $main-color-1);
+    text-decoration: none;
+    @include link-colors($text-color, $main-color-1, $main-color-1);
   }
-  &>.main>.site-logo {
+  & > .main > .logo {
     float: left;
-    @include horizontal-space(1rem, 0);
+    @include menu(3, 0);
     @include align-items(center);
     height: map-get($layout, header-height);
-    &>svg {
+    & > svg {
       margin-right: .8rem;
       vertical-align: middle;
       width: map-get($base, font-size-h4) * 1.6;
       height: map-get($base, font-size-h4) * 1.6;
-      @include media-breakpoint-down(s) {
+      @include media-breakpoint-down(md) {
         margin-right: .5rem;
         width: map-get($base, font-size-h4) * 1.2;
         height: map-get($base, font-size-h4) * 1.2;
       }
     }
-    &>a {
+    & > a {
       display: inline-block;
       font-size: map-get($base, font-size-h4);
-      @include media-breakpoint-down(s) {
+      @include media-breakpoint-down(md) {
         font-size: map-get($base, font-size-h4-small);
       }
     }
-    @include media-breakpoint-down(s) {
+    @include media-breakpoint-down(md) {
       float: none;
-      height: map-get($layout, header-height-small);
+      height: map-get($layout, header-height-sm);
     }
   }
-  &>.main>nav {
+  & > .main > nav {
     display: block;
     float: right;
-    overflow-x: auto;
     white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
+    @include overflow(auto);
     ul {
       margin: 0;
-      @include horizontal-space(1rem, .5rem, nowrap);
+      @include menu(3, 2, nowrap);
       @include align-items(center);
       height: map-get($layout, header-height);
-      @include media-breakpoint-down(s) {
+      @include media-breakpoint-down(md) {
         height: auto;
       }
+      & > li {
+        @include split-line(bottom, 4px, transparent);
+        &.active {
+          @include split-line(bottom, 4px, $main-color-1);
+          a {
+            @include link-colors($main-color-1, $main-color-1, $main-color-1);
+          }
+        }
+      }
     }
-    @include media-breakpoint-down(s) {
+    @include media-breakpoint-down(md) {
       float: none;
     }
   }
-}
+}

data/_sass/components/_license.scss

@@ -1,26 +1,2 @@
-.m-license {
-  @include round-rect(1rem, .5rem 1rem);
-  @include box-shadow();
-  background-color: $text-background-color;
-  font-weight: map-get($base, font-weight-bold);
-  img {
-    vertical-align: bottom;
-  }
-  .url {
-    word-wrap: break-word;
-  }
-  .octocat {
-    float: right;
-    img {
-      width: 4rem;
-      height: auto;
-      margin: 0 1rem;
-      border-width: 0;
-      border-radius: 2rem;
-    }
-  }
-  .license {
-    float: right;
-    margin-left: 1rem;
-  }
+.license {
 }