jekyll-theme-twenty 0.1.0

data/_sass/layout/_cta.scss

@@ -0,0 +1,17 @@
+/* CTA */
+
+#cta {
+    background-attachment: scroll, scroll, scroll, fixed;
+    background-color: _palette(three, bg);
+    background-image: url('images/light-tl.svg'), url('images/light-tr.svg'), url('images/overlay.png'), url('../images/banner.jpg');
+    background-position: top left, top right, top left, bottom center;
+    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
+    background-size: $pattern-background-size, $pattern-background-size, auto, cover;
+    color: _palette(three, fg);
+    padding: 5em;
+    text-align: center;
+
+    header {
+        margin-bottom: 2em;
+    }
+}

data/_sass/layout/_dropotron.scss

@@ -0,0 +1,53 @@
+/* Dropotron */
+
+.dropotron {
+    list-style: none;
+    padding-left: 0;
+    background: #fff;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.075);
+    line-height: 2.25em;
+    min-width: 13em;
+    padding: 1em 0;
+    text-transform: uppercase;
+    margin-top: calc(-1em + 1px);
+
+    &.level-0 {
+        font-size: 0.7em;
+        font-weight: 400;
+        margin-top: 1.5em;
+
+        &:before {
+            border-bottom: solid 0.5em #fff;
+            border-left: solid 0.5em transparent;
+            border-right: solid 0.5em transparent;
+            content: '';
+            left: 0.75em;
+            position: absolute;
+            top: -0.45em;
+        }
+    }
+
+    > li {
+        border-top: solid 1px _palette(border);
+        padding-left: 0;
+
+        > a {
+            @include vendor('transition', 'none');
+            color: inherit;
+            text-decoration: none;
+            padding: 0 1em;
+            border: 0;
+        }
+
+        &:hover {
+            > a {
+                background: _palette(one, bg);
+                color: _palette(one, fg);
+            }
+        }
+
+        &:first-child {
+            border-top: 0;
+        }
+    }
+}

data/_sass/layout/_footer.scss

@@ -0,0 +1,30 @@
+/* Footer */
+
+#footer {
+    background: _palette(footer, bg);
+    color: _palette(footer, fg);
+    padding: 5em 5em 10em 5em;
+    text-align: center;
+
+    .copyright {
+        font-size: 0.8em;
+        line-height: 1em;
+
+        a {
+            color: inherit;
+        }
+
+        li {
+            display: inline-block;
+            margin-left: 1em;
+            padding-left: 1em;
+            border-left: dotted 1px;
+
+            &:first-child {
+                margin: 0;
+                padding: 0;
+                border: 0;
+            }
+        }
+    }
+}

data/_sass/layout/_header.scss

