Lots of style updates

2014-02-12 20:42:49 -05:00 · 2014-02-12 20:42:49 -05:00 · db4dceaba5
parent 6c7ba1bc57
commit db4dceaba5
14 changed files with 194 additions and 77 deletions
--- a/README.md
+++ b/README.md
@ -1,6 +1,5 @@
-
 # Jekyll Boilerplate

 Create your Jekyll blog in minutes. 

-A clean, one-column theme from which to kick off your Jekyll blog. 
+A clean, one-column theme from which to kick off your Jekyll blog. 
--- a/_config.yml
+++ b/_config.yml
@ -1,25 +1,37 @@
+#
+# This file contains configuration flags to customize your site
+#
+
+# The name of your site
 name: Jekyll Boilerplate

+# A short bio or description
+description: Short bio of description placeholder.
+
+# A URL pointing to your avatar or profile pic
+# To use your Gravatar: (the one that GitHub uses for your profile pic)
+#   1. Go to https://github.com/YOURUSERNAME/
+#   2. Right click > Copy Image URL on your profile pic,
+#   3. Take the first long ID from the URL and paste it in place of mine below
+avatar: http://www.gravatar.com/avatar/36b4f56a7fa40d3c06e5afc4ed0b82b5?s=200
+
+# Your disqus username, if you'd like blog commenting
+disqus: 
+
+# Your Google Analytics web tracking code (e.g. UA-2110908-2)
+google_analytics: 
+
+# Links used for your social icons
+links:
+  github: https://github.com/YOUR-USERNAME
+  twitter: https://twitter.com/YOUR-USERNAME
+  #linkedin: https://linkedin.com/in/YOUR-USERNAME
+
 markdown: redcarpet
-markdown_ext: md
-
-pygments: true

+# Exclude these files from your production _site
 exclude:
    - Gemfile
    - Gemfile.lock
    - scss
-    - js
-    - README.md
-
-disqus:
-    shortname: ''
-
-googleanalytics:
-    id: ''
-
-links:
-    #github: https://github.com/YOUR-USERNAME
-    #twitter: https://twitter.com/YOUR-USERNAME
-    #linkedin: https://linkedin.com/in/YOUR-USERNAME
-    #avatar: http://YOUR-USERNAME.github.io/images/avatar.jpg
+    - README.md
--- a/_includes/analytics.html
+++ b/_includes/analytics.html
@ -2,7 +2,7 @@
 <script type="text/javascript">

  var _gaq = _gaq || [];
