blago
/
Blog
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

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.
unreleased_contents
Brandon Mathis 13 years ago
parent
67c5edb2f6
commit
5d1d04c52c
20 changed files with 195 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .themes/classic/sass/_partials.scss
  2. 118
      .themes/classic/sass/base/_layout.scss
  3. 6
      .themes/classic/sass/partials/_archive.scss
  4. 25
      .themes/classic/sass/partials/_blog.scss
  5. 7
      .themes/classic/sass/partials/_sharing.scss
  6. 6
      .themes/classic/sass/partials/_syntax.scss
  7. 4
      .themes/classic/sass/partials/sidebar/_base.scss
  8. 2
      .themes/classic/source/_includes/asides/recent_posts.html
  9. 9
      .themes/classic/source/_includes/google_plus_one.html
  10. 4
      .themes/classic/source/_includes/head.html
  11. 9
      .themes/classic/source/_includes/sharing.html
  12. 4
      .themes/classic/source/_includes/sidebar.html
  13. 11
      .themes/classic/source/_includes/twitter_sharing.html
  14. 19
      .themes/classic/source/_layouts/default.html
  15. 30
      .themes/classic/source/_layouts/page.html
  16. 14
      .themes/classic/source/_layouts/post.html
  17. 7
      .themes/classic/source/blog/archives.html
  18. 4
      .themes/classic/source/index.html
  19. 12
      .themes/classic/source/javascripts/octopress.js
  20. 5
      _config.yml

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

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

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

@ -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; }
}
}
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);
.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; }
}
}
}
.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;
}
}
}

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

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

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

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

7
.themes/classic/sass/partials/_sharing.scss
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
View File

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

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

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

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

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

9
.themes/classic/source/_includes/google_plus_one.html
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
View File

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

9
.themes/classic/source/_includes/sharing.html
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
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/twitter.html %}
{% include asides/delicious.html %}

11
.themes/classic/source/_includes/twitter_sharing.html
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
View File

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

30
.themes/classic/source/_layouts/page.html
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
View File

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

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

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

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

@ -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}}/">&larr; 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 &rarr;</a>
{% endif %}
@ -29,3 +30,4 @@ blog_index: true
}());
</script>
{% endif %}
</div>

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

@ -9,7 +9,8 @@ function getNav(){
});
}
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();
if($('body').hasClass('collapse-sidebar')){
$('body').removeClass('collapse-sidebar');
@ -19,6 +20,15 @@ function addSidebarToggler() {
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() {
var features = ['maskImage'];

5
_config.yml
View File

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

Write Preview
Loading…
Cancel
Save