Skip to content

Commit 0df8994

Browse files
barryclarkbarryclark
committed
Style Guide, and all markdown content styled
1 parent 9931bd1 commit 0df8994

10 files changed

+194
-57
lines changed

‎_config.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
#
44

55
# The name of your site
6-
name: Barry Clark
6+
name: Jekyll Boilerplate
77

88
# A short bio or description
9-
description: Short bio of description placeholder.
9+
description: Your blog with Jekyll—no setup required.
1010

1111
# A URL pointing to your avatar or profile pic
1212
# To use your Gravatar: (the one that GitHub uses for your profile pic)

‎_layouts/default.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@
2121

2222
<body>
2323
<header class="masthead">
24-
<img src="{{ site.avatar }}" class="avatar" />
24+
<a href="/" class="site-name"><img src="{{ site.avatar }}" class="avatar" /></a>
2525
<a href="/" class="site-name">{{ site.name }}</a>
2626
<p class="site-description">{{ site.description }}</p>
2727

2828
<nav>
2929
<a href="/">Blog</a>
30-
<a href="/about">About</a>
30+
<a href="/about">About Me</a>
3131
</nav>
3232

3333
<div style="clear:both;"></div>

‎_layouts/page.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
---
44

55
<article class="page">
6-
<header><h1>{{ page.title }}</h1></header>
6+
7+
<h1>{{ page.title }}</h1>
78

89
<div class="entry">
910
{{ content }}

‎_layouts/post.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@
77
<h1>{{ page.title }}</h1>
88
</header>
99

10+
<div class="date">
11+
{{ page.date | date: "%B %e, %Y" }}
12+
</div>
13+
1014
<div class="entry">
1115
{{ content }}
1216
</div>
1317

14-
<section id="comments">
18+
<div class="comments">
1519
{% include disqus.html disqus_identifier=page.disqus_identifier %}
16-
</section>
20+
</div>
1721
</article>

