Responsive styling

themes/pleasant2/assets/css/theme.css

@@ -15,13 +15,13 @@ body {
 	background: #F2EDE6;
 	margin: 0;
 }
-
+/*
 @media (max-width: 600px) {
 	body {
 		font-size: 100%;
 	}
 }
-
+*/
 /* force android webkit to use relative header size */
 body h1 {
 	font-family: "Museo", "museo", sans-serif;
@@ -141,27 +141,6 @@ thead tr {
 	font-size: 80%;
 }
 
-@media (max-width: 800px) {
-	.header {
-		/*margin: 1em 0px;*/
-	}
-
-	.header > h1 {
-		display: block;
-		float: none;
-	}
-
-	.nav {
-		display: block;
-		float: none;
-	}
-
-	.nav li {
-		display: block;
-		font-size: 100%;
-	}
-}
-
 .container {
 	max-width: 800px;
 	margin: 0 auto;
@@ -200,7 +179,7 @@ thead tr {
 	border-bottom: 2px solid #534741;
 	padding-bottom: 0;
 }
-.postbox .title h1 small {
+.postbox .title small {
 	float: right;
 	font-size: 50%;
 	font-weight: normal;
@@ -225,3 +204,57 @@ thead tr {
 .pager .next a {
 	float: right;
 }
+
+@media (max-width: 768px) {
+
+	.header img {
+		width: 100px;
+		height: 100px;
+		border: 2px solid #534741;
+		border-radius: 50%;
+	}
+
+	.header > h1 {
+		display: block;
+		float: none;
+		line-height: 1.1;
+	}
+
+	.nav {
+		display: block;
+		float: none;
+	}
+
+	.nav li {
+		display: block;
+		font-size: 100%;
+	}
+
+	.content {
+		-webkit-text-size-adjust: none;
+		font-size: 80%;
+		padding: 0 12px;
+	}
+
+	.title {
+		line-height: 1;
+	}
+
+	.postbox {
+		line-height: 1.5;
+		font-weight: 300;
+	}
+
+	.postbox .title h1 small {
+		float: none;
+		line-height: 1;
+		display: block;
+		font-size: 70%;
+		margin-top: 6px;
+	}
+
+	.postbox .title h1 {
+		font-size: 1.4em;
+	}
+
+}