jekyll-theme-drop 0.1.0

data/_sass/base/_reset.scss

@@ -0,0 +1,70 @@
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
+
+html, body, div, span, applet, object,
+iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
+pre, a, abbr, acronym, address, big, cite,
+code, del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var, b,
+u, i, center, dl, dt, dd, ol, ul, li, fieldset,
+form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td, article, aside,
+canvas, details, embed, figure, figcaption,
+footer, header, hgroup, menu, nav, output, ruby,
+section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol, ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes: none;
+
+    &:before,
+    &:after {
+        content: '';
+        content: none;
+    }
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+body {
+    -webkit-text-size-adjust: none;
+}
+
+mark {
+    background-color: transparent;
+    color: inherit;
+}
+
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+input, select, textarea {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+}

data/_sass/base/_typography.scss

@@ -0,0 +1,140 @@
+/* Basic */
+
+    // Set box model to border-box.
+    // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+        html {
+            box-sizing: border-box;
+        }
+
+        *, *:before, *:after {
+            box-sizing: inherit;
+        }
+
+    body {
+        background-color: #183026;
+        background-image: url('images/overlay.png'), url('../images/bg.jpg');
+        background-repeat: repeat, no-repeat;
+        background-size: auto, cover;
+        background-position: top left, center 0;
+        background-attachment: fixed, fixed;
+        font-family: 'Source Sans Pro', sans-serif;
+        font-size: 18pt;
+        line-height: 1.75em;
+        font-weight: 300;
+        letter-spacing: 1px;
+        color: #3a3939;
+        text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
+        -webkit-text-stroke: 0.25px;
+
+        &.is-scroll {
+            background-attachment: scroll, scroll;
+            background-size: auto, 100% auto;
+        }
+
+        // Stops initial animations until page loads.
+            &.is-preload {
+                *, *:before, *:after {
+                    @include vendor('animation', 'none !important');
+                    @include vendor('transition', 'none !important');
+                }
+            }
+
+    }
+
+    input, textarea, select {
+        font-family: 'Source Sans Pro', sans-serif;
+        font-size: 18pt;
+        line-height: 1.75em;
+        font-weight: 300;
+        letter-spacing: 1px;
+        color: #3a3939;
+        text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
+        -webkit-text-stroke: 0.25px;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: 400;
+        text-transform: uppercase;
+        line-height: 1.75em;
+    }
+
+    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    h2 {
+        font-size: 1.25em;
+        letter-spacing: 8px;
+    }
+
+    h3 {
+        font-size: 1em;
+        letter-spacing: 5px;
+    }
+
+    strong, b {
+        font-weight: 400;
+    }
+
+    em, i {
+        font-style: italic;
+    }
+
+    a {
+        @include vendor('transition', ('border-color 0.35s ease-in-out', 'color 0.35s ease-in-out'));
+        color: #35b88f;
+        text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25);
+        text-decoration: none;
+        border-bottom: dotted 1px rgba(53, 184, 143, 0.5);
+
+        &:hover {
+            border-bottom-color: rgba(53, 184, 143, 0);
+        }
+    }
+
+    sub {
+        position: relative;
+        top: 0.5em;
+        font-size: 0.8em;
+    }
+
+    sup {
+        position: relative;
+        top: -0.5em;
+        font-size: 0.8em;
+    }
+
+    hr {
+        border: 0;
+        border-top: solid 1px #dad9d9;
+        margin: 2em 0 2em 0;
+    }
+
+    blockquote {
+        border-left: solid 0.5em #eae9e9;
+        padding: 1em 0 1em 2em;
+        font-style: italic;
+    }
+
+    p, ul, ol, dl, table {
+        margin-bottom: 1em;
+    }
+
+    header {
+        margin-bottom: 1em;
+
+        p {
+            display: block;
+            margin: 0.5em 0 0 0;
+            padding: 0 0 1.5em 0;
+        }
+    }
+
+    footer {
+        margin-top: 1em;
+    }
+
+    br.clear {
+        clear: both;
+    }

data/_sass/components/_actions.scss

