jekyll-theme-consulting 0.7.2 → 0.8.0

data/_sass/main/layout/_main.scss

@@ -0,0 +1,26 @@
+/* Main */
+
+#main {
+    @include vendor('flex-grow', '1');
+    @include vendor('flex-shrink', '1');
+    width: 100%;
+
+    > .inner {
+        margin: 0 auto;
+        max-width: 110em;
+
+        > section {
+            @include padding(6em, 6em);
+            border-top: solid 2px _palette(border);
+
+            &:first-of-type {
+                border-top: 0 !important;
+            }
+        }
+
+        #header {
+            padding: 2em 6em 1em 6em;
+            margin: 0;
+        }
+    }
+}

data/_sass/main/layout/_menu.scss

@@ -0,0 +1,155 @@
+/* Menu */
+
+#menu, #results {
+    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(false, solid);
+                -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 {
+            position: relative;
+            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;
+            }
+
+            &::before {
+                border-left: 6px solid transparent;
+                content: "";
+                display: block;
+                position: absolute;
+                left: -1em;
+                top: 0;
+                height: 100%;
+            }
+
+            &.current::before, &:hover::before {
+                border-left: 6px solid _palette(accent);
+            }
+        }
+    }
+}
+
+/* Inverted */
+
+.inverted #menu, .inverted #results {
+    ul {
+        color: _palette(fg-bold-inverted);
+
+        a, span {
+            color: inherit;
+
+            &:hover {
+                color: _palette(accent-inverted);
+            }
+
+            &.opener {
+                &:before {
+                    color: _palette(fg-light-inverted);
+                }
+
+                &:hover {
+                    &:before {
+                        color: _palette(accent-inverted);
+                    }
+                }
+            }
+        }
+    }
+
+    > ul {
+        > li {
+            border-top: solid 1px _palette(border-inverted);
+
+            > ul {
+                color: _palette(fg-light-inverted);
+            }
+
+            &:first-child {
+                border-top: 0;
+                margin-top: 0;
+                padding-top: 0;
+            }
+
+            &.current::before, &:hover::before {
+                border-left: 6px solid _palette(accent-inverted);
+            }
+        }
+    }
+}

data/_sass/main/layout/_sidebar.scss

