jekyll-theme-consulting 0.7.2 → 0.8.0

data/_sass/main/components/_features.scss

@@ -0,0 +1,99 @@
+/* Features */
+
+.features {
+    $gutter: _size(gutter);
+
+    @include vendor('display', 'flex');
+    @include vendor('flex-wrap', 'wrap');
+    margin: 0 0 0 0;
+    width: 100%;
+
+    article {
+        @include vendor('align-items', 'center');
+        @include vendor('display', 'flex');
+        margin: 0 0 $gutter 0;
+        position: relative;
+        width: 50%;
+
+        .ensem {
+            background-image: url('images/ensem.svg');
+        }
+
+        .cie {
+            background-image: url('images/cie.svg');
+        }
+
+        .cnefic {
+            background-image: url('images/cnefic.svg');
+        }
+
+        .eisti {
+            background-image: url('images/eisti.svg');
+        }
+
+        .ieam {
+            background-image: url('images/ieam.svg');
+        }
+
+        .ifg {
+            background-image: url('images/ifg.svg');
+        }
+
+        .marine {
+            background-image: url('images/marine.svg');
+        }
+
+        .ub {
+            background-image: url('images/ub.svg');
+        }
+
+        .uca {
+            background-image: url('images/uca.svg');
+        }
+
+        .icon {
+            @include vendor('flex-grow', '0');
+            @include vendor('flex-shrink', '0');
+            display: block;
+            height: 10em;
+            width: 10em;
+            line-height: 10em;
+            margin: 0 _size(element-margin) 0 0;
+            background-size: 40%;
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            text-align: center;
+
+            &: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;
+            }
+        }
+    }
+}

data/_sass/main/components/_form.scss

