type-on-strap 1.3.0 → 1.4.1

data/_layouts/post.html

@@ -1,14 +1,11 @@
 ---
 layout: default
 ---
-<article {% if page.feature-img %}class="feature-image"{% endif %}>
-  <header id="main" style="background-image: url('{{ page.feature-img | relative_url }}')">
+<article {% if page.feature-img or page.color %}class="feature-image"{% endif %}>
+  <header id="main" style="">
     {% unless page.hide_title %}
       <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
-      <p class="meta">
-      {{ page.date | date: "%B %-d, %Y" }}
-      {% if page.author %} - {{ page.author }}{% endif %}
-      </p>
+      {% include post_info.html post=page %}
     {% endunless %}
   </header>
   <section class="post-content">
@@ -20,14 +17,14 @@ layout: default
     </div>
   {% endif %}
   </section>
-  
+
   <!-- Social media shares -->
   {% include share_buttons.html %}
-   
+
    <!-- Tag list -->
   {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
   {% include tags_list.html tags=tag_list %}
-    
+
 </article>
 
 <!-- Disqus -->
@@ -41,3 +38,20 @@ layout: default
 {% if site.theme_settings.post_navigation %}
   {% include post_nav.html %}
 {% endif %}
+
+<!-- To change color of links in the page -->
+<style>
+  {% if page.color %}
+    .feature-image a { color: {{ page.color }} !important; }
+    div#post-nav a { color: {{ page.color }} !important; }
+    footer a { color: {{ page.color }} !important; }
+    .site-header nav a:hover {  color: {{ page.color }} !important; }
+    header#main { background-color: {{ page.color }} !important; }
+  {% endif %}
+
+  {% if page.feature-img %}{% assign image_url = page.feature-img %}{% elsif page.color %}{% assign image_url = site.theme_settings.color_image %}{% endif %}
+  header#main {
+    background-repeat:no-repeat;
+    background-image: url('{{ image_url | relative_url }}');
+  }
+</style>

data/_sass/base/_global.scss

