thomas
/
labnotes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1. Made default layout more generic.

Browse Source 
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.
main
Brandon Mathis 14 years ago
parent 67c5edb2f6
commit 5d1d04c52c
20 changed files with 195 additions and 102 deletions
Show Stats Download Patch File Download Diff File

1
.themes/classic/sass/_partials.scss
Unescape Escape View File

@ -1,6 +1,7 @@
@import "partials/header"; @import "partials/header";
@import "partials/navigation"; @import "partials/navigation";
@import "partials/blog"; @import "partials/blog";
@import "partials/sharing";
@import "partials/syntax"; @import "partials/syntax";
@import "partials/archive"; @import "partials/archive";
@import "partials/sidebar"; @import "partials/sidebar";

118
.themes/classic/sass/base/_layout.scss
Unescape Escape View File

@ -19,7 +19,7 @@ body {
max-width: $max-width; max-width: $max-width;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
> header, > nav, > footer, #articles > article, #articles > nav { > header, > nav, > footer, #content > article, #content > div > article {
@extend .group; @extend .group;
padding-left: $pad-min; padding-left: $pad-min;
padding-right: $pad-min; padding-right: $pad-min;
@ -43,64 +43,77 @@ body {
} }
} }
.toggle-sidebar { display: none; } #content {
#articles { width: 100%; > div, > article { width: 100%; }
+ aside { > aside {
float: none; float: none;
padding: 0 $pad-min 1px; padding: 0 $pad-min 1px;
background-color: $sidebar-bg; background-color: lighten($sidebar-bg, 2);
border-top: 1px solid $sidebar-border; border-top: 1px solid $sidebar-border;
} }
} }
.toggle-sidebar { display: none; }
@media only screen and (min-width: 550px) { @media only screen and (min-width: 550px) {
body > header { font-size: 1em; } 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) { @media only screen and (min-width: 768px) {
body { -webkit-text-size-adjust: auto; } body { -webkit-text-size-adjust: auto; }
body > header { font-size: 1.2em; } body > header { font-size: 1.2em; }
body > nav { #main {
+ div { @extend .group;
@extend .group; padding: 0;
padding: 0; margin: 0 auto;
margin: 0 auto;
> div {
@extend .group;
margin-right: $sidebar-width-medium;
}
}
} }
#articles { #content {
padding-top: $pad-medium/2; @extend .group;
padding-bottom: $pad-medium/2; margin-right: $sidebar-width-medium;
float: left; position: relative;
+ aside { > div, > article {
padding-top: $pad-medium/2;
padding-bottom: $pad-medium/2;
float: left;
}
> aside {
width: $sidebar-width-medium - $sidebar-pad-medium*2; width: $sidebar-width-medium - $sidebar-pad-medium*2;
padding: 0 $sidebar-pad-medium $sidebar-pad-medium; padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
background: none; background: none;
float: left; float: left;
margin: 0 -100% 0 0; margin: 0 -100% 0 0;
section, section.even { width: auto; margin: 0; }
} }
} .collapse-sidebar & {
body > div > div { position: relative; } margin-right: 10px;
> aside {
.collapse-sidebar { float: none;
> div > div { margin-right: 10px; } clear: left;
#articles + aside { width: auto;
display: none; margin: 0;
} padding: 0 $pad-medium 1px;
.toggle-sidebar { background-color: lighten($sidebar-bg, 2);
right: -1px; border-top: 1px solid lighten($sidebar-border, 4);
background-color: $sidebar-bg; section {
border-right-width: 0; &.odd, &.even { float: left; width: 48%; }
text-indent: 2px; &.odd { margin-left: 0; }
border-left: 1px solid $sidebar-border; &.even { margin-left: 4%; }
@include border-bottom-right-radius(0); }
@include border-bottom-left-radius(.3em); }
@include link-colors(#aaa, #888); > aside.thirds section {
width: 30%;
margin-left: 5%;
&.first { margin-left: 0; }
}
} }
} }
.toggle-sidebar { .toggle-sidebar {
outline: none; outline: none;
position: absolute; right: -21px; top: 0; position: absolute; right: -21px; top: 0;
@ -117,18 +130,37 @@ body {
border-bottom: 1px solid $sidebar-border; border-bottom: 1px solid $sidebar-border;
border-right: 1px solid $sidebar-border; border-right: 1px solid $sidebar-border;
display: inline-block; 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) { @media only screen and (min-width: 992px) {
body > header { font-size: 1.3em; } body > header { font-size: 1.3em; }
body > nav + div > div { margin-right: $sidebar-width-wide; } #content { margin-right: $sidebar-width-wide; }
#articles { #content {
padding-top: $pad-wide/2; > div, > article {
padding-bottom: $pad-wide/2; padding-top: $pad-wide/2;
+ aside { padding-bottom: $pad-wide/2;
}
> aside {
width: $sidebar-width-wide - $sidebar-pad-wide*2; width: $sidebar-width-wide - $sidebar-pad-wide*2;
padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide; padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
} }
.collapse-sidebar & aside {
padding: { left: $pad-wide; right: $pad-wide; }
@extend .group;
}
} }
} }

