jekyll-theme-eventually 0.1.0

data/_sass/components/_form.scss

@@ -0,0 +1,226 @@
+///
+/// Eventually 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;
+
+  .message {
+    @include icon;
+    @include vendor('transition', (
+      'opacity #{_duration(transition)} ease-in-out',
+      'transform #{_duration(transition)} ease-in-out'
+    ));
+    @include vendor('transform', 'scale(1.05)');
+    height: _size(element-height);
+    line-height: _size(element-height);
+    opacity: 0;
+
+    &:before {
+      margin-right: 0.5em;
+    }
+
+    &.visible {
+      @include vendor('transform', 'scale(1)');
+      opacity: 1;
+    }
+
+    &.success {
+      color: _palette(positive, bg);
+
+      &:before {
+        content: '\f00c';
+      }
+    }
+
+    &.failure {
+      color: _palette(negative, bg);
+
+      &:before {
+        content: '\f119';
+      }
+    }
+  }
+}
+
+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;
+}
+
+@include keyframes(focus) {
+  0% { @include vendor('transform', 'scale(1)'); }
+  50% { @include vendor('transform', 'scale(1.025)'); }
+  100% { @include vendor('transform', 'scale(1)'); }
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+select,
+textarea {
+  @include vendor('appearance', 'none');
+  @include vendor('transform', 'scale(1)');
+  @include vendor('transition', (
+    'border-color #{_duration(transition)} ease',
+    'background-color #{_duration(transition)} ease'
+  ));
+  background-color: transparent;
+  border-radius: _size(border-radius);
+  border: none;
+  border: solid _size(border-width) _palette(border);
+  color: inherit;
+  display: block;
+  outline: 0;
+  padding: 0 1em;
+  text-decoration: none;
+  width: 100%;
+
+  &:invalid {
+    box-shadow: none;
+  }
+
+  &:focus {
+    @include vendor('animation', 'focus 0.1s');
+    background-color: _palette(border-bg);
+    border-color: _palette(accent, bg);
+  }
+}
+
+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;
+    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-radius: _size(border-radius);
+      border: solid _size(border-width) _palette(border);
+      content: '';
+      display: inline-block;
+      height: (_size(element-height) * 0.6);
+      left: 0;
+      line-height: (_size(element-height) * 0.575);
+      position: absolute;
+      text-align: center;
+      top: 0;
+      width: (_size(element-height) * 0.6);
+    }
+  }
+
+  &:checked + label {
+    &:before {
+      background: _palette(accent, bg);
+      border-color: _palette(accent, bg);
+      color: _palette(accent, fg-bold);
+      content: '\f00c';
+    }
+  }
+
+  &:focus + label {
+    &:before {
+      border-color: _palette(accent, bg);
+      box-shadow: 0 0 0 _size(border-width) _palette(accent, bg);
+    }
+  }
+}
+
+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;
+}
+
+.formerize-placeholder {
+  color: _palette(fg-light) !important;
+  opacity: 1.0;
+}

data/_sass/components/_icon.scss

@@ -0,0 +1,17 @@
+///
+/// Eventually 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;
+  }
+}

data/_sass/components/_icons.scss

@@ -0,0 +1,32 @@
+///
+/// Eventually 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;
+    }
+
+    .icon {
+      &:before {
+        font-size: 1.25em;
+      }
+    }
+
+    a {
+      color: inherit;
+    }
+  }
+}

data/_sass/components/_list.scss

@@ -0,0 +1,27 @@
+///
+/// Eventually 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;
+  }
+}

data/_sass/components/_section.scss

@@ -0,0 +1,59 @@
+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Section/Article */
+
+section, article {
+  &.special {
+    text-align: center;
+  }
+}
+
+header {
+  p {
+    color: _palette(fg-light);
+    position: relative;
+    margin: 0 0 (_size(element-margin) * 0.75) 0;
+  }
+
+  h2 + p {
+    font-size: 1.25em;
+    margin-top: (_size(element-margin) * -0.5);
+    line-height: 1.5em;
+  }
+
+  h3 + p {
+    font-size: 1.1em;
+    margin-top: (_size(element-margin) * -0.4);
+    line-height: 1.5em;
+  }
+
+  h4 + p,
+  h5 + p,
+  h6 + p {
+    font-size: 0.9em;
+    margin-top: (_size(element-margin) * -0.3);
+    line-height: 1.5em;
+  }
+
+  @include breakpoint('<=medium') {
+    br {
+      display: none;
+    }
+  }
+
+  @include breakpoint('<=small') {
+    br {
+      display: inline;
+    }
+  }
+
+  @include breakpoint('<=xsmall') {
+    br {
+      display: none;
+    }
+  }
+}

data/_sass/eventually.scss

@@ -0,0 +1,49 @@
+@charset "utf-8";
+
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'font-awesome.min.css';
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
+
+/*
+  Eventually by HTML5 UP
+  html5up.net | @ajlkn
+  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+// Breakpoints.
+
+@include breakpoints((
+  xlarge:   ( 1281px,  1680px ),
+  large:    ( 981px,   1280px ),
+  medium:   ( 737px,   980px  ),
+  small:    ( 481px,   736px  ),
+  xsmall:   ( 361px,   480px  ),
+  xxsmall:  ( null,    360px  ),
+  short:    '(max-height: 640px)'
+));
+
+// Base.
+
+@import 'base/reset';
+@import 'base/page';
+@import 'base/bg';
+@import 'base/typography';
+
+// Components.
+
+@import 'components/section';
+@import 'components/icon';
+@import 'components/list';
+@import 'components/icons';
+@import 'components/form';
+@import 'components/button';
+
+// Layout.
+
+@import 'layout/header';
+@import 'layout/signup-form';
+@import 'layout/footer';

data/_sass/layout/_footer.scss

@@ -0,0 +1,74 @@
+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Footer */
+
+#footer {
+  @include vendor('transition', 'opacity 0.5s ease-in-out');
+  bottom: 4em;
+  color: _palette(fg-light);
+  left: 4em;
+  opacity: 0.5;
+  position: absolute;
+
+  .icons {
+    margin: 0 0 (_size(element-margin) * 0.25) 0;
+  }
+
+  .copyright {
+    font-size: 0.8em;
+    list-style: none;
+    padding: 0;
+
+    li {
+      border-left: solid 1px _palette(border2);
+      display: inline-block;
+      line-height: 1em;
+      margin: 0 0 0 0.75em;
+      padding: 0 0 0 0.75em;
+
+      &:first-child {
+        border-left: 0;
+        margin-left: 0;
+        padding-left: 0;
+      }
+    }
+
+    a {
+      color: inherit;
+    }
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  @include breakpoint('<=xlarge') {
+    bottom: 3.5em;
+    left: 3.5em;
+  }
+
+  @include breakpoint('<=small') {
+    bottom: 2em;
+    left: 2em;
+  }
+
+  @include breakpoint('<=xxsmall') {
+    bottom: 1.25em;
+    left: 1.25em;
+  }
+
+  @include breakpoint('short') {
+    bottom: auto;
+    left: auto;
+    margin: (_size(element-margin) * 0.5) 0 0 0;
+    position: relative;
+  }
+}

data/_sass/layout/_header.scss

@@ -0,0 +1,37 @@
+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+#header {
+  h1 {
+    font-size: 3.25em;
+    margin: 0 0 (_size(element-margin) * 0.275) 0;
+  }
+
+  p {
+    font-size: 1.35em;
+    line-height: 1.65em;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  @include breakpoint('<=small') {
+    h1 {
+      font-size: 2em;
+    }
+
+    p {
+      font-size: 1em;
+    }
+  }
+
+  @include breakpoint('<=xsmall') {
+    margin: 0 0 (_size(element-margin) * 0.5) 0;
+  }
+}

data/_sass/layout/_signup-form.scss

@@ -0,0 +1,50 @@
+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Signup Form */
+
+#signup-form {
+  @include vendor('display', 'flex');
+  position: relative;
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"] {
+    width: 18em;
+  }
+
+  > * {
+    margin: 0 0 0 1em;
+  }
+
+  > :first-child {
+    margin: 0 0 0 0;
+  }
+
+  @include breakpoint('<=xsmall') {
+    @include vendor('flex-direction', 'column');
+
+    input[type="type"],
+    input[type="password"],
+    input[type="email"] {
+      width: 100%;
+    }
+
+    > * {
+      margin: 1.25em 0 0 0;
+    }
+
+    .message {
+      bottom: -1.5em;
+      font-size: 0.9em;
+      height: 1em;
+      left: 0;
+      line-height: inherit;
+      margin-top: 0;
+      position: absolute;
+    }
+  }
+}