jekyll-theme-type-on-strap 6.0.0 → 7.0.1

data/_sass/includes/_portfolio.scss

@@ -1,43 +1,43 @@
 .portfolio-link {
-    display: block;
-    position: relative;
-    margin: 0 auto;
-    max-width: 400px;
-
-    .caption {
-        margin: 0;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        opacity: 0;
-        -webkit-transition: all ease .5s;
-        -moz-transition: all ease .5s;
-        transition: all ease .5s;
-
-        &::before {
-            content: ' ';
-            display: inline-block;
-            vertical-align: middle;
-            height: 100%;
-        }
-
-        &:hover {
-            opacity: 1;
-        }
-
-        .caption-content {
-            font-size: 15px;
-            color: white;
-            text-shadow: -1px 0 #ddd, 0 1px #ddd, 1px 0 #ddd, 0 -1px #ddd;
-            display: inline-block;
-            vertical-align: middle;
-
-            @media screen and (max-width: $sm-break) {
-                font-size: 7px;
-            }
-        }
+  display: block;
+  position: relative;
+  margin: 0 auto;
+  max-width: 400px;
+
+  .caption {
+    margin: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    opacity: 0;
+    -webkit-transition: all ease .5s;
+    -moz-transition: all ease .5s;
+    transition: all ease .5s;
+
+    &::before {
+      content: ' ';
+      display: inline-block;
+      vertical-align: middle;
+      height: 100%;
     }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .caption-content {
+      font-size: 15px;
+      color: white;
+      text-shadow: -1px 0 #ddd, 0 1px #ddd, 1px 0 #ddd, 0 -1px #ddd;
+      display: inline-block;
+      vertical-align: middle;
+
+      @media screen and (max-width: $sm-break) {
+        font-size: 7px;
+      }
+    }
+  }
 }
 
 .portfolio-grid {
@@ -46,7 +46,8 @@
   justify-content: space-around;
 
 }
+
 .portfolio-cell {
   flex: 0 0 32%;
   margin-bottom: 10px;
-}
+}

data/_sass/includes/_post_nav.scss

@@ -1,28 +1,33 @@
 #post-nav {
+  width: 100%;
+  display: inline-block;
+  @extend %padding-nav;
+
+  a {
     width: 100%;
-    display: inline-block;
-    @extend %padding-small;
-   
-    a {
-        width: 100%;
-        padding: 0;
-        margin: 0;
-    }
-    p {
-        @extend .meta;
-    }
-    
-    #previous-post {
-        float: left;
-    }
-    
-    #next-post {
-        float: right;
-    }
-    
-    @media screen and (max-width: $sm-break) {
+    padding: 0;
+    margin: 0;
+  }
+
+  p {
+    @extend .meta;
+  }
+
+  #previous-post {
+    float: left;
+    width: 50%;
+  }
+
+  #next-post {
+    float: right;
+    text-align: right;
+    width: 50%;
+  }
+
+  @media screen and (max-width: $sm-break) {
     a, p {
-        font-size: 0.8em;
+      font-size: 0.8em;
     }
+  }
 }
-}
+

data/_sass/includes/_share_buttons.scss

