jekyll-theme-twenty 0.1.0

data/_sass/base/_typography.scss

@@ -0,0 +1,75 @@
+body, input, select, textarea {
+    color: _palette(fg);
+    font-family: 'Lato', sans-serif;
+    font-size: 15pt;
+    font-weight: 300;
+    letter-spacing: 0.025em;
+    line-height: 1.75em;
+}
+
+a {
+    @include vendor('transition', ('color 0.2s ease-in-out', 'border-color 0.2s ease-in-out', 'background-color 0.2s ease-in-out'));
+    color: darken(_palette(one, bg), 20);
+    text-decoration: none;
+    border-bottom: dotted 1px;
+
+    &:hover {
+        border-bottom-color: transparent;
+    }
+}
+
+strong, b {
+    font-weight: 400;
+}
+
+p, ul, ol, dl, table, blockquote {
+    margin: 0 0 2em 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+    font-weight: 300;
+    line-height: 1.75em;
+    margin-bottom: 1em;
+    text-transform: uppercase;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+        border: 0;
+    }
+}
+
+h2 {
+    font-size: 1.5em;
+    letter-spacing: 0.1em;
+}
+
+h3 {
+    font-size: 1.15em;
+    letter-spacing: 0.025em;
+}
+
+sub {
+    font-size: 0.8em;
+    position: relative;
+    top: 0.5em;
+}
+
+sup {
+    font-size: 0.8em;
+    position: relative;
+    top: -0.5em;
+}
+
+hr {
+    border-top: solid 1px _palette(border);
+    border: 0;
+    margin-bottom: 1.5em;
+}
+
+blockquote {
+    border-left: solid 0.5em _palette(border);
+    font-style: italic;
+    padding: 1em 0 1em 2em;
+}

data/_sass/components/_button.scss

@@ -0,0 +1,51 @@
+/* Button */
+
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+button,
+.button {
+    @include vendor('appearance', 'none');
+    @include vendor('transition', ('color 0.2s ease-in-out', 'border-color 0.2s ease-in-out', 'background-color 0.2s ease-in-out'));
+    background: none;
+    border: solid 1px;
+    border-radius: 0;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 0.8em;
+    font-weight: 900;
+    letter-spacing: 2px;
+    min-width: 18em;
+    padding: 0 0.75em;
+    line-height: 3.75em;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+
+    &:hover {
+        background: rgba(188,202,206,0.15);
+        border-color: inherit;
+    }
+
+    &.primary {
+        background: _palette(one, bg);
+        border-color: _palette(one, bg);
+        color: _palette(one, fg) !important;
+
+        &:hover {
+            background: lighten(_palette(one, bg), 5) !important;
+            border-color: lighten(_palette(one, bg), 5) !important;
+        }
+    }
+
+    &.fit {
+        width: 100%;
+    }
+
+    &.small {
+        font-size: 0.7em;
+        min-width: 14em;
+        padding: 0.5em 0;
+    }
+}

data/_sass/components/_buttons.scss

@@ -0,0 +1,31 @@
+/* Buttons */
+
+ul.buttons {
+    cursor: default;
+    list-style: none;
+    padding-left: 0;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    li {
+        display: inline-block;
+        padding: 0 0 0 1.5em;
+
+        &:first-child {
+            padding: 0;
+        }
+    }
+
+    &.stacked {
+        li {
+            display: block;
+            padding: 1.5em 0 0 0;
+
+            &:first-child {
+                padding: 0;
+            }
+        }
+    }
+}

data/_sass/components/_container.scss

@@ -0,0 +1,51 @@
+/* Container */
+
+.container {
+    margin: 0 auto;
+    max-width: 100%;
+    width: 1400px;
+
+    &.medium {
+        width: (1400px * 0.75);
+    }
+
+    @include breakpoint('<=wide') {
+        width: 1200px;
+
+        &.medium {
+            width: (1200px * 0.75);
+        }
+    }
+
+    @include breakpoint('<=normal') {
+        width: 960px;
+
+        &.medium {
+            width: (980px * 0.75);
+        }
+    }
+
+    @include breakpoint('<=narrow') {
+        width: 95%;
+
+        &.medium {
+            width: (95% * 0.75);
+        }
+    }
+
+    @include breakpoint('<=narrower') {
+        width: 95%;
+
+        &.medium {
+            width: 95%;
+        }
+    }
+
+    @include breakpoint('<=mobile') {
+        width: 100%;
+
+        &.medium {
+            width: 100%;
+        }
+    }
+}

data/_sass/components/_form.scss