-  _gaq.push(['_setAccount', '{{ site.googleanalytics.id }}']);
+  _gaq.push(['_setAccount', '{{ site.google_analytics }}']);
  _gaq.push(['_trackPageview']);

  (function() {
--- a/_includes/disqus.html
+++ b/_includes/disqus.html
@ -1,16 +1,14 @@
 <div id="disqus_thread"></div>
 <script type="text/javascript">
-      /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
-      var disqus_shortname = '{{ site.disqus.shortname }}'; // required: replace example with your forum shortname
+  {% if include.disqus %}

-      {% if include.disqus_identifier %}
-      var disqus_identifier = "{{ include.disqus_identifier }}";
-      {% endif %}
+    var disqus_shortname = '{{ site.disqus }}'; 

-      (function() {
-          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-      })();
-  </script>
+    (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
+  {% endif %}
+</script>
 <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -20,8 +20,10 @@
  </head>

  <body>
-    <header>
-      <a href="/" class="logo"><img src="/404.ups" />{{ site.name }}</a>
+    <header class="masthead">
+      <img src="{{ site.avatar }}" class="avatar" />
+      <a href="/" class="name">{{ site.name }}</a>
+      <p class="description">{{ site.description }}</p>
      
      <nav>
        <a href="/">Blog</a>
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -3,7 +3,7 @@ layout: default
 ---

 <article class="page">
-  <h1>{{ page.title }}</h1>
+  <header><h1>{{ page.title }}</h1></header>

  <div class="entry">
    {{ content }}
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -3,7 +3,9 @@ layout: default
 ---

 <article class="post">
-  <h1>{{ page.title }}</h1>
+  <header>
+	<h1>{{ page.title }}</h1>
+  </header>

  <div class="entry">
    {{ content }}
--- a/_posts/2014-4-4-Jekyll-The-Easy-Way.md
+++ b/_posts/2014-4-4-Jekyll-The-Easy-Way.md
@ -0,0 +1,85 @@
+---
+layout: post
+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)   
+
+### Jekyll is built for one specific purpose
+
+Tom Preston Warner of Github build Jekyll to [[INSERT HERE EXCERT FROM TPW's blog]]
+
+This also the way that Jekyll was built to be used! 
+
+It was built for one purpose. To make blogging on Github Pages extremely quick and easy. 
+
+If you want more than a simple blog hosted on Github Pages, don't use Jekyll! Sure, it can be used for other things too. But if you try to use them for those, you're probably going to have a bad time. 
+
+### Use your named account on Github Pages (barryclark.github.io)
+
+This eliminates the need for a seperate gh-pages branch workflow, making things really simple!
+
+You just commit your Jekyll layout files and your markdown blog posts and content to the master branch of your barryclark.github.io, and Github Pages AUTOMATICALLY compiles it. 
+
+Fun fact: Github Pages processes ALL files through Jekyll. You mostly just don't notice this if you're using Github Pages for static content as flat .html content just passes through and doesn't get compiled. 
+
+If you wanted to, you wouldn't actually ever hard to install or run jekyll locally. You could just push up to your barryclark.github.io and everything would be taken care of for you. 
+
+That is awesome. And that's the first way that Jekyll is supposed to be used. 
+
+### Don't use plugins
+
+Github Pages builds Jekyll sites in "safe mode". This means that when compiling your site, Github Pages won't run any of your plugins, it'll only use the standard Jekyll build. If you want to use plugins to
+
+That means you can't compile SASS, etc, etc. 
+
+Using plugins means that you can't use your Github Pages account. There are other ways to do this. But they add lots of extra complexity. 
+
+### Pre-process css/js yourself
+
+Use a guard or grunt script while you're theming. Don't try to do it within the jekyll build process. 
+
+You should be using grunt anyway. 
+
+Then just push the .css and .js and Jekyll will have no problems with it. No need to install jekyll-asset-manager, which has a whole host of complications with it. 
+
+### Have a workflow for blogging, and a separate workflow for theming
+
+Updating content is CRAZY easy... and that's the whole point of Jekyll. You just write a markdown post and commit it to the repo, and you're done. Amazing. 
+
+2 of the simplest theming workflows I found:
+
+- Build your site statically and theme that. 
+- 
+
+Don't try to mix things in to the jekyll build process. It's not worth it, and you likely won't be able to use that workflow on barryclark.github.io
+
+### To get started, fork a good repo
+
+Following all of the about tips, you'll have a much easier time setting up Jekyll... and hell, if you want to do some fancy things, add them in later. 
+
+There are a number of repos that already follow the rules above. Forking one of them will put you on the right tracks, and save you a TON of time. You'll be able to get up and running extremely quickly.
+
+Give a list of my favorite repos to fork. 
+
+- Tom Preston Warner
+- Zach Holman
+
+I've also shared my base theme repo, which abides by each of the things I've covered in this post. It includes grunt scripts to do your pre-processing, and the same layout as you see here on this blog, with easy options for customization. 
+
+- Mine (Jekyllstrap? Jekyll-base?) :>
+
+### Forking Jekyllstrap
+
+Give instructions on exactly how to fork the repo. Step through each step to have your Jekyll site running on your name.com domain name. 
+
+1. Fork
+2. Write your CSS
+3. 
+
+I should create this, and fork my own repo. 
+
--- a/about.md
+++ b/about.md
@ -0,0 +1,14 @@
+---
+layout: page
+title: About Me
+---
+
+Some information about you!
+
+### More Information
+
+A place to include any other types of information that you'd like to include about yourself. 
+
+### Contact me
+
+[email@domain.com](mailto:email@domain.com)
--- a/images/omg-code.jpg
+++ b/images/omg-code.jpg
--- a/index.html
+++ b/index.html
@ -6,12 +6,12 @@ layout: default
  {% for post in site.posts %}
  <article class="post">    
    <header>
-      <h2>{{ post.title }}</h2>
+      <h1>{{ post.title }}</h1>
    </header>

-    <div class="entry">{{ post.content | truncatewords:50}}</div>
+    <div class="entry">{{ post.content | truncatewords:40}}</div>
    
-    <a href="{{ post.url }}">Read More</a>
+    <a href="{{ post.url }}" class="read-more">Read More</a>
  </article>
  {% endfor %}
 </div>
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@ -12,7 +12,7 @@ $black: #000;
 $darkerGray: #222;
 $darkGray: #333;
 $gray: #666;
-$lightGray: #bbb;
+$lightGray: #aaa;
 $lighterGray: #eee;
 $white: #fff;

--- a/scss/style.scss
+++ b/scss/style.scss
@ -17,7 +17,7 @@ html {
 }

 body {
-  max-width: 700px;
+  max-width: 680px;
 	margin: 0 auto;
 	
 	background: $white;
@ -25,20 +25,20 @@ body {
  color: $darkGray;
 }

-h1, h2, h3, h4, h5, h6, .section > header {
+h1, h2, h3, h4, h5, h6 {
  font-family: $helveticaNeue;
  color: $darkerGray;
-  font-weight: bold;
+  font-weight: 400;
  
  line-height: 1.7;
-  margin: 2em 0 15px;
+  margin: 1em 0 15px;
  padding: 0;
 }
-
+  
 h1 {  
-  font-size: 2rem;
+  font-size: 2.2rem;
  @include mobile {
-    font-size: 2rem;
+    font-size: 2.2rem;
  }
 }

@ -86,6 +86,10 @@ ul {
  list-style-type: disc;
 }

+img {
+  max-width: 100%;
+}
+
 // Specify the color of the selection
 ::-moz-selection {
  color: $black;
@ -101,10 +105,6 @@ ul {
 // LAYOUT / SECTIONS
 //

-header {
-  margin: 40px 0;
-}
-
 .logo {
  float: left;

@ -118,6 +118,10 @@ header {
  }
 }

+.avatar {
+  border-radius: 6px;
+}
+
 nav {
  float: right;

@ -154,13 +158,12 @@ nav {
  }
 }

-.post {
-  width: 680px;
-  
-  @include mobile {
-    width: 100%;
-  }
+.posts > .post {
+  padding-bottom: 2em;
+  border-bottom: 1px solid $lighterGray;
+}

+.post { 
  blockquote {
    border-left: 2px solid $gray;
    font-size: 1.2em;
--- a/style.css
+++ b/style.css
@ -285,25 +285,25 @@ html {
  font-size: 100%; }

 body {
-  max-width: 700px;
+  max-width: 680px;
  margin: 0 auto;
  background: white;
  font: 18px/1.4 Helvetica, Arial, sans-serif;
  color: #333333; }

-h1, h2, h3, h4, h5, h6, .section > header {
+h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222222;
-  font-weight: bold;
+  font-weight: 400;
  line-height: 1.7;
-  margin: 2em 0 15px;
+  margin: 1em 0 15px;
  padding: 0; }

 h1 {
-  font-size: 2rem; }
+  font-size: 2.2rem; }
  @media screen and (max-width: 520px) {
    h1 {
-      font-size: 2rem; } }
+      font-size: 2.2rem; } }

 h2 {
  letter-spacing: 1px;
@ -340,6 +340,9 @@ ul {
  padding-left: 30px;
  list-style-type: disc; }

+img {
+  max-width: 100%; }
+
 ::-moz-selection {
  color: black;
  background: #eeeeee; }
@ -348,9 +351,6 @@ ul {
  color: black;
  background: #eeeeee; }

-header {
-  margin: 40px 0; }
-
 .logo {
  float: left; }
  .logo a {
@ -360,6 +360,9 @@ header {
    .logo a:hover, .logo a:active {
      color: #4183c4; }

+.avatar {
+  border-radius: 6px; }
+
 nav {
  float: right;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -386,18 +389,17 @@ nav {
    width: 100%;
    text-align: center; } }

-.post {
-  width: 680px; }
-  @media screen and (max-width: 520px) {
-    .post {
-      width: 100%; } }
-  .post blockquote {
-    border-left: 2px solid #666666;
-    font-size: 1.2em;
-    font-style: italic;
-    margin: 1.8em 0.8em;
-    padding: 0.1em 1em;
-    color: #666666; }
+.posts > .post {
+  padding-bottom: 2em;
+  border-bottom: 1px solid #eeeeee; }
+
+.post blockquote {
+  border-left: 2px solid #666666;
+  font-size: 1.2em;
+  font-style: italic;
+  margin: 1.8em 0.8em;
+  padding: 0.1em 1em;
+  color: #666666; }

 footer {
  padding: 1rem 0; }