Style Guide, and all markdown content styled

This commit is contained in:
Barry Clark 2014-02-17 20:34:55 -05:00
parent 9931bd1ed2
commit 0df8994e5f
10 changed files with 194 additions and 57 deletions

View file

@ -3,10 +3,10 @@
#
# The name of your site
name: Barry Clark
name: Jekyll Boilerplate
# A short bio or description
description: Short bio of description placeholder.
description: Your blog with Jekyll—no setup required.
# A URL pointing to your avatar or profile pic
# To use your Gravatar: (the one that GitHub uses for your profile pic)

View file

@ -21,13 +21,13 @@
<body>
<header class="masthead">
<img src="{{ site.avatar }}" class="avatar" />
<a href="/" class="site-name"><img src="{{ site.avatar }}" class="avatar" /></a>
<a href="/" class="site-name">{{ site.name }}</a>
<p class="site-description">{{ site.description }}</p>
<nav>
<a href="/">Blog</a>
<a href="/about">About</a>
<a href="/about">About Me</a>
</nav>
<div style="clear:both;"></div>

View file

@ -3,7 +3,8 @@ layout: default
---
<article class="page">
<header><h1>{{ page.title }}</h1></header>
<h1>{{ page.title }}</h1>
<div class="entry">
{{ content }}

View file

@ -7,11 +7,15 @@ layout: default
<h1>{{ page.title }}</h1>
</header>
<div class="date">
{{ page.date | date: "%B %e, %Y" }}
</div>
<div class="entry">
{{ content }}
</div>
<section id="comments">
<div class="comments">
{% include disqus.html disqus_identifier=page.disqus_identifier %}
</section>
</div>
</article>

View file

@ -0,0 +1,63 @@
---
layout: post
title: Markdown Style Guide
---
A demo of all styled markdown elements in Jekyll Boilerplate.
This is a paragraph, it's surrounded by whitespace. Next up are some headers, they're heavily influenced by GitHub's markdown style.
## Header 2 (H1 is reserved for post titles)##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
A link to [Jekyll Boilerplate](http://github.com/barryclark/jekyll-boilerplate/). A big ass literal link <http://github.com/barryclark/jekyll-boilerplate/>
An image, located within /images
![an image alt text](/images/omg-code.jpg "an image title")
* A bulletted list
- alternative syntax 1
+ alternative syntax 2
- an indented list item
1. An
2. ordered
3. list
Inline markup styles:
- _italics_
- **bold**
- `code()`
> Blockquote
>> Nested Blockquote
Code:
// Code is just text indented a bit
which(is_easy) to_remember();
~~~
// Markdown extra adds un-indented code blocks too
if (this_is_more_code == true && !indented) {
// tild wrapped code blocks, also not indented
}
~~~
Use two trailing spaces
on the right
to create linebreak tags
Finally, horizontal lines
----
****
Enjoy!

10
_posts/2014-2-3-Oh-hi.md Normal file
View file

@ -0,0 +1,10 @@
---
layout: post
title: Oh, Hi!
---
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/)!
Jekyll boilerplate is a starting point for creating your blog using Jekyll and GitHub Pages. It make it _really easy_.
Talk through benefits.

View file

