jekyll-theme-future-imperfect 0.1.0

data/_sass/components/_actions.scss

@@ -0,0 +1,101 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* 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%;
+    }
+  }
+
+  @include breakpoint('<=xsmall') {
+    &:not(.fixed) {
+      @include vendor('flex-direction', 'column');
+      margin-left: 0;
+      width: 100% !important;
+
+      li {
+        @include vendor('flex-grow', '1');
+        @include vendor('flex-shrink', '1');
+        padding: (_size(element-margin) * 0.5) 0 0 0;
+        text-align: center;
+        width: 100%;
+
+        >* {
+          width: 100%;
+        }
+
+        &:first-child {
+          padding-top: 0;
+        }
+
+        input[type="submit"],
+        input[type="reset"],
+        input[type="button"],
+        button,
+        .button {
+          width: 100%;
+
+          &.icon {
+            &:before {
+              margin-left: -0.5em;
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/_sass/components/_author.scss

@@ -0,0 +1,40 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Author */
+
+.author {
+  @include vendor('display', 'flex');
+  @include vendor('flex-direction', 'row');
+  @include vendor('align-items', 'center');
+  @include vendor('justify-content', 'flex-end');
+  border-bottom: 0;
+  font-family: _font(family-heading);
+  font-size: 0.6em;
+  font-weight: _font(weight-heading);
+  letter-spacing: _font(kerning-heading);
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  .name {
+    @include vendor('transition', 'border-bottom-color #{_duration(transition)} ease');
+    border-bottom: dotted 1px _palette(border-alt);
+    display: block;
+    margin: 0 1.5em 0 0;
+  }
+
+  img {
+    border-radius: 100%;
+    display: block;
+    width: 4em;
+  }
+
+  &:hover {
+    .name {
+      border-bottom-color: transparent;
+    }
+  }
+}

data/_sass/components/_blurb.scss

@@ -0,0 +1,22 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Blurb */
+
+.blurb {
+  h2 {
+    font-size: 0.8em;
+    margin: 0 0 (_size(element-margin) * 0.75) 0;
+  }
+
+  h3 {
+    font-size: 0.7em;
+  }
+
+  p {
+    font-size: 0.9em;
+  }
+}

data/_sass/components/_box.scss

@@ -0,0 +1,25 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Box */
+
+.box {
+  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

@@ -0,0 +1,84 @@
+///
+/// Future Imperfect 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',
+      'box-shadow #{_duration(transition)} ease',
+      'color #{_duration(transition)} ease'
+    ));
+  background-color: transparent;
+  border: 0;
+  box-shadow: inset 0 0 0 1px _palette(border);
+  color: _palette(fg-bold) !important;
+  cursor: pointer;
+  display: inline-block;
+  font-family: _font(family-heading);
+  font-size: 0.6em;
+  font-weight: _font(weight-heading-bold);
+  height: _size(element-height) * 1.75;
+  letter-spacing: _font(kerning-heading);
+  line-height: _size(element-height) * 1.75;
+  padding: 0 2.5em;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px _palette(accent);
+    color: _palette(accent) !important;
+
+    &:active {
+      background-color: transparentize(_palette(accent), 0.95);
+    }
+  }
+
+  &:before,
+  &:after {
+    color: _palette(fg-light);
+    position: relative;
+  }
+
+  &:before {
+    left: -1em;
+    padding: 0 0 0 0.75em;
+  }
+
+  &:after {
+    left: 1em;
+    padding: 0 0.75em 0 0;
+  }
+
+  &.fit {
+    width: 100%;
+  }
+
+  &.large {
+    font-size: 0.7em;
+    padding: 0 3em;
+  }
+
+  &.small {
+    font-size: 0.5em;
+  }
+
+  &.disabled,
+  &:disabled {
+    @include vendor('pointer-events', 'none');
+    color: _palette(border) !important;
+
+    &:before {
+      color: _palette(border) !important;
+    }
+  }
+}

data/_sass/components/_form.scss

@@ -0,0 +1,218 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+form {
+  margin: 0 0 _size(element-margin) 0;
+
+  &.search {
+    @include icon(false, solid);
+    position: relative;
+
+    &:before {
+      color: _palette(fg-light);
+      content: '\f002';
+      display: block;
+      height: _size(element-height);
+      left: 0;
+      line-height: _size(element-height);
+      position: absolute;
+      text-align: center;
+      top: 0;
+      width: 2.5em;
+    }
+
+    >input:first-child {
+      padding-left: 2.5em;
+    }
+  }
+}
+
+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"],
+select,
+textarea {
+  @include vendor('appearance', 'none');
+  background: _palette(border-bg);
+  border: none;
+  border: solid 1px _palette(border);
+  border-radius: 0;
+  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: inset 0 0 0 1px _palette(accent);
+  }
+}
+
+.select-wrapper {
+  @include icon(false, solid);
+  display: block;
+  position: relative;
+
+  &:before {
+    color: _palette(border);
+    content: '\f078';
+    display: block;
+    height: _size(element-height);
+    line-height: _size(element-height);
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: _size(element-height);
+  }
+
+  select::-ms-expand {
+    display: none;
+  }
+}
+
+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.25rem;
+  background-repeat: no-repeat;
+  background-position: calc(100% - 1rem) 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"],
+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(border-bg);
+      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 {}
+  }
+}
+
+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;
+}