examples.html

+---
+layout: default
+permalink: examples
+---
+
+<section>
+  <h1>Examples</h1>
+
+  <p>
+    This is more like an example page with different widgets.
+  </p>
+</section>
+
+<section>
+  <h2>Posts</h2>
+
+  {% for post in site.posts %}
+    {% assign nth = forloop.index0 | modulo:2 %}
+    <div class="media">
+
+      {% if nth == 0 %}
+      <div class="t-hackcss-media-shift media-left">
+        <img class="t-hackcss-media-image"
+             src="{{ post.image_preview }}" alt="{{ post.title }}"
+             title="{{ post.title }}" />
+      </div>
+      {% endif %}
+
+      <div class="media-body">
+        <div class="media-heading">
+          <span>{{ post.date | date_to_string }} &raquo;
+            {% if post.external_url %}
+              <a href="{{ post.external_url }}" target="_blank" title="{{ project.name }}">
+                {{ post.title }}
+              </a>
+            {% else %}
+              <a href="{{ post.url | prepend: site.baseurl }}" title="{{ project.name }}">
+                {{ post.title }}
+              </a>
+            {% endif %}
+          </span>
+        </div>
+        <div class="media-content">
+          {{ post.short_description }}
+        </div>
+      </div>
+
+      {% if nth == 1 %}
+      <div class="t-hackcss-media-shift media-right">
+        <img class="t-hackcss-media-image"
+             src="{{ post.image_preview }}" alt="{{ post.title }}"
+             title="{{ post.title }}" />
+      </div>
+      {% endif %}
+    </div>
+  {% endfor %}
+</section>
+
+<section>
+
+  <h2>Cards</h2>
+
+  <div class="grid t-hackcss-cards">
+
+    {% for project in site.projects %}
+
+    <div class="cell -6of12 t-hackcss-cards-cell">
+      <div class="card">
+        <header class="card-header">{{ project.name }}</header>
+        <div class="card-content">
+          <div class="inner">
+
+            {% if project.image %}
+            <img src="{{ project.image }}" class="t-hackcss-cards-image"
+                 alt="{{ project.name }}"
+                 title="{{ project.name }}" />
+            {% endif %}
+
+            <p class="t-hackcss-cards-text">{{ project.description }}</p>
+            <p class="t-hackcss-cards-link">
+              <a href="{{ project.link }}" title="{{ project.name }}" target="_blank">
+                 {{ project.name }}
+               </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    {% endfor %}
+
+  </div>
+</section>

feed.xml

+---
+layout: null
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ site.title | xml_escape }}</title>
+    <description>{{ site.description | xml_escape }}</description>
+    <link>{{ site.url }}{{ site.baseurl }}/</link>
+    <atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
+    <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
+    <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
+    <generator>Jekyll v{{ jekyll.version }}</generator>
+    {% for post in site.posts limit:10 %}
+      <item>
+        <title>{{ post.title | xml_escape }}</title>
+        <description>{{ post.content | xml_escape }}</description>
+        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
+        <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
+        <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
+        {% for tag in post.tags %}
+        <category>{{ tag | xml_escape }}</category>
+        {% endfor %}
+        {% for cat in post.categories %}
+        <category>{{ cat | xml_escape }}</category>
+        {% endfor %}
+      </item>
+    {% endfor %}
+  </channel>
+</rss>

index.html

+---
+layout: default
+---
+
+<div>
+
+  <section>
+    <h1>Jekyll theme based on hack.css</h1>
+
+    <p>
+      Mobile-ready, modern, stylish, simple.
+    </p>
+  </section>
+
+  <section>
+    <h2>What is Jekyll?</h2>
+
+    <p>
+      <code>Jekyll</code> is a simple, blog-aware, static site generator
+      perfect for personal, project,
+      or organization sites. Think of it like a
+      file-based CMS, without all the complexity.
+      <code>Jekyll</code> takes your content, renders Markdown
+      and Liquid templates, and spits out a
+      complete, static website ready to be served by Apache,
+      Nginx or another web server.
+      <code>Jekyll</code> is the engine behind GitHub Pages,
+      which you can use to host sites right
+      from your GitHub repositories.
+    </p>
+  </section>
+
+  <section>
+    <h2>What is hack.css?</h2>
+
+    <p>
+      <code>hack.css</code> is a dead simple css framework. Chech out
+      <a href="http://hackcss.com/">hackcss.com</a> to know more.
+    </p>
+  </section>
+
+  <section>
+    <h2>Getting started</h2>
+
+    <p>
+      <ol>
+        <li>Make sure you have <code>Jekyll</code> up and running</li>
+        <li>Clone
+          <a href="https://github.com/wemake-services/jekyll-theme-hackcss">this repository</a>
+        </li>
+        <li>Customize it</li>
+        <li>Push to <a href="https://pages.github.com/">gh-pages</a></li>
+      </ol>
+
+    </p>
+  </section>
+
+  <section>
+    <h2>Subscribe</h2>
+
+    <p>
+      subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a>
+    </p>
+  </section>
+
+</div>