Mic92/blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

using @extend for responsive blocks, added shadow-box mixin to utlities for configurable border shadow box styling, moved .left, .right, .center classes to .basic-alignment class for @extending as needed in layouts. Fixes #109

Browse Source
This commit is contained in:
Brandon Mathis 2011-08-22 16:28:50 -04:00
parent 23f05c1158
commit 806d27db13
4 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,6 +75,15 @@ aside[role=sidebar] {
@extend .group; @extend .group;
} }
.flex-content { max-width: 100%; height: auto; }
.basic-alignment {
&.left { float: left; margin-right: 1.5em; }
&.right { float: right; margin-left: 1.5em; }
&.center { display:block; margin: 0 auto 1.5em; }
&.left, &.right { margin-bottom: .8em; }
}
.toggle-sidebar { &, .no-sidebar & { display: none; }} .toggle-sidebar { &, .no-sidebar & { display: none; }}
body.sidebar-footer { body.sidebar-footer {

7
.themes/classic/sass/base/_utilities.scss
View File

@ -5,6 +5,13 @@
height: image-height($img); height: image-height($img);
} }
@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) {
@include border-radius($border-radius);
@include box-shadow($shadow);
@include box-sizing(border-box);
border: $border;
}
@mixin selection($bg, $color: inherit, $text-shadow: none){ @mixin selection($bg, $color: inherit, $text-shadow: none){
* { * {
&::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; } &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }

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

@ -44,19 +44,9 @@ article {
line-height: 1.3em; line-height: 1.3em;
} }
img, video, .flash-video { img, video, .flash-video {
max-width: 100%; @extend .flex-content;
height: auto; @extend .basic-alignment;
border: .5em solid #fff; @include shadow-box;
@include border-radius(.3em);
@include box-shadow(rgba(#000, .15) 0 1px 4px);
@include box-sizing(border-box);
display: block;
}
img {
&.left { float: left; margin-right: 1.5em; }
&.right { float: right; margin-left: 1.5em; }
&.center { margin: 0 auto 1.5em; }
&.left, &.right { margin-bottom: .8em; }
} }
video, .flash-video { margin: 0 auto 1.5em; } video, .flash-video { margin: 0 auto 1.5em; }
video { display: block; width: 100%; } video { display: block; width: 100%; }

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

@ -20,6 +20,11 @@ aside[role=sidebar] {
} }
} }
} }
img {
@extend .flex-content;
@extend .basic-alignment;
@include shadow-box($border: #fff .3em solid);
}
ul { ul {
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-left: 0; margin-left: 0;