‎_posts/2014-2-2-Markdown-Cheatsheet.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
layout: post
3+
title: Markdown Style Guide
4+
---
5+
6+
A demo of all styled markdown elements in Jekyll Boilerplate.
7+
8+
This is a paragraph, it's surrounded by whitespace. Next up are some headers, they're heavily influenced by GitHub's markdown style.
9+
10+
## Header 2 (H1 is reserved for post titles)##
11+
### Header 3 ###
12+
#### Header 4 ####
13+
##### Header 5 #####
14+
15+
A link to [Jekyll Boilerplate](http://github.com/barryclark/jekyll-boilerplate/). A big ass literal link <http://github.com/barryclark/jekyll-boilerplate/>
16+
17+
An image, located within /images
18+
19+
![an image alt text](/images/omg-code.jpg "an image title")
20+
21+
* A bulletted list
22+
- alternative syntax 1
23+
+ alternative syntax 2
24+
- an indented list item
25+
26+
1. An
27+
2. ordered
28+
3. list
29+
30+
Inline markup styles:
31+
32+
- _italics_
33+
- **bold**
34+
- `code()`
35+
36+
> Blockquote
37+
>> Nested Blockquote
38+
39+
Code:
40+
41+
// Code is just text indented a bit
42+
which(is_easy) to_remember();
43+
44+
~~~
45+
46+
// Markdown extra adds un-indented code blocks too
47+
48+
if (this_is_more_code == true && !indented) {
49+
// tild wrapped code blocks, also not indented
50+
}
51+
52+
~~~
53+
54+
Use two trailing spaces
55+
on the right
56+
to create linebreak tags
57+
58+
Finally, horizontal lines
59+
60+
----
61+
****
62+
63+
Enjoy!

‎_posts/2014-2-3-Oh-hi.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
layout: post
3+
title: Oh, Hi!
4+
---
5+
6+
This is a demo site for Jekyll Boilerplate. It was made in just a few minutes—by forking [Jekyll Boilerplate](http://github.com/barryclark/jekyll-boilerplate/)!
7+
8+
Jekyll boilerplate is a starting point for creating your blog using Jekyll and GitHub Pages. It make it _really easy_.
9+
10+
Talk through benefits.

‎_posts/2014-4-4-Jekyll-The-Easy-Way.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ title: Jekyll The Easy Way
55

66
I just migrated my blog over to this Jekyll powered static site that you're currently reading. Finding a good workflow with Jekyll took me longer than I expected.
77

8-
When you understand how Jekyll works, it's _extremely_ fast to set up. However when learning I came across lot of articles, repos and stack overflow threads that made the setup much more complicated than it needs to be.
9-
108
![cool code image aww yea](/images/omg-code.jpg)
119

10+
When you understand how Jekyll works, it's _extremely_ fast to set up. However when learning I came across lot of articles, repos and stack overflow threads that made the setup much more complicated than it needs to be.
11+
1212
### Jekyll is built for one specific purpose
1313

1414
Tom Preston Warner of Github build Jekyll to [[INSERT HERE EXCERT FROM TPW's blog]]

‎index.html

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,16 @@
55
<div class="posts">
66
{% for post in site.posts %}
77
<article class="post">
8-
<header>
9-
<h1>{{ post.title }}</h1>
10-
</header>
8+
9+
<h1>{{ post.title }}</h1>
10+
11+
<div class="date">
12+
{{ post.date | date: "%B %e, %Y" }}
13+
</div>
1114

12-
<div class="entry">{{ post.content | truncatewords:40}}</div>
15+
<div class="entry">
16+
{{ post.content | truncatewords:40}}
17+
</div>
1318

1419
<a href="{{ post.url }}" class="read-more">Read More</a>
1520
</article>

‎scss/style.scss

Lines changed: 53 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,44 +28,44 @@ body {
2828
h1, h2, h3, h4, h5, h6 {
2929
font-family: $helveticaNeue;
3030
color: $darkerGray;
31-
font-weight: 400;
31+
font-weight: 500;
3232

3333
line-height: 1.7;
3434
margin: 1em 0 15px;
3535
padding: 0;
3636
}
3737

3838
h1 {
39-
font-size: 2.2rem;
39+
font-weight: 400;
40+
font-size: 35px;
4041
@include mobile {
41-
font-size: 2.2rem;
42+
font-size: 32px;
4243
}
4344
}
4445

4546
h2 {
46-
letter-spacing: 1px;
47-
font-weight: 300;
48-
49-
font-size: 1.7rem;
47+
font-size: 26px;
5048
@include mobile {
51-
font-size: 1.5rem;
49+
font-size: 24px;
5250
}
5351
}
5452

5553
h3 {
56-
font-weight: 600;
57-
58-
font-size: 1.2rem;
54+
font-size: 22px;
5955
@include mobile {
60-
font-size: 1.2rem;
56+
font-size: 20px;
6157
}
6258
}
6359

6460
h4 {
65-
font-size: 1rem;
66-
@include mobile {
67-
font-size: 1rem;
68-
}
61+
font-size: 18px;
62+
font-weight: 600;
63+
}
64+
65+
h5 {
66+
font-size: 18px;
67+
color: $gray;
68+
font-weight: 600;
6969
}
7070

7171
p {
@@ -81,15 +81,44 @@ a {
8181
}
8282
}
8383

84-
ul {
84+
ul, ol {
85+
margin: 15px 0;
8586
padding-left: 30px;
87+
}
88+
89+
ul {
8690
list-style-type: disc;
8791
}
8892

93+
ol {
94+
list-style-type: decimal;
95+
}
96+
97+
ol ul, ul ol, ul ul, ol ol {
98+
margin: 0;
99+
}
100+
101+
ul ul, ol ul {
102+
list-style-type: circle;
103+
}
104+
105+
em {
106+
font-style: italic;
107+
}
108+
109+
strong {
110+
font-weight: 600;
111+
}
112+
89113
img {
90114
max-width: 100%;
91115
}
92116

117+
.date {
118+
font-style: italic;
119+
color: $gray;
120+
}
121+
93122
// Specify the color of the selection
94123
::-moz-selection {
95124
color: $black;
@@ -110,9 +139,9 @@ img {
110139
//
111140

112141
.masthead {
113-
margin: 20px 0 70px;
142+
margin: 20px 0 30px;
114143
padding-bottom: 20px;
115-
border-bottom: 2px solid $darkGray;
144+
border-bottom: 1px dotted $lightGray;
116145
}
117146

118147
.avatar {
@@ -144,16 +173,17 @@ img {
144173

145174
.site-description {
146175
float: left;
176+
font-size: 14px;
147177
display: none;
148178
}
149179

150180
nav {
151181
float: right;
152182

153183
font-family: $helveticaNeue;
154-
font-size: 1.1rem;
184+
font-size: 18px;
155185
@include mobile {
156-
font-size: 1rem;
186+
font-size: 18px;
157187
}
158188

159189
// nav has it's own link highlighting
@@ -192,7 +222,7 @@ nav {
192222
.post {
193223
blockquote {
194224
border-left: 2px solid $gray;
195-
font-size: 1.2em;
225+
font-size: 22px;
196226
font-style: italic;
197227
margin: 1.8em .8em;
198228
padding: 0.1em 1em;
@@ -202,5 +232,5 @@ nav {
202232

203233
footer {
204234
// border-top: 1px $lightGray solid;
205-
padding: 1rem 0;
235+
padding: 20px 0;
206236
}

0 commit comments

Comments
 (0)