jekyll-theme-future-imperfect 0.1.0

data/_includes/large_post_preview.html

@@ -0,0 +1,29 @@
+<article class="post">
+    {% assign author = site.authors | where: "short_name", post.author | first %}
+    <header>
+        <div class="title">
+            <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+            <p>{{ post.subtitle }}</p>
+        </div>
+        <div class="meta">
+            <time class="published"
+                datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
+            <a href="{{ author.url }}" class="author"><span class="name">{{ author.name }}</span><img
+                    src="/images/{{ author.short_name }}.jpg" alt="" /></a>
+        </div>
+    </header>
+    <a href="{{ post.url }}" class="image featured">
+        <img src="/images/{{ post.preview_image }}" alt="" />
+    </a>
+    <p>{{ post.excerpt }}</p>
+    <footer>
+        <ul class="actions">
+            <li><a href="{{ post.url }}" class="button large">Continue Reading</a></li>
+        </ul>
+        <ul class="stats">
+            <li><a href="#">General</a></li>
+            <li><a href="#" class="icon solid fa-heart">28</a></li>
+            <li><a href="#" class="icon solid fa-comment">128</a></li>
+        </ul>
+    </footer>
+</article>

data/_includes/list_post_preview.html

@@ -0,0 +1,12 @@
+<li>
+    <article>
+        <header>
+            <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
+            <time class="published"
+                datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
+        </header>
+        <a href="{{ post.url}} " class="image">
+            <img src="/images/{{ post.preview_image }}" alt="" />
+        </a>
+    </article>
+</li>

data/_includes/menu.html

@@ -0,0 +1,26 @@
+<section id="menu">
+    <!-- Search -->
+    <section>
+        <form class="search" method="get" action="#">
+            <input type="text" name="query" placeholder="Search" />
+        </form>
+    </section>
+
+    <!-- Links -->
+    <section>
+        <ul class="links">
+            {% for item in site.data.navigation %}
+            <li>
+                <a href="{{ item.link }}">{{ item.name }}</a>
+            </li>
+            {% endfor %}
+        </ul>
+    </section>
+
+    <!-- Actions -->
+    <section>
+        <ul class="actions stacked">
+            <li><a href="#" class="button large fit">Log In</a></li>
+        </ul>
+    </section>
+</section>

data/_includes/navigation.html

@@ -0,0 +1,23 @@
+<header id="header">
+    <h1><a href="/index.html">{{ site.title }}</a></h1>
+    <nav class="links">
+        <ul>
+            {% for item in site.data.navigation %}
+            <li><a href="{{ item.link }}">{{ item.name }}</a></li>
+            {% endfor %}
+        </ul>
+    </nav>
+    <nav class="main">
+        <ul>
+            <li class="search">
+                <a class="fa-search" href="#search">Search</a>
+                <form id="search" method="get" action="#">
+                    <input type="text" name="query" placeholder="Search" />
+                </form>
+            </li>
+            <li class="menu">
+                <a class="fa-bars" href="#menu">Menu</a>
+            </li>
+        </ul>
+    </nav>
+</header>

data/_includes/scripts.html

@@ -0,0 +1,6 @@
+<!-- Scripts -->
+<script src="/assets/js/jquery.min.js"></script>
+<script src="/assets/js/browser.min.js"></script>
+<script src="/assets/js/breakpoints.min.js"></script>
+<script src="/assets/js/util.js"></script>
+<script src="/assets/js/main.js"></script>

data/_includes/small_post_preview.html

@@ -0,0 +1,12 @@
+<!-- Mini Post -->
+<article class="mini-post">
+    <header>
+        <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
+        <time class="published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string}}</time>
+        {% assign author = site.authors | where: "short_name", post.author | first %}
+        <a href="{{ author.url }}" class="author"><img src="/images/{{ author.short_name }}.jpg" alt="" /></a>
+    </header>
+    <a href="{{ post.url }}" class="image">
+        <img src="images/{{ post.preview_image }}" />
+    </a>
+</article>

data/_layouts/author.html

@@ -0,0 +1,17 @@
+---
+layout: default
+---
+<h2>{{ page.name }}</h2>
+<h3>{{ page.position}}</h3>
+
+{{ content }}
+<hr />
+<h3>Posts</h3>
+<section>
+    <ul class="posts">
+        {% assign filtered_posts = site.posts | where: "author", page.short_name %}
+        {% for post in filtered_posts %}
+        {% include list_post_preview.html %}
+        {% endfor %}
+    </ul>
+</section>

data/_layouts/base.html

@@ -0,0 +1,35 @@
+---
+---
+<!-- Provides a common base for both index.html and the default layouts -->
+<!DOCTYPE HTML>
+<!--
+    Future Imperfect by HTML5 UP
+    html5up.net | @ajlkn
+    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+
+    <head>
+        <title>{{ page.title }}</title>
+        {% include head.html %}
+    </head>
+
+    {% if page.name != "index.html" %}
+    {% assign body_class = "single is-preload" %}
+    {% else %}
+    {% assign body_class = "is-preload" %}
+    {% endif %}
+
+    <body class="{{ body_class }}">
+        <!-- Wrapper -->
+        <div id="wrapper">
+            <!-- Header -->
+            {% include navigation.html %}
+            <!-- Menu -->
+            {% include menu.html %}
+            {{ content }}
+        </div>
+        {% include scripts.html %}
+    </body>
+
+</html>

data/_layouts/default.html

