jekyll-text-theme 2.1.0 → 2.2.0

data/_sass/common/components/_button.scss

@@ -142,4 +142,13 @@
     width: map-get($button, circle-diameter-lg);
     height: map-get($button, circle-diameter-lg);
   }
+}
+
+.button--xl {
+  padding: map-get($button, padding-y-xl) map-get($button, padding-x-xl);
+  font-size: map-get($base, font-size-xl);
+  &.button--circle {
+    width: map-get($button, circle-diameter-xl);
+    height: map-get($button, circle-diameter-xl);
+  }
 }

data/_sass/common/components/_card.scss

@@ -1,18 +1,102 @@
-@mixin card($has-shadow: default) {
-  @if $has-shadow == default {
-    $has-shadow: true;
+
+.card {
+  max-width: 18rem;
+  border-radius: map-get($base, border-radius);
+  @include box-shadow();
+  @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
+  & > :first-child {
+    border-top-left-radius: map-get($base, border-radius);
+    border-top-right-radius: map-get($base, border-radius);
+  }
+  & > :last-child {
+    border-bottom-right-radius: map-get($base, border-radius);
+    border-bottom-left-radius: map-get($base, border-radius);
+  }
+}
+
+.cell {
+  & > .card {
+    max-width: unset;
   }
+}
+
+.card__content {
   padding: .5rem 1rem;
-  border-radius: map-get($base, border-radius);
-  @if $has-shadow {
-    @include box-shadow();
+}
+
+a.card__header, .card__header > a {
+  @include link-colors($text-color-d, $main-color-1);
+}
+
+.card__image {
+  position: relative;
+  width: 100%;
+  & > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: inherit;
+  }
+  & > .overlay {
+    position: absolute;
+    width: 100%;
+    max-height: 100%;
+    padding: .5rem;
+    a {
+      text-decoration: none !important;
+    }
+  }
+  & > .overlay, & > .overlay--top {
+    top: 0;
+    bottom: auto;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  & > .overlay--bottom {
+    top: auto;
+    bottom: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  & > .overlay--full {
+    top: 0;
+    bottom: 0;
+  }
+  & > .overlay, & > .overlay--dark {
+    @extend .text--dark;
+    background-color: rgba(#000, .4);
+  }
+  & > .overlay--light {
+    @extend .text--light;
+    background: rgba(#fff, .4);
   }
 }
 
-.card {
-  @include card();
+.card--clickable {
+  cursor: pointer;
+  @include hover() {
+    @include box-shadow(2);
+    .card__image {
+      & > img {
+        height: inherit;
+      }
+    }
+  }
 }
 
-.card--no-shadow {
+.card--flat {
   @include box-shadow(0);
+  .card__image {
+    & > img {
+      border-radius: map-get($base, border-radius);
+    }
+  }
+  .card__content {
+    padding-top: 0;
+    padding-left: 0;
+  }
 }

data/_sass/common/components/_hero.scss

@@ -0,0 +1,79 @@
+.hero {
+  padding: map-get($spacers, 5);
+  background-position: 50% 50%;
+  @include media-breakpoint-down(lg) {
+    padding: map-get($spacers, 5) map-get($spacers, 3);
+  }
+  @include media-breakpoint-down(md) {
+    padding: map-get($spacers, 4) map-get($spacers, 3);
+  }
+  @include flexbox();
+  @include align-items(center);
+  h1 { font-size: map-get($base, font-size-h1-xl); }
+  h2 { font-size: map-get($base, font-size-h2-xl); }
+  h3 { font-size: map-get($base, font-size-h3-xl); }
+  h4 { font-size: map-get($base, font-size-h4-xl); }
+  h5 { font-size: map-get($base, font-size-h5-xl); }
+  h6 { font-size: map-get($base, font-size-h6-xl); }
+  p  { font-size: map-get($base, font-size-xl); }
+  @include media-breakpoint-down(lg) {
+    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); }
+    h4 { font-size: map-get($base, font-size-h4-lg); }
+    h5 { font-size: map-get($base, font-size-h5-lg); }
+    h6 { font-size: map-get($base, font-size-h6-lg); }
+    p  { font-size: map-get($base, font-size-lg); }
+  }
+  @include media-breakpoint-down(md) {
+    h1 { font-size: map-get($base, font-size-h1-sm); }
+    h2 { font-size: map-get($base, font-size-h2-sm); }
+    h3 { font-size: map-get($base, font-size-h3-sm); }
+    h4 { font-size: map-get($base, font-size-h4-sm); }
+    h5 { font-size: map-get($base, font-size-h5-sm); }
+    h6 { font-size: map-get($base, font-size-h6-sm); }
+    p  { font-size: map-get($base, font-size); }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    margin: 0 auto;
+  }
+  background-size: cover;
+
+}
+
+.hero--center {
+  text-align: center;
+  .menu {
+    @extend .menu--center;
+  }
+}
+
+.hero--light {
+  @extend .text--light;
+}
+
+.hero--dark {
+  @extend .text--dark;
+}
+
+.hero__content {
+  width: 100%;
+}
+.hero__cover {
+  max-width: 800px;
+}
+
+.heros {
+  .hero {
+    margin: map-get($spacers, 5);
+    @include media-breakpoint-down(lg) {
+      margin: map-get($spacers, 3);
+    }
+    @include media-breakpoint-down(md) {
+      margin: map-get($spacers, 2) 0;
+    }
+  }
+}

data/_sass/common/components/_image.scss

@@ -0,0 +1,19 @@
+.image {
+  max-width: 100%;
+  @extend .image--md;
+}
+.image--md {
+  width: map-get($image, width);
+}
+.image--xl {
+  width: map-get($image, width-xl);
+}
+.image--lg {
+  width: map-get($image, width-lg);
+}
+.image--sm {
+  width: map-get($image, width-sm);
+}
+.image--xs {
+  width: map-get($image, width-xs);
+}

data/_sass/common/components/_item.scss

@@ -1,7 +1,7 @@
 .item {
   @include flexbox();
   @include media-breakpoint-down(md) {
-    @include flex-direction(row);
+    @include flex-direction(column);
   }
   &:not(:last-child) {
     margin-bottom: map-get($base, vertical-space);
@@ -14,20 +14,24 @@
   @include media-breakpoint-down(md) {
     margin-right: 0;
   }
+  @include media-breakpoint-up(md) {
+    & + .item__content {
+      & > :first-child {
+        margin-top: 0;
+        & > :first-child {
+          margin-top: 0;
+        }
+      }
+    }
+  }
 }
 
 .item__content {
   @include flex(1);
-  max-width: 100%;
+  min-width: 0;
 }
 
-.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 {
+a.item__header, .item__header > a {
   @include link-colors($text-color-d, $main-color-1);
 }
 

data/_sass/components/_article-header.scss

@@ -0,0 +1,47 @@
+.article__header {
+  margin-top: map-get($spacers, 5);
+  margin-bottom: map-get($base, vertical-space-lg);
+  @include media-breakpoint-down(md) {
+    margin-top: map-get($spacers, 4);
+  }
+  header, h1 {
+    display: inline;
+  }
+  .split-space {
+    @include user-select(none);
+  }
+  .edit-on-github {
+    text-decoration: none !important;
+  }
+}
+
+.article__header--overlay {
+  .overlay {
+    min-height: 36rem;
+    padding-top: map-get($spacers, 5) * 2;
+    padding-bottom: map-get($spacers, 5) * 2;
+    @include media-breakpoint-down(md) {
+      min-height: 29rem;
+      padding-top: map-get($spacers, 5);
+      padding-bottom: map-get($spacers, 5);
+    }
+  }
+  .overlay__excerpt {
+    font-size: map-get($base, font-size-h3-xl);
+    @include media-breakpoint-down(lg) {
+      font-size: map-get($base, font-size-h3-lg);
+    }
+    @include media-breakpoint-down(md) {
+      font-size: map-get($base, font-size-h3-sm);
+    }
+    font-weight: map-get($base, font-weight-bold);
+  }
+
+  .article__header {
+    margin-top: 0;
+  }
+}
+
+.article__header--cover {
+  width: 100%;
+}

data/_sass/components/_article-info.scss

@@ -1,5 +1,6 @@
 .article__info {
   font-size: map-get($base, font-size-sm);
+  color: $text-color-l;
   .left-col {
     float: left;
     @include media-breakpoint-down(md) {
@@ -9,7 +10,6 @@
   .right-col {
     float: right;
     margin-left: map-get($button, padding-x-sm);
-    color: $text-color-l;
     @include media-breakpoint-down(md) {
       float: none;
     }

data/_sass/components/_article-list.scss

@@ -1,3 +1,11 @@
+.article-list {
+  .item__meta {
+    padding: 0 1rem 0 0;
+    font-family: map-get($base, font-family-code);
+    font-size: map-get($base, font-size-sm);
+    white-space: nowrap;
+  }
+}
 .article-list__group-header {
   margin-top: map-get($base, vertical-space) * 2;
 }

data/_sass/components/_author-links.scss

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

data/_sass/components/_author-profile.scss

@@ -1,5 +1,6 @@
 .author-profile {
   max-width: 25rem;
+  padding: .5rem 1rem;
   margin: map-get($base, vertical-space-lg) 0;
   font-size: map-get($base, font-size-sm);
   background-color: $text-background-color;
@@ -11,33 +12,14 @@
     margin-top: map-get($base, vertical-space);
     border-radius: 50%;
   }
-  .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, $main-color-1);
-    }
-  }
-  .left-col {
-    float: left;
-    @include media-breakpoint-down(md) {
-      float: none;
-    }
-  }
-  .right-col {
-    padding-left: map-get($spacers, 4);
-    margin-left: 5rem;
-    @include media-breakpoint-down(md) {
-      float: none;
-      padding-left: 0;
-      margin-left: 0;
-      margin-left: 0;
-    }
-    .author-links {
-      float: left;
-      @include media-breakpoint-down(md) {
-        float: none;
-      }
-    }
+}
+.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, $main-color-1);
   }
+}
+.author-profile__links {
+  @include overflow(auto);
 }

data/_sass/components/_footer.scss

@@ -7,17 +7,6 @@
   @include align-items(center);
   height: map-get($layout, footer-height);
   background: $footer-background;
-  & > .main {
-    max-width: 100%;
-  }
-  .author-links {
-    @include overflow(auto);
-    padding-top: 1rem;
-    text-align: center;
-    & > .menu {
-      @include inline-flex();
-    }
-  }
   p {
     color: $footer-text-color;
   }
@@ -39,4 +28,11 @@
       }
     }
   }
+}
+.footer__author-links {
+  @include overflow(auto);
+  .author-links {
+    padding-top: 1rem;
+    text-align: center;
+  }
 }

data/_sass/components/_header.scss

@@ -13,7 +13,17 @@
   }
 }
 
