List of all entries on the main page
Signed-off-by: Valentin Popov <valentineus@gmail.com>
This commit is contained in:
Valentin Popov
parent
a02864e005
commit
cf2658dd1a
155
_pages/index.md
155
_pages/index.md
@ -1,140 +1,31 @@
|
|||||||
---
|
---
|
||||||
permalink: "/index.html"
|
permalink: "/index.html"
|
||||||
layout: page
|
layout: default
|
||||||
sidebar: false
|
|
||||||
id: index
|
|
||||||
title: "Home"
|
title: "Home"
|
||||||
|
id: index
|
||||||
---
|
---
|
||||||
|
|
||||||
There is a significant amount of subtle, yet precisely calibrated, styling to ensure that your content is emphasized while still looking aesthetically pleasing.
|
<div class="page">
|
||||||
|
<div class="posts">
|
||||||
|
{% for node in site.posts %}
|
||||||
|
<div class="post">
|
||||||
|
<!-- Date -->
|
||||||
|
<span class="post-date">
|
||||||
|
{{ node.latest_update | default: node.date | date_to_long_string }}
|
||||||
|
</span>
|
||||||
|
|
||||||
All links are easy to [locate and discern](/), yet don't detract from the [harmony of a paragraph](/).
|
<!-- Header -->
|
||||||
The _same_ goes for italics and __bold__ elements.
|
<h1 class="post-title">
|
||||||
Even the the strikeout works if <del>for some reason you need to update your post</del>.
|
<a href="{{ node.url | relative_url | uri_escape }}">
|
||||||
For consistency's sake, <ins>The same goes for insertions</ins>, of course.
|
{{ node.title | smartify | strip_html | normalize_whitespace }}
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
### Code, with syntax highlighting
|
<!-- Content -->
|
||||||
|
<span class="post-date">
|
||||||
Here's an example of some ruby code with line anchors.
|
{{ node.description | smartify | strip_html | normalize_whitespace }}
|
||||||
|
</span>
|
||||||
{% highlight ruby lineanchors %}
|
</div>
|
||||||
# The most awesome of classes
|
{% endfor %}
|
||||||
class Awesome < ActiveRecord::Base
|
</div>
|
||||||
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>
|
</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
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 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.
|
|
||||||
Loading…
Reference in New Issue
Block a user