Add social links

_/layouts/default.html

@@ -7,12 +7,16 @@ type: article
 <div class='post-list -single -cheatsheet'>
   <div class='post-item'>
     <div class='post-headline -cheatsheet'>
-      <h1>{{ page.title }}</h1>
+      <p class='prelude'><span></span></p>
+      <h1><span>{{ page.title }}</span></h1>
+      {% include social-list.html page=page %}
     </div>
 
     <div class='post-content -cheatsheet'>
       {{ content }}
     </div>
+
+    {% include social-list.html page=page %}
   </div>
 </div>
 

_includes/social-list.html

@@ -0,0 +1,5 @@
+<ul class="social-list">
+  <li class="facebook hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ include.page.url }}" target="share"><span class="text">Like</span></a></li>
+  <li class="twitter hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text={{ include.page.description }} {{ site.url }}{{ include.page.url }}" target="share"><span class="text">Tweet</span></a></li>
+  <li class="googleplus hint--bottom" data-hint="Share on Google Plus"><a href="https://plus.google.com/share?url={{ site.url }}{{ include.page.url }}" target="share"><span class="text">+1</span></a></li>
+</ul>

assets/style.css

@@ -1,9 +1,14 @@
+/*
+ * pages list
+ */
+
 .pages-list {
   font-size: 0.9em;
   max-width: 800px;
   margin: 60px auto;
   overflow: hidden;
 }
+
 .pages-list a {
   display: block;
   padding: 6px 0;
@@ -14,34 +19,63 @@
   box-shadow: none;
   transition: all 100ms linear;
 }
+
 .pages-list a .title,
 .pages-list a .date {
   display: block;
 }
+
 .pages-list a .title {
   font-weight: bold;
   color: #111;
   float: left;
 }
+
 .pages-list a .date {
   color: #aaa;
   font-size: 0.9em;
   float: right;
 }
+
 .pages-list a:hover .title,
 .pages-list a:focus .title {
   color: dodgerblue;
 }
 
-.post-headline.-cheatsheet:after {
-  content: '';
-  display: block;
-  width: 150px;
-  height: 1px;
-  background: #ddd;
-  margin: 2.5em auto 1.8em auto;
+/*
+ * post headline
+ */
+
+.post-headline.-cheatsheet .prelude {
+  color: #111;
+  font-size: 0.8em;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 0;
+  font-weight: bold;
 }
 
+.post-headline.-cheatsheet .prelude span {
+  border-bottom: solid 3px #111;
+  padding: 1.5em 20px;
+}
+
+.post-headline.-cheatsheet .prelude span:before {
+  content: 'The great cheatsheet for';
+}
+
+.post-headline.-cheatsheet h1 {
+  color: #111;
+  font-size: 3.3em;
+  text-shadow:
+    2px 2px 0 white,
+    3px 3px 0 #ddd;
+}
+
+/*
+ * about the site
+ */
+
 .about-the-site {
   margin-top: 8em;
 }
@@ -49,3 +83,13 @@
 .about-the-site .back {
   margin-right: 0;
 }
+
+/*
+ * markdown
+ */
+
+@media (min-width: 768px) {
+  h2 {
+    margin-top: 3em;
+  }
+}