@@ -0,0 +1,253 @@
+/* Form */
+
+form {
+    margin: 0 0 _size(element-margin) 0;
+}
+
+label {
+    color: _palette(fg-bold);
+    display: block;
+    font-size: 0.9em;
+    font-weight: _font(weight-bold);
+    margin: 0 0 (_size(element-margin) * 0.5) 0;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+select,
+textarea {
+    @include vendor('appearance', 'none');
+    background: _palette(bg);
+    border-radius: _size(border-radius);
+    border: none;
+    border: solid 1px _palette(border);
+    color: inherit;
+    display: block;
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    width: 100%;
+
+    &:invalid {
+        box-shadow: none;
+    }
+
+    &:focus {
+        border-color: _palette(accent);
+        box-shadow: 0 0 0 1px _palette(accent);
+    }
+}
+
+select {
+    background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+    background-size: 1.25em;
+    background-repeat: no-repeat;
+    background-position: calc(100% - 1em) center;
+    height: _size(element-height);
+    padding-right: _size(element-height);
+    text-overflow: ellipsis;
+
+    option {
+        color: _palette(fg-bold);
+        background: _palette(bg);
+    }
+
+    &:focus {
+        &::-ms-value {
+            background-color: transparent;
+        }
+    }
+
+    &::-ms-expand {
+        display: none;
+    }
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+select {
+    height: _size(element-height);
+}
+
+textarea {
+    padding: 0.75em 1em;
+}
+
+input[type="checkbox"],
+input[type="radio"], {
+    @include vendor('appearance', 'none');
+    display: block;
+    float: left;
+    margin-right: -2em;
+    opacity: 0;
+    width: 1em;
+    z-index: -1;
+
+    & + label {
+        @include icon(false, solid);
+        color: _palette(fg);
+        cursor: pointer;
+        display: inline-block;
+        font-size: 1em;
+        font-weight: _font(weight);
+        padding-left: (_size(element-height) * 0.6) + 0.75em;
+        padding-right: 0.75em;
+        position: relative;
+
+        &:before {
+            background: _palette(bg);
+            border-radius: _size(border-radius);
+            border: solid 1px _palette(border);
+            content: '';
+            display: inline-block;
+            font-size: 0.8em;
+            height: (_size(element-height) * 0.75);
+            left: 0;
+            line-height: (_size(element-height) * 0.75);
+            position: absolute;
+            text-align: center;
+            top: 0;
+            width: (_size(element-height) * 0.75);
+        }
+    }
+
+    &:checked + label {
+        &:before {
+            background: _palette(fg-bold);
+            border-color: _palette(fg-bold);
+            color: _palette(bg);
+            content: '\f00c';
+        }
+    }
+
+    &:focus + label {
+        &:before {
+            border-color: _palette(accent);
+            box-shadow: 0 0 0 1px _palette(accent);
+        }
+    }
+}
+
+input[type="checkbox"] {
+    & + label {
+        &:before {
+            border-radius: _size(border-radius);
+        }
+    }
+}
+
+input[type="radio"] {
+    & + label {
+        &:before {
+            border-radius: 100%;
+        }
+    }
+}
+
+::-webkit-input-placeholder {
+    color: _palette(fg-light) !important;
+    opacity: 1.0;
+}
+
+:-moz-placeholder {
+    color: _palette(fg-light) !important;
+    opacity: 1.0;
+}
+
+::-moz-placeholder {
+    color: _palette(fg-light) !important;
+    opacity: 1.0;
+}
+
+:-ms-input-placeholder {
+    color: _palette(fg-light) !important;
+    opacity: 1.0;
+}
+
+/* Inverted */
+
+.inverted label {
+    color: _palette(fg-bold-inverted);
+}
+
+.inverted input[type="text"],
+.inverted input[type="password"],
+.inverted input[type="email"],
+.inverted input[type="tel"],
+.inverted input[type="search"],
+.inverted input[type="url"],
+.inverted select,
+.inverted textarea {
+    background: _palette(bg);
+    border: solid 1px _palette(border);
+    color: _palette(fg);
+
+    &:focus {
+        border-color: _palette(accent);
+        box-shadow: 0 0 0 1px _palette(accent);
+    }
+}
+
+.inverted select {
+    option {
+        color: _palette(fg-bold);
+        background: _palette(bg);
+    }
+}
+
+.inverted input[type="checkbox"],
+.inverted input[type="radio"], {
+
+    & + label {
+        color: _palette(fg);
+
+        &:before {
+            background: _palette(bg);
+            border: solid 1px _palette(border);
+        }
+    }
+
+    &:checked + label {
+        &:before {
+            background: _palette(fg-bold);
+            border-color: _palette(fg-bold);
+            color: _palette(bg);
+            content: '\f00c';
+        }
+    }
+
+    &:focus + label {
+        &:before {
+            border-color: _palette(accent);
+            box-shadow: 0 0 0 1px _palette(accent);
+        }
+    }
+}
+
+.inverted::-webkit-input-placeholder {
+    color: _palette(fg-light) !important;
+    opacity: 1.0;
+}
+
+.inverted:-moz-placeholder {
+    color: _palette(fg-light) !important;
+    opacity: 1.0;
+}
+
+.inverted::-moz-placeholder {
+    color: _palette(fg-light) !important;
+    opacity: 1.0;
+}
+
+:-ms-input-placeholder {
+    color: _palette(fg-light) !important;
+    opacity: 1.0;
+}

data/_sass/main/components/_icon.scss

@@ -0,0 +1,27 @@
+/* Icon */
+
+.icon {
+    @include icon;
+    border-bottom: none;
+    position: relative;
+
+    > .label {
+        display: none;
+    }
+
+    &:before {
+        line-height: inherit;
+    }
+
+    &.solid {
+        &:before {
+            font-weight: 900;
+        }
+    }
+
+    &.brands {
+        &:before {
+            font-family: 'Font Awesome 5 Brands';
+        }
+    }
+}

data/_sass/main/components/_icons.scss

@@ -0,0 +1,29 @@
+/* Icons */
+
+ul.icons {
+    cursor: default;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        display: inline-block;
+        margin: 1em;
+        padding: 0;
+
+        &:last-child {
+            padding-right: 0;
+        }
+
+        .icon {
+            color: inherit;
+
+            &:before {
+                font-size: 1.25em;
+            }
+
+            &:hover{
+                color: _palette(accent-cp);
+            }
+        }
+    }
+}

data/_sass/main/components/_image.scss

@@ -0,0 +1,72 @@
+/* Image */
+
+.image {
+    border-radius: _size(border-radius);
+    border: 0;
+    display: inline-block;
+    position: relative;
+
+    img {
+        border-radius: _size(border-radius);
+        display: block;
+    }
+
+    &.left,
+    &.right {
+        max-width: 40%;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    &.left {
+        float: left;
+        padding: 0 1.5em 1em 0;
+        top: 0.25em;
+    }
+
+    &.right {
+        float: right;
+        padding: 0 0 1em 1.5em;
+        top: 0.25em;
+    }
+
+    &.fit {
+        position: relative;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: block;
+        margin: 0 0 _size(element-margin) 0;
+        width: 100%;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    &.main {
+        display: block;
+        margin: 0 0 (_size(element-margin) * 1.5) 0;
+        width: 100%;
+
+        img {
+            width: 100%;
+        }
+    }
+}
+
+a.image {
+    overflow: hidden;
+
+    img {
+        @include vendor('transition', 'transform #{_duration(transition)} ease');
+    }
+
+    &:hover {
+        img {
+            @include vendor('transform', 'scale(1.075)');
+        }
+    }
+}