@ -5,10 +5,10 @@ title: Jekyll The Easy Way
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.
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.
![cool code image aww yea](/images/omg-code.jpg)
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.
### Jekyll is built for one specific purpose
Tom Preston Warner of Github build Jekyll to [[INSERT HERE EXCERT FROM TPW's blog]]

View file

@ -5,11 +5,16 @@ layout: default
<div class="posts">
{% for post in site.posts %}
<article class="post">
<header>
<h1>{{ post.title }}</h1>
</header>
<div class="entry">{{ post.content | truncatewords:40}}</div>
<h1>{{ post.title }}</h1>
<div class="date">
{{ post.date | date: "%B %e, %Y" }}
</div>
<div class="entry">
{{ post.content | truncatewords:40}}
</div>
<a href="{{ post.url }}" class="read-more">Read More</a>
</article>

View file

@ -28,7 +28,7 @@ body {
h1, h2, h3, h4, h5, h6 {
font-family: $helveticaNeue;
color: $darkerGray;
font-weight: 400;
font-weight: 500;
line-height: 1.7;
margin: 1em 0 15px;
@ -36,36 +36,36 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
font-size: 2.2rem;
font-weight: 400;
font-size: 35px;
@include mobile {
font-size: 2.2rem;
font-size: 32px;
}
}
h2 {
letter-spacing: 1px;
font-weight: 300;
font-size: 1.7rem;
font-size: 26px;
@include mobile {
font-size: 1.5rem;
font-size: 24px;
}
}
h3 {
font-weight: 600;
font-size: 1.2rem;
font-size: 22px;
@include mobile {
font-size: 1.2rem;
font-size: 20px;
}
}
h4 {
font-size: 1rem;
@include mobile {
font-size: 1rem;
font-size: 18px;
font-weight: 600;
}
h5 {
font-size: 18px;
color: $gray;
font-weight: 600;
}
p {
@ -81,15 +81,44 @@ a {
}
}
ul {
ul, ol {
margin: 15px 0;
padding-left: 30px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ol ul, ul ol, ul ul, ol ol {
margin: 0;
}
ul ul, ol ul {
list-style-type: circle;
}
em {
font-style: italic;
}
strong {
font-weight: 600;
}
img {
max-width: 100%;
}
.date {
font-style: italic;
color: $gray;
}
// Specify the color of the selection
::-moz-selection {
color: $black;
@ -110,9 +139,9 @@ img {
//
.masthead {
margin: 20px 0 70px;
margin: 20px 0 30px;
padding-bottom: 20px;
border-bottom: 2px solid $darkGray;
border-bottom: 1px dotted $lightGray;
}
.avatar {
@ -144,6 +173,7 @@ img {
.site-description {
float: left;
font-size: 14px;
display: none;
}
@ -151,9 +181,9 @@ nav {
float: right;
font-family: $helveticaNeue;
font-size: 1.1rem;
font-size: 18px;
@include mobile {
font-size: 1rem;
font-size: 18px;
}
// nav has it's own link highlighting
@ -192,7 +222,7 @@ nav {
.post {
blockquote {
border-left: 2px solid $gray;
font-size: 1.2em;
font-size: 22px;
font-style: italic;
margin: 1.8em .8em;
padding: 0.1em 1em;
@ -202,5 +232,5 @@ nav {
footer {
// border-top: 1px $lightGray solid;
padding: 1rem 0;
padding: 20px 0;
}

View file

@ -294,37 +294,38 @@ body {
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222222;
font-weight: 400;
font-weight: 500;
line-height: 1.7;
margin: 1em 0 15px;
padding: 0; }
h1 {
font-size: 2.2rem; }
font-weight: 400;
font-size: 35px; }
@media screen and (max-width: 520px) {
h1 {
font-size: 2.2rem; } }
font-size: 32px; } }
h2 {
letter-spacing: 1px;
font-weight: 300;
font-size: 1.7rem; }
font-size: 26px; }
@media screen and (max-width: 520px) {
h2 {
font-size: 1.5rem; } }
font-size: 24px; } }
h3 {
font-weight: 600;
font-size: 1.2rem; }
font-size: 22px; }
@media screen and (max-width: 520px) {
h3 {
font-size: 1.2rem; } }
font-size: 20px; } }
h4 {
font-size: 1rem; }
@media screen and (max-width: 520px) {
h4 {
font-size: 1rem; } }
font-size: 18px;
font-weight: 600; }
h5 {
font-size: 18px;
color: #666666;
font-weight: 600; }
p {
margin: 15px 0; }
@ -336,13 +337,35 @@ a {
a:hover, a:active {
text-decoration: underline; }
ul, ol {
margin: 15px 0;
padding-left: 30px; }
ul {
padding-left: 30px;
list-style-type: disc; }
ol {
list-style-type: decimal; }
ol ul, ul ol, ul ul, ol ol {
margin: 0; }
ul ul, ol ul {
list-style-type: circle; }
em {
font-style: italic; }
strong {
font-weight: 600; }
img {
max-width: 100%; }
.date {
font-style: italic;
color: #666666; }
::-moz-selection {
color: black;
background: #eeeeee; }
@ -352,9 +375,9 @@ img {
background: #eeeeee; }
.masthead {
margin: 20px 0 70px;
margin: 20px 0 30px;
padding-bottom: 20px;
border-bottom: 2px solid #333333; }
border-bottom: 1px dotted #aaaaaa; }
.avatar {
float: left;
@ -379,15 +402,16 @@ img {
.site-description {
float: left;
font-size: 14px;
display: none; }
nav {
float: right;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.1rem; }
font-size: 18px; }
@media screen and (max-width: 520px) {
nav {
font-size: 1rem; } }
font-size: 18px; } }
nav a {
margin-left: 25px;
text-align: right;
@ -411,11 +435,11 @@ nav {
.post blockquote {
border-left: 2px solid #666666;
font-size: 1.2em;
font-size: 22px;
font-style: italic;
margin: 1.8em 0.8em;
padding: 0.1em 1em;
color: #666666; }
footer {
padding: 1rem 0; }
padding: 20px 0; }