diff options
Diffstat (limited to '.themes/classic/sass')
| -rw-r--r-- | .themes/classic/sass/_base.scss | 2 | ||||
| -rw-r--r-- | .themes/classic/sass/base/_layout.scss | 159 | ||||
| -rw-r--r-- | .themes/classic/sass/base/_typography.scss | 11 | ||||
| -rw-r--r-- | .themes/classic/sass/custom/_layout.scss | 1 | ||||
| -rw-r--r-- | .themes/classic/sass/custom/_styles.scss | 5 | ||||
| -rw-r--r-- | .themes/classic/sass/partials/_blog.scss | 12 | ||||
| -rw-r--r-- | .themes/classic/sass/partials/_syntax.scss | 3 | ||||
| -rw-r--r-- | .themes/classic/sass/partials/sidebar/_base.scss | 50 |
8 files changed, 135 insertions, 108 deletions
diff --git a/.themes/classic/sass/_base.scss b/.themes/classic/sass/_base.scss index f6583f17..05fdd005 100644 --- a/.themes/classic/sass/_base.scss +++ b/.themes/classic/sass/_base.scss @@ -1,5 +1,5 @@ @import "base/utilities"; @import "base/solarized"; @import "base/theme"; -@import "base/layout"; @import "base/typography"; +@import "base/layout"; diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss index 1154714c..ef47279a 100644 --- a/.themes/classic/sass/base/_layout.scss +++ b/.themes/classic/sass/base/_layout.scss @@ -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; } + } +} diff --git a/.themes/classic/sass/base/_typography.scss b/.themes/classic/sass/base/_typography.scss index 773b2e1d..06d1a989 100644 --- a/.themes/classic/sass/base/_typography.scss +++ b/.themes/classic/sass/base/_typography.scss @@ -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; } diff --git a/.themes/classic/sass/custom/_layout.scss b/.themes/classic/sass/custom/_layout.scss index 162f5ad6..53173115 100644 --- a/.themes/classic/sass/custom/_layout.scss +++ b/.themes/classic/sass/custom/_layout.scss @@ -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; diff --git a/.themes/classic/sass/custom/_styles.scss b/.themes/classic/sass/custom/_styles.scss index e0e19753..91ffcccf 100644 --- a/.themes/classic/sass/custom/_styles.scss +++ b/.themes/classic/sass/custom/_styles.scss @@ -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; } -// } diff --git a/.themes/classic/sass/partials/_blog.scss b/.themes/classic/sass/partials/_blog.scss index 8894755c..26ad19b4 100644 --- a/.themes/classic/sass/partials/_blog.scss +++ b/.themes/classic/sass/partials/_blog.scss @@ -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; } diff --git a/.themes/classic/sass/partials/_syntax.scss b/.themes/classic/sass/partials/_syntax.scss index a116cedf..b31e250d 100644 --- a/.themes/classic/sass/partials/_syntax.scss +++ b/.themes/classic/sass/partials/_syntax.scss @@ -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; diff --git a/.themes/classic/sass/partials/sidebar/_base.scss b/.themes/classic/sass/partials/sidebar/_base.scss index 3b238a9b..b07dffac 100644 --- a/.themes/classic/sass/partials/sidebar/_base.scss +++ b/.themes/classic/sass/partials/sidebar/_base.scss @@ -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; + } + } + } +} |