Rename classes for consistency

This commit is contained in:
Michael Rose 2016-02-22 21:44:55 -05:00
parent a572dbaae0
commit ddb78bf337
5 changed files with 57 additions and 88 deletions

View File

@ -4,14 +4,14 @@
<div itemscope itemtype="http://schema.org/Person">
{% if author.avatar contains 'http' %}
<img src="{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo">
{% if author.avatar contains "http" %}
<img src="{{ author.avatar }}" class="author-avatar" alt="{{ author.name }} photo">
{% else %}
<img src="{{ author.avatar | prepend: absurl }}" class="bio-photo" alt="{{ author.name }} bio photo">
<img src="{{ author.avatar | prepend: absurl }}" class="author-avatar" alt="{{ author.name }} photo">
{% endif %}
<h3 itemprop="name">{{ author.name }}</h3>
{% if author.bio %}<p>{{ author.bio }}</p>{% endif %}
<h3 itemprop="name" class="author-name">{{ author.name }}</h3>
{% if author.bio %}<p class="author-bio">{{ author.bio }}</p>{% endif %}
{% if author.email %}
<a href="mailto:{{ author.email }}" class="author-social" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a>
{% endif %}

View File

@ -6,7 +6,7 @@
{% include head.html %}
</head>
<body class="{{ layout.class }}">
<body>
{% include browser-upgrade.html %}
{% include navigation.html %}
@ -14,7 +14,7 @@
{% if page.image.feature %}
<div class="image-wrap">
<img src=
{% if page.image.feature contains 'http' %}
{% if page.image.feature contains "http" %}
"{{ page.image.feature }}"
{% else %}
"{{ page.image.feature | prepend: "/images/" | prepend: absurl }}"
@ -27,8 +27,8 @@
{% endif %}
<div id="main" role="main">
<div class="article-author-side">
{% include author-bio.html %}
<div class="author-profile">
{% include author-profile.html %}
</div>
{{ content }}
</div><!-- /#main -->

View File

@ -4,7 +4,7 @@ layout: default
{% include absolute-url.liquid %}
<div id="index">
<div class="archive">
<h3><a href="{{ absurl }}/posts/">Recent Posts</a></h3>
{% for post in site.posts limit:5 %}
<article>

View File

@ -4,7 +4,7 @@ layout: default
{% include absolute-url.liquid %}
<div id="index">
<div class="archive">
<h1>{{ page.title }}</h1>
{% capture written_year %}'None'{% endcapture %}
{% for post in site.posts %}
@ -22,4 +22,4 @@ layout: default
{% endif %}
</article>
{% endfor %}
</div><!-- /#index -->
</div><!-- /.archive -->

View File

@ -247,8 +247,8 @@ $button-size: 1.5rem;
}
}
/* Index listing specific styling */
#index {
/* Archive listing specific styling */
.archive {
@include container;
@include grid(12,10);
@include prefix(12,1);
@ -342,23 +342,47 @@ $button-size: 1.5rem;
clear: both;
font-size: 80%;
}
.article-author-side,
.article-author-bottom {
h3 {
margin-bottom: 0;
}
p {
font-size: 80%;
font-style: italic;
}
/* Author profile */
.author-profile {
display: none;
a, a:hover {
border-bottom: 0 solid transparent;
}
@media #{$small} {
display: block;
@include grid(12,2);
@include prefix(12,0.5);
@include suffix(12,0.5);
}
@media #{$x-large} {
@include grid(12,1.5);
@include prefix(12,2);
}
}
.author-name {
margin-bottom: 0;
@media #{$small} {
margin-top: 10px;
margin-bottom: 10px;
}
}
.author-bio {
font-size: 80%;
font-style: italic;
@media #{$small} {
margin-bottom: 20px;
}
}
.author-avatar {
max-width: 110px;
@include rounded(150px);
}
/* Default social media links in author sidebar */
.author-social {
display: block;
margin-bottom: 5px;
@include font-rem(14);
color: $black;
@ -376,72 +400,17 @@ $button-size: 1.5rem;
}
}
/* Author sidebar */
.article-author-side {
display: none;
.bio-photo {
max-width: 110px;
@include rounded(150px);
}
@media #{$small} {
display: block;
@include grid(12,2);
@include prefix(12,0.5);
@include suffix(12,0.5);
h3,
p,
.author-social {
display: block;
max-width: 125px;
}
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
p {
margin-bottom: 20px;
}
.author-social {
margin-bottom: 5px;
}
}
@media #{$large} {
h3,
.bio-photo,
p,
.author-social {
max-width: 150px;
}
}
@media #{$x-large} {
@include grid(12,1.5);
@include prefix(12,2);
}
@media #{$small} {
display: block;
max-width: 125px;
}
/* Author module - mobile only */
.article-author-bottom {
margin-bottom: 1em;
@media #{$small} {
display: none;
}
.bio-photo {
float: left;
margin-right: 25px;
max-width: 100px;
@include rounded(150px);
}
@media #{$large} {
.author-name,
.author-avatar,
.author-bio,
.author-social {
display: inline-block;
margin-right: 10px;
}
@media #{$large} {
h3,
.bio-photo,
p,
.author-social {
max-width: 150px;
}
max-width: 150px;
}
}