From 64fa83e82bf7f09a3646e1dc28f49666f5eea5e1 Mon Sep 17 00:00:00 2001
From: Ambrose Chua <ambrose.chua.cm@gmail.com>
Date: Sun, 24 Aug 2014 22:56:00 +0800
Subject: [PATCH] Third Commit

---
 _layouts/default.html                         |  6 ++---
 _layouts/pun.html                             | 10 ++++-----
 .../14-08-23-theese-jokes-are-too-cheesy.md   |  2 +-
 styles/main.css                               | 22 +++++++++++++------
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 7f66663..5e98856 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -15,10 +15,10 @@
 	<header class="site-header">
 		<h1><a href="/"><div class="circle">2punny</div></a></h1>
 		<nav>
-			<a href="/random" {% if page.url contains "/random" %}class="active"{% endif %}><span>random</span></a>
-			<a href="/all" {% if page.url contains "/all" %}class="active"{% endif %}><span>see-'em-all</span></a>
+			<a href="/random" {% if page.url contains "/random" %}class="active"{% endif %}><span>rand<span class="hidewhensmall">om</span></span></a>
+			<a href="/all" {% if page.url contains "/all" %}class="active"{% endif %}><span><span class="hidewhensmall">see-'em-</span>all</span></a>
 			<a href="http://facebook.com/2punny" target="_blank"><i class="icon-facebook"></i></a>
-			<a href="/about" {% if page.url contains "/about" %}class="active"{% endif %}><span>about</span></a>
+			<a href="/about" {% if page.url contains "/about" %}class="active"{% endif %}><span>ab<span class="hidewhensmall">ou</span>t</span></a>
 		</nav>
 	</header>
 	{{ content }}
diff --git a/_layouts/pun.html b/_layouts/pun.html
index f938506..4f70539 100644
--- a/_layouts/pun.html
+++ b/_layouts/pun.html
@@ -3,13 +3,13 @@ layout: default
 footer: hidden
 ---
 <main class="pun">
-	<div class="puncontent" style="background-color: {{ page.background-color }}; color: {{ page.color }};">
+	<div class="puncontent" style="background: {{ page.background }}; color: {{ page.color }};">
 		{{content}}
 	</div>
 	<div class="share">
-		<a class="btn previous" href="#previous"><i class="icon-arrow-left"></i>Prev</a>
-		<a class="btn" href="#facebook"><i class="icon-facebook"></i>Facebook</a>
-		<a class="btn" href="#twitter"><i class="icon-twitter"></i>Twitter</a>
-		<a class="btn next" href="#next"><i class="icon-arrow-right"></i>Next</a>
+		{% if page.previous %}<a class="btn previous" href="{{ page.previous.url }}"><i class="icon-arrow-left"></i>Prev</a>{% endif %}
+		<a class="btn" href="#facebook"><i class="icon-facebook"></i><span class="hidewhensmall">Facebook</span></a>
+		<a class="btn" href="#twitter"><i class="icon-twitter"></i><span class="hidewhensmall">Twitter</span></a>
+		{% if page.next %}<a class="btn next" href="{{ page.next.url }}"><i class="icon-arrow-right"></i>Next</a>{% endif %}
 	</div>
 </main>
\ No newline at end of file
diff --git a/_posts/14-08-23-theese-jokes-are-too-cheesy.md b/_posts/14-08-23-theese-jokes-are-too-cheesy.md
index 597307b..25c4cef 100644
--- a/_posts/14-08-23-theese-jokes-are-too-cheesy.md
+++ b/_posts/14-08-23-theese-jokes-are-too-cheesy.md
@@ -1,6 +1,6 @@
 ---
 layout: pun
 color: "#fff"
-background-color: "#2ecc71"
+background: "#2ecc71"
 ---
 Theese jokes are too cheesy
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index ab511f2..612b9be 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -16,6 +16,7 @@ body {
 	background-color: #fff;
 	color: #444;
 	-webkit-font-smoothing: antialiased;
+	-webkit-tap-highlight-color: none;
 }
 
 main {
@@ -33,6 +34,7 @@ main {
 main.pun {
 	padding: 0;
 	margin: 0;
+	max-width: none;
 }
 
 a:not(.btn) {
@@ -90,7 +92,10 @@ a:hover, a:focus {
 	vertical-align: bottom;
 }
 .share .btn i {
-	margin-right: 0.3em;
+	margin: 0 0.1em;
+}
+.share .btn span {
+	margin-left: 0.3em;
 }
 .btn[href="#facebook"] {
 	border-color: #3b5998 !important;
@@ -118,11 +123,11 @@ a:hover, a:focus {
 }
 
 .puncontent {
-	font-size: 50px;
+	font-size: 2.5em;
 	line-height: 1.2em;
-	padding: 2em 1em;
-	min-height: 80vh;
-	padding-top: 3em;
+	padding: 15vh 10vw;
+	min-height: 70vh;
+	padding-top: 20vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -304,7 +309,7 @@ th {
 	font-weight: 300;
 	line-height: 1em;
 	/*height: 100%;*/
-	padding: 0.3em 5%;
+	padding: 0.3em 5vw;
 }
 .site-header nav a {
 	box-shadow: none !important;
@@ -315,7 +320,7 @@ th {
 
   transition: 0.25s color, 0.25s background-color;
 }
-.site-header nav span {
+.site-header nav > a > span {
 	display: block;
 	height: 100%;
 }
@@ -371,4 +376,7 @@ footer {
 	.site-header {
 		font-size: 18px;
 	}
+	.hidewhensmall {
+		display: none;
+	}
 }