6
.themes/classic/sass/partials/_archive.scss
Unescape Escape View File

@ -1,4 +1,4 @@
#articles .blog-archives { #blog-archives {
article { article {
padding: 1em 0 1em; padding: 1em 0 1em;
position: relative; position: relative;
@ -57,13 +57,11 @@
padding:{left: 4.5em; bottom: .7em;} padding:{left: 4.5em; bottom: .7em;}
} }
a.category { a.category {
//text-align: right;
line-height: 1.1em; line-height: 1.1em;
//float: right;
} }
} }
} }
#articles .blog-archives.category { #content > .category {
article { article {
margin-left: 0; margin-left: 0;
padding-left: 6.8em; padding-left: 6.8em;

25
.themes/classic/sass/partials/_blog.scss
Unescape Escape View File

@ -1,16 +1,17 @@
#articles { #content {
overflow: hidden; article { ul, ol { margin-left: 1.4em; }}
ul, ol { margin-left: 1.4em; }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
ul, ol { margin-left: 0; } ul, ol { margin-left: 0; }
} }
> article { > article, > div > article {
overflow: hidden;
padding-bottom: 1em; padding-bottom: 1em;
&:last-child { margin-bottom: 0; } &:last-child { margin-bottom: 0; }
h2 { h2 {
padding-top: 0.8em; padding-top: 0.8em;
background: $img-border top left repeat-x; 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 { .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
@extend .separator; @extend .separator;
@ -80,24 +81,20 @@
} }
} }
} }
iframe.twitter-share-button { > div > article > footer {
position: relative;
top: .3em;
padding-left: .5em;
}
> article > footer {
margin-top: 2em;
padding-top: 1em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
background: $img-border top left repeat-x; background: $img-border top left repeat-x;
margin-top: 2em;
padding-top: 1em;
@extend .sans; @extend .sans;
p.meta { display: inline-block; font-size: .8em; }
} }
} }
article + article { article + article {
background: $img-border top left repeat-x; background: $img-border top left repeat-x;
} }
#articles.blog-index { #content .blog-index {
article header { background: none; padding-bottom: 0; } article header { background: none; padding-bottom: 0; }
article h1 { article h1 {
font-size: 2.2em; font-size: 2.2em;

7
.themes/classic/sass/partials/_sharing.scss
Unescape Escape View File

@ -0,0 +1,7 @@
footer .sharing {
display: inline-block;
position: relative;
top: .3em;
padding-left: .5em;
&:first-child { padding-left: 0; }
}

6
.themes/classic/sass/partials/_syntax.scss
Unescape Escape View File

@ -1,7 +1,7 @@
.highlight, html .gist .gist-file .gist-syntax .gist-highlight { .highlight, html .gist .gist-file .gist-syntax .gist-highlight {
.line-numbers { .line-numbers {
text-align: right; text-align: right;
font-size: .8em; font-size: 13px;
line-height: 1.45em; line-height: 1.45em;
background: $base02 $noise-bg !important; background: $base02 $noise-bg !important;
border-right: 1px solid darken($base03, 2) !important; border-right: 1px solid darken($base03, 2) !important;
@ -57,7 +57,7 @@ pre {
@extend .mono; @extend .mono;
border: 1px solid $pre-border; border: 1px solid $pre-border;
line-height: 1.45em; line-height: 1.45em;
font-size: .8em; font-size: 13px;
margin-bottom: 1.5em; margin-bottom: 1.5em;
padding: .8em 1em; padding: .8em 1em;
color: $pre-color; color: $pre-color;
@ -73,7 +73,7 @@ p code {
display: inline-block; display: inline-block;
white-space: no-wrap; white-space: no-wrap;
background: #fff; background: #fff;
font-size: .9em; font-size: .8em;
line-height: 1.5em; line-height: 1.5em;
color: #555; color: #555;
border: 1px solid #ddd; border: 1px solid #ddd;

4
.themes/classic/sass/partials/sidebar/_base.scss
Unescape Escape View File

@ -1,9 +1,9 @@
.side-shadow-border { .side-shadow-border {
@include box-shadow(lighten($sidebar-bg, 5) 0 1px); @include box-shadow(lighten($sidebar-bg, 5) 0 1px);
} }
#articles + aside { #content > aside {
color: $sidebar-color; color: $sidebar-color;
padding-top: 1.2em; //padding-top: 1.2em;
text-shadow: lighten($sidebar-bg, 8) 0 1px; text-shadow: lighten($sidebar-bg, 8) 0 1px;
section { section {
@extend .sans; @extend .sans;

2
.themes/classic/source/_includes/asides/recent_posts.html
Unescape Escape View File

@ -1,4 +1,3 @@
{% if page.single and site.recent_posts %}
<section> <section>
<h1>Recent Posts</h1> <h1>Recent Posts</h1>
<ul id="recent_posts"> <ul id="recent_posts">
@ -9,4 +8,3 @@
{% endfor %} {% endfor %}
</ul> </ul>
</section> </section>
{% endif %}

9
.themes/classic/source/_includes/google_plus_one.html
Unescape Escape View File

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

4
.themes/classic/source/_includes/head.html
Unescape Escape View File

@ -26,6 +26,8 @@
<script src="/javascripts/octopress.js" type="text/javascript"></script> <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+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'> <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"/> <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> </head>

9
.themes/classic/source/_includes/sharing.html
Unescape Escape View File

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

4
.themes/classic/source/_includes/sidebar.html
Unescape Escape View File

@ -1,7 +1,3 @@
<section>
<h1>About Me</h1>
<p>Hi, I'm Octopress!</p>
</section>
{% include asides/recent_posts.html %} {% include asides/recent_posts.html %}
{% include asides/twitter.html %} {% include asides/twitter.html %}
{% include asides/delicious.html %} {% include asides/delicious.html %}

11
.themes/classic/source/_includes/twitter_sharing.html
Unescape Escape View File

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

19
.themes/classic/source/_layouts/default.html
Unescape Escape View File

@ -2,25 +2,14 @@
<body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == 'none' %} class="no-sidebar" {% endif %}> <body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == 'none' %} class="no-sidebar" {% endif %}>
<header>{% include header.html %}</header> <header>{% include header.html %}</header>
<nav>{% include navigation.html %}</nav> <nav>{% include navigation.html %}</nav>
<div> <div id="main">
<div> <div id="content">
<div id="articles" {% if page.blog_index %} class="blog-index" {% endif %}>{{ content }}</div> {{ content }}
{% unless page.sidebar == 'none' %} {% unless page.sidebar == 'none' %}
<aside>{% include sidebar.html %}</aside> <aside role=sidebar>{% include sidebar.html %}</aside>
{% endunless %} {% endunless %}
</div> </div>
</div> </div>
<footer>{% include footer.html %}</footer> <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> </body>
</html> </html>

30
.themes/classic/source/_layouts/page.html
Unescape Escape View File

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

14
.themes/classic/source/_layouts/post.html
Unescape Escape View File

@ -3,22 +3,24 @@ layout: default
single: true single: true
--- ---
<div>
<article class="hentry"> <article class="hentry">
{% include article.html %} {% include article.html %}
{% unless page.no_meta %}
<footer> <footer>
<p class="meta"> <p class="meta">
{% include post_author.html %} {% include post_author.html %}
{% include post_date.html %} {% include post_date.html %}
{% include post_categories.html %} {% include post_categories.html %}
{% include sharing.html %}
</p> </p>
{% unless page.no_sharing %}
{% include sharing.html %}
{% endunless %}
</footer> </footer>
{% endunless %} </article>
{% if site.disqus_short_name %} {% if site.disqus_short_name and page.no_comments != true %}
<section> <section>
<h1>Comments</h1> <h1>Comments</h1>
<div id="disqus_thread">{% include disqus_thread.html %}</div> <div id="disqus_thread">{% include disqus_thread.html %}</div>
</section> </section>
{% endif %} {% endif %}
</article> </div>

7
.themes/classic/source/blog/archives.html
Unescape Escape View File

@ -1,9 +1,10 @@
--- ---
layout: post layout: page
title: Blog Archive title: Blog Archive
no_meta: true no_footer: true
--- ---
<div class="blog-archives">
<div id="blog-archives">
{% for post in site.posts reverse %} {% for post in site.posts reverse %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% unless year == this_year %} {% unless year == this_year %}

4
.themes/classic/source/index.html
Unescape Escape View File

@ -2,6 +2,7 @@
layout: default layout: default
blog_index: true blog_index: true
--- ---
<div class="blog-index">
{% assign index = true %} {% assign index = true %}
{% for post in paginator.posts %} {% for post in paginator.posts %}
{% assign content = post.content %} {% assign content = post.content %}
@ -13,7 +14,7 @@ blog_index: true
{% if paginator.next_page %} {% if paginator.next_page %}
<a href="/page{{paginator.next_page}}/">&larr; Older</a> <a href="/page{{paginator.next_page}}/">&larr; Older</a>
{% endif %} {% endif %}
<a href="/blog/archives.html">Blog Archive</a> <a href="/blog/archive.html">Blog Archive</a>
{% if paginator.previous_page %} {% if paginator.previous_page %}
<a href="/page{{paginator.previous_page}}/">Newer &rarr;</a> <a href="/page{{paginator.previous_page}}/">Newer &rarr;</a>
{% endif %} {% endif %}
@ -29,3 +30,4 @@ blog_index: true
}()); }());
</script> </script>
{% endif %} {% endif %}
</div>

12
.themes/classic/source/javascripts/octopress.js
Unescape Escape View File

@ -9,7 +9,8 @@ function getNav(){
}); });
} }
function addSidebarToggler() { function addSidebarToggler() {
$('#articles').before('<a href="#" class="toggle-sidebar">&raquo;</a>').previous().bind('click', function(e){ $('#content').prepend('<a href="#" class="toggle-sidebar">&raquo;</a>');
$('.toggle-sidebar').bind('click', function(e){
e.preventDefault(); e.preventDefault();
if($('body').hasClass('collapse-sidebar')){ if($('body').hasClass('collapse-sidebar')){
$('body').removeClass('collapse-sidebar'); $('body').removeClass('collapse-sidebar');
@ -19,6 +20,15 @@ function addSidebarToggler() {
e.target.innerHTML = '&laquo;'; e.target.innerHTML = '&laquo;';
} }
}); });
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() { function testFeatures() {
var features = ['maskImage']; var features = ['maskImage'];

5
_config.yml
Unescape Escape View File

@ -1,6 +1,7 @@
# Required configuration # Required configuration
source: source source: source
destination: public destination: public
plugins: plugins
code_dir: downloads/code code_dir: downloads/code
port: 4000 port: 4000
@ -34,6 +35,10 @@ twitter_follow_button: true
twitter_show_follower_count: false twitter_show_follower_count: false
twitter_tweet_button: true twitter_tweet_button: true
# Google Plus
google_plus_one: true
google_plus_one_size: medium
# Pinboard # Pinboard
pinboard_user: pinboard_user:
pinboard_count: 3 pinboard_count: 3

Write Preview
Loading…
Cancel
Save