@@ -0,0 +1,125 @@
+/* Header */
+
+@include keyframes('reveal-header') {
+    0% { top: -5em; }
+    100% { top: 0; }
+}
+
+#header {
+    background: _palette(header, bg);
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.075);
+    color: _palette(header, fg);
+    cursor: default;
+    font-size: 0.8em;
+    left: 0;
+    padding: 1em 1.5em;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 10000;
+
+    h1 {
+        font-weight: 900;
+        margin: 0;
+
+        span {
+            font-weight: 300;
+        }
+    }
+
+    nav {
+        letter-spacing: 0.075em;
+        position: absolute;
+        right: 1.5em;
+        text-transform: uppercase;
+        top: 0.75em;
+
+        ul {
+            list-style: none;
+            padding-left: 0;
+
+            li {
+                display: inline-block;
+                margin-left: 1.5em;
+                padding-left: 0;
+
+                > ul {
+                    display: none;
+                }
+
+                a {
+                    border: solid 1px transparent;
+                    color: inherit;
+                    display: inline-block;
+                    line-height: 1em;
+                    padding: 0.6em 0.75em;
+                    text-decoration: none;
+                }
+
+                input[type="button"],
+                input[type="submit"],
+                input[type="reset"],
+                button,
+                .button {
+                    font-size: 1em;
+                    min-width: 0;
+                    width: auto;
+                }
+
+                &.submenu {
+                    > a {
+                        @include icon;
+
+                        &:before {
+                            content: '\f107';
+                            margin-right: 0.65em;
+                        }
+                    }
+                }
+
+                &.active,
+                &:hover {
+                    > a {
+                        @include vendor('transition', 'all 0.2s ease-in-out');
+                        background: rgba(188,202,206,0.15);
+                    }
+                }
+
+                &.current {
+                    > a {
+                        font-weight: 900;
+                    }
+                }
+            }
+        }
+    }
+
+    &.reveal {
+        @include vendor('animation', 'reveal-header 0.5s');
+    }
+
+    &.alt {
+        @include vendor('animation', 'none');
+        background: _palette(header, alt-bg);
+        box-shadow: none;
+        color: _palette(header, alt-fg);
+        padding: 2em 2.5em;
+        position: absolute;
+
+        nav {
+            right: 2.5em;
+            top: 1.75em;
+
+            ul {
+                li {
+                    &.active,
+                    &:hover {
+                        > a {
+                            border: solid 1px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

data/_sass/layout/_main.scss

@@ -0,0 +1,31 @@
+/* Main */
+
+#main {
+    background-image: url('images/dark-tl.svg'), url('images/dark-tr.svg'), url('images/dark-bl.svg'), url('images/dark-br.svg');
+    background-position: top left, top right, bottom left, bottom right;
+    background-repeat: no-repeat;
+    background-size: $pattern-background-size;
+    padding: 7em 0;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    .sidebar {
+        section {
+            border-top: solid 1px _palette(border);
+            margin: 3em 0 0 0;
+            padding: 3em 0 0 0;
+
+            &:first-child {
+                border-top: 0;
+                padding-top: 0;
+                margin-top: 0;
+            }
+        }
+    }
+}
+
+body.index #main {
+    padding-top: 5em;
+}

data/_sass/layout/_wrapper.scss

@@ -0,0 +1,51 @@
+/* Wrapper */
+
+.wrapper {
+    margin-bottom: 5em;
+    padding: 5em;
+
+    &.style1 {
+        padding: 0;
+    }
+
+    &.style2 {
+        background-color: _palette(one, bg);
+        background-image: url('images/light-bl.svg'), url('images/light-br.svg');
+        background-position: bottom left, bottom right;
+        background-repeat: no-repeat, no-repeat;
+        background-size: $pattern-background-size, $pattern-background-size;
+        color: _palette(one, fg);
+
+        input[type="button"],
+        input[type="submit"],
+        input[type="reset"],
+        button,
+        .button {
+            &:hover {
+                background: rgba(255,255,255,0.15) !important;
+            }
+
+            &.primary {
+                background: _palette(one, fg);
+                border-color: _palette(one, fg);
+                color: _palette(one, bg) !important;
+
+                &:hover {
+                    border-color: inherit !important;
+                    color: _palette(one, fg) !important;
+                }
+            }
+        }
+    }
+
+    &.style3 {
+        background: _palette(two, bg);
+        color: _palette(two, fg);
+    }
+
+    &.style4 {
+        background: _palette(two, bg);
+        color: _palette(two, fg);
+        padding: 4em;
+    }
+}

data/_sass/libs/_breakpoints.scss

@@ -0,0 +1,223 @@
+// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Breakpoints.
+	/// @var {list}
+	$breakpoints: () !global;
+
+// Mixins.
+
+	/// Sets breakpoints.
+	/// @param {map} $x Breakpoints.
+	@mixin breakpoints($x: ()) {
+		$breakpoints: $x !global;
+	}
+
+	/// Wraps @content in a @media block targeting a specific orientation.
+	/// @param {string} $orientation Orientation.
+	@mixin orientation($orientation) {
+		@media screen and (orientation: #{$orientation}) {
+			@content;
+		}
+	}
+
+	/// Wraps @content in a @media block using a given query.
+	/// @param {string} $query Query.
+	@mixin breakpoint($query: null) {
+
+		$breakpoint: null;
+		$op: null;
+		$media: null;
+
+		// Determine operator, breakpoint.
+
+			// Greater than or equal.
+				@if (str-slice($query, 0, 2) == '>=') {
+
+					$op: 'gte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Less than or equal.
+				@elseif (str-slice($query, 0, 2) == '<=') {
+
+					$op: 'lte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Greater than.
+				@elseif (str-slice($query, 0, 1) == '>') {
+
+					$op: 'gt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Less than.
+				@elseif (str-slice($query, 0, 1) == '<') {
+
+					$op: 'lt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Not.
+				@elseif (str-slice($query, 0, 1) == '!') {
+
+					$op: 'not';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Equal.
+				@else {
+
+					$op: 'eq';
+					$breakpoint: $query;
+
+				}
+
+		// Build media.
+			@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+
+				$a: map-get($breakpoints, $breakpoint);
+
+				// Range.
+					@if (type-of($a) == 'list') {
+
+						$x: nth($a, 1);
+						$y: nth($a, 2);
+
+						// Max only.
+							@if ($x == null) {
+
+								// Greater than or equal (>= 0 / anything)
+									@if ($op == 'gte') {
+										$media: 'screen';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< 0 / invalid)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Not (> y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (<= y)
+									@else {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+							}
+
+						// Min only.
+							@else if ($y == null) {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= inf / anything)
+									@elseif ($op == 'lte') {
+										$media: 'screen';
+									}
+
+								// Greater than (> inf / invalid)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Equal (>= x)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+							}
+
+						// Min and max.
+							@else {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x and > y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (>= x and <= y)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
+									}
+
+							}
+
+					}
+
+				// String.
+					@else {
+
+						// Missing a media type? Prefix with "screen".
+							@if (str-slice($a, 0, 1) == '(') {
+								$media: 'screen and ' + $a;
+							}
+
+						// Otherwise, use as-is.
+							@else {
+								$media: $a;
+							}
+
+					}
+
+			}
+
+		// Output.
+	        @media #{$media} {
+				@content;
+			}
+
+	}