Update

Author: DONGChuan

_config.yml

@@ -14,11 +14,12 @@ company: MyCompany
 company_url: https://github.com/DONGChuan
 github_url: https://github.com/DONGChuan
 
-url: "http://yourdomain.com" # the base hostname & protocol for your site
+url: "http://localhost:4000" # the base hostname & protocol for your site
 
 ## Gem
 gems:
   - jekyll-paginate
+  - jekyll-geo-pattern
 
 # Build settings
 markdown: kramdown

_includes/footer.html

@@ -19,6 +19,7 @@
     <!-- Third-Party JS -->
     <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="/bower_components/geopattern/js/geopattern.min.js"></script>
 
     <!-- My JS -->
     <script type="text/javascript" src="/assets/js/script.js"></script>

_includes/jumbotron.html

@@ -0,0 +1,22 @@
+<section class="jumbotron" geo-pattern="{{ page.title }}">
+    <div class="container">
+        <div id="jumbotron-meta-info">
+            <span class="meta-info">
+                <span class="octicon octicon-location"></span>
+                {{ site.location }}
+            </span>
+            <span class="meta-info hvr-grow">
+                <span class="octicon octicon-organization"></span>
+                <a href="{{ site.company_url }}" target="_blank">{{ site.company }}</a>
+            </span>
+            <span class="meta-info hvr-grow">
+                <span class="octicon octicon-mark-github"></span>
+                <a href="{{ site.github_url }}" target="_blank">@{{ site.name }}</a>
+            </span>
+        </div>
+    </div>
+</section>
+<script type="text/javascript">
+    var geoPattern = $(".jumbotron").attr("geo-pattern");
+    $(".jumbotron").css("background-image", "url(data:image/svg+xml;base64,{% base64_geo_pattern text="+ geoPattern +" %}");
+</script>

_layouts/post.html

@@ -1,15 +1,20 @@
 ---
 layout: default
 ---
+{% include jumbotron.html %}
 <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
 
-  <header class="post-header">
-    <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
-    <p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
-  </header>
+    <header class="post-header">
+        <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
+        <p class="post-meta">
+            <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d,%Y" }}
+            </time>
+            {% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}
+        </p>
+    </header>
 
-  <div class="post-content" itemprop="articleBody">
-    {{ content }}
-  </div>
+    <div class="post-content" itemprop="articleBody">
+        {{ content }}
+    </div>
 
 </article>

assets/css/common.css

@@ -128,20 +128,23 @@
     padding-top: 30px;
     padding-bottom: 30px;
     list-style: none;
-    border-bottom: 1px solid #eee;
+}
+
+.post-list-title a {
+    text-decoration: none;
 }
 
 .post-list-description {
     margin-top: 8px;
     margin-bottom: 0;
     font-size: 18px;
-    color: #666
+    color: #666;
 }
 
 .post-list-meta {
     margin-top: 8px;
     margin-bottom: 0;
-    color: #888
+    color: #888;
 }
 
 .post-list-meta, .post-list-meta.octicon {

bower.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "bootstrap": "^3.3.6",
     "octicons": "^3.5.0",
-    "hover": "^2.0.2"
+    "hover": "^2.0.2",
+    "geopattern": "^1.2.3"
   }
 }

index.html

@@ -4,17 +4,17 @@
 ---
 <section class="jumbotron">
     <div class="container">
-        <h1>I'm a Cool Boy :P</h1>
+        <h1>Yummy Theme</h1>
         <div id="jumbotron-meta-info">
             <span class="meta-info">
                 <span class="octicon octicon-location"></span>
                 {{ site.location }}
             </span>
-            <span class="meta-info">
+            <span class="meta-info hvr-grow">
                 <span class="octicon octicon-organization"></span>
                 <a href="{{ site.company_url }}" target="_blank">{{ site.company }}</a>
             </span>
-            <span class="meta-info">
+            <span class="meta-info hvr-grow">
                 <span class="octicon octicon-mark-github"></span>
                 <a href="{{ site.github_url }}" target="_blank">@{{ site.name }}</a>
             </span>
@@ -27,10 +27,16 @@ <h1>I'm a Cool Boy :P</h1>
 
         <!-- Post List -->
         <div class="col-md-8">
+            <ol class="post-list">
                 {% for post in paginator.posts %}
-                        <a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a>
+                <li class="post-list-item">
+                    <h2 class="post-list-title">
+                        <a class="hvr-underline-from-center" href="{{ site.url }}{{ post.url }}">{{ post.title }}</a>
+                    </h2>
+                    <p class="post-list-description">
                         {{ post.excerpt | strip_html | strip }}
                     </p>
+                    <p class="post-list-meta">
                         <span class="octicon octicon-calendar"></span> {{ post.date | date: "%Y/%m/%d" }}
                     </p>
                 </li>