jekyll-theme-consulting 0.1.0 → 0.1.1

data/_sass/components/_box.scss

@@ -1,247 +1,26 @@
-/* Box */
-
-.box {
-    position: relative;
-    margin-top: 9em;
-    margin-bottom: 0;
-    margin-left: auto;
-    margin-right: 3em;
-
-    &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: -9em;
-        height: 9em;
-        border-left: solid 1px _palette(accent);
-    }
-
-    &:before {
-        content: '';
-        display: block;
-        width: 90px;
-        height: 66px;
-        position: absolute;
-        top: -4.5em;
-        margin-left: -45px;
-        margin-top: -33px;
-        background: url('images/circles.svg') no-repeat;
-    }
-
-    :last-child {
-        margin-bottom: 0;
-    }
-
-    &.right {
-        &:before, &:after {
-            left: 3em;
-        }
-    }
-
-    &.left {
-        &:before, &:after {
-            right: 3em;
-        }
-    }
-
-    &.style1 {
-        background: _palette(bg);
-        padding: 3em;
-
-        .image {
-            display: block;
-            position: absolute;
-            top: 0;
-            width: 50%;
-            height: 100%;
-            background: _palette(bg);
-            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: _palette(bg);
-            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 _palette(border);
-            }
-
-            .row {
-                position: relative;
-
-                &:before {
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    top: 50%;
-                    left: 20px;
-                    width: calc(100% - 40px);
-                    border-bottom: solid 1px _palette(border);
-                }
-            }
-
-            .image {
-                position: relative;
-                z-index: 1;
-                padding: 20px;
-            }
-        }
-    }
-
-    &.style3 {
-        background: _palette(bg);
-        padding: 3em;
-
-        header {
-            text-align: center;
-        }
-    }
-
-
-    &.style4 {
-        background: _palette(bg);
-        padding: 0;
-
-        svg {
-            position: absolute;
-            z-index: 0;
-        }
-
-        h2 {
-            position: relative;
-            z-index: 10;
-        }
-
-        p {
-            position: relative;
-            z-index: 10;
-        }
-
-        .upper, .lower {
-            display: block;
-            position: relative;
-            width: 100%;
-            height: auto;
-            overflow: hidden;
-            padding: 0;
-            margin: 0;
-        }
-
-        .upper {
-            color: _palette(bg);
-            background-color: _palette(accent);
-
-            svg {
-                bottom: 0;
-            }
-        }
-
-        .lower{
-            color: _palette(accent);
-            background-color: _palette(bg);
-
-            svg {
-                top: 0;
-            }
-        }
-
-        &.right {
-            svg {
-                left: 0;
-            }
-
-            h2 {
-                left: 0;
-                margin-left: 2.4em;
-                padding-left: 0.5em;
-                border-left: solid 1px _palette(bg);
-            }
-
-            p {
-                right: 0;
-                margin-left: 12em;
-            }
-        }
-
-        &.left {
-            svg {
-                right: 0;
-            }
-
-            h2 {
-                right: 0;
-                margin-right: 2.4em;
-                padding-right: 0.5em;
-                border-right: solid 1px _palette(bg);
-            }
-
-            p {
-                left: 0;
-            }
-        }
-    }
-}
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Box */
+
+	.box {
+		border-radius: _size(border-radius);
+		border: solid 1px _palette(border);
+		margin-bottom: _size(element-margin);
+		padding: 1.5em;
+
+		> :last-child,
+		> :last-child > :last-child,
+		> :last-child > :last-child > :last-child {
+			margin-bottom: 0;
+		}
+
+		&.alt {
+			border: 0;
+			border-radius: 0;
+			padding: 0;
+		}
+	}

data/_sass/components/_button.scss

