Add author photo, fix header alignment

_config.yml

@@ -1,12 +1,13 @@
 title:            So Simple Theme
 description:      A simple and clean responsive Jekyll theme for words and photos.
+logo:             site-logo.png
 #Comment out url when working locally to resolve base urls correctly
 #url:              http://mmistakes.github.io/so-simple-theme
 
 # Owner/author information
 owner:
   name:           Michael Rose
-  avatar:         site-logo.png
+  avatar:         michael-rose-sketch.jpg
   email:          michael@mademistakes.com
   # Social networking links used in footer. Update and remove as you like.
   twitter:        "mmistakes"

_includes/navigation.html

@@ -11,7 +11,7 @@
 
 <header class="masthead">
 	<div class="wrap">
-		<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.owner.avatar }}" width="200" height="200" class="animated fadeInUp"></a>
+		<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" class="animated fadeInUp"></a>
 		<h1 class="site-title animated fadeIn"><a href="{{ site.url }}">{{ site.title }}</a></h1>
 		<h2 class="site-description animated fadeIn">{{ site.description }}</h2>
 	</div>

_layouts/page.html

@@ -16,7 +16,7 @@
   <article class="hentry" itemscope itemtype="http://schema.org/Blogpageing" itemprop="blogpage">
     {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}">{% endif %}
     <div class="entry-wrapper">
-      <header "entry-header">
+      <header class="entry-header">
         <h1 class="entry-title" itemprop="headline"><a href="{{ site.url }}{{ page.url }}" title="{{ page.title }}">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}</a></h1>{% endif %}
       </header>
       <div class="entry-content">

_layouts/post.html

@@ -16,13 +16,14 @@
   <article class="hentry" itemscope itemtype="http://schema.org/Blogpageing" itemprop="blogpage">
     {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}">{% endif %}
     <div class="entry-wrapper">
-      <header "entry-header">
+      <header class="entry-header">
         <span class="entry-tags">{% for tag in page.tags %}<a href="{{ site.url }}/tags.html#{{ tag | cgi_encode }}" title="pages tagged {{ tag }}">{{ tag }}</a>{% unless forloop.last %} &bull; {% endunless %}{% endfor %}</span>
         <h1 class="entry-title" itemprop="headline"><a href="{{ site.url }}{{ page.url }}" title="{{ page.title }}">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}</a></h1>{% endif %}
       </header>
       <footer class="entry-meta">
-        <span class="entry-date"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time></span>
+        <img src="{{ site.url }}/images/{{ site.owner.avatar }}" alt="{{ site.owner.name }} photo" class="author-photo">
         <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">By <span itemprop="name"><a href="{{ site.url }}/about.html" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span>
+        <span class="entry-date"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time></span>
         <span><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}"><i class="icon-link"></i> Permalink</a></span>
       </footer>
       <div class="entry-content">

assets/css/main.css

@@ -2560,17 +2560,26 @@ body {
   -moz-animation-delay: .05s;
   -o-animation-delay: .05s;
   animation-delay: .05s;
+  -webkit-border-radius: 100px;
+  -moz-border-radius: 100px;
+  border-radius: 100px;
 }
 @media only screen and (min-width: 48em) {
   .site-logo img {
     width: 150px;
     height: 150px;
+    -webkit-border-radius: 150px;
+    -moz-border-radius: 150px;
+    border-radius: 150px;
   }
 }
 @media only screen and (min-width: 62.5em) {
   .site-logo img {
     width: 200px;
     height: 200px;
+    -webkit-border-radius: 200px;
+    -moz-border-radius: 200px;
+    border-radius: 200px;
   }
 }
 .site-title {
@@ -2638,6 +2647,19 @@ body {
 .entry-feature-image {
   margin: 40px 0;
 }
+.entry-header {
+  max-width: 640px;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media only screen and (min-width: 62.5em) {
+  .entry-header {
+    max-width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
 .entry-tags {
   display: block;
   margin-top: 2em;
@@ -2707,6 +2729,10 @@ span + .entry-title {
   }
 }
 .entry-meta {
+  max-width: 640px;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
   display: block;
   text-transform: uppercase;
   font-size: 14px;
@@ -2735,6 +2761,30 @@ span + .entry-title {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
 }
+.author-photo {
+  display: none;
+}
+@media only screen and (min-width: 62.5em) {
+  .author-photo {
+    display: block;
+    width: 150px;
+    height: 150px;
+    margin-bottom: 10px;
+    -webkit-border-radius: 150px;
+    -moz-border-radius: 150px;
+    border-radius: 150px;
+    *zoom: 1;
+  }
+  .author-photo:before,
+  .author-photo:after {
+    display: table;
+    content: "";
+    line-height: 0;
+  }
+  .author-photo:after {
+    clear: both;
+  }
+}
 .entry-content {
   max-width: 640px;
   width: 100%;

assets/less/page.less

@@ -116,13 +116,16 @@ body {
 	    -moz-animation-delay: .05s;
 	    -o-animation-delay: .05s;
 	    animation-delay: .05s;
+	    .rounded(100px);
 		@media @medium {
 			width: 150px;
 			height: 150px;
+			.rounded(150px);
 		}
 		@media @large {
 			width: 200px;
 			height: 200px;
+			.rounded(200px);
 		}
 	}
 }
@@ -171,6 +174,17 @@ body {
 .entry-feature-image {
 	margin: 40px 0;
 }
+.entry-header {
+	max-width: 640px;
+	width: 100%;
+	margin-right: auto;
+	margin-left: auto;
+	@media @large {
+		max-width: 100%;
+		margin-right: 0;
+		margin-left: 0;
+	}
+}
 .entry-tags {
 	display: block;
 	margin-top: 2em;
@@ -215,6 +229,10 @@ span + .entry-title {
 	}
 }
 .entry-meta {
+	max-width: 640px;
+	width: 100%;
+	margin-right: auto;
+	margin-left: auto;
 	display: block;
 	text-transform: uppercase;
 	.font-rem(14);
@@ -236,6 +254,17 @@ span + .entry-title {
 		}
 	}
 }
+.author-photo {
+	display: none;
+	@media @large {
+		display: block;
+		width: 150px;
+		height: 150px;
+		margin-bottom: 10px;
+		.rounded(150px);
+		.clearfix();
+	}
+}
 .entry-content {
 	max-width: 640px;
 	width: 100%;