1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
permalink: "about.html"
title: "About"
layout: page
show: true
---
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]({{ site.baseurl | uri_escape }}),
yet don't detract from the
[harmony of a paragraph]({{ site.baseurl | uri_escape }}).
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.
```ruby
# 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
```
Here's some CSS:
```css
.foobar {
/* Named colors rule */
color: tomato;
}
```
Here's some JavaScript:
```js
var isPresent = require('is-present')
module.exports = function doStuff(things) {
if (isPresent(things)) {
doOtherStuff(things)
}
}
```
Here's some HTML:
```html
<div class="m0 p0 bg-blue white">
<h3 class="h1">Hello, world!</h3>
</div>
```
# 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/valentineus/valentineus.github.io)
to request, or add, features.
Happy writing.
---
[^1]: Important information that may distract from the main text can go in footnotes.
|
