diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss index ef47279..f6fa5a5 100644 --- a/.themes/classic/sass/base/_layout.scss +++ b/.themes/classic/sass/base/_layout.scss @@ -75,6 +75,15 @@ aside[role=sidebar] { @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; }} body.sidebar-footer { diff --git a/.themes/classic/sass/base/_utilities.scss b/.themes/classic/sass/base/_utilities.scss index 8b718cd..2d49e65 100644 --- a/.themes/classic/sass/base/_utilities.scss +++ b/.themes/classic/sass/base/_utilities.scss @@ -5,6 +5,13 @@ 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){ * { &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; } diff --git a/.themes/classic/sass/partials/_blog.scss b/.themes/classic/sass/partials/_blog.scss index 3416347..558f0a2 100644 --- a/.themes/classic/sass/partials/_blog.scss +++ b/.themes/classic/sass/partials/_blog.scss @@ -44,19 +44,9 @@ article { line-height: 1.3em; } img, video, .flash-video { - max-width: 100%; - height: auto; - border: .5em solid #fff; - @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; } + @extend .flex-content; + @extend .basic-alignment; + @include shadow-box; } video, .flash-video { margin: 0 auto 1.5em; } video { display: block; width: 100%; } diff --git a/.themes/classic/sass/partials/sidebar/_base.scss b/.themes/classic/sass/partials/sidebar/_base.scss index 08f04d2..a0d1c09 100644 --- a/.themes/classic/sass/partials/sidebar/_base.scss +++ b/.themes/classic/sass/partials/sidebar/_base.scss @@ -20,6 +20,11 @@ aside[role=sidebar] { } } } + img { + @extend .flex-content; + @extend .basic-alignment; + @include shadow-box($border: #fff .3em solid); + } ul { margin-bottom: 0.5em; margin-left: 0;