jekyll-theme-drop 0.1.0

data/_sass/components/_poptrox.scss

@@ -0,0 +1,120 @@
+/* Poptrox */
+
+.poptrox-popup {
+    @include vendor('box-sizing', 'content-box');
+    background: #fff;
+    padding-bottom: 3em;
+
+    .loader {
+        width: 48px;
+        height: 48px;
+        background: url('images/loader.gif');
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -24px 0 0 -24px;
+    }
+
+    .caption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: #fff;
+        width: 100%;
+        height: 3em;
+        line-height: 3em;
+        text-align: center;
+        cursor: default;
+        z-index: 1;
+    }
+
+    .nav-next,
+    .nav-previous {
+        @include vendor('transition', 'opacity 0.5s ease-in-out');
+        position: absolute;
+        top: 0;
+        width: 50%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+        background: rgba(0, 0, 0, 0.01);
+        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+
+        &:before {
+            content: '';
+            position: absolute;
+            width: 96px;
+            height: 64px;
+            background: url('images/poptrox-nav.svg');
+            top: calc(50% - 1.5em);
+            margin: -32px 0 0 0;
+        }
+    }
+
+    &:hover {
+        .nav-next,
+        .nav-previous {
+            opacity: 0.5;
+
+            &:hover {
+                opacity: 1.0;
+            }
+        }
+    }
+
+    .nav-next {
+        right: 0;
+
+        &:before {
+            right: 0;
+        }
+    }
+
+    .nav-previous {
+        left: 0;
+
+        &:before {
+            @include vendor('transform', 'scaleX(-1)');
+            left: 0;
+            -ms-filter: "FlipH";
+            filter: FlipH;
+        }
+    }
+
+    .closer {
+        @include vendor('transition', 'opacity 0.5s ease-in-out');
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 64px;
+        height: 64px;
+        text-indent: -9999px;
+        z-index: 2;
+        opacity: 0;
+        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+
+        &:before {
+            @include vendor('transition', 'background-color 0.5s ease-in-out');
+            content: '';
+            display: block;
+            position: absolute;
+            right: 16px;
+            top: 16px;
+            width: 40px;
+            height: 40px;
+            border-radius: 100%;
+            box-shadow: inset 0 0 0 1px #fff;
+            background: rgba(255, 255, 255, 0.1) url('images/poptrox-closer.svg') center center;
+            color: #fff !important;
+        }
+    }
+
+    &:hover {
+        .closer {
+            opacity: 0.5;
+
+            &:hover {
+                opacity: 1.0;
+            }
+        }
+    }

data/_sass/components/_row.scss

@@ -0,0 +1,21 @@
+/* Row */
+
+.row {
+    @include html-grid((40px, 40px));
+
+    @include breakpoint('<=wide') {
+        @include html-grid((40px, 40px), 'wide');
+    }
+
+    @include breakpoint('<=normal') {
+        @include html-grid((40px, 40px), 'normal');
+    }
+
+    @include breakpoint('<=narrow') {
+        @include html-grid((30px, 30px), 'narrow');
+    }
+
+    @include breakpoint('<=mobile') {
+        @include html-grid((20px, 20px), 'mobile');
+    }
+}

data/_sass/components/_sections.scss

@@ -0,0 +1,18 @@
+/* Sections/Article */
+
+section, article {
+    margin-bottom: 3em;
+}
+
+section > :last-child,
+article > :last-child,
+section:last-child,
+article:last-child {
+    margin-bottom: 0;
+}
+
+.row > {
+    section, article {
+        margin-bottom: 0;
+    }
+}

data/_sass/components/_table.scss

@@ -0,0 +1,35 @@
+/* Table */
+
+.table-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+table {
+    width: 100%;
+
+    tbody {
+        tr {
+            border-top: solid 1px #eae9e9;
+
+            &:first-child {
+                border-top: 0;
+            }
+        }
+    }
+
+    td {
+        padding: 0.75em 1.25em 0.75em 1.25em;
+    }
+
+    th {
+        text-align: left;
+        font-weight: 400;
+        padding: 0.75em 1.25em 0.75em 1.25em;
+    }
+
+    thead {
+        background: #f5f5f5;
+    }
+}

data/_sass/layout/_banner.scss

@@ -0,0 +1,44 @@
+/* Banner */
+
+#banner {
+    position: relative;
+    color: #fff;
+    text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
+    text-align: center;
+    background: #35b88f url('images/banner.svg') bottom center no-repeat;
+    padding: 5em 0 5em 0;
+    margin: 0;
+    background-size: 125% auto;
+
+    .button {
+        color: #35b882;
+        text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25);
+    }
+
+    header {
+        margin: 0 0 2em 0;
+
+        h2 {
+            font-weight: 400;
+            font-size: 1.75em;
+            letter-spacing: 8px;
+        }
+    }
+
+    p {
+        margin: 0;
+    }
+
+    footer {
+        margin: 2em 0 0 0;
+    }
+
+    a {
+        color: inherit;
+        border-bottom-color: rgba(255, 255, 255, 0.5);
+
+        &:hover {
+            border-bottom-color: rgba(255, 255, 255, 0);
+        }
+    }
+}

