aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorValentin Popov <valentineus@gmail.com>2018-04-04 00:56:25 +0300
committerValentin Popov <valentineus@gmail.com>2018-04-04 00:56:25 +0300
commit74b4b3f035720225895bbc2a047e6f83b5c888b3 (patch)
tree827416350309ab34fdf399b9e480239f8b61e9c0
parentc94a92c52fe23fd85bcdaf82b772a3777c5a2205 (diff)
downloadpopov.link-74b4b3f035720225895bbc2a047e6f83b5c888b3.tar.xz
popov.link-74b4b3f035720225895bbc2a047e6f83b5c888b3.zip
Home page template
Signed-off-by: Valentin Popov <valentineus@gmail.com>
-rw-r--r--_pages/index.md140
-rw-r--r--index.html32
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
+
+![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. \ 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">&#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>