jekyll-theme-twenty 0.1.0

data/_sass/components/_row.scss

@@ -0,0 +1,25 @@
+/* Row */
+
+.row {
+    @include html-grid((50px, 50px));
+
+    @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('<=narrower') {
+        @include html-grid((30px, 30px), 'narrower');
+    }
+
+    @include breakpoint('<=mobile') {
+        @include html-grid((30px, 30px), 'mobile');
+    }
+}

data/_sass/components/_section.scss

@@ -0,0 +1,74 @@
+/* Section/Article */
+
+section, article {
+    &.special {
+        text-align: center;
+    }
+}
+
+header {
+    &.major {
+        padding-bottom: 2em;
+    }
+
+    &.special {
+        margin-bottom: 5em;
+        padding-top: 7em;
+        position: relative;
+        text-align: center;
+
+        &:before,
+        &:after {
+            border-bottom: solid 1.5px;
+            border-top: solid 1.5px;
+            content: '';
+            height: 7px;
+            opacity: 0.1;
+            position: absolute;
+            top: 1.75em;
+            width: 43%;
+        }
+
+        &:before {
+            left: 0;
+        }
+
+        &:after {
+            right: 0;
+        }
+
+        h2 {
+            margin-bottom: 0;
+        }
+
+        h2 + p {
+            margin-bottom: 0;
+            padding-top: 1.5em;
+        }
+
+        .icon {
+            cursor: default;
+            height: 7em;
+            left: 0;
+            position: absolute;
+            text-align: center;
+            top: 1em;
+            width: 100%;
+
+            &:before {
+                font-size: 3.5em;
+                opacity: 0.35;
+            }
+        }
+    }
+}
+
+footer {
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    &.major {
+        padding-top: 3em;
+    }
+}

data/_sass/components/_table.scss

@@ -0,0 +1,36 @@
+/* Table */
+
+table {
+    width: 100%;
+
+    &.default {
+        width: 100%;
+
+        tbody {
+            tr {
+                border-bottom: solid 1px _palette(border);
+            }
+        }
+
+        td {
+            padding: 0.5em 1em 0.5em 1em;
+        }
+
+        th {
+            font-weight: 400;
+            padding: 0.5em 1em 0.5em 1em;
+            text-align: left;
+        }
+
+        thead {
+            background: _palette(fg);
+            color: #fff;
+        }
+
+        tfoot {
+        }
+
+        tbody {
+        }
+    }
+}

data/_sass/layout/_banner.scss

@@ -0,0 +1,66 @@
+/* Banner */
+
+@include keyframes('reveal-banner') {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+#banner {
+    background-attachment: scroll, scroll, scroll, fixed;
+    background-color: _palette(three, bg);
+    background-image: url('images/light-bl.svg'), url('images/light-br.svg'), url('images/overlay.png'), url('../images/banner.jpg');
+    background-position: bottom left, bottom right, top left, top center;
+    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
+    background-size: $pattern-background-size, $pattern-background-size, auto, cover;
+    color: _palette(banner, fg);
+    cursor: default;
+    padding: 6em 0;
+    text-align: center;
+
+    .inner {
+        @include vendor('animation', 'reveal-banner 1s 0.25s ease-in-out');
+        @include vendor('animation-fill-mode', 'forwards');
+        background: transparentize(_palette(banner, inner-bg), 0.5);
+        color: _palette(banner, inner-fg);
+        display: inline-block;
+        opacity: 0;
+        padding: 3em;
+        text-align: center;
+
+        header {
+            display: inline-block;
+            border-bottom: solid 2px;
+            border-top: solid 2px;
+            margin: 0 0 2em 0;
+            padding: 3px 0 3px 0;
+
+            h2 {
+                border-bottom: solid 2px;
+                border-top: solid 2px;
+                font-size: 2.5em;
+                font-weight: 900;
+                letter-spacing: 0.2em;
+                margin: 0;
+                padding-left: 0.05em;
+                position: relative;
+                text-transform: uppercase;
+            }
+        }
+
+        p {
+            letter-spacing: 0.1em;
+            margin: 0;
+            text-transform: uppercase;
+
+            a {
+                color: inherit;
+                font-weight: 400;
+                text-decoration: none;
+            }
+        }
+
+        footer {
+            margin: 2em 0 0 0;
+        }
+    }
+}

