diff options
| -rw-r--r-- | _pages/index.md | 140 | ||||
| -rw-r--r-- | index.html | 32 |
2 files changed, 140 insertions, 32 deletions
diff --git a/_pages/index.md b/_pages/index.md new file mode 100644 index 0000000..d0f65ae --- /dev/null +++ b/_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 + + + +### 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.
\ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index ce4965c..0000000 --- a/index.html +++ /dev/null @@ -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">←</a> - {% endif %} - - {% if paginator.next_page %} - <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="right arrow">→</a> - {% endif %} - - <span>{{ paginator.page }}</span> -</div> |