@@ -1,29 +1,30 @@
 ul.share-buttons {
-    list-style: none;
-    padding: $padding-x-small/2 0 $padding-x-small/2 0;
-    margin: 0;
-    text-align: center;
-    
-    div.meta {
-        display: inline;
-        margin-right: 0.5em;
-    }
+  list-style: none;
+  padding: $padding-x-small/2 0 $padding-x-small/2 0;
+  margin: 0;
+  text-align: center;
 
-    li {
-        display: inline;
-        
-        a:hover {
-            text-decoration: none;
-        }
-    }
-    .sr-only {
-        position: absolute;
-        clip: rect(1px 1px 1px 1px);
-        clip: rect(1px, 1px, 1px, 1px);
-        padding: 0;
-        border: 0;
-        height: 1px;
-        width: 1px;
-        overflow: hidden;
+  div.meta {
+    display: inline;
+    margin-right: 0.5em;
+  }
+
+  li {
+    display: inline;
+
+    a:hover {
+      text-decoration: none;
     }
+  }
+
+  .sr-only {
+    position: absolute;
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0;
+    border: 0;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+  }
 }

data/_sass/layouts/_blog.scss

@@ -0,0 +1,103 @@
+/* --- Header text feature --- */
+.call-out {
+  @extend %padding-header;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  font-size: 1.2em;
+  text-align: center;
+  color: $header-desc-text-color;
+  background: $header-desc-background-color no-repeat;
+  background-size: $feature-image-size;
+
+  /* --- Responsive --- */
+  @media screen and (min-width: $break) {
+    background-size: 120% auto;
+  }
+
+  @media screen and (max-width: $break) {
+    background-size: 200% auto;
+  }
+
+  @media screen and (max-width: $sm-break) {
+    background-size: 400% auto;
+  }
+
+  //For white images
+  p,
+  a,
+  li,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    @extend .header-txt-shadow;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+#main {
+  background-position: 100% 0, 0 center, center top;
+}
+
+/* --- Post listing --- */
+.posts {
+  .post-teaser {
+    @extend %padding-post;
+    width: 100%;
+    margin-bottom: 0;
+    display: inline-block;
+    background-size: $feature-image-size;
+    border-bottom: 1px solid $border-color;
+
+    p a {
+      @extend .body-link;
+    }
+
+    .post-img {
+      vertical-align: middle;
+      border-radius: 10px;
+      overflow: hidden;
+
+      @media (min-width: $break) {
+        height: 250px;
+      }
+
+      //Smaller screen
+      @media screen and (max-width: $break) {
+        height: 150px;
+      }
+
+      img {
+        width: 100%;
+        padding: 0;
+        vertical-align: middle;
+      }
+
+    }
+
+    .post-img img {
+      -moz-transition-timing-function: ease-out;
+      -webkit-transition-timing-function: ease-out;
+      transition-timing-function: ease-out;
+
+      -moz-transition: all 2s;
+      -webkit-transition: all 2s;
+      transition: all 2s;
+
+      &:hover {
+        -moz-transform: scale(1.1);
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .excerpt {
+    margin-top: 1em;
+  }
+}

data/_sass/layouts/_page.scss

@@ -1,11 +1,12 @@
 h1.title {
-    @extend .header-txt-shadow;
+  @extend .header-txt-shadow;
+  padding: $title-padding 0;
 }
 
 .subtitle {
-    font-weight: normal;
-    margin-top: 5px;
-    text-shadow: 1px 1px 2px $text-shadow;
+  font-weight: normal;
+  margin-top: 5px;
+  text-shadow: 1px 1px 2px $text-shadow;
 }
 
 //Shared css in _post.scss

data/_sass/layouts/_posts.scss

@@ -1,122 +1,128 @@
-article,
 .comments {
-    @extend %padding-regular;
-    border-bottom: 1px solid $border-color;
-    float: left;
-    width: 100%;
+  @extend %padding-post;
+  border-bottom: 1px solid $border-color;
+  float: left;
+  width: 100%;
 }
 
 article {
-    header {
-        margin-bottom: 6%;
-        text-align: center;
-    }
-    a:hover {
-        @extend .body-link;
-    }
-    .footnotes {
-        font-size: 0.9em;
-    }
+  @extend .comments;
+
+  header {
+    margin-bottom: 6%;
+    text-align: center;
+  }
+
+  a:hover {
+    @extend .body-link;
+  }
+
+  .footnotes {
+    font-size: 0.9em;
+  }
 }
 
 footer {
-    width: 100%;
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 0.9em;
-    display: inline-block;
-    text-align: center;
-    .meta {
-        display: inline;
-    }
-    a.button {
-        margin-left: 1em;
-    }
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 0.9em;
+  display: inline-block;
+  text-align: center;
+
+  .meta {
+    display: inline;
+  }
+
+  a.button {
+    margin-left: 1em;
+  }
 }
 
 header {
-    h1 {
-        margin: 0;
-    }
+  h1 {
+    margin: 0;
+  }
 }
 
 .meta {
-    color: rgba($text-color, .5);
-    letter-spacing: 0.1em;
-    margin: 0;
-    text-transform: uppercase;
+  color: $meta; // rgba($text-color, .65);
+  letter-spacing: 0.1em;
+  margin: 0;
+  text-transform: uppercase;
 }
 
+/* --- Post info --- */
+.post-info {
+  /* For border in author
+  border: 1px solid $border-color;
+  padding-left: 0.5em;
+  */
+  border-radius: 1em;
+  padding-right: 0.5em;
+  display: inline-flex;
 
-/* --- Feature image --- */
-.feature-image {
-    padding: 0;
-    .post-link {
-        color: $feature-image-text-color;
-    }
-    header {
-        color: $feature-image-text-color;
-        margin-bottom: 0;
-        padding: $padding-large/2.5 $padding-large;
-        .meta {
-            color: rgba($feature-image-text-color, .7);
-        }
-    }
-    .post-content {
-        @extend %padding-regular;
-        padding-bottom: 0;
-    }
-    footer {
-        @extend %padding-regular;
-        padding-top: 0;
+  a {
+    display: flex;
+    align-items: center;
+    img {
+      height: auto;
     }
-}
+  }
 
-// Responsive scrolling
-.feature-image header {
-    @media screen and (max-width: $break) {
-        padding: $padding-small $padding-small;
-    }
-    
-    /* --- Responsive --- */
-    @media screen and (min-width: $break) {
-        background-size: 120% auto;
-    } 
-    
-    @media screen and (max-width: $break) {
-        background-size: 200% auto;
-    } 
-    
-    @media screen and (max-width: $sm-break) {
-        background-size: 400% auto;
-    }
+  img {
+    border-radius: 1em;
+    padding: 0px;
+    width: 1.5em;
+    height: 100%;
+    margin-right: 0.5em;
+  }
 }
 
-/* --- Post navigation --- */
-#post-nav {
-    width: 100%;
-    border-bottom: 1px solid $border-color;
-    display: flex;
-    float: left;
+/* --- Feature image --- */
+.feature-image {
+  padding: 0;
 
-    a,
-    .page-title {
-        display: inline-block;
-    }
+  .post-link {
+    color: $feature-image-text-color;
+  }
 
-    .page-title {
-        margin-bottom: 1em;
-        width: 100%;
-    }
+  header {
+    color: $feature-image-text-color;
+    margin-bottom: 0;
+    padding: $padding-large/2.5 $padding-large;
 
-    a {
-        padding: 2em 3em;
-        border: 1px solid rgba(255, 255, 255, 0);
-        text-align: center;
-        width: 50%;
+    .meta {
+      color: rgba($feature-image-text-color, .7);
     }
+  }
 
-    i {
-        vertical-align: middle;
-    }
+  .post-content {
+    @extend %padding-post;
+    padding-bottom: 0;
+  }
+
+  footer {
+    @extend %padding-post;
+    padding-top: 0;
+  }
+}
+
+/*-- feature-image Responsive scrolling --*/
+.feature-image header {
+  @media screen and (max-width: $break) {
+    padding: $padding-small $padding-small;
+  }
+
+  @media screen and (min-width: $break) {
+    background-size: 120% auto;
+  }
+
+  @media screen and (max-width: $break) {
+    background-size: 200% auto;
+  }
+
+  @media screen and (max-width: $sm-break) {
+    background-size: 400% auto;
+  }
 }