Skip to content

Tweaking the overall blog layout #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mahmoudimus merged 13 commits into from
Dec 5, 2012
Merged

Tweaking the overall blog layout #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c05f407
Tweaked the article listing styles
joonas Dec 5, 2012
69cce9d
Made twitter widget load asynchronously
joonas Dec 5, 2012
a1c8b46
Doing it this way yields better rendering of the twitter button, sinc…
joonas Dec 5, 2012
82e1e56
Made the google plus button nicer
joonas Dec 5, 2012
c18c33f
Cleaned up the formatting of the sidebar contents on the listing page
joonas Dec 5, 2012
079a21c
Added a styling hook for sidebar
joonas Dec 5, 2012
1b35b40
Styled the sidebar
joonas Dec 5, 2012
27917d4
Minor style tweaks
joonas Dec 5, 2012
b1df2f1
Switched header image to a clickable link
joonas Dec 5, 2012
4f3a287
Set the individual article to follow the same style
joonas Dec 5, 2012
117e5ca
Style tweaks for article detail views
joonas Dec 5, 2012
14e67f3
Merged latest changes from upstream.
joonas Dec 5, 2012
b471bac
Tweaked the author line
joonas Dec 5, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 25 additions & 27 deletions _includes/post-article-detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,41 @@
{% endif %}

<article itemscope itemtype="http://schema.org/BlogPosting" class="group caption_and_post_info hentry post">
<section class="caption group">
<header>
<h2 itemprop="name" class="entry-title">
<a href="{{ site.url }}{{ post.url }}" rel="bookmark">{{ post.title }}</a>
</h2>
</header>

<section class="entry-content cont group">
{{ content }}
</section>

<header>
<h2 itemprop="name" class="entry-title">
<a href="{{ site.url }}{{ post.url }}" rel="bookmark">{{ post.title }}</a>
</h2>
</header>
<div class="post_info">
<abbr class="published updated" title="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</abbr>
{% if post.author %}
<span class="byline">posted by:
<address class="vcard author"><span class="fn">{{ post.author }}</span></address>
</span>
{% endif %}
</div>
<section class="entry-content cont group">
{{ content }}
</section>

<footer class="end-of-post">
<ul class="post_info floating">
<li class="timestamp has_caption with_title">
<abbr class="published updated" title="{{ post.date | date_to_xmlschema }}">
{{ post.date | date_to_string }}
</abbr>
</li>
<li class="has_caption with_title">
<address class="vcard author"><span class="fn">{{ post.author }}</span></address>
</li>
<footer class="post_meta">
<ul class="tags">
{% for tag in post.tags %}
<li><a href="/tag#{{ tag }}" rel="tag" class="tag"><span>#</span>{{ tag }}</a></li>
{% endfor %}
</ul>
<ul class="social_sharing">
<li>
<g:plusone size="medium" href="{{ site.url }}{{ post.url }}"></g:plusone>
<g:plusone size="medium" annotation="none" href="{{ site.url }}{{ post.url }}"></g:plusone>
</li>
<li>
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="{{ site.url }}{{ post.url }}"
data-text="{% if post.tweet-text %}{{ post.tweet-text }}{% else %}{{ post.title }}{% endif %}">
Tweet
data-text="{% if post.tweet-text %}{{ post.tweet-text }}{% else %}{{ post.title }}{% endif %}"
data-count="none"
data-lang="en">
tweet
</a>
</li>
</ul>
</footer>
</article>

</article>
55 changes: 25 additions & 30 deletions _includes/post-article.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,40 @@

{% assign content = post.content %}


<article itemscope itemtype="http://schema.org/BlogPosting" class="group caption_and_post_info hentry">
<section class="caption group">
<header>
<h2 itemprop="name" class="entry-title">
<a href="{{ site.url }}{{ post.url }}" rel="bookmark">{{ post.title }}</a>
</h2>
</header>

<section class="entry-content cont group">
{{ content }}
</section>

<header>
<h2 itemprop="name" class="entry-title">
<a href="{{ site.url }}{{ post.url }}" rel="bookmark">{{ post.title }}</a>
</h2>
</header>
<div class="post_info">
<abbr class="published updated" title="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</abbr>
{% if post.author %}
<span class="byline">posted by:
<address class="vcard author"><span class="fn">{{ post.author }}</span></address>
</span>
{% endif %}
</div>
<section class="entry-content cont group">
{{ content }}
</section>