@@ -0,0 +1,18 @@
+/* Actions */
+
+ul.actions {
+    cursor: default;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        display: inline-block;
+        margin: 0 0 0 0.5em;
+        padding-left: 0;
+        margin-top: 0;
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+}

data/_sass/components/_box.scss

@@ -0,0 +1,151 @@
+/* Box */
+
+.box {
+    position: relative;
+    margin-top: 9em;
+    margin-bottom: 0;
+
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -9em;
+        left: 50%;
+        height: 9em;
+        border-left: solid 1px #fff;
+    }
+
+    &:before {
+        content: '';
+        display: block;
+        width: 90px;
+        height: 66px;
+        position: absolute;
+        left: 50%;
+        top: -4.5em;
+        margin-left: -45px;
+        margin-top: -33px;
+        background: url('images/arrow.svg') no-repeat;
+    }
+
+    :last-child {
+        margin-bottom: 0;
+    }
+
+    &.style1 {
+        background: #fff;
+        padding: 3em;
+
+        .image {
+            display: block;
+            position: absolute;
+            top: 0;
+            width: 50%;
+            height: 100%;
+            background: #152E33;
+            overflow: hidden;
+
+            img {
+                position: absolute;
+                top: 0;
+                height: 100%;
+                width: auto;
+            }
+        }
+
+        .inner {
+            > :last-child {
+                margin: 0;
+            }
+        }
+
+        &.right {
+            .image {
+                left: 0;
+
+                img {
+                    right: 0;
+                }
+            }
+
+            .inner {
+                margin-left: 50%;
+                padding-left: 3em;
+            }
+        }
+
+        &.left {
+            .image {
+                right: 0;
+
+                img {
+                    left: 0;
+                }
+            }
+
+            .inner {
+                margin-right: 50%;
+                padding-right: 3em;
+            }
+        }
+    }
+
+    &.style2 {
+        text-align: center;
+
+        header {
+            display: inline-block;
+            background: #fff;
+            padding: 2em 3em 2em 3em;
+            margin: 0;
+
+            p {
+                padding: 0;
+            }
+        }
+
+        .inner {
+            position: relative;
+            padding: 40px 0 0px 0;
+
+            &:after {
+                content: '';
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 50%;
+                height: 100%;
+                border-left: solid 1px #fff;
+            }
+
+            .row {
+                position: relative;
+
+                &:before {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    top: 50%;
+                    left: 20px;
+                    width: calc(100% - 40px);
+                    border-bottom: solid 1px #fff;
+                }
+            }
+
+            .image {
+                position: relative;
+                z-index: 1;
+                padding: 20px;
+            }
+        }
+    }
+
+    &.style3 {
+        background: #fff;
+        padding: 3em;
+
+        header {
+            text-align: center;
+        }
+    }
+}

data/_sass/components/_button.scss

@@ -0,0 +1,49 @@
+/* Button */
+
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+button,
+.button {
+    @include vendor('transition', ('background-color 0.35s ease-in-out', 'color 0.35s ease-in-out'));
+    -webkit-appearance: none;
+    position: relative;
+    display: inline-block;
+    border: 0;
+    background: #35b88f;
+    color: #fff;
+    text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
+    cursor: pointer;
+    text-decoration: none;
+    outline: 0;
+    padding: 1em 3em 1em 3em;
+    text-align: center;
+    border-radius: 3em;
+    font-weight: 400;
+
+    &:hover {
+        background: #45c89f;
+    }
+
+    &.style2 {
+        color: #3a3939;
+        background: #fff;
+        box-shadow: inset 0 0 0 1px #fff;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: #fff !important;
+            text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25) !important;
+        }
+    }
+
+    &.style3 {
+        background: none;
+        color: #3a3939;
+        box-shadow: inset 0 0 0 1px #dad9d9;
+
+        &:hover {
+            background: rgba(58, 57, 57, 0.025);
+        }
+    }
+}

data/_sass/components/_container.scss

@@ -0,0 +1,15 @@
+/* Container */
+
+.container {
+    margin: 0 auto;
+    max-width: 100%;
+    width: 1140px;
+
+    @include breakpoint('<=wide') {
+        width: 960px;
+    }
+
+    @include breakpoint('<=normal') {
+        width: 95%;
+    }
+}