@@ -1,65 +1,87 @@
-/* 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;
-    background: _palette(bg);
-    color: _palette(fg);
-    cursor: pointer;
-    outline: 0;
-    padding: 1em 3em 1em 3em;
-    font-weight: 400;
-    text-align: center;
-    text-decoration: none;
-    text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
-    border: 0;
-    border-radius: 3em;
-
-    &:hover {
-        background: _palette(accent);
-    }
-
-    &.style2 {
-        color: _palette(accent-light);
-        background: _palette(bg);
-        box-shadow: inset 0 0 0 1px _palette(accent);
-
-        &:hover {
-            background: _palette(bg-light);
-            color: _palette(accent-light) !important;
-            text-shadow: 0 0 0.5px _palette(accent) !important;
-        }
-    }
-
-    &.style3 {
-        background: none;
-        color: _palette(accent);
-        box-shadow: inset 0 0 0 1px #dad9d9;
-
-        &:hover {
-            background: rgba(58, 57, 57, 0.025);
-        }
-    }
-
-    &:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 32px;
-        position: absolute;
-        left: 0;
-        bottom: -32px;
-        padding-left: auto;
-        padding-right: auto;
-        z-index: 100;
-        background-image: url('images/falling.svg');
-        background-repeat: no-repeat;
-        background-position: 50% 50%;
-    }
-}
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'background-color #{_duration(transition)} ease-in-out',
+			'color #{_duration(transition)} ease-in-out'
+		));
+		background-color: transparent;
+		border-radius: _size(border-radius);
+		border: 0;
+		box-shadow: inset 0 0 0 2px _palette(accent);
+		color: _palette(accent) !important;
+		cursor: pointer;
+		display: inline-block;
+		font-family: _font(family-heading);
+		font-size: 0.8em;
+		font-weight: _font(weight-heading);
+		height: 3.5em;
+		letter-spacing: _font(kerning-heading);
+		line-height: 3.5em;
+		padding: 0 2.25em;
+		text-align: center;
+		text-decoration: none;
+		text-transform: uppercase;
+		white-space: nowrap;
+
+		&:hover {
+			background-color: transparentize(_palette(accent), 0.95);
+		}
+
+		&:active {
+			background-color: transparentize(_palette(accent), 0.85);
+		}
+
+		&.icon {
+			&:before {
+				margin-right: 0.5em;
+			}
+		}
+
+		&.fit {
+			display: block;
+			margin: 0 0 (_size(element-margin) * 0.5) 0;
+			width: 100%;
+		}
+
+		&.small {
+			font-size: 0.6em;
+		}
+
+		&.big {
+			font-size: 1em;
+			height: 3.65em;
+			line-height: 3.65em;
+		}
+
+		&.special {
+			background-color: _palette(accent);
+			box-shadow: none;
+			color: _palette(bg) !important;
+
+			&:hover {
+				background-color: lighten(_palette(accent), 3);
+			}
+
+			&:active {
+				background-color: darken(_palette(accent), 3);
+			}
+		}
+
+		&.disabled,
+		&:disabled {
+			@include vendor('pointer-events', 'none');
+			opacity: 0.25;
+		}
+	}

data/_sass/components/_features.scss

@@ -0,0 +1,156 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Features */
+
+	.features {
+		$gutter: _size(gutter);
+
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		margin: 0 0 _size(element-margin) ($gutter * -1);
+		width: calc(100% + #{$gutter});
+
+		article {
+			@include vendor('align-items', 'center');
+			@include vendor('display', 'flex');
+			margin: 0 0 $gutter $gutter;
+			position: relative;
+			width: calc(50% - #{$gutter});
+
+			&:nth-child(2n - 1) {
+				margin-right: ($gutter * 0.5);
+			}
+
+			&:nth-child(2n) {
+				margin-left: ($gutter * 0.5);
+			}
+
+			&:nth-last-child(1),
+			&:nth-last-child(2) {
+				margin-bottom: 0;
+			}
+
+			.icon {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				display: block;
+				height: 10em;
+				line-height: 10em;
+				margin: 0 _size(element-margin) 0 0;
+				text-align: center;
+				width: 10em;
+
+				&:before {
+					color: _palette(accent);
+					font-size: 2.75rem;
+					position: relative;
+					top: 0.05em;
+				}
+
+				&:after {
+					@include vendor('transform', 'rotate(45deg)');
+					border-radius: 0.25rem;
+					border: solid 2px _palette(border);
+					content: '';
+					display: block;
+					height: 7em;
+					left: 50%;
+					margin: -3.5em 0 0 -3.5em;
+					position: absolute;
+					top: 50%;
+					width: 7em;
+				}
+			}
+
+			.content {
+				@include vendor('flex-grow', '1');
+				@include vendor('flex-shrink', '1');
+				width: 100%;
+
+				> :last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		@include breakpoint(medium) {
+			margin: 0 0 _size(element-margin) 0;
+			width: 100%;
+
+			article {
+				margin: 0 0 $gutter 0;
+				width: 100%;
+
+				&:nth-child(2n - 1) {
+					margin-right: 0;
+				}
+
+				&:nth-child(2n) {
+					margin-left: 0;
+				}
+
+				&:nth-last-child(1),
+				&:nth-last-child(2) {
+					margin-bottom: $gutter;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+
+				.icon {
+					height: 8em;
+					line-height: 8em;
+					width: 8em;
+
+					&:before {
+						font-size: 2.25rem;
+					}
+
+					&:after {
+						height: 6em;
+						margin: -3em 0 0 -3em;
+						width: 6em;
+					}
+				}
+			}
+		}
+
+		@include breakpoint(xsmall) {
+			article {
+				@include vendor('flex-direction', 'column');
+				@include vendor('align-items', 'flex-start');
+
+				.icon {
+					height: 6em;
+					line-height: 6em;
+					margin: 0 0 (_size(element-margin) * 0.75) 0;
+					width: 6em;
+
+					&:before {
+						font-size: 1.5rem;
+					}
+
+					&:after {
+						height: 4em;
+						margin: -2em 0 0 -2em;
+						width: 4em;
+					}
+				}
+			}
+		}
+
+		@include breakpoint(xsmall) {
+			article {
+				.icon {
+					&:before {
+						font-size: 1.25rem;
+					}
+				}
+			}
+		}
+	}