Add author photo, fix header alignment

This commit is contained in:
Michael Rose 2013-06-25 22:34:15 -04:00
parent 8819c4efaf
commit f397edc0d3
7 changed files with 86 additions and 5 deletions

View file

@ -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"

View file

@ -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>

View file

@ -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">

View file

@ -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">

View file

@ -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%;

View file

@ -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%;

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB