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

Refactored layout styles: 

1. Now iPad vertical gets a collapsed sidebar with columns
2. Moved sidebar toggler styles from layout to sidebar/base
3. Added body class .sidebar-footer to support an always collapsed sidebar
4. Added $indented-lists (bool) for easily setting list indent preferences
5. Removed no-sidebar checking from sidebar-toggler, handled it through css.
unreleased_contents
Brandon Mathis 13 years ago
parent
4dfc5c1d67
commit
0f2686eff7
8 changed files with 135 additions and 108 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. 2
      .themes/classic/sass/_base.scss
  2. 159
      .themes/classic/sass/base/_layout.scss
  3. 11
      .themes/classic/sass/base/_typography.scss
  4. 1
      .themes/classic/sass/custom/_layout.scss
  5. 5
      .themes/classic/sass/custom/_styles.scss
  6. 12
      .themes/classic/sass/partials/_blog.scss
  7. 3
      .themes/classic/sass/partials/_syntax.scss
  8. 50
      .themes/classic/sass/partials/sidebar/_base.scss

2
.themes/classic/sass/_base.scss
View File

@ -1,5 +1,5 @@
@import "base/utilities";
@import "base/solarized";
@import "base/theme";
@import "base/layout";
@import "base/typography";
@import "base/layout";

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

@ -12,8 +12,30 @@ $sidebar-pad-medium: 15px !default;
$sidebar-pad-wide: 20px !default;
$sidebar-width-wide: 300px !default;
$indented-lists: false !default;
.group { @include pie-clearfix; }
@mixin collapse-sidebar {
float: none;
width: auto;
clear: left;
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%; }
}
&.thirds section {
width: 30%;
margin-left: 5%;
&.first { margin-left: 0; }
}
}
body {
-webkit-text-size-adjust: none;
max-width: $max-width;
@ -43,23 +65,31 @@ body {
}
}
#content {
> div, > article { width: 100%; }
> aside {
float: none;
padding: 0 $pad-min 1px;
background-color: lighten($sidebar-bg, 2);
border-top: 1px solid $sidebar-border;
}
#content { > div, > article { width: 100%; }}
aside[role=sidebar] {
float: none;
padding: 0 $pad-min 1px;
background-color: lighten($sidebar-bg, 2);
border-top: 1px solid $sidebar-border;
@extend .group;
}
.toggle-sidebar { display: none; }
.toggle-sidebar { &, .no-sidebar & { display: none; }}
body.sidebar-footer {
@media only screen and (min-width: 750px) {
aside[role=sidebar]{ @include collapse-sidebar; }
}
#content { margin-right: 0px; }
.toggle-sidebar { display: none; }
}
@media only screen and (min-width: 550px) {
body > header { font-size: 1em; }
#content aside {
@extend .group;
}
}
@media only screen and (min-width: 750px) {
aside[role=sidebar] { @include collapse-sidebar; }
}
@media only screen and (min-width: 768px) {
body { -webkit-text-size-adjust: auto; }
@ -73,89 +103,28 @@ body {
@extend .group;
margin-right: $sidebar-width-medium;
position: relative;
.no-sidebar & { margin-right: 0; }
.collapse-sidebar & { margin-right: 20px; }
> 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 {
width: auto; margin-left: 0;
&.odd, &.even { float: none; width: auto; margin-left: 0; }
}
}
.collapse-sidebar & {
margin-right: 20px;
> 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: -10px; top: 0; bottom: 0;
display: inline-block;
text-decoration: none;
color: mix($text-color-light, $sidebar-bg);
width: 9px;
cursor: pointer;
&:hover {
background: mix($sidebar-border, $sidebar-bg);
@include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0)));
}
&:after {
position: absolute; right: -11px; top: 0;
width: 20px;
font-size: 1.2em;
line-height: 1.1em;
padding-bottom: .15em;
@include border-bottom-right-radius(.3em);
text-align: center;
background: $main-bg $noise-bg;
border-bottom: 1px solid $sidebar-border;
border-right: 1px solid $sidebar-border;
content: "\00BB";
text-indent: -1px;
aside[role=sidebar] {
@extend .group;
width: $sidebar-width-medium - $sidebar-pad-medium*2;
padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
background: none;
clear: none;
float: left;
margin: 0 -100% 0 0;
section {
width: auto; margin-left: 0;
&.odd, &.even { float: none; width: auto; margin-left: 0; }
}
.collapse-sidebar & {
text-indent: 0px;
right: -20px;
width: 19px;
&:hover {
background: mix($sidebar-border, $sidebar-bg);
}
&:after {
border-left: 1px solid $sidebar-border;
text-shadow: #fff 0 1px;
content: "\00AB";
left: 0px; right: 0;
text-align: center;
text-indent: 0;
border: 0;
border-right-width: 0;
background: none;
}
@include collapse-sidebar;
}
}
}
@ -168,13 +137,19 @@ body {
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 {
}
aside[role=sidebar] {
width: $sidebar-width-wide - $sidebar-pad-wide*2;
padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
.collapse-sidebar & {
padding: { left: $pad-wide; right: $pad-wide; }
@extend .group;
}
}
}
@if $indented-lists == false {
@media only screen and (min-width: 768px) {
ul, ol { margin-left: 0; }
}
}