data/_sass/layout/_breakpoints.scss

@@ -0,0 +1,358 @@
+/* Wide */
+
+@include breakpoint('<=wide') {
+
+    /* Basic */
+
+        body, input, textarea, select {
+            font-size: 16pt;
+        }
+
+    /* Header */
+
+        #header {
+            padding: 10em 0 12em 0;
+        }
+
+}
+
+/* Normal */
+
+@include breakpoint('<=normal') {
+
+    /* Banner */
+
+        #banner {
+            padding: 4em 0 4em 0;
+            background-size: auto, 175% auto;
+        }
+
+    /* Header */
+
+        #header {
+            padding: 8em 0 10em 0;
+        }
+
+}
+
+/* Narrow */
+
+@include breakpoint('<=narrow') {
+
+    /* Basic */
+
+        body {
+            background-color: #203936;
+            background-image: url('images/overlay.png'), url('../images/bg-alt.jpg');
+            background-repeat: repeat, no-repeat;
+            background-size: auto, 100% auto;
+            background-position: top left, top center;
+            background-attachment: scroll, scroll;
+            font-size: 14pt;
+        }
+
+        input, textarea, select {
+            font-size: 14pt;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            line-height: 1.5em;
+        }
+
+        header {
+            p {
+                margin: 0.25em 0 0 0;
+                padding: 0 0 0.5em 0;
+            }
+        }
+
+    /* Box */
+        .box {
+            position: relative;
+
+            section {
+                margin: 0 0 2em 0;
+            }
+
+            &.style1 {
+                padding: 2.5em 2em 2.5em 2em;
+
+                &.right {
+                    .inner {
+                        padding-left: 2em;
+                    }
+                }
+
+                &.left {
+                    .inner {
+                        padding-right: 2em;
+                    }
+                }
+            }
+
+            &.style2 {
+
+                header {
+                    padding: 2em;
+                }
+
+                .inner {
+                    position: relative;
+                    padding: 30px 0 0 0;
+                }
+            }
+
+            &.style3 {
+                padding: 2.5em 2em 2.5em 2em;
+            }
+        }
+
+    /* Header */
+
+        #header {
+            padding: 10em 0 12em 0;
+        }
+
+    /* Banner */
+
+        #banner {
+            padding: 3.5em;
+            background-size: 200% auto;
+
+            br {
+                display: none;
+            }
+        }
+
+}
+
+/* Mobile */
+
+@include breakpoint('<=mobile') {
+
+    /* Basic */
+
+        * {
+            text-shadow: none !important;
+        }
+
+        body, input, textarea, select {
+            line-height: 1.5em;
+            font-size: 12pt;
+            letter-spacing: 0;
+        }
+
+        h2, h3, h4, h5, h6 {
+            font-size: 1em;
+        }
+
+        h2 {
+            font-size: 1.25em;
+            letter-spacing: 4px;
+        }
+
+    /* List */
+
+        ul {
+            li {
+                padding-left: 0.5em;
+            }
+        }
+
+        ol {
+            li {
+                padding-left: 0.25em;
+            }
+        }
+
+    /* Icons */
+
+        ul.icons {
+            a {
+                width: 2em;
+                height: 2em;
+                line-height: 2em;
+            }
+        }
+
+    /* Menu */
+
+        ul.menu {
+            li {
+                display: block;
+                padding: 0;
+                border: 0;
+                margin: 1em 0 0 0;
+
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+        }
+
+    /* Actions */
+
+        ul.actions {
+            li {
+                display: block;
+                margin: 1em 0 0 0;
+
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+        }
+
+    /* Button */
+
+        input[type="button"],
+        input[type="submit"],
+        input[type="reset"],
+        button,
+        .button {
+            padding: 0.75em 0 0.75em 0;
+            width: 100%;
+            max-width: 320px;
+        }
+
+    /* Box */
+
+        .box {
+            margin-top: 4.5em;
+
+            &:after {
+                top: -4.5em;
+                height: 4.5em;
+            }
+
+            &:before {
+                width: 45px;
+                height: 33px;
+                top: -2.25em;
+                margin-left: -22.5px;
+                margin-top: -16.5px;
+                background-size: 45px 33px;
+            }
+
+            &.style1 {
+                padding: 0;
+                text-align: center;
+
+                .image {
+                    position: relative !important;
+                    left: 0 !important;
+                    width: 100% !important;
+                    height: auto !important;
+
+                    img {
+                        position: relative;
+                        height: auto;
+                        width: 100%;
+                    }
+                }
+
+                .inner {
+                    margin: 0 !important;
+                    padding: 2em 1.25em 2em 1.25em !important;
+                }
+            }
+
+            &.style2 {
+                .inner {
+                    .row:before {
+                        display: none;
+                    }
+
+                    .image {
+                        padding: 0;
+                        max-width: 250px;
+                        margin: 0 auto 20px auto;
+                    }
+                }
+            }
+
+            &.style3 {
+                padding: 2em 1.25em 2em 1.25em;
+            }
+        }
+
+    /* Header */
+        #header {
+            padding: 6em 0 6em 0;
+
+            header {
+                padding-left: 2em;
+                padding-right: 2em;
+
+                h1 {
+                    font-size: 1.75em;
+                    letter-spacing: 6px;
+                }
+            }
+
+            footer {
+                bottom: 4.5em;
+                padding: 0 2em 0 2em;
+
+                &:after {
+                    bottom: -4.5em;
+                    left: 50%;
+                    height: 4.5em;
+                }
+
+                &:before {
+                    width: 45px;
+                    height: 33px;
+                    bottom: -2.25em;
+                    margin-left: -22.5px;
+                    margin-bottom: -16.5px;
+                    background-size: 45px 33px;
+                }
+            }
+        }
+
+    /* Banner */
+        #banner {
+            padding: 3em 2em 3em 2em;
+            background-size: auto 150%;
+
+            header {
+                margin: 0 0 1em 0;
+
+                h2 {
+                    font-size: 1.5em;
+                    letter-spacing: 6px;
+                }
+            }
+        }
+
+    /* Footer */
+
+        #footer {
+            .icons {
+                padding: 0.5em 1.25em 0.5em 1.25em;
+            }
+
+            .copyright {
+                font-size: 1em;
+                margin: 0 0 4em 0;
+            }
+        }
+
+    /* Poptrox */
+        .poptrox-popup {
+            .nav-next,
+            .nav-previous {
+                opacity: 1.0;
+
+                &:before {
+                    display: none;
+                }
+            }
+
+            .closer {
+                opacity: 0.5;
+            }
+        }
+
+}