data/_sass/components/_form.scss

@@ -0,0 +1,88 @@
+/* Form */
+
+form {
+    label {
+        display: block;
+        margin: 0 0 0.5em 0;
+    }
+
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    select,
+    textarea {
+        @include vendor('transition', 'background-color 0.35s ease-in-out');
+        -webkit-appearance: none;
+        display: block;
+        border: 0;
+        background: #f1f1f1;
+        width: 100%;
+        padding: 0.75em;
+
+        &:focus {
+            background-color: #f8f8f8;
+        }
+    }
+
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    select {
+        line-height: 1em;
+    }
+
+    select {
+        background-size: 1.25em;
+        background-repeat: no-repeat;
+        background-position: calc(100% - 1em) center;
+        padding-right: 1.25em;
+        text-overflow: ellipsis;
+        background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#5a5959' /></svg>");
+
+        option {
+            color: #3a3939;
+            background: #ffffff;
+        }
+
+        &:focus {
+            &::-ms-value {
+                background-color: transparent;
+            }
+        }
+
+        &::-ms-expand {
+            display: none;
+        }
+    }
+
+    textarea {
+        min-height: 12em;
+    }
+
+    ::-webkit-input-placeholder {
+        color: #5a5959 !important;
+    }
+
+    :-moz-placeholder {
+        color: #5a5959 !important;
+    }
+
+    ::-moz-placeholder {
+        color: #5a5959 !important;
+    }
+
+    :-ms-input-placeholder {
+        color: #5a5959 !important;
+    }
+
+    ::-moz-focus-inner {
+        border: 0;
+    }
+
+    ul {
+        &.actions {
+            margin-bottom: 0;
+            text-align: center;
+        }
+    }
+}

data/_sass/components/_icons.scss

@@ -0,0 +1,44 @@
+/* Icons */
+
+ul.icons {
+    cursor: default;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        display: inline-block;
+        padding-left: 0;
+        margin-top: 0;
+    }
+
+    a {
+        display: inline-block;
+        width: 2.5em;
+        height: 2.5em;
+        line-height: 2.5em;
+        text-align: center;
+        border: 0;
+    }
+}
+
+/* Icons */
+
+.icon {
+    text-decoration: none;
+
+    &:before {
+        display: inline-block;
+        font-family: FontAwesome;
+        font-size: 1.25em;
+        text-decoration: none;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    > .label {
+        display: none;
+    }
+}

data/_sass/components/_image.scss

@@ -0,0 +1,37 @@
+/* Image */
+
+.image {
+    display: inline-block;
+    border: 0;
+
+    img {
+        display: block;
+        width: 100%;
+    }
+
+    &.featured {
+        display: block;
+        width: 100%;
+        margin: 0 0 2em 0;
+    }
+
+    &.fit {
+        display: block;
+        width: 100%;
+    }
+
+    &.left {
+        float: left;
+        margin: 0 2em 2em 0;
+    }
+
+    &.centered {
+        display: block;
+        margin: 0 0 2em 0;
+
+        img {
+            margin: 0 auto;
+            width: auto;
+        }
+    }
+}

data/_sass/components/_list.scss

@@ -0,0 +1,25 @@
+/* List */
+
+ul {
+    list-style: disc;
+    padding-left: 1em;
+
+    li {
+        padding-left: 1.5em;
+        margin-top: 1.5em;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+}
+
+ol {
+    list-style: decimal;
+    padding-left: 1.25em;
+
+    li {
+        padding-left: 1.25em;
+        margin-top: 1.5em;
+    }
+}

data/_sass/components/_menu.scss

@@ -0,0 +1,21 @@
+/* Menu */
+
+ul.menu {
+    cursor: default;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        display: inline-block;
+        line-height: 1em;
+        border-left: solid 1px #dad9d9;
+        padding: 0 0 0 0.5em;
+        margin: 0 0 0 0.5em;
+
+        &:first-child {
+            border-left: 0;
+            padding-left: 0;
+            margin-left: 0;
+        }
+    }
+}