@@ -1,36 +1,40 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 figure {
-    margin: 0;
+  margin: 0;
 }
 
 // For correct line number width in Github Gists
 .gist table tbody tr td {
-    box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+pre {
+  overflow-x: scroll;
 }
 
 html {
-    background: $background-color;
+  background: $background-color;
 }
 
 // Typography
 ::selection {
-    background: $selection-color;
+  background: $selection-color;
 }
 
 ::-moz-selection {
-    background: $selection-color;
+  background: $selection-color;
 }
 
 body {
-    color: $text-color;
-    font-family: $font-family-main;
-    font-size: $font-size;
-    word-wrap: break-word;
+  color: $text-color;
+  font-family: $font-family-main;
+  font-size: $font-size;
+  word-wrap: break-word;
 }
 
 h1,
@@ -39,114 +43,143 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: $font-family-headings;
-    line-height: 1.3;
-    margin: 0.67em 0;
-    a {
-        color: $text-color;
-    }
-    
-    
+  font-family: $font-family-headings;
+  line-height: 1.3;
+  margin: 0.67em 0;
+
+  a {
+    color: $text-color;
+  }
+
 }
 
 h1 {
-    font-size: 2.3em;
+  font-size: 2.3em;
 }
 
 h2 {
-    font-size: 1.75em;
+  font-size: 1.75em;
 }
 
 h3 {
-    font-size: 1.5em;
+  font-size: 1.5em;
 }
 
 h4 {
-    font-size: 1.15em;
+  font-size: 1.15em;
+}
+
+iframe,
+img,
+embed,
+object,
+video {
+  max-width: 100%;
+  padding: 0 9%;
+}
+
+img[align=left] {
+  margin-right: 3%;
+}
+
+img[align=right] {
+  margin-left: 3%;
 }
 
 /* ---- Responsive ---- */
 
 @media screen and (max-width: $break) {
-    h1 {
-        font-size: 2em;
-    }
-    h2 {
-        font-size: 1.5em;
-    }
-    h3 {
-        font-size: 1em;
-    }
-    h4,
-    .meta {
-        font-size: 0.9em;
-    }
-    p {
-        font-size: 0.8em;
-    }
+  h1 {
+    font-size: 2em;
+  }
+  h2 {
+    font-size: 1.5em;
+  }
+  h3 {
+    font-size: 1em;
+  }
+  h4,
+  .meta {
+    font-size: 0.9em;
+  }
+  p, li {
+    font-size: 0.8em;
+  }
+
+  iframe,
+  img,
+  embed,
+  object,
+  video {
+    max-width: 100%;
+    padding: 0 1%;
+  }
 }
 
 @media screen and (max-width: $sm-break) {
-    h1 {
-        font-size: 1.5em;
-    }
-    h2 {
-        font-size: 1em;
-    }
-    h3 {
-        font-size: 0.9em;
-    }
-    h4,
-    .meta {
-        font-size: 0.85em;
-    }
-    p {
-        font-size: 0.8em;
-    }
+  h1 {
+    font-size: 1.5em;
+  }
+  h2 {
+    font-size: 1em;
+  }
+  h3 {
+    font-size: 0.9em;
+  }
+  h4,
+  .meta {
+    font-size: 0.85em;
+  }
+  p, li {
+    font-size: 0.8em;
+  }
+
+  table {
+    overflow-x: scroll;
+  }
 }
 
 
 blockquote {
-    border-left: 2px solid darken($blockquote-color, 20%);
-    margin: 1em 1em;
-    padding: 0.75em 1em;
-    background-color: $blockquote-color;
-    box-shadow: 0 2px 2px $border-color;
+  border-left: 2px solid darken($blockquote-color, 20%);
+  margin: 1em 1em;
+  padding: 0.75em 1em;
+  background-color: $blockquote-color;
+  box-shadow: 0 2px 2px $border-color;
 }
 
 blockquote p:last-child,
 footer p:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 table {
-    table-layout: fixed;
-    width: 100%;
-    word-wrap: break-word;
-    overflow-x: scroll;
-    display: inline-block;
+  table-layout: fixed;
+  width: 100%;
+  word-wrap: break-word;
+  display: inline-block;
 }
 
 td,
 th {
-    padding: 0.5em 1em;
-    border: 1px solid $border-color;
-    text-align: left;
+  padding: 0.5em 1em;
+  border: 1px solid $border-color;
+  text-align: left;
 }
 
 table,
 dl,
 kbd,
 samp {
-    margin: 1em 0;
+  margin: 1em 0;
 }
 
 dt {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 dd {
-    margin-left: 2em;
+  margin-left: 2em;
 }
 
 p,
@@ -154,59 +187,43 @@ ol,
 ul,
 dl,
 .math-display {
-    line-height: 1.5;
-    margin-bottom: 1em;
+  line-height: 1.5;
+  margin-bottom: 1em;
 }
 
 // KaTeX math display
 .math-display {
-    display: inline-block;
-    width: 100%;
+  display: inline-block;
+  width: 100%;
 }
 
 // Lists within lists
 li {
-    p {
-        display: inline;
-    }
-    & > ul,
-    & > ol {
-        margin-bottom: 0;
-        margin-left: 1em;
-    }
+  p {
+    display: inline;
+  }
+
+  & > ul,
+  & > ol {
+    margin-bottom: 0;
+    margin-left: 1em;
+  }
 }
 
 ol,
 ul {
-    list-style-position: outside;
-    margin-left: 1em;
+  list-style-position: outside;
+  margin-left: 1em;
 }
 
 hr {
-    border: 0;
-    border-top: 1px solid $border-color;
-    border-bottom: 1px solid #fff;
-    margin: 1em 0;
+  border: 0;
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid #fff;
+  margin: 1em 0;
 }
 
 a {
-    color: $link-color;
-    text-decoration: none;
+  color: $link-color;
+  text-decoration: none;
 }
-
-iframe,
-img,
-embed,
-object,
-video {
-    max-width: 100%;
-    padding: 0 10%;
-}
-
-img[align=left] {
-    margin-right: 3%;
-}
-
-img[align=right] {
-    margin-left: 3%;
-}

data/_sass/base/_utility.scss

@@ -1,81 +1,96 @@
 // Mix-ins
-%padding-small {
-    padding: $padding-x-small $padding-x-small * 2;
-    @media (max-width: 1000px) {
-        padding: $padding-x-small $padding-x-small;
-    }
+%padding-nav {
+  padding: $padding-small $padding-x-large;
+  @media (max-width: $xl-break) {
+    padding: $padding-small ($padding-large * 2);
+  }
+  @media (max-width: $l-break) {
+    padding: $padding-small $padding-large;
+  }
+  @media (max-width: $m-break) {
+    padding: $padding-small $padding-medium;
+  }
+  @media (max-width: $sm-break) {
+    padding: $padding-small $padding-x-small;
+  }
 }
 
-%padding-regular {
-    padding: $padding-small $padding-x-large;
-    @media (max-width: 1000px) {
-        padding: $padding-small * 1.5 $padding-large / 1.6;
-    }
-    @media (max-width: 576px) {
-        padding: $padding-small;
-    }
+%padding-post {
+  padding: $padding-x-small $padding-x-large;
+  @media (max-width: $xl-break) {
+    padding: $padding-x-small ($padding-large * 2);
+  }
+  @media (max-width: $l-break) {
+    padding: $padding-x-small $padding-large;
+  }
+  @media (max-width: $m-break) {
+    padding: $padding-x-small $padding-medium;
+  }
+  @media (max-width: $sm-break) {
+    padding: $padding-x-small $padding-small;
+  }
 }
 
-%padding-medium {
-    padding: $padding-medium $padding-large;
-    @media (max-width: 1000px) {
-        padding: $padding-medium * 1.5 $padding-large / 1.6;
-    }
-    @media (max-width: 576px) {
-        padding: $padding-medium;
-    }
+%padding-header {
+  padding: $padding-medium $padding-large;
+  @media (min-width: $xl-break) {
+    padding: $padding-large $padding-large;
+  }
+  @media (max-width: $sm-break) {
+    padding: $padding-medium;
+  }
 }
 
 .header-txt-shadow {
-    text-shadow: 1px 1px 2px $text-shadow;
+  text-shadow: 1px 1px 2px $text-shadow;
 }
 
 // Buttons
 .button {
-    border-radius: 0.3em;
-    border: 1px solid;
-    display: inline-block;
-    margin: 1em 0;
-    padding: 0.5em 0.75em;
+  border-radius: 0.3em;
+  border: 1px solid;
+  display: inline-block;
+  margin: 1em 0;
+  padding: 0.5em 0.75em;
 }
 
 a.button {
-    @extend .button-link;
+  @extend .button-link;
 }
 
 .button-link {
-    &:hover {
-        background: $link-color;
-        border: 1px solid $link-color;
-        color: $background-color;
-        text-decoration: none;
-    }
+  &:hover {
+    background: $link-color;
+    border: 1px solid $link-color;
+    color: $background-color;
+    text-decoration: none;
+  }
 }
 
 .body-link {
-    &:hover {
-        text-decoration: underline;
-        color: darken($link-color, 15%);
-    }
+  &:hover {
+    text-decoration: underline;
+    color: darken($link-color, 15%);
+  }
 }
 
 .post-link {
-    &:hover {
-        text-decoration: none;
-        color: lighten($link-color, 10%);
-    }
+  &:hover {
+    text-decoration: none;
+    color: lighten($link-color, 10%);
+  }
 }
 
 // States
 .disabled {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
 // Custom
 .text-center {
-    text-align: center;
+  text-align: center;
 }
 
 .right {
-    float: right;
+  float: right;
 }