data/_sass/layout/_breakpoints.scss

@@ -0,0 +1,660 @@
+/* Wide */
+
+@include breakpoint('<=wide') {
+
+    /* Basic */
+
+        body, input, select, textarea {
+            font-size: 14pt;
+        }
+
+    /* Section/Article */
+
+        header {
+            &.special {
+                padding-top: 5.5em;
+                margin-bottom: 4em;
+            }
+        }
+
+}
+
+/* Normal */
+
+@include breakpoint('<=normal') {
+
+    /* Basic */
+
+        body, input, select, textarea {
+            font-size: 13pt;
+            letter-spacing: 0.025em;
+            line-height: 1.65em;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            line-height: 1.5em;
+        }
+
+    /* Section/Article */
+
+        header {
+            &.major {
+                padding-bottom: 1.5em;
+            }
+        }
+
+        footer {
+            &.major {
+                padding-top: 2em;
+            }
+        }
+
+    /* Wrapper */
+
+        .wrapper {
+            margin-bottom: 4em;
+            padding: 4em 3em;
+
+            &.style4 {
+                padding: 3em;
+            }
+        }
+
+    /* Header */
+
+        #header {
+            nav {
+                ul {
+                    li {
+                        margin-left: 1em;
+                    }
+                }
+            }
+        }
+
+    /* Banner */
+
+        #banner {
+            background-attachment: scroll;
+        }
+
+    /* CTA */
+
+        #cta {
+            padding: 4em;
+            background-attachment: scroll;
+        }
+
+    /* Footer */
+
+        #footer {
+            padding: 4em;
+        }
+
+}
+
+/* Narrow */
+
+@include breakpoint('<=narrow') {
+
+    $pattern-background-size: 15em;
+
+    /* Basic */
+
+        body, input, select, textarea {
+            font-size: 13pt;
+            letter-spacing: 0.025em;
+            line-height: 1.5em;
+        }
+
+    /* Section/Article */
+
+        header {
+            br {
+                display: none;
+            }
+
+            &.major {
+                padding-bottom: 1em;
+            }
+
+            &.special {
+                padding-left: 2.5em;
+                padding-right: 2.5em;
+            }
+        }
+
+        footer {
+            &.major {
+                padding-top: 1.5em;
+            }
+        }
+
+    /* Wrapper */
+
+        .wrapper {
+            margin-bottom: 3em;
+            padding: 3em 2.5em;
+
+            &.special {
+                br {
+                    display: none;
+                }
+            }
+
+            &.style1 {
+                padding: 0 2.5em;
+            }
+
+            &.style2 {
+                background-size: $pattern-background-size;
+            }
+
+            &.style4 {
+                padding: 2.5em;
+            }
+        }
+
+    /* Banner */
+
+        #banner {
+            background-size: $pattern-background-size, $pattern-background-size, auto, cover;
+        }
+
+    /* Main */
+
+        #main {
+            background-size: $pattern-background-size;
+        }
+
+    /* CTA */
+
+        #cta {
+            background-size: $pattern-background-size, $pattern-background-size, auto, cover;
+            padding: 3em;
+        }
+
+}
+
+/* Narrower */
+
+#navPanel, #navButton {
+    display: none;
+}
+
+@include breakpoint('<=narrower') {
+
+    /* Basic */
+
+        html, body {
+            overflow-x: hidden;
+        }
+
+        header {
+            &.major {
+                padding-bottom: 0.25em;
+            }
+
+            &.special {
+                margin-bottom: 4em;
+                padding-top: 5em;
+
+                &:before,
+                &:after {
+                    width: 40%;
+                }
+
+                h2 + p {
+                    padding-top: 1.25em;
+                }
+            }
+        }
+
+    /* Section/Article */
+
+        section {
+            margin: 1em 0 1em 0;
+
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+
+    /* Button */
+
+        input[type="button"],
+        input[type="submit"],
+        input[type="reset"],
+        button,
+        .button {
+            &.small {
+                font-size: 0.8em;
+                min-width: 18em;
+                padding: 0.75em 0;
+            }
+        }
+
+    /* Featured Icons */
+
+        ul.featured-icons {
+            margin: 0;
+
+            li {
+                display: inline-block;
+                float: none;
+                width: auto;
+
+                .icon {
+                    font-size: 4em;
+                    width: 1.25em;
+                }
+            }
+        }
+
+    /* Buttons */
+
+        ul.buttons {
+            li {
+                display: block;
+                padding: 1em 0 0 0;
+            }
+        }
+
+    /* Header */
+
+        #header {
+            display: none;
+        }
+
+    /* Banner */
+
+        #banner {
+            margin: 0;
+        }
+
+    /* Wrapper */
+
+        .wrapper {
+            &.special-alt {
+                text-align: center;
+            }
+
+            &.style4 {
+                padding-bottom: 3em;
+            }
+        }
+
+    /* Main */
+
+        #main {
+            padding: 5em 0;
+
+            .sidebar {
+                border-top: solid 1px transparentize(_palette(fg), 0.9);
+                padding-top: 3em;
+
+                section {
+                    border-top: 0;
+                    padding-top: 0;
+                }
+            }
+        }
+
+        body.index #main {
+            padding-top: 4.5em;
+        }
+
+    /* CTA */
+
+        #cta {
+            margin: 0;
+        }
+
+    /* Footer */
+
+        #footer {
+            padding: 4em 1.5em;
+        }
+
+    /* Nav */
+
+        #page-wrapper {
+            @include vendor('backface-visibility', 'hidden');
+            @include vendor('transition', 'transform #{_duration(navPanel)} ease');
+            padding-bottom: 1px;
+        }
+
+        #navButton {
+            @include vendor('backface-visibility', 'hidden');
+            @include vendor('transition', 'transform #{_duration(navPanel)} ease');
+            display: block;
+            height: 60px;
+            left: 0;
+            position: fixed;
+            top: 0;
+            width: 100%;
+            z-index: _misc(z-index-base) + 1;
+
+            .toggle {
+                @include icon;
+                height: 60px;
+                left: 0;
+                position: absolute;
+                text-align: center;
+                top: 0;
+                width: 100%;
+                border: 0;
+                outline: 0;
+
+                &:before {
+                    color: _palette(navButton, fg);
+                    content: '\f0c9';
+                    font-size: 1em;
+                    height: 40px;
+                    left: 10px;
+                    line-height: 40px;
+                    opacity: 0.5;
+                    position: absolute;
+                    top: 11px;
+                    width: 60px;
+                    z-index: 1;
+                }
+
+                &:after {
+                    background: _palette(navButton, bg);
+                    border-radius: 2px;
+                    content: '';
+                    height: 40px;
+                    left: 10px;
+                    position: absolute;
+                    top: 10px;
+                    width: 60px;
+                }
+            }
+        }
+
+        #navPanel {
+            @include vendor('backface-visibility', 'hidden');
+            @include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
+            @include vendor('transition', ('transform #{_duration(navPanel)} ease'));
+            display: block;
+            height: 100%;
+            left: 0;
+            overflow-y: auto;
+            position: fixed;
+            top: 0;
+            width: _size(navPanel);
+            z-index: _misc(z-index-base) + 2;
+            background: _palette(navPanel, bg);
+            color: _palette(navPanel, fg);
+            font-size: 0.8em;
+            letter-spacing: 0.075em;
+            text-transform: uppercase;
+            padding: 0.25em 0.75em 1em 0.75em;
+
+            .link {
+                border: 0;
+                border-top: solid 1px transparentize(_palette(navPanel, fg), 0.95);
+                color: inherit;
+                display: block;
+                height: 3em;
+                line-height: 3em;
+                opacity: 0.75;
+                text-decoration: none;
+
+                &.depth-0 {
+                    font-weight: 900;
+                }
+
+                &:first-child {
+                    border-top: 0;
+                }
+            }
+
+            .indent-1 { display: inline-block; width: 1em; }
+            .indent-2 { display: inline-block; width: 2em; }
+            .indent-3 { display: inline-block; width: 3em; }
+            .indent-4 { display: inline-block; width: 4em; }
+            .indent-5 { display: inline-block; width: 5em; }
+        }
+
+        body {
+            &.navPanel-visible {
+                #page-wrapper {
+                    @include vendor('transform', 'translateX(#{_size(navPanel)})');
+                }
+
+                #navButton {
+                    @include vendor('transform', 'translateX(#{_size(navPanel)})');
+                }
+
+                #navPanel {
+                    @include vendor('transform', 'translateX(0)');
+                }
+            }
+        }
+
+}
+
+/* Mobile */
+
+@include breakpoint('<=mobile') {
+
+    $pattern-background-size: 10em;
+
+    /* Basic */
+
+        body {
+            min-width: 320px;
+        }
+
+        h2 {
+            font-size: 1.25em;
+            letter-spacing: 0.1em;
+        }
+
+        h3 {
+            font-size: 1em;
+            letter-spacing: 0.025em;
+        }
+
+        p {
+            text-align: justify;
+        }
+
+    /* Section/Article */
+
+        header {
+            text-align: center;
+
+            &.major {
+                padding-bottom: 0;
+            }
+
+            &.special {
+                margin-bottom: 3em;
+                padding-left: 1.5em;
+                padding-right: 1.5em;
+
+                &:before,
+                &:after {
+                    width: 38%;
+                }
+
+                .icon {
+                    font-size: 0.75em;
+                    top: 1.5em;
+                }
+            }
+
+            p {
+                text-align: center;
+            }
+        }
+
+        footer {
+            &.major {
+                padding-top: 0;
+            }
+        }
+
+    /* Icon */
+
+        .icon {
+            &.circle {
+                font-size: 1em;
+            }
+        }
+
+    /* Button */
+
+        input[type="button"],
+        input[type="submit"],
+        input[type="reset"],
+        button,
+        .button {
+            max-width: 20em;
+            width: 100%;
+
+            &.fit {
+                width: auto;
+            }
+        }
+
+    /* Icons */
+
+        ul.icons {
+            li {
+                padding-left: 0.25em;
+            }
+        }
+
+    /* Featured Icons */
+
+        ul.featured-icons {
+            li {
+                .icon {
+                    width: 1.1em;
+                }
+            }
+        }
+
+    /* Buttons */
+
+        ul.buttons {
+            text-align: center;
+        }
+
+    /* Wrapper */
+
+        .wrapper {
+            margin-bottom: 2.5em;
+            padding: 2.25em 1.5em;
+
+            &.special {
+                br {
+                    display: none;
+                }
+            }
+
+            &.style1 {
+                padding: 0 1.5em;
+            }
+
+            &.style2 {
+                background-size: $pattern-background-size;
+                padding: 2.25em 1.5em;
+            }
+
+            &.style4 {
+                background-size: $pattern-background-size;
+                padding: 1.5em 1.5em 3em 1.5em;
+            }
+        }
+
+    /* Banner */
+
+        #banner {
+            background-size: $pattern-background-size, $pattern-background-size, auto, cover;
+            padding: 6em 0;
+
+            .inner {
+                background: none;
+                display: block;
+                padding: 0 1.5em;
+
+                header {
+                    h2 {
+                        font-size: 1.5em;
+                    }
+                }
+
+                p {
+                    text-align: center;
+                }
+
+                br {
+                    display: none;
+                }
+            }
+        }
+
+    /* Main */
+
+        #main {
+            background-size: $pattern-background-size;
+            padding: 3.5em 0 2.5em 0;
+        }
+
+        body.index #main {
+            padding: 2.5em 0 0 0;
+        }
+
+        body.contact #main {
+            padding-bottom: 0;
+        }
+
+    /* CTA */
+
+        #cta {
+            background-size: $pattern-background-size, $pattern-background-size, auto, cover;
+            padding: 3em 1.5em;
+        }
+
+    /* Footer */
+
+        #footer {
+            padding: 3em 1.5em;
+
+            .copyright {
+                li {
+                    display: block;
+                    margin: 1em 0 0 0;
+                    padding: 0;
+                    border: 0;
+                }
+            }
+        }
+
+    /* Nav */
+
+        #navButton {
+            .toggle {
+                &:before {
+                    top: 8px;
+                    left: 8px;
+                    width: 50px;
+                    height: 34px;
+                    line-height: 34px;
+                }
+
+                &:after {
+                    top: 8px;
+                    left: 8px;
+                    width: 50px;
+                    height: 34px;
+                }
+            }
+        }
+
+}