@@ -0,0 +1,50 @@
+/* Form */
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+textarea {
+    @include vendor('transition', ('background-color 0.2s ease-in-out', 'border-color 0.2s ease-in-out'));
+    @include vendor('appearance', 'none');
+    background: none;
+    border: solid 1px _palette(border);
+    border-radius: 0;
+    color: inherit;
+    display: block;
+    padding: 0.75em;
+    text-decoration: none;
+    width: 100%;
+    outline: 0;
+
+    &:focus {
+        border-color: _palette(one, bg);
+    }
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+    line-height: 1em;
+}
+
+::-webkit-input-placeholder {
+    color: inherit;
+    opacity: 0.5;
+    position: relative;
+    top: 3px;
+}
+
+:-moz-placeholder {
+    color: inherit;
+    opacity: 0.5;
+}
+
+::-moz-placeholder {
+    color: inherit;
+    opacity: 0.5;
+}
+
+:-ms-input-placeholder {
+    color: inherit;
+    opacity: 0.5;
+}

data/_sass/components/_icon.scss

@@ -0,0 +1,87 @@
+/* Icon */
+
+.icon {
+    @include icon;
+    position: relative;
+
+    &.circle {
+        @include vendor('transition', 'all 0.2s ease-in-out');
+        border: 0;
+        border-radius: 100%;
+        display: inline-block;
+        font-size: 1.25em;
+        height: 2.25em;
+        left: 0;
+        line-height: 2.25em;
+        text-align: center;
+        text-decoration: none;
+        top: 0;
+        width: 2.25em;
+
+        &:hover {
+            top: -0.2em;
+        }
+
+        &.fa-twitter {
+            background: _palette(twitter, bg);
+            color: _palette(twitter, fg);
+
+            &:hover {
+                background: lighten(_palette(twitter, bg), 4);
+            }
+        }
+
+        &.fa-facebook {
+            background: _palette(facebook, bg);
+            color: _palette(facebook, fg);
+
+            &:hover {
+                background: lighten(_palette(facebook, bg), 4);
+            }
+        }
+
+        &.fa-google-plus {
+            background: _palette(google-plus, bg);
+            color: _palette(google-plus, fg);
+
+            &:hover {
+                background: lighten(_palette(google-plus, bg), 4);
+            }
+        }
+
+        &.fa-github {
+            background: _palette(github, bg);
+            color: _palette(github, fg);
+
+            &:hover {
+                background: lighten(_palette(github, bg), 4);
+            }
+        }
+
+        &.fa-dribbble {
+            background: _palette(dribbble, bg);
+            color: _palette(dribbble, fg);
+
+            &:hover {
+                background: lighten(_palette(dribbble, bg), 4);
+            }
+        }
+    }
+
+    &.featured {
+        cursor: default;
+        display: block;
+        margin: 0 0 1.5em 0;
+        opacity: 0.35;
+        text-align: center;
+
+        &:before {
+            font-size: 5em;
+            line-height: 1em;
+        }
+    }
+
+    > .label {
+        display: none;
+    }
+}

data/_sass/components/_icons.scss

@@ -0,0 +1,45 @@
+/* Icons */
+
+ul.icons {
+    list-style: none;
+    padding-left: 0;
+    cursor: default;
+
+    li {
+        display: inline-block;
+        line-height: 1em;
+        padding-left: 0.5em;
+
+        &:first-child {
+            padding-left: 0;
+        }
+    }
+}
+
+/* Featured Icons */
+
+ul.featured-icons {
+    cursor: default;
+    margin: -0.75em 0 0 0;
+    opacity: 0.35;
+    overflow: hidden;
+    position: relative;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        display: block;
+        float: left;
+        text-align: center;
+        width: 50%;
+        padding-left: 0;
+
+        .icon {
+            display: inline-block;
+            font-size: 6.25em;
+            height: 1.25em;
+            line-height: 1.25em;
+            width: 1em;
+        }
+    }
+}

data/_sass/components/_image.scss

@@ -0,0 +1,35 @@
+/* Image */
+
+.image {
+    border: 0;
+    position: relative;
+
+    &:before {
+        background: url('images/overlay.png');
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    &.fit {
+        display: block;
+
+        img {
+            display: block;
+            width: 100%;
+        }
+    }
+
+    &.featured {
+        display: block;
+        margin: 0 0 2em 0;
+
+        img {
+            display: block;
+            width: 100%;
+        }
+    }
+}

data/_sass/components/_list.scss

@@ -0,0 +1,19 @@
+/* List */
+
+ol {
+    list-style: decimal;
+    padding-left: 1.25em;
+
+    li {
+        padding-left: 0.25em;
+    }
+}
+
+ul {
+    list-style: disc;
+    padding-left: 1em;
+
+    li {
+        padding-left: 0.5em;
+    }
+}