Style Guide, and all markdown content styled

ngo · Feb 18, 2014 · 0df8994 · 0df8994
1 parent 9931bd1
commit 0df8994
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 57 deletions.
diff --git 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
@@ -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>

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -3,7 +3,8 @@
 ---
 
 <article class="page">
-  <header><h1>{{ page.title }}</h1></header>
+
+  <h1>{{ page.title }}</h1>
 
   <div class="entry">
     {{ content }}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -7,11 +7,15 @@
 	<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>
diff --git a/_posts/2014-2-2-Markdown-Cheatsheet.md 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 <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!
diff --git a/_posts/2014-2-3-Oh-hi.md 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. 
diff --git 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
@@ -5,11 +5,16 @@
 <div class="posts">
   {% for post in site.posts %}
   <article class="post">    
-    <header>
-      <h1>{{ post.title }}</h1>
-    </header>
+
+    <h1>{{ post.title }}</h1>
+
+    <div class="date">
+      {{ post.date | date: "%B %e, %Y" }}
+    </div>
 
-    <div class="entry">{{ post.content | truncatewords:40}}</div>
+    <div class="entry">
+      {{ post.content | truncatewords:40}}
+    </div>
 
     <a href="{{ post.url }}" class="read-more">Read More</a>
   </article>

diff --git a/scss/style.scss b/scss/style.scss
@@ -28,44 +28,44 @@ 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;
   padding: 0;
 }
 
 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,16 +173,17 @@ img {
 
 .site-description {
   float: left;
+  font-size: 14px;
   display: none;
 }
 
 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;
 }