kidwellj/findcommonground.uk
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Style Guide, and all markdown content styled

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
_config.yml
View file

@ -3,10 +3,10 @@
# #
# The name of your site # The name of your site
name: Barry Clark name: Jekyll Boilerplate
# A short bio or description # 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 # A URL pointing to your avatar or profile pic
# To use your Gravatar: (the one that GitHub uses for your profile pic) # To use your Gravatar: (the one that GitHub uses for your profile pic)

4
_layouts/default.html
View file

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

3
_layouts/page.html
View file

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

8
_layouts/post.html
View file

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

63
_posts/2014-2-2-Markdown-Cheatsheet.md Normal file
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.

4
_posts/2014-4-4-Jekyll-The-Easy-Way.md
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. 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) ![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 ### Jekyll is built for one specific purpose
Tom Preston Warner of Github build Jekyll to [[INSERT HERE EXCERT FROM TPW's blog]] Tom Preston Warner of Github build Jekyll to [[INSERT HERE EXCERT FROM TPW's blog]]

13
index.html
View file

@ -5,11 +5,16 @@ layout: default
<div class="posts"> <div class="posts">
{% for post in site.posts %} {% for post in site.posts %}
<article class="post"> <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> <a href="{{ post.url }}" class="read-more">Read More</a>
</article> </article>

74
scss/style.scss
View file

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

66
style.css
View file

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