@@ -0,0 +1,17 @@
+---
+layout: base
+---
+<!DOCTYPE HTML>
+<!--
+    Future Imperfect by HTML5 UP
+    html5up.net | @ajlkn
+    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<!-- Main -->
+<div id="main">
+    <article class="post">
+        {{ content }}
+    </article>
+</div>
+<!-- Footer -->
+{% include footer.html %}

data/_layouts/post.html

@@ -0,0 +1,17 @@
+---
+layout: default
+---
+{% assign page_date = page.date | date_to_string %}
+<header>
+    <div class="title">
+        <h2><a href="#">{{ page.title }}</a></h2>
+        <p>{{ page.subtitle | markdownify }}</p>
+    </div>
+    <div class="meta">
+        <time class="published" datetime="{{ page_date | date_to_xmlschema }}">{{ page_date | date_to_string }}</time>
+        {% assign author = site.authors | where: "short_name", page.author | first %}
+        <a href="{{ author.url }}" class="author"><span class="name">{{ author.name }}</span><img
+                src="/images/{{ author.short_name }}.jpg" alt="" /></a>
+    </div>
+</header>
+{{ content }}

data/_sass/base/_page.scss

@@ -0,0 +1,54 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Basic */
+
+// MSIE: Required for IEMobile.
+@-ms-viewport {
+    width: device-width;
+}
+
+// MSIE: Prevents scrollbar from overlapping content.
+body {
+    -ms-overflow-style: scrollbar;
+}
+
+// Ensures page width is always >=320px.
+@include breakpoint('<=xsmall') {
+
+    html,
+    body {
+        min-width: 320px;
+    }
+}
+
+// Set box model to border-box.
+// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+body {
+    background: _palette(bg-alt);
+
+    // Stops initial animations until page loads.
+    &.is-preload {
+
+        *,
+        *:before,
+        *:after {
+            @include vendor('animation', 'none !important');
+            @include vendor('transition', 'none !important');
+        }
+    }
+
+}

data/_sass/base/_reset.scss

@@ -0,0 +1,159 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+body {
+  -webkit-text-size-adjust: none;
+}
+
+mark {
+  background-color: transparent;
+  color: inherit;
+}
+
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+input,
+select,
+textarea {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+}

data/_sass/base/_typography.scss

@@ -0,0 +1,180 @@
+///
+/// Future Imperfect by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Type */
+
+body,
+input,
+select,
+textarea {
+  color: _palette(fg);
+  font-family: _font(family);
+  font-size: 14pt;
+  font-weight: _font(weight);
+  line-height: 1.75;
+
+  @include breakpoint('<=xlarge') {
+    font-size: 12pt;
+  }
+
+  @include breakpoint('<=large') {
+    font-size: 12pt;
+  }
+
+  @include breakpoint('<=medium') {
+    font-size: 12pt;
+  }
+
+  @include breakpoint('<=small') {
+    font-size: 12pt;
+  }
+
+  @include breakpoint('<=xsmall') {
+    font-size: 12pt;
+  }
+}
+
+a {
+  @include vendor('transition', ('color #{_duration(transition)} ease',
+      'border-bottom-color #{_duration(transition)} ease'
+    ));
+  border-bottom: dotted 1px _palette(border-alt);
+  color: inherit;
+  text-decoration: none;
+
+  &:before {
+    @include vendor('transition', ('color #{_duration(transition)} ease'
+      ));
+  }
+
+  &:hover {
+    border-bottom-color: transparent;
+    color: _palette(accent) !important;
+
+    &:before {
+      color: _palette(accent) !important;
+    }
+  }
+}
+
+strong,
+b {
+  color: _palette(fg-bold);
+  font-weight: _font(weight-bold);
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+p {
+  margin: 0 0 _size(element-margin) 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: _palette(fg-bold);
+  font-family: _font(family-heading);
+  font-weight: _font(weight-heading-bold);
+  letter-spacing: _font(kerning-heading);
+  line-height: 1.65;
+  margin: 0 0 (_size(element-margin) * 0.5) 0;
+  text-transform: uppercase;
+
+  a {
+    color: inherit;
+    border-bottom: 0;
+  }
+}
+
+h2 {
+  font-size: 1.1em;
+}
+
+h3 {
+  font-size: 0.9em;
+}
+
+h4 {
+  font-size: 0.7em;
+}
+
+h5 {
+  font-size: 0.7em;
+}
+
+h6 {
+  font-size: 0.7em;
+}
+
+sub {
+  font-size: 0.8em;
+  position: relative;
+  top: 0.5em;
+}
+
+sup {
+  font-size: 0.8em;
+  position: relative;
+  top: -0.5em;
+}
+
+blockquote {
+  border-left: solid 4px _palette(border);
+  font-style: italic;
+  margin: 0 0 _size(element-margin) 0;
+  padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+}
+
+code {
+  background: _palette(border-bg);
+  border: solid 1px _palette(border);
+  font-family: _font(family-fixed);
+  font-size: 0.9em;
+  margin: 0 0.25em;
+  padding: 0.25em 0.65em;
+}
+
+pre {
+  -webkit-overflow-scrolling: touch;
+  font-family: _font(family-fixed);
+  font-size: 0.9em;
+  margin: 0 0 _size(element-margin) 0;
+
+  code {
+    display: block;
+    line-height: 1.75em;
+    padding: 1em 1.5em;
+    overflow-x: auto;
+  }
+}
+
+hr {
+  border: 0;
+  border-bottom: solid 1px _palette(border);
+  margin: _size(element-margin) 0;
+
+  &.major {
+    margin: (_size(element-margin) * 1.5) 0;
+  }
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}