A few styling changes to examples, resizing screenshot images

_includes/header.html

@@ -10,7 +10,7 @@
         <a href="{{ site.baseurl }}/">Home</a>
       </li>
       <li class="{% if page.url contains '/examples' %}active{% endif %}">
-        <a href="{{ site.baseurl }}/examples">Examples</a>
+        <a href="{{ site.baseurl }}/examples">Plugins</a>
       </li>
       <li class="{% if page.url contains '/getting-started' %}active{% endif %}">
         <a href="{{ site.baseurl }}/getting-started">Getting started</a>

_sass/_main.scss

@@ -306,17 +306,24 @@ p {
 
 .example-item {
   padding: 15px;
-  border: 1px solid #ccc;
   border-radius: 4px;
+  border:1px solid #ccc;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.15);
+  margin-bottom:20px;
 }
 
 .example-item-description {
-  font-size: 14px;
+  font-size: 16px;
   line-height: 20px;
   color: #555;
   margin: 5px 0;
 }
 
+.example-item-assumed-experience {
+  margin-top:15px;
+  font-size: 14px;
+  color: #555;
+}
 .example-item-assumed-experience-badge {
   padding: 2px 4px;
   border-radius: 3px;
@@ -325,13 +332,27 @@ p {
 }
 
 .example-item-links {
-  font-size: 14px;
-  line-height: 20px;
-  margin-top: 5px;
+  line-height: 16px;
+  margin-top: 20px;
+  border-top:1px solid #ddd;
+  a {
+    display:inline-block;
+    padding-top:15px;
+  }
+  a.github::before {
+    display: inline-block;
+    width:16px;
+    height:16px;
+    margin-right:7px;
+    background:url(https://github.com/favicon.ico) center no-repeat;
+    background-size: contain;
+    content: " ";
+    vertical-align: top;
+  }
 }
 
 .example-item-image {
-  height: 150px;
+  height: 170px;
   width: 100%;
   overflow: hidden;
   margin-bottom: 10px;

examples/index.html

@@ -21,11 +21,11 @@ title: Examples
       <div class="half unit" style="padding-left:10px; padding-right:10px;">
         <div class="example-item">
           <div class="example-item-image">
-            <img src="{{ example.image }}">
+            <a href="{{ example.github }}"><img src="{{ example.image }}"></a>
           </div>
           <div>
-            <h4 style="margin-top:0;">
-              <a href="{{ site.baseurl }}{{ example.url }}">{{ example.title }}</a>
+            <h4 style="margin-top:10px;">
+              <a href="{{ example.github }}">{{ example.title }}</a>
             </h4>
           </div>
           <div class="example-item-description">
@@ -40,7 +40,7 @@ title: Examples
               <a href="{{ site.baseurl }}{{ example.url }}">Annotated source</a>
             </span>
             <span style="float:right;">
-              <a href="{{ example.github }}">View on GitHub</a>
+              <a href="{{ example.github }}" class="github">View on GitHub</a>
             </span>
           </div>
         </div>