-.header__main {
+.header--dark {
+  @extend .text--dark;
+  background: rgba(#000, .15);
+}
+
+.header--light {
+  @extend .text--light;
+  background: rgba(#fff, .15);
+}
+
+.header__title {
   @include menu(3, 0);
   @include align-items(center);
   @include flex-wrap(nowrap);
@@ -25,7 +35,7 @@
     height: map-get($layout, header-height-sm);
     margin-right: 0;
   }
-  & > .logo {
+  & > .header__brand {
     @include flex(1);
   }
   & > .search-button {
@@ -37,7 +47,7 @@
   }
 }
 
-.logo {
+.header__brand {
   & > svg {
     width: map-get($base, font-size-h4) * 1.6;
     height: map-get($base, font-size-h4) * 1.6;
@@ -72,26 +82,27 @@
     @include media-breakpoint-down(md) {
       height: auto;
     }
-    & > li {
-      &.active {
-        a {
-          @include link-colors($main-color-1, $main-color-1);
-        }
-        &::after {
-          @include split-line(bottom, 4px, $main-color-1);
-        }
-      }
-      &::after {
-        display: block;
-        margin-bottom: -4px;
-        content: "";
-        @include split-line(bottom, 4px, transparent);
-      }
-    }
     .search-button {
       @include media-breakpoint-down(md) {
         display: none;
       }
     }
   }
+}
+
+.navigation__link {
+  &::after {
+    display: block;
+    margin-bottom: -4px;
+    content: "";
+    @include split-line(bottom, 4px, transparent);
+  }
+}
+.navigation__link--active {
+  a {
+    @include link-colors($main-color-1, $main-color-1);
+  }
+  &::after {
+    @include split-line(bottom, 4px, $main-color-1);
+  }
 }