jekyll-text-theme 1.5.0 → 2.0.0

data/_sass/components/_main.scss

@@ -1,23 +1,25 @@
 .main {
-  box-sizing: border-box;
   margin: 0 auto;
   padding: 0 2rem;
   max-width: map-get($layout, content-max-width);
-  @include media-breakpoint-down(l) {
+  @include media-breakpoint-down(lg) {
     padding: 0 1rem;
   }
-  .main-header {
-    & > h1 {
-      font-weight: map-get($base, font-weight-bold);
+}
+
+.has-aside {
+  .main {
+    max-width: map-get($layout, content-max-width) + map-get($layout, aside-width);
+    @include media-breakpoint-down(lg) {
+      max-width: map-get($layout, content-max-width);
+      padding: 0 1rem;
     }
-    margin-top: 2rem;
   }
 }
 
-.has-toc .main {
-  max-width: map-get($layout, content-max-width) + map-get($layout, aside-width);
-  @include media-breakpoint-down(l) {
-    max-width: map-get($layout, content-max-width);
-    padding: 0 1rem;
+.full-width {
+  .main {
+    max-width: 100%;
+    width: 100%;
   }
 }

data/_sass/components/_tags.scss

@@ -1,42 +1,23 @@
-.m-tags {
-  & > ul {
-    @include horizontal-space();
-    & > li > button {
-      box-sizing: border-box;
-      @include link-colors($text-color-1, $main-color-1, $text-color-2, $main-color-2, $text-color-2, $main-color-2, $text-color-2, $main-color-2);
-      @include link-focus {
-        @include box-shadow(3, $main-color-2);
-      }
-      &.all {
-        @include link-colors($text-color-3, $main-color-3, $text-color-2, $main-color-2, $text-color-2, $main-color-2, $text-color-2, $main-color-2);
-      }
-      & > .tag-count {
-        font-size: map-get($base, font-size-tiny);
-        display: inline-block;
-        line-height: 1;
-        margin-left: .2rem;
-        vertical-align: top;
-      }
+.site-tags {
+  .tag-button {
+    & > .tag-button__count {
+      font-size: map-get($base, font-size-xs);
+      display: inline-block;
+      line-height: 1;
+      margin-left: .2rem;
+      vertical-align: top;
     }
   }
-  .tag-1 {
-    @include link-normal() {
-      background-color: rgba($main-color-1, .4);
-    }
+  .tag-button-1 {
+    @include button-colors($text-color-1, rgba($main-color-1, .4), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
   }
-  .tag-2 {
-    @include link-normal() {
-      background-color: rgba($main-color-1, .55);
-    }
+  .tag-button-2 {
+    @include button-colors($text-color-1, rgba($main-color-1, .55), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
   }
-  .tag-3 {
-    @include link-normal() {
-      background-color: rgba($main-color-1, .7);
-    }
+  .tag-button-3 {
+    @include button-colors($text-color-1, rgba($main-color-1, .7), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
   }
-  .tag-4 {
-    @include link-normal() {
-      background-color: rgba($main-color-1, .9);
-    }
+  .tag-button-4 {
+    @include button-colors($text-color-1, rgba($main-color-1, .9), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
   }
-}
+}

data/_sass/layout/{_error-404.scss → _404.scss}

@@ -1,7 +1,7 @@
-.m-error-404 {
+.layout--404 {
   @include flexbox;
   @include align-items(center);
-  &>.main>h1 {
+  & > .main > h1 {
     font-size: 7rem;
   }
 }

data/_sass/layout/_all.scss

@@ -1,82 +1,91 @@
-.m-all {
-  &.search > .main {
-    & > .m-tags {
-      display: none;
+.layout--all {
+  .site-tags {
+    margin-bottom: map-get($base, vertical-space-lg) * 2;
+    display: block;
+  }
+
+  .search-box {
+    position: relative;
+    max-width: 22rem;
+    margin: map-get($base, vertical-space-lg) 0;
+    @include media-breakpoint-down(md) {
+      max-width: none;
+      width: 100%;
     }
-    & > .m-result {
-      section {
-        ul > li {
-          .date {
-            display: none;
-          }
-        }
+    & > input {
+      border-radius: 2rem;
+      padding: .2rem 1.8rem;
+      @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
+      -webkit-appearance: none; /* fix iOS don't display box-shadow properly */
+      width: 100%;
+      display: inline-block;
+      border: none;
+      margin: 0;
+      background-color: $text-background-color;
+      @include focus() {
+        @include box-shadow();
       }
     }
-  }
-  & > .main {
-    & > .m-tags {
-      margin-bottom: map-get($base, vertical-space-large) * 2;
+    & > .icon-search, & > .icon-clear {
+      position: absolute;
+      top: 50%;
+      @include transform(translateY(-50%));
+      display: inline-block;
+      vertical-align: middle;
+      font-size: map-get($base , font-size-sm);
+    }
+    &.not-empty > .icon-clear {
       display: block;
     }
-    & > .m-search-box {
-      position: relative;
-      @include flexbox;
-      @include align-items(center);
-      @include round-rect(default, .2rem .4rem);
-      box-sizing: border-box;
-      max-width: 22rem;
-      background-color: $text-background-color;
-      @include media-breakpoint-down(s) {
-        max-width: none;
-        width: 100%;
-      }
-      margin: map-get($base, vertical-space-large) 0;
-      &.not-empty > .icon-clear {
-        display: block;
+    & > .icon-clear {
+      display: none;
+      right: .8rem;
+      @include link-colors($text-color-l, $text-color-d);
+    }
+    & > .icon-search {
+      left: .5rem;
+    }
+  }
+
+  & > .layout--all__result {
+    margin: map-get($base, vertical-space-lg) 0;
+    section {
+      &:not(:last-child) {
+        padding: 0 0 .4rem 0;
       }
-      & > .icon-clear {
-        display: none;
-        @extend %button;
-        @include link-colors($text-color-l, transparent,
-          $text-color-d, transparent, $text-color-d, transparent);
+      .year {
+        font-size: 1.6rem;
       }
-      & > .icon-search, & > .icon-clear {
-        & > svg {
-          display: block;
-          fill: $text-color-l;
+      ul > li {
+        list-style-type: none;
+        margin: .4rem 0;
+        .date {
+          font-family: map-get($base, font-family-code);
+          display: inline-block;
+          font-size: map-get($base, font-size-sm);
+          color: $text-color-l;
+          padding: 0 1rem 0 0;
+        }
+        .link {
+          font-size: 1rem;
+          @include link-colors($text-color-d, $main-color-1, $main-color-1);
         }
-      }
-      & > input {
-        @include flex(1);
-        border: none;
-        background-color: transparent;
       }
     }
-    & > .m-result {
-      margin: map-get($base, vertical-space-large) 0;
+  }
+  &.search {
+    & > .site-tags {
+      display: none;
+    }
+    & > .layout--all__result {
       section {
-        &:not(:last-child) {
-          padding: 0 0 .4rem 0;
-        }
-        .year {
-          font-size: 1.6rem;
-        }
         ul > li {
-          list-style-type: none;
-          margin: .4rem 0;
           .date {
-            font-family: map-get($base, code-font-family);
-            display: inline-block;
-            font-size: map-get($base, font-size-sub);
-            color: $text-color-l;
-            padding: 0 1rem 0 0;
-          }
-          .link {
-            font-size: 1rem;
-            @include link-text-colors($text-color-d, $main-color-1, $main-color-1);
+            display: none;
           }
         }
       }
     }
   }
+
 }

data/_sass/layout/_article.scss

@@ -0,0 +1,44 @@
+.layout--article {
+
+  .article__footer {
+    margin: map-get($base, vertical-space-lg) 0;
+    font-size: map-get($base, font-size-sm);
+    color: $text-color-l;
+    .article__license {
+      position: relative;
+      img {
+        height: map-get($base, font-size-sm) * 1.5;
+        vertical-align: text-bottom;
+      }
+      a {
+        @include link-colors($text-color, $main-color-1, $main-color-1);
+      }
+    }
+  }
+  .article__previous-next {
+    word-wrap: break-word;
+    margin: map-get($spacers, 4) 0 map-get($spacers, 3) 0;
+    padding-top: map-get($base, vertical-space-lg) / 2;
+    @include split-line(top, 4px);
+    & > .previous, & > .next {
+      width: 50%;
+      & > span {
+        font-weight: map-get($base, font-weight-bold);
+        color: $text-color-l;
+      }
+      & > a {
+        display: block;
+        @include link-colors($text-color, $main-color-1, $main-color-1);
+      }
+    }
+    & > .previous {
+      float: left;
+      padding-right: .5rem;
+    }
+    & > .next {
+      float: right;
+      padding-left: .5rem;
+      text-align: right;
+    }
+  }
+}

data/_sass/layout/_home.scss

@@ -1,61 +1,70 @@
-.m-post-list {
-  & > article {
-    & > h1 {
-      font-size: map-get($base, font-size-header-list);
+.layout--home {
+  .post-list {
+    & > article {
+      & > h1, h2  {
+        font-size: map-get($base, font-size-h3);
+        & > a {
+          @include link-colors($text-color-d, $main-color-1, $main-color-1);
+        }
+      }
       & > a {
-        @include link-text-colors( $text-color-d, $main-color-1, $main-color-1);
+        font-size: map-get($base, font-size-sm);
+      }
+      padding-bottom: map-get($spacers, 4);
+      margin-bottom: map-get($spacers, 4);
+      &:not(:last-child) {
+        @include split-line(bottom);
       }
     }
-    & > a {
-      font-size: map-get($base, font-size-sub);
-    }
-    padding-bottom: 1.3rem;
-    margin: 2.6rem 0 1rem 0;
-    &:not(:last-child) {
-      @include split-line(bottom);
+    .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;
+      }
     }
   }
-  .m-article-content {
-    font-size: map-get($base, font-size-sub);
-    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-excerpt);
-    }
-    h2 {
-      font-size: map-get($base, font-size-h2-excerpt);
-    }
-    h3 {
-      font-size: map-get($base, font-size-h3-excerpt);
-    }
-    h4 {
-      font-size: map-get($base, font-size-h4-excerpt);
-    }
-    h5 {
-      font-size: map-get($base, font-size-h5-excerpt);
-    }
-    h6 {
-      font-size: map-get($base, font-size-h6-excerpt);
-    }
-    img {
-      max-height: 12rem;
+  .pagination {
+    margin: map-get($base, vertical-space-lg) 0;
+    .pagination__omit {
+      color: $text-color-l;
     }
   }
 }

data/_sass/layout/_landing.scss

@@ -0,0 +1,104 @@
+.layout--landing {
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  .section {
+    text-align: center;
+    background-color: $text-background-color;
+    @include flexbox();
+    @include align-items(center);
+    h1 {
+      font-size: map-get($base, font-size-h1-lg);
+    }
+    h2 {
+      font-size: map-get($base, font-size-h2-lg);
+    }
+    h3 {
+      font-size: map-get($base, font-size-h3-lg);
+    }
+    p {
+      font-size: map-get($base, font-size-lg);
+    }
+  }
+
+  .section--light {
+    h1, h2, h3 {
+      color: $text-color-theme-light-d;
+    }
+    h4, h5 {
+      color: $text-color-theme-light;
+    }
+    h6 {
+      color: $text-color-theme-light-l;
+    }
+    color: $text-color-theme-light;
+  }
+
+  .section--dark {
+    h1, h2, h3 {
+      color: $text-color-theme-dark-d;
+    }
+    h4, h5 {
+      color: $text-color-theme-dark;
+    }
+    h6 {
+      color: $text-color-theme-dark-l;
+    }
+    color: $text-color-theme-dark;
+  }
+
+  .section__content {
+    width: 100%;
+  }
+
+  .content__cover {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .content__row {
+    margin-bottom: map-get($spacers, 5);
+  }
+  .content__col {
+    padding: 0 map-get($spacers, 2);
+  }
+
+  .overlay {
+    min-height: 40rem;
+    padding: map-get($spacers, 5) 0;
+    background-image: url(/docs/assets/images/cover1.jpeg);
+    background-size: cover;
+    @include media-breakpoint-down(md) {
+      min-height: 28rem;
+    }
+    .section__content {
+      min-width: 400px;
+      @include media-breakpoint-down(md) {
+        min-width: auto;
+        width: 100%;
+        padding: 0 map-get($spacers, 3);
+      }
+    }
+    h1 {
+      font-size: 4rem;
+    }
+  }
+
+  .feature {
+    margin: map-get($spacers, 5);
+    padding: map-get($spacers, 5);
+    padding-bottom: 0;
+    @include media-breakpoint-down(lg) {
+      margin: map-get($spacers, 3);
+      padding: map-get($spacers, 5) map-get($spacers, 3);
+      padding-bottom: 0;
+    }
+    @include media-breakpoint-down(md) {
+      margin: map-get($spacers, 2) 0;
+      padding: map-get($spacers, 4) map-get($spacers, 3);
+      padding-bottom: 0;
+    }
+  }
+}