jekyll-theme-consulting 0.1.0 → 0.1.1

data/_sass/layout/_banner.scss

@@ -1,44 +1,75 @@
-/* Banner */
-
-#banner {
-    position: relative;
-    color: _palette(fg);
-    text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
-    text-align: center;
-    background: _palette(bg) url('images/banner.svg') bottom center no-repeat;
-    padding: 5em 0 5em 0;
-    margin: 0;
-    background-size: 125% auto;
-
-    .button {
-        color: _palette(accent);
-        text-shadow: 0 0 0.5px _palette(bg-light);
-    }
-
-    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: _palette(border);
-
-        &:hover {
-            border-bottom-color: _palette(border-light);
-        }
-    }
-}
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Banner */
+
+	#banner {
+		@include padding(6em, 0);
+		@include vendor('display', 'flex');
+
+		h1 {
+			margin-top: -0.125em;
+		}
+
+		.content {
+			@include vendor('flex-grow', '1');
+			@include vendor('flex-shrink', '1');
+			width: 50%;
+		}
+
+		.image {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			display: block;
+			margin: 0 0 _size(element-margin) (_size(element-margin) * 2);
+			width: 50%;
+
+			img {
+				height: 100%;
+				-moz-object-fit: cover;
+				-webkit-object-fit: cover;
+				-ms-object-fit: cover;
+				object-fit: cover;
+				-moz-object-position: center;
+				-webkit-object-position: center;
+				-ms-object-position: center;
+				object-position: center;
+				width: 100%;
+			}
+		}
+
+		@include orientation(portrait) {
+			@include vendor('flex-direction', 'column-reverse');
+
+			h1 {
+				br {
+					display: none;
+				}
+			}
+
+			.content {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				width: 100%;
+			}
+
+			.image {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				margin: 0 0 (_size(element-margin) * 2) 0;
+				height: 25em;
+				max-height: 50vh;
+				min-height: 18em;
+				width: 100%;
+			}
+
+			@include breakpoint(xsmall) {
+				.image {
+					max-height: 35vh;
+				}
+			}
+		}
+	}

data/_sass/layout/_footer.scss

@@ -1,44 +1,18 @@
-/* Footer */
-
-#footer {
-    position: relative;
-    color: _palette(fg);
-    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 _palette(accent);
-    }
-
-    a {
-        color: _palette(accent-light);
-        text-shadow: 0 0 0.5px _palette(accent-light);
-        border-bottom-color: _palette(accent-light);
-
-        &:hover {
-            color: _palette(accent);
-            text-shadow: 0 0 0.5px _palette(accent);
-            border-bottom-color: _palette(accent);
-        }
-    }
-
-    .icons {
-        padding: 0.75em 2em 0.75em 2em;
-        border-radius: 3em;
-        border: solid 1px _palette(accent);
-        display: inline-block;
-        margin: 0 0 3em 0;
-    }
-
-    .copyright {
-        margin: 0 0 9em 0;
-        font-size: 0.8em;
-    }
-}
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Footer */
+
+	#footer {
+		.copyright {
+			color: _palette(fg-light);
+			font-size: 0.9em;
+
+			a {
+				color: inherit;
+			}
+		}
+	}

data/_sass/layout/_header.scss

@@ -1,85 +1,49 @@
-/* Header */
-
-#header {
-    @include vendor('transition', 'opacity 2s ease-in-out');
-    position: relative;
-    color: _palette(fg);
-    text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
-    text-align: center;
-    margin: 0;
-    padding: 2em 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: _palette(fg-light);
-            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 _palette(accent);
-        }
-
-        &:before {
-            content: '';
-            display: block;
-            width: 90px;
-            height: 66px;
-            position: absolute;
-            left: 50%;
-            bottom: -4.5em;
-            margin-left: -45px;
-            margin-bottom: -33px;
-            background: url('images/circles.svg') no-repeat;
-        }
-    }
-
-    body.is-preload & {
-        opacity: 0;
-
-        footer {
-            @include vendor('transform', 'translateY(1em)');
-            opacity: 0;
-        }
-    }
-}
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+	#header {
+		@include vendor('display', 'flex');
+		border-bottom: solid 5px _palette(accent);
+		padding: 2.6em 0 1em 0;
+		position: relative;
+
+		> * {
+			@include vendor('flex', '1');
+			margin-bottom: 0;
+		}
+
+		.logo {
+			border-bottom: 0;
+			color: inherit;
+			font-family: _font(family-heading);
+			font-size: 1.125em;
+		}
+
+		.icons {
+			text-align: right;
+		}
+
+		@include breakpoint(xlarge) {
+			
+		}
+
+		@include breakpoint(small) {
+			.logo {
+				font-size: 1.25em;
+				margin: 0;
+			}
+
+			.icons {
+				height: (6.25em / 1.25);
+				line-height: (6.25em / 1.25);
+				position: absolute;
+				right: (-0.625em / 1.25);
+				top: 0;
+			}
+		}
+	}

