jekyll-theme-consulting 0.7.2 → 0.8.0

data/_sass/main/base/_typography.scss

@@ -0,0 +1,200 @@
+/* Type */
+
+body, input, select, textarea {
+    color: _palette(fg);
+    font-family: _font(family);
+    font-size: 13pt;
+    font-weight: _font(weight);
+    line-height: 1.65;
+}
+
+a {
+    @include vendor('transition', (
+        'color #{_duration(transition)} ease-in-out',
+        'border-bottom-color #{_duration(transition)} ease-in-out'
+    ));
+    border-bottom: dotted 1px;
+    color: _palette(accent);
+    text-decoration: none;
+
+    &:hover {
+        border-bottom-color: _palette(accent);
+        color: _palette(accent);
+
+        strong {
+            color: inherit;
+        }
+    }
+}
+
+strong, b {
+    color: _palette(fg-bold);
+    font-weight: _font(weight-bold);
+}
+
+em, i {
+    font-style: italic;
+}
+
+p {
+    margin: 0 0 _size(element-margin) 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: _palette(fg-bold);
+    font-family: _font(family-heading);
+    font-weight: _font(weight-heading);
+    line-height: 1.5;
+    margin: 0 0 (_size(element-margin) * 0.5) 0;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+        border-bottom: 0;
+    }
+}
+
+h1 {
+    font-size: 4em;
+    margin: 0 0 (_size(element-margin) * 0.25) 0;
+    line-height: 1.3;
+}
+
+h2 {
+    font-size: 1.75em;
+}
+
+h3 {
+    font-size: 1.25em;
+}
+
+h4 {
+    font-size: 1.1em;
+}
+
+h5 {
+    font-size: 0.9em;
+}
+
+h6 {
+    font-size: 0.7em;
+}
+
+sub {
+    font-size: 0.8em;
+    position: relative;
+    top: 0.5em;
+}
+
+sup {
+    font-size: 0.8em;
+    position: relative;
+    top: -0.5em;
+}
+
+blockquote {
+    border-left: solid 3px _palette(border);
+    font-style: italic;
+    margin: 0 0 _size(element-margin) 0;
+    padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+}
+
+code {
+    background: _palette(border-bg);
+    border-radius: _size(border-radius);
+    border: solid 1px _palette(border);
+    font-family: _font(family-fixed);
+    font-size: 0.9em;
+    margin: 0 0.25em;
+    padding: 0.25em 0.65em;
+}
+
+pre {
+    -webkit-overflow-scrolling: touch;
+    font-family: _font(family-fixed);
+    font-size: 0.9em;
+    margin: 0 0 _size(element-margin) 0;
+
+    code {
+        display: block;
+        line-height: 1.75;
+        padding: 1em 1.5em;
+        overflow-x: auto;
+    }
+}
+
+hr {
+    border: 0;
+    border-bottom: solid 1px _palette(border);
+    margin: _size(element-margin) 0;
+
+    &.major {
+        margin: (_size(element-margin) * 1.5) 0;
+    }
+}
+
+.align-left {
+    text-align: left;
+}
+
+.align-center {
+    text-align: center;
+}
+
+.align-right {
+    text-align: right;
+}
+
+/* Inverted */
+
+body .inverted {
+    color: _palette(fg-inverted);
+}
+
+.inverted {
+    p {
+        color: _palette(fg-inverted);
+    }
+
+    a {
+        color: _palette(accent-inverted);
+
+        &:hover {
+            border-bottom-color: _palette(accent-cp);
+            color: _palette(accent-cp);
+
+            strong {
+                color: inherit;
+            }
+        }
+    }
+
+    strong, b {
+        color: _palette(fg-bold-inverted);
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: _palette(fg-bold-inverted);
+
+        a {
+            color: inherit;
+        }
+    }
+
+    blockquote {
+        border-left: solid 3px _palette(border-inverted);
+    }
+
+    code {
+        background: _palette(border-bg);
+        border: solid 1px _palette(border);
+    }
+
+    hr {
+        border-bottom: solid 1px _palette(border-inverted);
+    }
+
+    input, select, textarea {
+        color: _palette(fg);
+    }
+}

data/_sass/main/components/_actions.scss

@@ -0,0 +1,57 @@
+/* Actions */
+
+ul.actions {
+	@include vendor('display', 'flex');
+	cursor: default;
+	list-style: none;
+	margin-left: (_size(element-margin) * -0.5);
+	padding-left: 0;
+
+	li {
+		padding: 0 0 0 (_size(element-margin) * 0.5);
+		vertical-align: middle;
+	}
+
+	&.special {
+		@include vendor('justify-content', 'center');
+		width: 100%;
+		margin-left: 0;
+
+		li {
+			&:first-child {
+				padding-left: 0;
+			}
+		}
+	}
+
+	&.stacked {
+		@include vendor('flex-direction', 'column');
+		margin-left: 0;
+
+		li {
+			padding: (_size(element-margin) * 0.65) 0 0 0;
+
+			&:first-child {
+				padding-top: 0;
+			}
+		}
+	}
+
+	&.fit {
+		width: calc(100% + #{_size(element-margin) * 0.5});
+
+		li {
+			@include vendor('flex-grow', '1');
+			@include vendor('flex-shrink', '1');
+			width: 100%;
+
+			> * {
+				width: 100%;
+			}
+		}
+
+		&.stacked {
+			width: 100%;
+		}
+	}
+}

data/_sass/main/components/_box.scss

@@ -0,0 +1,20 @@
+/* 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/main/components/_button.scss

@@ -0,0 +1,79 @@
+/* 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 {
+        width: 100%;
+    }
+
+    &.small {
+        font-size: 0.6em;
+    }
+
+    &.large {
+        font-size: 1em;
+        height: 3.65em;
+        line-height: 3.65em;
+    }
+
+    &.primary {
+        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/main/components/_contact.scss

@@ -0,0 +1,41 @@
+/* Contact */
+
+ul.contact {
+	list-style: none;
+	padding: 0;
+
+	li {
+		@include icon;
+		border-top: solid 1px _palette(border);
+		margin: 1.5em 0 0 0;
+		padding: 1.5em 0 0 3em;
+		position: relative;
+
+		&:before {
+			color: _palette(accent);
+			display: inline-block;
+			font-size: 1.5em;
+			height: 1.125em;
+			left: 0;
+			line-height: 1.125em;
+			position: absolute;
+			text-align: center;
+			top: (1.5em / 1.5);
+			width: 1.5em;
+		}
+
+		&:first-child {
+			border-top: 0;
+			margin-top: 0;
+			padding-top: 0;
+
+			&:before {
+				top: 0;
+			}
+		}
+
+		a {
+			color: inherit;
+		}
+	}
+}

data/_sass/main/components/_facts.scss

@@ -0,0 +1,143 @@
+/* Facts */
+
+.facts {
+    $gutter: 1px;
+
+    @include vendor('display', 'flex');
+    @include vendor('flex-wrap', 'wrap');
+    margin: 0 0 0 0;
+    width: 100%;
+
+    article {
+        @include vendor('flex-grow', '1');
+        @include vendor('flex-shrink', '1');
+        margin: 0 0 $gutter $gutter;
+        position: relative;
+        min-height: 512px;
+
+        &:before {
+            background: _palette(border);
+            content: '';
+            display: block;
+            height: 100%;
+            left: ($gutter * -0.5);
+            position: absolute;
+            top: 0;
+            width: 1px;
+        }
+
+        > :last-child {
+            margin-bottom: 0;
+        }
+
+        .icon {
+            position: relative;
+            margin: 0;
+            width: 100%;
+            height: 20%;
+            text-align: center;
+            font-size: 3rem;
+            color: _palette(accent);
+        }
+
+        .fact-intro, .fact-outro {
+            position: relative;
+            width: 100%;
+            height: 30%;
+            margin: 0;
+
+            p {
+                margin: 0;
+                display: table-cell;
+                text-align: center;
+                font-size: 1.5rem;
+            }
+        }
+
+        .fact-intro p {
+            vertical-align: bottom;
+            text-transform: uppercase;
+        }
+
+        .fact-outro p {
+            vertical-align: top;
+            text-transform: lowercase;
+        }
+
+
+        .fact {
+            position: relative;
+            width: 100%;
+            height: 20%;
+            margin: 0;
+
+            h3 {
+                margin: 0;
+                display: table-cell;
+                vertical-align: baseline;
+                text-align: center;
+                text-transform: uppercase;
+                font-size: 3rem;
+            }
+        }
+    }
+
+    article {
+        .off {
+            display: none;
+        }
+
+        .on.icon {
+            display: block;
+        }
+
+        .on.fact-intro {
+            display: table;
+        }
+
+        .on.fact {
+            display: table;
+        }
+
+        .on.fact-outro {
+            display: table;
+        }
+    }
+
+    article:hover {
+        background-color: _palette(accent);
+
+        .on {
+            display: none;
+        }
+
+        .off.icon {
+            display: block;
+            color: _palette(accent-cp);
+        }
+
+        .off.fact-intro {
+            display: table;
+
+            p {
+                color: #ffffff;
+            }
+        }
+
+        .off.fact {
+            display: table;
+            
+            h3 {
+                color: #ffffff;
+            }
+        }
+
+        .off.fact-outro {
+            display: table;
+            
+            p {
+                color: #ffffff;
+            }
+        }
+    }
+}