Improve typography

assets/less/480.less

@@ -3,6 +3,14 @@
 // TEXTURE ====================================================
 // ELEMENTS ===================================================
 // LAYOUT =====================================================
+.article-author-top,
+.article-author-bottom {
+	.transition(all .2s ease);
+	.opacity(.7);
+	&:hover {
+		.opacity(1);
+	}
+}
 .image-grid {
 	li {
 		width: 33.333333%;

assets/less/600.less

@@ -1,7 +1,4 @@
 // ROOT =======================================================
-html {
-	font-size: 95%;
-}
 // TYPOGRAPHY =================================================
 // TEXTURE ====================================================
 // ELEMENTS ===================================================

assets/less/768.less

@@ -1,7 +1,4 @@
 // ROOT =======================================================
-html {
-	font-size: 100%;
-}
 // TYPOGRAPHY =================================================
 // TEXTURE ====================================================
 // ELEMENTS ===================================================

assets/less/992.less

@@ -1,11 +1,16 @@
 // ROOT =======================================================
-html {
-	font-size: 112.5%;
-}
 // TYPOGRAPHY =================================================
 // TEXTURE ====================================================
 // ELEMENTS ===================================================
 // LAYOUT =====================================================
+.article-author-top,
+.article-author-bottom {
+	img.bio-photo {
+		width: 150px;
+		height: 150px;
+		.rounded(150px);
+	}
+}
 /* Image Grid ============================================== */
 .image-grid {
 	li {

assets/less/elements.less

@@ -38,49 +38,41 @@ svg:not(:root) {
     .grid(12,12);
   }
 }
-/* Buttons =============================================== */
+/* Buttons ============================================== */
 .btn {
   display: inline-block;
-  *display: inline;
+  margin-bottom: 20px;
-  /* IE7 inline-block hack */
+  padding: 8px 20px;
-  *zoom: 1;
+  .font-rem(14);
-  padding: 12px 24px;
-  margin-bottom: 2em;
-  line-height: 1;
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-  border: 4px double @textcolor;
-  .rounded(50px);
-  cursor: pointer;
-  *margin-left: .3em;
-  .transition(.4s linear); 
-  &:visited {
-    border: 4px double @linkcolorvisited;
-  }
-  &:hover {
-    border: 4px double @linkcolorhover;
-  }
-}
-.btn:first-child {
-  *margin-left: 0; 
-}
-.btn-inverse {
-  border: 4px double @white;
-  color: @white;
   background-color: @black;
+  color: @white;
+  border: 2px solid @black !important;
+  .rounded(20px);
   &:visited {
     color: @white;
-    border-color: @white;
   }
   &:hover {
-    color: @white;
+    background-color: @white;
-    border-color: @white;
+    color: @black;
+  }
+  &:active {
+    .translate(0, 2px);
   }
 }
-.btn-small {
+.author-social {
-  font-size: 60%;
+  display: block;
-  padding: 6px 12px;
+  margin-bottom: 5px;
+  .font-rem(14);
+  color: @black;
+  &:visited {
+    color: @black;
+  }
+  &:hover {
+    .scale(1.1);
+  }
+  &:active {
+    .translate(0, 2px);
+  }
 }
 /* Well ================================================= */
 .well {

assets/less/main.less

@@ -11,8 +11,6 @@
 /* Site wide styles (html, body, global classes) =========== */
 @import "site.less";
 // TYPOGRAPHY =================================================
-/* Typeplate.com typographic starter pack ================== */
-// @import "typeplate.less";
 @import "typography.less";
 /* Pygments Syntax highlighting ============================= */
 @import "pygments.less";

assets/less/page.less

@@ -1,8 +1,7 @@
-html {
+body {
 	background-color: @bodycolor;
 	font-family: @base-font;
 	font-color: @textcolor;
-	font-size: 90%;
 }
 .navigation-wrapper {
 	.container();
@@ -121,8 +120,8 @@ html {
 }
 .article-author-top,
 .article-author-bottom {
-	h4 {
+	h3 {
-		margin-bottom: 0.5em;
+		margin-bottom: 0;
 	}
 	p {
 		font-size: 80%;
@@ -132,6 +131,8 @@ html {
 		border-bottom: 0 solid transparent;
 	}
 	img.bio-photo {
+		width: 100px;
+		height: 100px;
 		.rounded(100px);
 	}
 }
@@ -331,7 +332,7 @@ html {
 		}
 	}
 }
-.chrome-frame {
+.browser-upgrade {
 	background: #000;
 	text-align: center;
 	margin: 0 0 2em 0;

assets/less/typography.less

@@ -11,7 +11,7 @@ h1, h2, h3, h4, h5, h6 {
 	font-family: @heading-font;
 }
 h1 {
-	.font-rem(32);
+	.font-size(32);
 }
 
 // Links
@@ -98,6 +98,17 @@ blockquote {
 	}
 }
 
+// Paragraphs
+// --------------------------------------------------
+p {
+	margin: 0 0 @indent-var;
+	& + p {
+		//siblings indentation
+		text-indent: @indent-var;
+		margin-top: -(@indent-var);
+	}
+}
+
 // Code
 // --------------------------------------------------
 tt, code, kbd, samp, pre {

assets/less/variables.less

@@ -16,7 +16,7 @@
 @compcolor 		: spin(@basecolor, 180); 
 @bordercolor    : @basecolor;
 @white          : #fff;
-@black          : #000;
+@black          : #111;
 @accentcolor    : @black;
 /* Links ================================================= */
 @linkcolor 		    : #343434;