1. Made default layout more generic.
2. Added a page layout and improved html on post layout. 3. Improved flexibility of stylesheets for different layout types. 4. Collapsing sidebar now moves it to the bottom of the page and floats content into columns. 5. Improved sharing settings, added Google plus one.
This commit is contained in:
Brandon Mathis
parent
67c5edb2f6
commit
5d1d04c52c
|
|
@ -1,6 +1,7 @@
|
|||
@import "partials/header";
|
||||
@import "partials/navigation";
|
||||
@import "partials/blog";
|
||||
@import "partials/sharing";
|
||||
@import "partials/syntax";
|
||||
@import "partials/archive";
|
||||
@import "partials/sidebar";
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ body {
|
|||
max-width: $max-width;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
> header, > nav, > footer, #articles > article, #articles > nav {
|
||||
> header, > nav, > footer, #content > article, #content > div > article {
|
||||
@extend .group;
|
||||
padding-left: $pad-min;
|
||||
padding-right: $pad-min;
|
||||
|
|
@ -43,64 +43,77 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.toggle-sidebar { display: none; }
|
||||
#articles { width: 100%;
|
||||
+ aside {
|
||||
#content {
|
||||
> div, > article { width: 100%; }
|
||||
> aside {
|
||||
float: none;
|
||||
padding: 0 $pad-min 1px;
|
||||
background-color: $sidebar-bg;
|
||||
background-color: lighten($sidebar-bg, 2);
|
||||
border-top: 1px solid $sidebar-border;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-sidebar { display: none; }
|
||||
|
||||
@media only screen and (min-width: 550px) {
|
||||
body > header { font-size: 1em; }
|
||||
#content aside {
|
||||
@extend .group;
|
||||
section {
|
||||
&.odd, &.even { float: left; width: 48%; }
|
||||
&.odd { margin-left: 0; }
|
||||
&.even { margin-left: 4%; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
body { -webkit-text-size-adjust: auto; }
|
||||
body > header { font-size: 1.2em; }
|
||||
body > nav {
|
||||
+ div {
|
||||
@extend .group;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
> div {
|
||||
@extend .group;
|
||||
margin-right: $sidebar-width-medium;
|
||||
}
|
||||
}
|
||||
#main {
|
||||
@extend .group;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#articles {
|
||||
padding-top: $pad-medium/2;
|
||||
padding-bottom: $pad-medium/2;
|
||||
float: left;
|
||||
+ aside {
|
||||
#content {
|
||||
@extend .group;
|
||||
margin-right: $sidebar-width-medium;
|
||||
position: relative;
|
||||
> div, > article {
|
||||
padding-top: $pad-medium/2;
|
||||
padding-bottom: $pad-medium/2;
|
||||
float: left;
|
||||
}
|
||||
> aside {
|
||||
width: $sidebar-width-medium - $sidebar-pad-medium*2;
|
||||
padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
|
||||
background: none;
|
||||
float: left;
|
||||
margin: 0 -100% 0 0;
|
||||
section, section.even { width: auto; margin: 0; }
|
||||
}
|
||||
.collapse-sidebar & {
|
||||
margin-right: 10px;
|
||||
> aside {
|
||||
float: none;
|
||||
clear: left;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0 $pad-medium 1px;
|
||||
background-color: lighten($sidebar-bg, 2);
|
||||
border-top: 1px solid lighten($sidebar-border, 4);
|
||||
section {
|
||||
&.odd, &.even { float: left; width: 48%; }
|
||||
&.odd { margin-left: 0; }
|
||||
&.even { margin-left: 4%; }
|
||||
}
|
||||
}
|
||||
> aside.thirds section {
|
||||
width: 30%;
|
||||
margin-left: 5%;
|
||||
&.first { margin-left: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
body > div > div { position: relative; }
|
||||
|
||||
.collapse-sidebar {
|
||||
> div > div { margin-right: 10px; }
|
||||
#articles + aside {
|
||||
display: none;
|
||||
}
|
||||
.toggle-sidebar {
|
||||
right: -1px;
|
||||
background-color: $sidebar-bg;
|
||||
border-right-width: 0;
|
||||
text-indent: 2px;
|
||||
border-left: 1px solid $sidebar-border;
|
||||
@include border-bottom-right-radius(0);
|
||||
@include border-bottom-left-radius(.3em);
|
||||
@include link-colors(#aaa, #888);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-sidebar {
|
||||
outline: none;
|
||||
position: absolute; right: -21px; top: 0;
|
||||
|
|
@ -117,18 +130,37 @@ body {
|
|||
border-bottom: 1px solid $sidebar-border;
|
||||
border-right: 1px solid $sidebar-border;
|
||||
display: inline-block;
|
||||
.collapse-sidebar & {
|
||||
right: -11px;
|
||||
width: 24px;
|
||||
bottom: 0;
|
||||
background-color: $sidebar-bg;
|
||||
border-right-width: 0;
|
||||
text-indent: 0px;
|
||||
border-left: 1px solid $sidebar-border;
|
||||
@include link-colors(#aaa, #888);
|
||||
&:hover {
|
||||
background: $sidebar-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
body > header { font-size: 1.3em; }
|
||||
body > nav + div > div { margin-right: $sidebar-width-wide; }
|
||||
#articles {
|
||||
padding-top: $pad-wide/2;
|
||||
padding-bottom: $pad-wide/2;
|
||||
+ aside {
|
||||
#content { margin-right: $sidebar-width-wide; }
|
||||
#content {
|
||||
> div, > article {
|
||||
padding-top: $pad-wide/2;
|
||||
padding-bottom: $pad-wide/2;
|
||||
}
|
||||
> aside {
|
||||
width: $sidebar-width-wide - $sidebar-pad-wide*2;
|
||||
padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
|
||||
}
|
||||
.collapse-sidebar & aside {
|
||||
padding: { left: $pad-wide; right: $pad-wide; }
|
||||
@extend .group;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#articles .blog-archives {
|
||||
#blog-archives {
|
||||
article {
|
||||
padding: 1em 0 1em;
|
||||
position: relative;
|
||||
|
|
@ -57,13 +57,11 @@
|
|||
padding:{left: 4.5em; bottom: .7em;}
|
||||
}
|
||||
a.category {
|
||||
//text-align: right;
|
||||
line-height: 1.1em;
|
||||
//float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
#articles .blog-archives.category {
|
||||
#content > .category {
|
||||
article {
|
||||
margin-left: 0;
|
||||
padding-left: 6.8em;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
#articles {
|
||||
overflow: hidden;
|
||||
ul, ol { margin-left: 1.4em; }
|
||||
#content {
|
||||
article { ul, ol { margin-left: 1.4em; }}
|
||||
@media only screen and (min-width: 768px) {
|
||||
ul, ol { margin-left: 0; }
|
||||
}
|
||||
> article {
|
||||
> article, > div > article {
|
||||
overflow: hidden;
|
||||
padding-bottom: 1em;
|
||||
&:last-child { margin-bottom: 0; }
|
||||
h2 {
|
||||
padding-top: 0.8em;
|
||||
background: $img-border top left repeat-x;
|
||||
&:first-child { background: none; padding-top: 0; }
|
||||
.entry-content &:first-child { padding-top: 0; }
|
||||
&:first-child { background: none; }
|
||||
}
|
||||
.byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
|
||||
@extend .separator;
|
||||
|
|
@ -80,24 +81,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
iframe.twitter-share-button {
|
||||
position: relative;
|
||||
top: .3em;
|
||||
padding-left: .5em;
|
||||
}
|
||||
> article > footer {
|
||||
margin-top: 2em;
|
||||
padding-top: 1em;
|
||||
> div > article > footer {
|
||||
margin-bottom: 1.5em;
|
||||
background: $img-border top left repeat-x;
|
||||
margin-top: 2em;
|
||||
padding-top: 1em;
|
||||
@extend .sans;
|
||||
p.meta { display: inline-block; font-size: .8em; }
|
||||
}
|
||||
|
||||
}
|
||||
article + article {
|
||||
background: $img-border top left repeat-x;
|
||||
}
|
||||
#articles.blog-index {
|
||||
#content .blog-index {
|
||||
article header { background: none; padding-bottom: 0; }
|
||||
article h1 {
|
||||
font-size: 2.2em;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
footer .sharing {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: .3em;
|
||||
padding-left: .5em;
|
||||
&:first-child { padding-left: 0; }
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
|
||||
.line-numbers {
|
||||
text-align: right;
|
||||
font-size: .8em;
|
||||
font-size: 13px;
|
||||
line-height: 1.45em;
|
||||
background: $base02 $noise-bg !important;
|
||||
border-right: 1px solid darken($base03, 2) !important;
|
||||
|
|
@ -57,7 +57,7 @@ pre {
|
|||
@extend .mono;
|
||||
border: 1px solid $pre-border;
|
||||
line-height: 1.45em;
|
||||
font-size: .8em;
|
||||
font-size: 13px;
|
||||
margin-bottom: 1.5em;
|
||||
padding: .8em 1em;
|
||||
color: $pre-color;
|
||||
|
|
@ -73,7 +73,7 @@ p code {
|
|||
display: inline-block;
|
||||
white-space: no-wrap;
|
||||
background: #fff;
|
||||
font-size: .9em;
|
||||
font-size: .8em;
|
||||
line-height: 1.5em;
|
||||
color: #555;
|
||||
border: 1px solid #ddd;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.side-shadow-border {
|
||||
@include box-shadow(lighten($sidebar-bg, 5) 0 1px);
|
||||
}
|
||||
#articles + aside {
|
||||
#content > aside {
|
||||
color: $sidebar-color;
|
||||
padding-top: 1.2em;
|
||||
//padding-top: 1.2em;
|
||||
text-shadow: lighten($sidebar-bg, 8) 0 1px;
|
||||
section {
|
||||
@extend .sans;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
{% if page.single and site.recent_posts %}
|
||||
<section>
|
||||
<h1>Recent Posts</h1>
|
||||
<ul id="recent_posts">
|
||||
|
|
@ -9,4 +8,3 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
{% if site.google_plus_one %}
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
|
||||
script.src = 'https://apis.google.com/js/plusone.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
|
||||
})();
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
@ -26,6 +26,8 @@
|
|||
<script src="/javascripts/octopress.js" type="text/javascript"></script>
|
||||
<link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
|
||||
{% include google_analytics.html %}
|
||||
<link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml"/>
|
||||
{% include google_analytics.html %}
|
||||
{% include google_plus_one.html %}
|
||||
{% include twitter_sharing.html %}
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1 +1,8 @@
|
|||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a>
|
||||
<div class="sharing">
|
||||
{% if site.twitter_tweet_button %}
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a>
|
||||
{% endif %}
|
||||
{% if site.google_plus_one %}
|
||||
<g:plusone size="{{ site.google_plus_one_size }}"></g:plusone>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
<section>
|
||||
<h1>About Me</h1>
|
||||
<p>Hi, I'm Octopress!</p>
|
||||
</section>
|
||||
{% include asides/recent_posts.html %}
|
||||
{% include asides/twitter.html %}
|
||||
{% include asides/delicious.html %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
{% if site.twitter_follow_button or site.twitter_tweet_button %}
|
||||
<script type="text/javascript">
|
||||
(function(){
|
||||
var twitterWidgets = document.createElement('script');
|
||||
twitterWidgets.type = 'text/javascript';
|
||||
twitterWidgets.async = true;
|
||||
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
|
||||
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
|
||||
})();
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
@ -2,25 +2,14 @@
|
|||
<body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == 'none' %} class="no-sidebar" {% endif %}>
|
||||
<header>{% include header.html %}</header>
|
||||
<nav>{% include navigation.html %}</nav>
|
||||
<div>
|
||||
<div>
|
||||
<div id="articles" {% if page.blog_index %} class="blog-index" {% endif %}>{{ content }}</div>
|
||||
<div id="main">
|
||||
<div id="content">
|
||||
{{ content }}
|
||||
{% unless page.sidebar == 'none' %}
|
||||
<aside>{% include sidebar.html %}</aside>
|
||||
<aside role=sidebar>{% include sidebar.html %}</aside>
|
||||
{% endunless %}
|
||||
</div>
|
||||
</div>
|
||||
<footer>{% include footer.html %}</footer>
|
||||
{% if site.twitter_follow_button or site.twitter_tweet_button %}
|
||||
<script type="text/javascript">
|
||||
(function(){
|
||||
var twitterWidgets = document.createElement('script');
|
||||
twitterWidgets.type = 'text/javascript';
|
||||
twitterWidgets.async = true;
|
||||
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
|
||||
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
|
||||
})();
|
||||
</script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,31 @@
|
|||
---
|
||||
layout: post
|
||||
layout: default
|
||||
---
|
||||
|
||||
<!-- if you want a page layout -->
|
||||
<div>
|
||||
<article>
|
||||
<header>
|
||||
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
|
||||
{% unless page.no_meta or !index %}<p class="meta">{% include post_date.html %}</p>{% endunless %}
|
||||
</header>
|
||||
{{ content | smart_quotes }}
|
||||
{% unless page.no_footer %}
|
||||
<footer>
|
||||
{% if page.date %}
|
||||
<p class="meta">
|
||||
{% include post_date.html %}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% unless page.no_sharing %}
|
||||
{% include sharing.html %}
|
||||
{% endunless %}
|
||||
</footer>
|
||||
{% endunless %}
|
||||
</article>
|
||||
{% if site.disqus_short_name and page.comments == true %}
|
||||
<section>
|
||||
<h1>Comments</h1>
|
||||
<div id="disqus_thread">{% include disqus_thread.html %}</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,24 @@ layout: default
|
|||
single: true
|
||||
---
|
||||
|
||||
<div>
|
||||
<article class="hentry">
|
||||
{% include article.html %}
|
||||
{% unless page.no_meta %}
|
||||
<footer>
|
||||
<p class="meta">
|
||||
{% include post_author.html %}
|
||||
{% include post_date.html %}
|
||||
{% include post_categories.html %}
|
||||
{% include sharing.html %}
|
||||
</p>
|
||||
{% unless page.no_sharing %}
|
||||
{% include sharing.html %}
|
||||
{% endunless %}
|
||||
</footer>
|
||||
{% endunless %}
|
||||
{% if site.disqus_short_name %}
|
||||
</article>
|
||||
{% if site.disqus_short_name and page.no_comments != true %}
|
||||
<section>
|
||||
<h1>Comments</h1>
|
||||
<div id="disqus_thread">{% include disqus_thread.html %}</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
---
|
||||
layout: post
|
||||
layout: page
|
||||
title: Blog Archive
|
||||
no_meta: true
|
||||
no_footer: true
|
||||
---
|
||||
<div class="blog-archives">
|
||||
|
||||
<div id="blog-archives">
|
||||
{% for post in site.posts reverse %}
|
||||
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
|
||||
{% unless year == this_year %}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
layout: default
|
||||
blog_index: true
|
||||
---
|
||||
<div class="blog-index">
|
||||
{% assign index = true %}
|
||||
{% for post in paginator.posts %}
|
||||
{% assign content = post.content %}
|
||||
|
|
@ -13,7 +14,7 @@ blog_index: true
|
|||
{% if paginator.next_page %}
|
||||
<a href="/page{{paginator.next_page}}/">← Older</a>
|
||||
{% endif %}
|
||||
<a href="/blog/archives.html">Blog Archive</a>
|
||||
<a href="/blog/archive.html">Blog Archive</a>
|
||||
{% if paginator.previous_page %}
|
||||
<a href="/page{{paginator.previous_page}}/">Newer →</a>
|
||||
{% endif %}
|
||||
|
|
@ -29,3 +30,4 @@ blog_index: true
|
|||
}());
|
||||
</script>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ function getNav(){
|
|||
});
|
||||
}
|
||||
function addSidebarToggler() {
|
||||
$('#articles').before('<a href="#" class="toggle-sidebar">»</a>').previous().bind('click', function(e){
|
||||
$('#content').prepend('<a href="#" class="toggle-sidebar">»</a>');
|
||||
$('.toggle-sidebar').bind('click', function(e){
|
||||
e.preventDefault();
|
||||
if($('body').hasClass('collapse-sidebar')){
|
||||
$('body').removeClass('collapse-sidebar');
|
||||
|
|
@ -19,6 +20,15 @@ function addSidebarToggler() {
|
|||
e.target.innerHTML = '«';
|
||||
}
|
||||
});
|
||||
sections = $('aside[role=sidebar] > section')
|
||||
if(sections.length >= 3){ $('aside[role=sidebar]').addClass('thirds') }
|
||||
sections.each(function(section, index){
|
||||
if ((sections.length >= 3) && index % 3 == 0) {
|
||||
$(section).addClass("first");
|
||||
}
|
||||
count = ((index +1) % 2) ? "odd" : "even";
|
||||
$(section).addClass(count);
|
||||
});
|
||||
}
|
||||
function testFeatures() {
|
||||
var features = ['maskImage'];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# Required configuration
|
||||
source: source
|
||||
destination: public
|
||||
plugins: plugins
|
||||
code_dir: downloads/code
|
||||
port: 4000
|
||||
|
||||
|
|
@ -34,6 +35,10 @@ twitter_follow_button: true
|
|||
twitter_show_follower_count: false
|
||||
twitter_tweet_button: true
|
||||
|
||||
# Google Plus
|
||||
google_plus_one: true
|
||||
google_plus_one_size: medium
|
||||
|
||||
# Pinboard
|
||||
pinboard_user:
|
||||
pinboard_count: 3
|
||||
|
|
|
|||
Loading…
Reference in New Issue