jekyll-theme-future-imperfect 0.1.0

data/_sass/components/_icon.scss

@@ -0,0 +1,41 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* 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';
+    }
+  }
+
+  &.prefix {}
+
+  &.suffix {
+    &:before {
+      float: right;
+    }
+  }
+}

data/_sass/components/_icons.scss

@@ -0,0 +1,30 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icons */
+
+ul.icons {
+  cursor: default;
+  list-style: none;
+  padding-left: 0;
+
+  li {
+    display: inline-block;
+    padding: 0 1em 0 0;
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    >* {
+      border: 0;
+
+      .label {
+        display: none;
+      }
+    }
+  }
+}

data/_sass/components/_image.scss

@@ -0,0 +1,72 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Image */
+
+.image {
+  border: 0;
+  display: inline-block;
+  position: relative;
+
+  img {
+    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 {
+    display: block;
+    margin: 0 0 _size(element-margin) 0;
+    width: 100%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &.featured {
+    display: block;
+    margin: 0 0 _size(section-spacing) 0;
+    width: 100%;
+
+    img {
+      width: 100%;
+    }
+
+    @include breakpoint('<=small') {
+      margin: 0 0 _size(section-spacing-small) 0;
+    }
+  }
+
+  &.main {
+    display: block;
+    margin: 0 0 (_size(element-margin) * 1.5) 0;
+    width: 100%;
+
+    img {
+      width: 100%;
+    }
+  }
+}

data/_sass/components/_list.scss

@@ -0,0 +1,56 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* List */
+
+ol {
+  list-style: decimal;
+  margin: 0 0 _size(element-margin) 0;
+  padding-left: 1.25em;
+
+  li {
+    padding-left: 0.25em;
+  }
+}
+
+ul {
+  list-style: disc;
+  margin: 0 0 _size(element-margin) 0;
+  padding-left: 1em;
+
+  li {
+    padding-left: 0.5em;
+  }
+
+  &.alt {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      border-top: solid 1px _palette(border);
+      padding: 0.5em 0;
+
+      &:first-child {
+        border-top: 0;
+        padding-top: 0;
+      }
+    }
+  }
+}
+
+dl {
+  margin: 0 0 _size(element-margin) 0;
+
+  dt {
+    display: block;
+    font-weight: _font(weight-bold);
+    margin: 0 0 (_size(element-margin) * 0.5) 0;
+  }
+
+  dd {
+    margin-left: _size(element-margin);
+  }
+}

data/_sass/components/_mini-post.scss

@@ -0,0 +1,87 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Mini Post */
+
+.mini-post {
+  @include vendor('display', 'flex');
+  @include vendor('flex-direction', 'column-reverse');
+  background: _palette(bg);
+  border: solid 1px _palette(border);
+  margin: 0 0 _size(element-margin) 0;
+
+  .image {
+    overflow: hidden;
+    width: 100%;
+
+    img {
+      @include vendor('transition', 'transform #{_duration(transition)} ease-out');
+      width: 100%;
+    }
+
+    &:hover {
+      img {
+        @include vendor('transform', 'scale(1.05)');
+      }
+    }
+  }
+
+  header {
+    @include padding(1.25em, 1.25em, (0, 3em, 0, 0));
+    min-height: 4em;
+    position: relative;
+    @include vendor('flex-grow', '1');
+
+    h3 {
+      font-size: 0.7em;
+    }
+
+    .published {
+      display: block;
+      font-family: _font(family-heading);
+      font-size: 0.6em;
+      font-weight: _font(weight-heading);
+      letter-spacing: _font(kerning-heading);
+      margin: -0.625em 0 (_size(element-margin) * 0.85) 0;
+      text-transform: uppercase;
+    }
+
+    .author {
+      position: absolute;
+      right: 2em;
+      top: 2em;
+    }
+  }
+}
+
+.mini-posts {
+  margin: 0 0 _size(element-margin) 0;
+
+  @include breakpoint('<=large') {
+    @include vendor('display', 'flex');
+    @include vendor('flex-wrap', 'wrap');
+    width: calc(100% + #{_size(element-margin)});
+
+    >* {
+      margin: _size(element-margin) _size(element-margin) 0 0;
+      width: calc(50% - #{_size(element-margin)});
+    }
+
+    > :nth-child(-n + 2) {
+      margin-top: 0;
+    }
+  }
+
+  @include breakpoint('<=xsmall') {
+    display: block;
+    width: 100%;
+
+    >* {
+      margin: 0 0 _size(element-margin) 0;
+      width: 100%;
+    }
+  }
+}

data/_sass/components/_post.scss

@@ -0,0 +1,247 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Post */
+
+.post {
+  @include padding(_size(section-spacing), _size(section-spacing));
+  background: _palette(bg);
+  border: solid 1px _palette(border);
+  margin: 0 0 _size(section-spacing) 0;
+  position: relative;
+
+  >header {
+    @include vendor('display', 'flex');
+    border-bottom: solid 1px _palette(border);
+    left: (_size(section-spacing) * -1);
+    margin: (_size(section-spacing) * -1) 0 _size(section-spacing) 0;
+    position: relative;
+    width: calc(100% + #{_size(section-spacing) * 2});
+
+    .title {
+      @include vendor('flex-grow', '1');
+      -ms-flex: 1;
+      padding: (_size(section-spacing) * 1.25) _size(section-spacing) (_size(section-spacing) * 1.1) _size(section-spacing);
+
+      h2 {
+        font-weight: _font(weight-heading-extrabold);
+        font-size: 1.5em;
+      }
+
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .meta {
+      @include padding(_size(section-spacing) * 1.25, _size(section-spacing));
+      border-left: solid 1px _palette(border);
+      min-width: 17em;
+      text-align: right;
+      width: 17em;
+
+      >* {
+        margin: 0 0 (_size(element-margin) * 0.5) 0;
+      }
+
+      > :last-child {
+        margin-bottom: 0;
+      }
+
+      .published {
+        color: _palette(fg-bold);
+        display: block;
+        font-family: _font(family-heading);
+        font-size: 0.7em;
+        font-weight: _font(weight-heading-bold);
+        letter-spacing: _font(kerning-heading);
+        margin-top: 0.5em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  >a.image.featured {
+    overflow: hidden;
+
+    img {
+      @include vendor('transition', 'transform #{_duration(transition)} ease-out');
+    }
+
+    &:hover {
+      img {
+        @include vendor('transform', 'scale(1.05)');
+      }
+    }
+  }
+
+  >footer {
+    @include vendor('display', 'flex');
+    @include vendor('align-items', 'center');
+
+    .actions {
+      @include vendor('flex-grow', '1');
+    }
+
+    .stats {
+      cursor: default;
+      list-style: none;
+      padding: 0;
+
+      li {
+        border-left: solid 1px _palette(border);
+        display: inline-block;
+        font-family: _font(family-heading);
+        font-size: 0.6em;
+        font-weight: _font(weight-heading);
+        letter-spacing: _font(kerning-heading);
+        line-height: 1;
+        margin: 0 0 0 2em;
+        padding: 0 0 0 2em;
+        text-transform: uppercase;
+
+        &:first-child {
+          border-left: 0;
+          margin-left: 0;
+          padding-left: 0;
+        }
+
+        .icon {
+          border-bottom: 0;
+
+          &:before {
+            color: _palette(border);
+            margin-right: 0.75em;
+          }
+        }
+      }
+    }
+  }
+
+  @include breakpoint('<=medium') {
+    border-left: 0;
+    border-right: 0;
+    left: _size(section-spacing) * -1;
+    width: calc(100% + (#{_size(section-spacing)} * 2));
+
+    >header {
+      @include vendor('flex-direction', 'column');
+      @include padding(_size(section-spacing) * 1.25, _size(section-spacing), (0, 0, -0.5em, 0));
+      border-left: 0;
+
+      .title {
+        -ms-flex: 0 1 auto;
+        margin: 0 0 _size(element-margin) 0;
+        padding: 0;
+        text-align: center;
+      }
+
+      .meta {
+        @include vendor('align-items', 'center');
+        @include vendor('display', 'flex');
+        @include vendor('justify-content', 'center');
+        border-left: 0;
+        margin: 0 0 _size(element-margin) 0;
+        padding-top: 0;
+        padding: 0;
+        text-align: left;
+        width: 100%;
+
+        >* {
+          border-left: solid 1px _palette(border);
+          margin-left: 2em;
+          padding-left: 2em;
+        }
+
+        > :first-child {
+          border-left: 0;
+          margin-left: 0;
+          padding-left: 0;
+        }
+
+        .published {
+          margin-bottom: 0;
+          margin-top: 0;
+        }
+
+        .author {
+          @include vendor('flex-direction', 'row-reverse');
+          margin-bottom: 0;
+
+          .name {
+            margin: 0 0 0 1.5em;
+          }
+
+          img {
+            width: 3.5em;
+          }
+        }
+      }
+    }
+  }
+
+  @include breakpoint('<=small') {
+    @include padding(_size(section-spacing-small), _size(section-spacing-small));
+    left: _size(section-spacing-small) * -1;
+    margin: 0 0 _size(element-margin) 0;
+    width: calc(100% + (#{_size(section-spacing-small)} * 2));
+
+    >header {
+      @include padding(_size(section-spacing-small) * 2, _size(section-spacing-small), (0, 0, -0.5em, 0));
+      left: (_size(section-spacing-small) * -1);
+      margin: (_size(section-spacing-small) * -1) 0 _size(section-spacing-small) 0;
+      width: calc(100% + #{_size(section-spacing-small) * 2});
+
+      .title {
+        h2 {
+          font-size: 1.1em;
+        }
+      }
+    }
+  }
+
+  @include breakpoint('<=xsmall') {
+    >header {
+      .meta {
+        @include vendor('align-items', 'center');
+        @include vendor('flex-direction', 'column');
+
+        >* {
+          border-left: 0;
+          margin: (_size(element-margin) * 0.5) 0 0 0;
+          padding-left: 0;
+        }
+
+        .author {
+          .name {
+            display: none;
+          }
+        }
+      }
+    }
+
+    >.image.featured {
+      margin-left: _size(section-spacing-small) * -1;
+      margin-top: calc(#{_size(section-spacing-small) * -1} - 1px);
+      width: calc(100% + #{_size(section-spacing-small) * 2});
+    }
+
+    >footer {
+      @include vendor('align-items', 'stretch');
+      @include vendor('flex-direction', 'column-reverse');
+
+      .stats {
+        text-align: center;
+
+        li {
+          margin: 0 0 0 1.25em;
+          padding: 0 0 0 1.25em;
+        }
+      }
+    }
+  }
+}