type-on-strap 0.1.1

data/_sass/external/_syntax.scss

@@ -0,0 +1,63 @@
+// pygments-css (https://github.com/richleland/pygments-css)
+
+.hll { background-color: #ffffcc }
+.c { color: #999988; font-style: italic } /* Comment */
+.err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.k { color: #000000; font-weight: bold } /* Keyword */
+.o { color: #000000; font-weight: bold } /* Operator */
+.cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.c1 { color: #999988; font-style: italic } /* Comment.Single */
+.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.ge { color: #000000; font-style: italic } /* Generic.Emph */
+.gr { color: #aa0000 } /* Generic.Error */
+.gh { color: #999999 } /* Generic.Heading */
+.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.go { color: #888888 } /* Generic.Output */
+.gp { color: #555555 } /* Generic.Prompt */
+.gs { font-weight: bold } /* Generic.Strong */
+.gu { color: #aaaaaa } /* Generic.Subheading */
+.gt { color: #aa0000 } /* Generic.Traceback */
+.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.m { color: #009999 } /* Literal.Number */
+.s { color: #d01040 } /* Literal.String */
+.na { color: #008080 } /* Name.Attribute */
+.nb { color: #0086B3 } /* Name.Builtin */
+.nc { color: #445588; font-weight: bold } /* Name.Class */
+.no { color: #008080 } /* Name.Constant */
+.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.ni { color: #800080 } /* Name.Entity */
+.ne { color: #990000; font-weight: bold } /* Name.Exception */
+.nf { color: #990000; font-weight: bold } /* Name.Function */
+.nl { color: #990000; font-weight: bold } /* Name.Label */
+.nn { color: #555555 } /* Name.Namespace */
+.nt { color: #000080 } /* Name.Tag */
+.nv { color: #008080 } /* Name.Variable */
+.ow { color: #000000; font-weight: bold } /* Operator.Word */
+.w { color: #bbbbbb } /* Text.Whitespace */
+.mf { color: #009999 } /* Literal.Number.Float */
+.mh { color: #009999 } /* Literal.Number.Hex */
+.mi { color: #009999 } /* Literal.Number.Integer */
+.mo { color: #009999 } /* Literal.Number.Oct */
+.sb { color: #d01040 } /* Literal.String.Backtick */
+.sc { color: #d01040 } /* Literal.String.Char */
+.sd { color: #d01040 } /* Literal.String.Doc */
+.s2 { color: #d01040 } /* Literal.String.Double */
+.se { color: #d01040 } /* Literal.String.Escape */
+.sh { color: #d01040 } /* Literal.String.Heredoc */
+.si { color: #d01040 } /* Literal.String.Interpol */
+.sx { color: #d01040 } /* Literal.String.Other */
+.sr { color: #009926 } /* Literal.String.Regex */
+.s1 { color: #d01040 } /* Literal.String.Single */
+.ss { color: #990073 } /* Literal.String.Symbol */
+.bp { color: #999999 } /* Name.Builtin.Pseudo */
+.vc { color: #008080 } /* Name.Variable.Class */
+.vg { color: #008080 } /* Name.Variable.Global */
+.vi { color: #008080 } /* Name.Variable.Instance */
+.il { color: #009999 } /* Literal.Number.Integer.Long */

data/_sass/includes/_footer.scss

@@ -0,0 +1,17 @@
+.site-footer {
+    @extend %padding-regular;
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+    color: lighten($text-color, 30%);
+    font-size: 0.9em;
+
+    .footer-icons {
+        ul {
+            list-style: none;
+            li {
+                display: inline;
+            }
+        }
+    }
+}

data/_sass/includes/_navbar.scss

@@ -0,0 +1,132 @@
+.site-header {
+    padding: $padding-x-small $padding-x-small * 2;
+    padding-top: $padding-x-small;
+    background: $brand-color;
+    display: inline-block;
+    float: left;
+    width: 100%;
+
+    a {
+        color: $header-link-color;
+    }
+
+    .avatar {
+        height: 3em;
+        width: 3em;
+        float: left;
+        margin-top: -13px;
+        border-radius: 0.2em;
+        margin-right: 0.5em;
+        padding: 10px 10px;
+
+    }
+
+    .site-title {
+        float: left;
+        font-weight: bold;
+        font-size: 1em;
+        line-height: 1.5;
+    }
+
+    nav {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            line-height: 1.5;
+            float: right;
+            text-align: right;
+        }
+        li {
+            display: inline;
+            float: left;
+            margin-right: 0.4em;
+        }
+        a {
+            &:hover {
+                color: $link-color;
+            }
+            &#pull {
+                i {
+                    margin-top: 13px;
+                    float: right;
+                }
+
+            }
+
+        }
+    }
+}
+
+
+// To clear things when we float the element inisde nav and ul 
+.clear {
+    *zoom: 1;
+
+    &:after {
+        clear: both;
+    }
+
+    &:before,
+    &:after {
+        content: " ";
+        display: table;
+    }
+}
+
+/* ---- Responsive ---- */
+
+@media (min-width: $break) {
+    a#pull {
+        display: none;
+    }
+}
+
+@media screen and (max-width: $break) {
+    .site-header {
+        img.avatar {
+            margin-top: -7px
+        }
+        .site-title {
+            margin-top: 7px;
+        }
+    }
+
+    nav {
+        height: auto;
+
+        ul {
+            width: 100%;
+            display: none;
+            height: auto;
+        }
+
+        li {
+            width: 100%;
+            float: left;
+            position: relative;
+        }
+
+        a {
+            text-align: left;
+            width: 100%;
+
+            &#pull {
+                display: block;
+                width: 100%;
+                position: relative;
+
+                &:after {
+                    content: "";
+                    display: inline-block;
+                    position: absolute;
+                    right: 15px;
+                    top: 10px;
+                }
+            }
+        }
+    }
+}

data/_sass/includes/_post_nav.scss

@@ -0,0 +1,21 @@
+#post-nav {
+    width: 100%;
+    border-bottom: 1px solid $border-color;
+    float: left;
+    text-align: center;
+    @extend %padding-small;
+    i {
+        vertical-align: middle;
+    }
+    a {
+        width: 100%;
+        display: inline-block;
+        padding: 0;
+    }
+    p {
+        @extend .meta;
+    }
+    .post-nav-post + .post-nav-post {
+        margin-top: 1em;
+    }
+}

data/_sass/layouts/_index.scss

@@ -0,0 +1,106 @@
+// Header text feature
+.call-out {
+    @extend %padding-regular;
+    object-fit: cover;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background-color: $header-desc-background-color;
+    font-size: 1.2em;
+    text-align: center;
+    color: $header-desc-text-color;
+    background-repeat: no-repeat;
+    
+    @media (min-width: $break) {
+        background-size: $feature-image-size;
+    }
+    
+    /* --- Responsive ---*/
+    @media screen and (max-width: 850px) {
+        background-size: auto 150%;
+    }
+    
+    //For white images
+    p, a, li, h1, h2, h3, h4, h5 {
+        @extend .header-txt-shadow;
+    }
+    
+}
+
+.call-out p:last-child {
+    margin-bottom: 0;
+}
+
+// Post listing
+.posts {
+    .post-teaser {
+        @extend %padding-regular;
+        width: 100%;
+        margin-bottom: 0;
+        display: inline-block;
+        background-size: $feature-image-size;
+        border-bottom: 1px solid $border-color;
+        p a {
+            @extend .body-link;
+        }
+        img {
+            padding: 0;
+            vertical-align: middle;          
+        }
+
+        .post-img {
+            vertical-align: middle;
+            border-radius: 25px;
+            overflow: hidden;
+            
+            @media (min-width: $break) {
+                height: 250px;
+            }
+            
+            //Smaller screen
+            @media screen and (max-width: $break) {
+                height: 150px;
+            }
+        }
+
+        .post-img img {
+            //max-width: 100%;
+            -moz-transform: scale(1);
+            -webkit-transform: scale(1);
+            transform: scale(1);
+
+            -moz-transition-timing-function: ease-out;
+            -webkit-transition-timing-function: ease-out;
+            transition-timing-function: ease-out;
+
+            -moz-transition: all 5s;
+            -webkit-transition: all 5s;
+            transition: all 5s;
+
+            &:hover {
+                -moz-transform: scale(1.3);
+                -webkit-transform: scale(1.3);
+                transform: scale(1.3);
+            }
+        }
+    }
+    .excerpt {
+        margin-top: 1em;
+    }
+}
+
+// Pagination
+.pagination .button {
+    margin: 0 1.5em;
+    i {
+        vertical-align: middle;
+    }
+}
+
+.pagination {
+    padding: $padding-small $padding-large 0 $padding-large;
+    text-align: center;
+    @media (max-width: 600px) {
+        padding: $padding-small;
+    }
+}

data/_sass/layouts/_page.scss

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

data/_sass/layouts/_portfolio.scss

@@ -0,0 +1,77 @@
+.portfolio * {
+    z-index: 2;
+    margin: 8% 5%;
+    img {
+        padding: 0 0;
+        margin: 0 0;
+    }
+
+    .portfolio-item {
+        right: 0;
+        margin: 0 0 15px;
+
+        @media(min-width: 767px) {
+            margin: 0 0 30px;
+        }
+
+        .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;
+                background: $link-shadow;
+                -webkit-transition: all ease .5s;
+                -moz-transition: all ease .5s;
+                transition: all ease .5s;
+                font: 0/0 a;
+                &::before {
+                    content: ' ';
+                    display: inline-block;
+                    vertical-align: middle;
+                    height: 100%;
+                }
+
+                &:hover {
+                    opacity: 1;
+                }
+                .caption-content {
+                    font-family: 'Lora', 'Times New Roman', serif;
+                    font-size: 15px;
+                    color: #fff;
+                    margin: auto;
+                    text-align: center;
+                    display: inline-block;
+                    vertical-align: middle;
+                    
+                    @media screen and (max-width: $sm-break) {
+                        font-size: 7px;
+                    }
+
+                    h3,
+                    h4 {
+                        margin: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* --- Responsive --- */
+
+@media screen and (max-width: $sm-break) {
+    .portfolio {
+        .caption-content {
+            font-size: 7px;
+        }
+    }
+}
+                        

data/_sass/layouts/_posts.scss

@@ -0,0 +1,114 @@
+article,
+.comments {
+    @extend %padding-regular;
+    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;
+    }
+}
+
+footer {
+    width: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 0.9em;
+    display: inline-block;
+    text-align: center;
+    .meta {
+        color: rgba($text-color, .5);
+        letter-spacing: 0.1em;
+        display: inline;
+        text-transform: uppercase;
+    }
+    a.button {
+        margin-left: 1em;
+    }
+}
+
+header {
+    h1 {
+        margin: 0;
+    }
+}
+
+.meta {
+    color: rgba($text-color, .5);
+    font-size: 0.9em;
+    letter-spacing: 0.1em;
+    margin: 0;
+    text-transform: uppercase;
+}
+
+/* --- Feature image --- */
+.feature-image {
+    padding: 0%;
+    .post-link {
+        color: $feature-image-text-color;
+    }
+    header {
+        color: $feature-image-text-color;
+        background-size: $feature-image-size;
+        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;
+    }
+}
+
+// Responsive scrolling
+.feature-image header {
+    @media screen and (max-width: $break) {
+        padding: $padding-small $padding-small;
+    }
+}
+
+/* --- Post navigation --- */
+#post-nav {
+    width: 100%;
+    border-bottom: 1px solid $border-color;
+    display: flex;
+    float: left;
+
+    a,
+    .page-title {
+        display: inline-block;
+    }
+
+    .page-title {
+        font-size: 1.2em;
+        margin-bottom: 1em;
+        width: 100%;
+    }
+
+    a {
+        padding: 2em 3em;
+        border: 1px solid rgba(255, 255, 255, 0);
+        text-align: center;
+        width: 50%;
+    }
+
+    i {
+        vertical-align: middle;
+    }
+}