diff --git a/_config.yml b/_config.yml index db57a35..22ac80d 100644 --- a/_config.yml +++ b/_config.yml @@ -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) diff --git a/_layouts/default.html b/_layouts/default.html index d7f8c43..fd55250 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -21,13 +21,13 @@
- + {{ site.name }}

{{ site.description }}

diff --git a/_layouts/page.html b/_layouts/page.html index 9b67cad..cff5360 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -3,7 +3,8 @@ layout: default ---
-

{{ page.title }}

+ +

{{ page.title }}

{{ content }} diff --git a/_layouts/post.html b/_layouts/post.html index 1384cce..d51134d 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -7,11 +7,15 @@ layout: default

{{ page.title }}

+
+ {{ page.date | date: "%B %e, %Y" }} +
+
{{ content }}
-
+
{% include disqus.html disqus_identifier=page.disqus_identifier %} -
+ diff --git a/_posts/2014-2-2-Markdown-Cheatsheet.md b/_posts/2014-2-2-Markdown-Cheatsheet.md new file mode 100644 index 0000000..59c70ef --- /dev/null +++ b/_posts/2014-2-2-Markdown-Cheatsheet.md @@ -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 + +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! \ No newline at end of file diff --git a/_posts/2014-2-3-Oh-hi.md b/_posts/2014-2-3-Oh-hi.md new file mode 100644 index 0000000..4dad732 --- /dev/null +++ b/_posts/2014-2-3-Oh-hi.md @@ -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. \ No newline at end of file diff --git a/_posts/2014-4-4-Jekyll-The-Easy-Way.md b/_posts/2014-4-4-Jekyll-The-Easy-Way.md index 7eccc1a..d107d42 100644 --- a/_posts/2014-4-4-Jekyll-The-Easy-Way.md +++ b/_posts/2014-4-4-Jekyll-The-Easy-Way.md @@ -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]] diff --git a/index.html b/index.html index 2f3de29..2accc19 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,16 @@ layout: default
{% for post in site.posts %}
-
-

{{ post.title }}

-
+ +

{{ post.title }}

-
{{ post.content | truncatewords:40}}
+
+ {{ post.date | date: "%B %e, %Y" }} +
+ +
+ {{ post.content | truncatewords:40}} +
Read More
diff --git a/scss/style.scss b/scss/style.scss index 29b4a0e..fd5bf1a 100755 --- a/scss/style.scss +++ b/scss/style.scss @@ -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; } diff --git a/style.css b/style.css index ca7c869..435cb04 100644 --- a/style.css +++ b/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; }