11
.themes/classic/sass/base/_typography.scss
View File

@ -55,10 +55,15 @@ h6, section h5, section section h4, section section section h3 {
}
p, blockquote, ul, ol { margin-bottom: 1.5em; }
ul{ list-style-type: circle; }
ul { list-style-type: disc;
ul { list-style-type: circle;
ul { list-style-type: square; }}}
ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }
ul ul, ol ol { margin-left: 1.75em; }
ol { list-style-type: decimal;
ol { list-style-type: lower-alpha;
ol { list-style-type: lower-roman; }}}
ul, ol { &, ul, ol { margin-left: 1.3em; }}
strong { font-weight: bold; }

1
.themes/classic/sass/custom/_layout.scss
View File

@ -2,6 +2,7 @@
// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.
//$max-width: 1350px;
//$indented-lists: true;
// Padding used for layout margins
//$pad-min: 18px;

5
.themes/classic/sass/custom/_styles.scss
View File

@ -1,7 +1,2 @@
// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much
// For example if you want indented lists on all screen sizes uncomment the following lines
// #content article {
// ul, ol { margin-left: 1.4em; }
// }

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

@ -1,10 +1,6 @@
article {
overflow: hidden;
padding-top: 1em;
ul, ol { margin-left: 1.4em; }
@media only screen and (min-width: 768px) {
ul, ol { margin-left: 0; }
}
header {
position: relative;
padding-top: 2em;
@ -35,9 +31,9 @@ article {
h2 {
padding-top: 0.8em;
background: $img-border top left repeat-x;
.entry-content &:first-child { padding-top: 0; }
&:first-child { background: none; }
}
.entry-content & h2:first-child, header + h2 { padding-top: 0; }
h2:first-child, header + h2 { background: none; }
.feature {
padding-top: .5em;
margin-bottom: 1em;
@ -90,7 +86,9 @@ article {
}
article + article {
background: $img-border top left repeat-x;
.blog-index & {
background: $img-border top left repeat-x;
}
}
#content .blog-index {
padding: { top: 0; bottom: 0; }

3
.themes/classic/sass/partials/_syntax.scss
View File

@ -175,6 +175,9 @@ pre, .highlight, .gist-highlight {
.highlight code { @extend .pre-code; background: #000;}
figure[role=code] {
background: none;
padding: 0;
border: 0;
margin-bottom: 1.5em;
figcaption {
position: relative;

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

@ -21,6 +21,7 @@ aside[role=sidebar] {
}
ul {
margin-bottom: 0.5em;
margin-left: 0;
}
li {
list-style: none;
@ -47,3 +48,52 @@ aside[role=sidebar] {
color: $sidebar-link-color-subdued-hover;
}
}
@media only screen and (min-width: 768px) {
.toggle-sidebar {
outline: none;
position: absolute; right: -10px; top: 0; bottom: 0;
display: inline-block;
text-decoration: none;
color: mix($text-color-light, $sidebar-bg);
width: 9px;
cursor: pointer;
&:hover {
background: mix($sidebar-border, $sidebar-bg);
@include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0)));
}
&:after {
position: absolute; right: -11px; top: 0;
width: 20px;
font-size: 1.2em;
line-height: 1.1em;
padding-bottom: .15em;
@include border-bottom-right-radius(.3em);
text-align: center;
background: $main-bg $noise-bg;
border-bottom: 1px solid $sidebar-border;
border-right: 1px solid $sidebar-border;
content: "\00BB";
text-indent: -1px;
}
.collapse-sidebar & {
text-indent: 0px;
right: -20px;
width: 19px;
&:hover {
background: mix($sidebar-border, $sidebar-bg);
}
&:after {
border-left: 1px solid $sidebar-border;
text-shadow: #fff 0 1px;
content: "\00AB";
left: 0px; right: 0;
text-align: center;
text-indent: 0;
border: 0;
border-right-width: 0;
background: none;
}
}
}
}

Write Preview
Loading…
Cancel
Save