data/_sass/layout/_main.scss

@@ -0,0 +1,58 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Main */
+
+	#main {
+		@include vendor('flex-grow', '1');
+		@include vendor('flex-shrink', '1');
+		width: 100%;
+
+		> .inner {
+			@include padding(0, 6em);
+			margin: 0 auto;
+			max-width: 110em;
+
+			> section {
+				@include padding(6em, 0);
+				border-top: solid 2px _palette(border);
+
+				&:first-of-type {
+				 	border-top: 0 !important;
+				}
+			}
+		}
+
+		@include breakpoint(xlarge) {
+			> .inner {
+				@include padding(0, 5em);
+
+				> section {
+					@include padding(5em, 0);
+				}
+			}
+		}
+
+		@include breakpoint(large) {
+			> .inner {
+				@include padding(0, 4em);
+
+				> section {
+					@include padding(4em, 0);
+				}
+			}
+		}
+
+		@include breakpoint(small) {
+			> .inner {
+				@include padding(0, 2em);
+
+				> section {
+					@include padding(3em, 0);
+				}
+			}
+		}
+	}

data/_sass/layout/_menu.scss

@@ -0,0 +1,98 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Menu */
+
+	#menu {
+		ul {
+			@include vendor('user-select', 'none');
+			color: _palette(fg-bold);
+			font-family: _font(family-heading);
+			font-family: _font(weight-heading-alt);
+			letter-spacing: _font(kerning-heading);
+			list-style: none;
+			margin-bottom: 0;
+			padding: 0;
+			text-transform: uppercase;
+
+			a, span {
+				border-bottom: 0;
+				color: inherit;
+				cursor: pointer;
+				display: block;
+				font-size: 0.9em;
+				padding: 0.625em 0;
+
+				&:hover {
+					color: _palette(accent);
+				}
+
+				&.opener {
+					@include vendor('transition', 'color #{_duration(transition)} ease-in-out');
+					@include icon;
+					-webkit-tap-highlight-color: rgba(255,255,255,0);
+					position: relative;
+
+					&:before {
+						@include vendor('transition', (
+							'color #{_duration(transition)} ease-in-out',
+							'transform #{_duration(transition)} ease-in-out'
+						));
+						color: _palette(fg-light);
+						content: '\f078';
+						position: absolute;
+						right: 0;
+					}
+
+					&:hover {
+						&:before {
+							color: _palette(accent);
+						}
+					}
+
+					&.active {
+						& + ul {
+							display: block;
+						}
+
+						&:before {
+							@include vendor('transform', 'rotate(-180deg)');
+						}
+					}
+				}
+			}
+		}
+
+		> ul {
+			> li {
+				border-top: solid 1px _palette(border);
+				margin: 0.5em 0 0 0;
+				padding: 0.5em 0 0 0;
+
+				> ul {
+					color: _palette(fg-light);
+					display: none;
+					margin: 0.5em 0 1.5em 0;
+					padding-left: 1em;
+
+					a, span {
+						font-size: 0.8em;
+					}
+
+					> li {
+						margin: 0.125em 0 0 0;
+						padding: 0.125em 0 0 0;
+					}
+				}
+
+				&:first-child {
+					border-top: 0;
+					margin-top: 0;
+					padding-top: 0;
+				}
+			}
+		}
+	}