Merge pull request #372 from evertton/master

Added new theme (friendly) and fixes some problems of the theme: black beauty.

README.md

@@ -175,12 +175,13 @@ Current available themes:
 * hipster-gray - [preview](http://jsbin.com/ivufon/10) (by [@noformnocontent](https://github.com/noformnocontent))
 * xtansia - [preview](http://jsbin.com/ereren/1/) (by [@tomass1996](https://github.com/tomass1996))
 * magic-mint - [preview](http://jsbin.com/obibot/1/) (by [@ekhager](http://github.com/ekhager))
-* default dark - [preview](http://jsbin.com/uhagaw/3) (by
+* default-dark - [preview](http://jsbin.com/uhagaw/10) (by
   [@remy](http://github.com/remy),
   [@raphaelbastide](http://github.com/raphaelbastide) &
   [@evertton](http://github.com/evertton))
-* black beauty - [preview](http://jsbin.com/efujux/22) (by [@evertton](http://github.com/evertton))
+* black-beauty - [preview](http://jsbin.com/efujux/38) (by [@evertton](http://github.com/evertton))
 * silver-style - [preview](http://jsbin.com/erezijI/2) (by [@dev-dipesh](https://github.com/Dev-Dipesh))
+* friendly - [preview](http://jsbin.com/ecijol/6) (by [@evertton](http://github.com/evertton))
 
 ## Formats & URLs
 

themes/black-beauty.css

@@ -9,13 +9,12 @@ body {
   font-family: "Lato", Helvetica, Arial, sans-serif;
   font-size: 1.3em;
   font-weight: 300;
-  color: #999;
+  color: #CCC;
 }
 
 article, footer {
-  max-width: 900px;
+  max-width: 877px;
-  margin-left: auto;
+  margin: 0 auto;
-  margin-right: auto;
   text-align: center;
 }
 
@@ -28,7 +27,7 @@ article {
 }
 
 article p {
-  text-align: justify;
+  text-align: left;
 }
 
 article p:first-of-type {
@@ -36,21 +35,20 @@ article p:first-of-type {
 }
 
 #gravatar {
-  border: 5px solid #999;
-  border-radius: 5px;
   width: 70px;
-  position: absolute;
+  border: 5px solid #ccc;
-  top: 2em;
+  border-radius: 5px;
-  left: 2em;
+  display:block;
+  margin: 0 auto;
 }
 
 h1 {
-  font-size: 2.5em;
+  font-size: 2em;
   font-weight: 300;
   text-transform: uppercase;
   display: inline-block;
   padding-bottom: 12px;
-  border-bottom: 2px dashed #999;
+  border-bottom: 2px dashed #CCC;
   margin: 0;
 }
 
@@ -64,35 +62,13 @@ a:hover, a:focus, a:active {
   color: white;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (min-width: 960px) {
-  article {
-    margin-top: 5px;
-  }
-
-  h1 {
-    font-size: 2em;
-    margin-left: 80px;
-  }
-}
-
-@media screen and (max-width: 320px) {
-  article {
-    padding: 1em;
-  }
-
-  article p {
-    text-align: left;
-  }
-
   #gravatar {
-    position: relative;
+    position: absolute;
-    top: 0;
+    top: 2em;
-    left: 0;
+    left: 2em;
-    right: 0;
   }
-
   h1 {
-    margin: 0;
+    font-size: 2.5em;
-    font-size: 1.5em;
   }
 }

themes/friendly.css

@@ -0,0 +1,74 @@
+@import url(http://fonts.googleapis.com/css?family=Lato:300);
+
+html {
+  font-size: 16px;
+  background-color: #f7f7f7;
+}
+
+body {
+  font-family: "Lato", Helvetica, Arial, sans-serif;
+  font-size: 1.3em;
+  font-weight: 300;
+  color: #333;
+}
+
+article, footer {
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+article {
+  margin-top: 2em;
+  padding: 2em;
+  text-align: center;
+  position: relative;
+}
+
+article p {
+  text-align: left;
+}
+
+article p:first-of-type {
+  text-align: center;
+}
+
+#gravatar {
+  width: 70px;
+  border: 5px solid #d9d9d9;
+  border-radius: 5px;
+  display:block;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 2em;
+  font-weight: 300;
+  text-transform: uppercase;
+  display: inline-block;
+  padding-bottom: 12px;
+  border-bottom: 2px dashed #d9d9d9;
+  margin: 0;
+}
+
+a {
+    color: gray;
+    text-decoration: none;
+    word-wrap: break-word;
+}
+
+a:hover, a:focus, a:active {
+  color: black;
+}
+
+@media screen and (min-width: 960px) {
+  #gravatar {
+    position: absolute;
+    top: 2em;
+    left: 2em;
+  }
+  h1 {
+    font-size: 2.5em;
+  }
+}