<footer class="end-of-post">
<ul class="post_info floating">
<li class="timestamp has_caption with_title">
<abbr class="published updated" title="{{ post.date | date_to_xmlschema }}">
{{ post.date | date_to_string }}
</abbr>
</li>
<li class="has_caption with_title">
<address class="vcard author"><span class="fn">{{ post.author }}</span></address>
</li>
<footer class="post_meta">
<ul class="tags">
{% for tag in post.tags %}
<li><a href="/tag#{{ tag }}" rel="tag" class="tag"><span>#</span>{{ tag }}</a></li>
{% endfor %}
</ul>
<ul class="social_sharing">
<li>
<g:plusone size="medium" href="{{ site.url }}{{ post.url }}"></g:plusone>
<g:plusone size="medium" annotation="none" href="{{ site.url }}{{ post.url }}"></g:plusone>
</li>
<li>
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="{{ site.url }}{{ post.url }}"
data-text="{% if post.tweet-text %}{{ post.tweet-text }}{% else %}{{ post.title }}{% endif %}">
Tweet
data-text="{% if post.tweet-text %}{{ post.tweet-text }}{% else %}{{ post.title }}{% endif %}"
data-count="none"
data-lang="en">
tweet
</a>
</li>
</ul>
</footer>
</article>

</article>
11 changes: 4 additions & 7 deletions _includes/post-list-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<li class="hentry">
<span class="published updated" title="{{ post.date | date_to_xmlschema }}">
{{ post.date | date_to_string }}
</span>
&raquo; <a class="entry-title" href="{{ site.url }}{{ post.url }}" rel="bookmark">
{{ post.title }}</a>
<address class="vcard author"><span class="fn">{{ post.author }}</span></address>
</li>
<span class="published updated" title="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</span>
<a class="entry-title" href="{{ site.url }}{{ post.url }}" rel="bookmark">{{ post.title }}</a>
<address class="vcard author"><span class="fn">{{ post.author }}</span></address>
</li>
6 changes: 3 additions & 3 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

<section id="color_bar" class="wrapper clearfix">
<img class="displayed" src="/img/blog_logo_header.png">
<a id="logo" href="/">Balanced Payments blog</a>
</section>

<section id="container" class="wrapper clearfix">
Expand Down Expand Up @@ -54,7 +54,7 @@ <h3></h3>

<!-- Tweet button -->
<script type="text/javascript">
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

<!-- Google analytics -->
Expand All @@ -66,4 +66,4 @@ <h3></h3>
</script>

</body>
</html>
</html>
4 changes: 2 additions & 2 deletions _layouts/post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
</div>

{% if site.related_posts.size > 0 %}
<aside>
<aside id="sidebar">
<h3>Related posts</h3>
<ul class="posts-list hfeed">
{% for post in site.related_posts %}
{% include post-list-item.html %}
{% endfor %}
</ul>
</aside>
{% endif %}
{% endif %}
98 changes: 87 additions & 11 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,63 @@ section#header-container img.displayed {
padding-top: 39px;
}

.hfeed {
margin-top: 80px;
}

article {
margin-right: auto;
margin-left: auto;
width: 700px;
}

section.entry-content {
padding: 25px;
margin: 42px 0 0;
position: relative;
width: 666px;
text-align: justify;
background-color: white;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 3px 3px #cfcfcf;
-moz-box-shadow: 3px 3px #cfcfcf;;
box-shadow: 3px 3px #cfcfcf;;
padding: 32px;
}

article header {
margin: -74px 0 0 -32px;
position: absolute;
}

article header .entry-title {
margin: 0;
}

article header .entry-title a {
color: #000000;
}

article .post_info {
line-height: 15px;
border-bottom: 4px solid #bbbdbf;
padding-bottom: 8px;
color: #000000
}

article .post_info address,
article .post_info abbr {
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}

article .post_info .byline {
font-size: 12px;
float: right;
font-style: italic;
}

article .post_info .author {
font-style: normal;
display: inline;
}

article .post_info .published {
border: none;
}

section.entry-content {
margin: 32px 0;
}

a {
Expand All @@ -64,3 +104,39 @@ article h1 a {
font-weight: bold;
letter-spacing: 1px;;
}

article .post_meta {
border-top: 1px solid #666;
}

article .post_meta ul {
margin: 0;
padding: 4px 0 0;
}

article .post_meta ul li {
float: left;
}

article .post_meta .tags {
float: left;
line-height: 20px;
text-transform: lowercase;
letter-spacing: 1px;
}

article .post_meta .tags li {
margin-right: 4px;
}

article .post_meta .tags span {
color: #78a22f;
}

article .post_meta .social_sharing {
float: right;
}

article .post_meta .social_sharing li {
margin-left: 4px;
}
Loading