@@ -0,0 +1,235 @@
+/* Sidebar */
+
+#search {
+    form {
+        @include icon(false, solid);
+        position: relative;
+        margin-left: 4em;
+
+        input[type="text"] {
+            padding-right: _size(element-height);
+        }
+    }
+}
+
+#sidebar {
+    $pad: 1.5em / 0.9;
+
+    @include vendor('flex-grow', '0');
+    @include vendor('flex-shrink', '0');
+    @include vendor('transition', (
+        'margin-left 0.5s ease',
+        'box-shadow 0.5s ease'
+    ));
+
+    z-index: _misc(z-index-base);
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: _size(sidebar-width-alt);
+    height: 100%;
+    box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
+    background-color: _palette(bg-alt);
+    font-size: 0.9em;
+
+    h2 {
+        font-size: (1.25em / 0.9);
+    }
+
+    > .inner {
+        -webkit-overflow-scrolling: touch;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: absolute;
+        left: 0;
+        top: 0;
+        padding: $pad 0 $pad 0;
+        width: _size(sidebar-width-alt);
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        > * {
+            flex: 0;
+            border-bottom: 0;
+            margin: 0;
+            padding: 0 $pad 0 $pad;
+
+            > :last-child {
+                margin-bottom: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+                padding-bottom: 0;
+            }
+        }
+
+        > #menu {
+            flex: 1;
+        }
+
+        > #results {
+            top: 0;
+            flex: 1;
+            overflow-y: auto;
+            padding-left: 4em;
+        }
+
+        > .alt {
+            background-color: darken(_palette(bg-alt), 2);
+            border-bottom: solid 2px _palette(border);
+            margin: ($pad * -1) 0 0 ($pad * -1);
+            padding: $pad;
+        }
+    }
+
+    .toggle {
+        @include icon(false, solid);
+        @include vendor('transition', 'left 0.5s ease');
+        -webkit-tap-highlight-color: rgba(255,255,255,0);
+        position: fixed;
+        left: 0;
+        border: 0;
+        display: block;
+        width: 6em;
+        height: 6.25em;
+        outline: 0;
+        overflow: hidden;
+        line-height: 6.25em;
+        text-align: center;
+        text-indent: 6em;
+        z-index: _misc(z-index-base);
+
+        &#sidebar-toggle-button {
+            top:0;
+        }
+
+        &#sidebar-search-button {
+            top:6.25em;
+        }
+
+        &#sidebar-logo-button {
+            top:12.5em;
+        }
+
+        &:before {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: inherit;
+            height: inherit;
+            margin-left: (-0.875em / 2);
+            font-size: 1.5rem;
+            line-height: inherit;
+            text-indent: 0;
+        }
+
+        &#sidebar-toggle-button:before {
+            content: '\f0c9';
+        }
+
+        &#sidebar-search-button:before {
+            content: '\f002';
+        }
+
+        &#sidebar-logo-button:before {
+            display: none;
+            content: '';
+        }
+
+        &#sidebar-logo-button svg {
+            position: absolute;
+            top: 20%;
+            left: 4%;
+            width: 60%;
+            height: 60%;
+            font-size: 1.5rem;
+            line-height: inherit;
+            text-indent: 0;
+            fill: _palette(accent);
+        }
+    }
+
+    &.inactive {
+        margin-left: (_size(sidebar-width-alt) * -1);
+        box-shadow: none;
+    }
+
+    body.is-preload & {
+        display: none;
+    }
+}
+
+/* Inverted */
+
+.inverted #search {
+    form {
+        &:before {
+            color: _palette(fg);
+        }
+
+        input[type="text"] {
+            color: _palette(fg);
+        }
+    }
+}
+
+#sidebar.inverted {
+    background-color: _palette(bg-inverted);
+
+    header.major > :last-child {
+        border-bottom: solid 3px _palette(fg-inverted);
+    }
+
+    a.toggle {
+        color: _palette(accent-inverted);
+
+        &:hover {
+            color: _palette(accent-cp);
+        }
+
+        &#sidebar-logo-button svg {
+            fill: _palette(accent-inverted);
+            stroke: _palette(accent-inverted);
+        }
+
+        &#sidebar-logo-button:hover svg {
+            fill: _palette(accent-cp);
+            stroke: _palette(accent-cp);
+        }
+    }
+
+    > .inner {
+
+        > * {
+            border-bottom: 0;
+        }
+
+        > .alt {
+            background-color: darken(_palette(bg-inverted), 2);
+            border-bottom: solid 2px _palette(border-inverted);
+        }
+    }
+}
+
+#sidebar.inverted.inactive {
+    a.toggle {
+        color: _palette(accent);
+
+        &:hover {
+            color: _palette(accent);
+        }
+
+        &#sidebar-logo-button svg {
+            fill: _palette(accent);
+            stroke: _palette(accent);
+        }
+
+        &#sidebar-logo-button:hover svg {
+            fill: _palette(accent);
+            stroke: _palette(accent);
+        }
+    }
+}

data/_sass/main/layout/_wrapper.scss

@@ -0,0 +1,7 @@
+/* Wrapper */
+
+#wrapper {
+    @include vendor('display', 'flex');
+    @include vendor('flex-direction', 'row-reverse');
+    min-height: 100vh;
+}

data/_sass/medium.scss

@@ -0,0 +1,48 @@
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'libs/html-grid';
+
+// Breakpoints.
+
+@include breakpoints((
+    medium:   ( 737px,   980px  )
+));
+
+// Base.
+
+@import 'medium/base/reset';
+@import 'medium/base/page';
+@import 'medium/base/typography';
+
+// Component.
+
+@import 'medium/components/row';
+@import 'medium/components/section';
+@import 'medium/components/form';
+@import 'medium/components/box';
+@import 'medium/components/icon';
+@import 'medium/components/image';
+@import 'medium/components/list';
+@import 'medium/components/actions';
+@import 'medium/components/icons';
+@import 'medium/components/contact';
+@import 'medium/components/pagination';
+@import 'medium/components/table';
+@import 'medium/components/button';
+@import 'medium/components/mini-posts';
+@import 'medium/components/features';
+@import 'medium/components/facts';
+@import 'medium/components/posts';
+
+// Layout.
+
+@import 'medium/layout/wrapper';
+@import 'medium/layout/main';
+@import 'medium/layout/sidebar';
+@import 'medium/layout/header';
+@import 'medium/layout/banner';
+@import 'medium/layout/footer';
+@import 'medium/layout/menu';