Home page template

Signed-off-by: Valentin Popov <valentineus@gmail.com>

_pages/index.md

@@ -0,0 +1,140 @@
+---
+permalink:  "/index.html"
+layout:     page
+sidebar:    false
+id:         index
+title:      "Home"
+---
+
+There is a significant amount of subtle, yet precisely calibrated, styling to ensure that your content is emphasized while still looking aesthetically pleasing.
+
+All links are easy to [locate and discern](/), yet don't detract from the [harmony of a paragraph](/).
+The _same_ goes for italics and __bold__ elements.
+Even the the strikeout works if <del>for some reason you need to update your post</del>.
+For consistency's sake, <ins>The same goes for insertions</ins>, of course.
+
+### Code, with syntax highlighting
+
+Here's an example of some ruby code with line anchors.
+
+{% highlight ruby lineanchors %}
+    # The most awesome of classes
+    class Awesome < ActiveRecord::Base
+        include EvenMoreAwesome
+
+        validates_presence_of :something
+        validates :email, email_format: true
+
+        def initialize(email, name = nil)
+            self.email = email
+            self.name = name
+            self.favorite_number = 12
+            puts 'created awesomeness'
+        end
+
+        def email_format
+            email =~ /\S+@\S+\.\S+/
+        end
+    end
+{% endhighlight %}
+
+Here's some CSS:
+
+{% highlight css %}
+    .foobar {
+        /* Named colors rule */
+        color: tomato;
+    }
+{% endhighlight %}
+
+Here's some JavaScript:
+
+{% highlight js %}
+    var isPresent = require('is-present')
+
+    module.exports = function doStuff(things) {
+        if (isPresent(things)) {
+            doOtherStuff(things)
+        }
+    }
+{% endhighlight %}
+
+Here's some HTML:
+
+{% highlight html %}
+    <div class="m0 p0 bg-blue white">
+        <h3 class="h1">Hello, world!</h3>
+    </div>
+{% endhighlight %}
+
+# Headings!
+
+They're responsive, and well-proportioned (in `padding`, `line-height`, `margin`, and `font-size`).
+They also heavily rely on the awesome utility, [BASSCSS](http://www.basscss.com/).
+
+##### They draw the perfect amount of attention
+
+This allows your content to have the proper informational and contextual hierarchy.
+Yay.
+
+### There are lists, too
+
+* Apples
+* Oranges
+* Potatoes
+* Milk
+
+1. Mow the lawn
+2. Feed the dog
+3. Dance
+
+### Images look great, too
+
+![desk](https://cloud.githubusercontent.com/assets/1424573/3378137/abac6d7c-fbe6-11e3-8e09-55745b6a8176.png)
+
+### There are also pretty colors
+
+Also the result of
+[BASSCSS](http://www.basscss.com/),
+you can
+<span class="bg-dark-gray white">highlight</span>
+certain components of a
+<span class="red">post</span>
+<span class="mid-gray">with</span>
+<span class="green">CSS</span>
+<span class="orange">classes</span>.
+
+I don't recommend using blue, though. It looks like a
+<span class="blue">link</span>.
+
+### Footnotes!
+
+Markdown footnotes are supported, and they look great!
+Simply put e.g. `[^1]` where you want the footnote to appear,[^1] and then add the reference at the end of your markdown.
+
+### Stylish blockquotes included
+
+You can use the markdown quote syntax, `>` for simple quotes.
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Suspendisse quis porta mauris.
+
+However, you need to inject html if you'd like a citation footer.
+I will be working on a way to hopefully sidestep this inconvenience.
+
+<blockquote>
+    <p>Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.</p>
+    <footer><cite title="Antoine de Saint-Exupéry">Antoine de Saint-Exupéry</cite></footer>
+</blockquote>
+
+### There's more being added all the time
+
+Checkout the
+[Github repository](https://github.com/johnotander/pixyll)
+to request, or add, features.
+
+Happy writing.
+
+---
+
+[^1]: Important information that may distract from the main text can go in footnotes.

index.html

@@ -1,32 +0,0 @@
----
-layout: default
-title: Home
----
-
-<div class="catalogue">
-    {% for post in paginator.posts %}
-        <a href="{{ post.url | prepend: site.baseurl }}" class="catalogue-item">
-            <div>
-                <time datetime="{{ post.date }}" class="catalogue-time">{{ post.date | date: "%B %d, %Y" }}</time>
-                <h1 class="catalogue-title">{{ post.title }}</h1>
-                <div class="catalogue-line"></div>
-
-                <p>
-                    {{ post.content | truncatewords: 30 | strip_html }}
-                </p>
-            </div>
-        </a>
-    {% endfor %}
-</div>
-
-<div class="pagination">
-    {% if paginator.previous_page %}
-        <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="left arrow">&#8592;</a>
-    {% endif %}
-
-    {% if paginator.next_page %}
-        <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="right arrow">&#8594;</a>
-    {% endif %}
-
-    <span>{{ paginator.page }}</span>
-</div>