data/_sass/layout/_footer.scss

@@ -0,0 +1,44 @@
+/* Footer */
+
+#footer {
+    position: relative;
+    color: #fff;
+    text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
+    text-align: center;
+    margin: 4.5em 0 0 0;
+
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -4.5em;
+        left: 50%;
+        height: 4.5em;
+        border-left: solid 1px #fff;
+    }
+
+    a {
+        color: #fff;
+        text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
+        border-bottom-color: rgba(255, 255, 255, 0.5);
+
+        &:hover {
+            color: #35b88f;
+            text-shadow: 0 0 0.5px rgba(69, 200, 159, 0.25);
+            border-bottom-color: rgba(53, 184, 143, 0.5);
+        }
+    }
+
+    .icons {
+        padding: 0.75em 2em 0.75em 2em;
+        border-radius: 3em;
+        border: solid 1px #fff;
+        display: inline-block;
+        margin: 0 0 3em 0;
+    }
+
+    .copyright {
+        margin: 0 0 9em 0;
+        font-size: 0.8em;
+    }
+}

data/_sass/layout/_header.scss

@@ -0,0 +1,85 @@
+/* Header */
+
+#header {
+    @include vendor('transition', 'opacity 2s ease-in-out');
+    position: relative;
+    color: #fff;
+    text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
+    text-align: center;
+    margin: 0;
+    padding: 14em 0 14em 0;
+    cursor: default;
+
+    header {
+        display: inline-block;
+        padding: 0 0 4.5em 0;
+
+        h1 {
+            font-weight: 600;
+            font-size: 2em;
+            letter-spacing: 10px;
+        }
+
+        p {
+            border-top: solid 1px rgba(255, 255, 255, 0.5);
+            color: rgba(255, 255, 255, 0.75);
+            text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875);
+            font-size: 1em;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+            padding: 0;
+            margin-top: 0.35em;
+
+            &:before {
+                content: '';
+                display: block;
+                border-top: solid 1px rgba(255, 255, 255, 0.5);
+                margin: 4px 0 0.8em 0;
+            }
+        }
+    }
+
+    footer {
+        @include vendor('transition', (
+            'opacity 2s ease-in-out',
+            'transform 1s ease-in-out'
+        ));
+        @include vendor('transition-delay', '1.25s');
+        position: absolute;
+        bottom: 9em;
+        margin: 0;
+        width: 100%;
+
+        &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            bottom: -9em;
+            left: 50%;
+            height: 9em;
+            border-left: solid 1px #fff;
+        }
+
+        &:before {
+            content: '';
+            display: block;
+            width: 90px;
+            height: 66px;
+            position: absolute;
+            left: 50%;
+            bottom: -4.5em;
+            margin-left: -45px;
+            margin-bottom: -33px;
+            background: url('images/arrow.svg') no-repeat;
+        }
+    }
+
+    body.is-preload & {
+        opacity: 0;
+
+        footer {
+            @include vendor('transform', 'translateY(1em)');
+            opacity: 0;
+        }
+    }
+}