Style Guide, and all markdown content styled
This commit is contained in:
Barry Clark
parent
9931bd1ed2
commit
0df8994e5f
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ layout: default
|
|||
---
|
||||
|
||||
<article class="page">
|
||||
<header><h1>{{ page.title }}</h1></header>
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
<div class="entry">
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
* 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!
|
||||
|
|
@ -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.
|
||||
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
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]]
|
||||
|
|
|
|||
13
index.html
13
index.html
|
|
@ -5,11 +5,16 @@ layout: default
|
|||
<div class="posts">
|
||||
{% for post in site.posts %}
|
||||
<article class="post">
|
||||
<header>
|
||||
<h1>{{ post.title }}</h1>
|
||||
</header>
|
||||
|
||||
<h1>{{ post.title }}</h1>
|
||||
|
||||
<div class="entry">{{ post.content | truncatewords:40}}</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
66
style.css
66
style.css
|
|
@ -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; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue