varun-r-mallya/wona.github.com
1
0
Fork 0
mirror of https://github.com/WatchOutNewsAgency/wona.github.com.git synced 2026-02-12 06:00:54 +00:00
Code Issues 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.
This commit is contained in:
Brandon Mathis
2011-07-12 19:40:57 -04:00
parent 67c5edb2f6
commit 5d1d04c52c
20 changed files with 196 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

120
.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; }
}
.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;
}
}
}

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 Normal file
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;