diff options
Diffstat (limited to '.themes/classic/sass/base')
| -rw-r--r-- | .themes/classic/sass/base/_layout.scss | 64 | ||||
| -rw-r--r-- | .themes/classic/sass/base/_solarized.scss | 30 | ||||
| -rw-r--r-- | .themes/classic/sass/base/_theme.scss | 10 | ||||
| -rw-r--r-- | .themes/classic/sass/base/_typography.scss | 35 |
4 files changed, 100 insertions, 39 deletions
diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss index 4a3c780f..81903428 100644 --- a/.themes/classic/sass/base/_layout.scss +++ b/.themes/classic/sass/base/_layout.scss @@ -14,6 +14,10 @@ $sidebar-width-wide: 300px !default; $indented-lists: false !default; +$header-font-size: 1em !default; +$header-padding-top: 1.5em !default; +$header-padding-bottom: 1.5em !default; + .group { @include pie-clearfix; } @mixin collapse-sidebar { @@ -32,7 +36,10 @@ $indented-lists: false !default; &.thirds section { width: 30%; margin-left: 5%; - &.first { margin-left: 0; } + &.first { + margin-left: 0; + clear: both; + } } } @@ -41,7 +48,7 @@ body { max-width: $max-width; position: relative; margin: 0 auto; - > header, > nav, > footer, #content > article, #content > div > article, #content > div > section, nav[role=pagination] { + > header, > nav, > footer, #content > article, #content > div > article, #content > div > section { @extend .group; padding-left: $pad-min; padding-right: $pad-min; @@ -58,16 +65,36 @@ body { padding-right: $pad-wide; } } + div.pagination { + @extend .group; + margin-left: $pad-min; + margin-right: $pad-min; + @media only screen and (min-width: 480px) { + margin-left: $pad-narrow; + margin-right: $pad-narrow; + } + @media only screen and (min-width: 768px) { + margin-left: $pad-medium; + margin-right: $pad-medium; + } + @media only screen and (min-width: 992px) { + margin-left: $pad-wide; + margin-right: $pad-wide; + } + } > header { - font-size: 1em; - padding-top: 1.5em; - padding-bottom: 1.5em; + font-size: $header-font-size; + padding-top: $header-padding-top; + padding-bottom: $header-padding-bottom; } } -#content { > div, > article { width: 100%; }} +#content { + overflow: hidden; + > div, > article { width: 100%; } +} -aside[role=sidebar] { +aside.sidebar { float: none; padding: 0 $pad-min 1px; background-color: lighten($sidebar-bg, 2); @@ -88,28 +115,30 @@ aside[role=sidebar] { body.sidebar-footer { @media only screen and (min-width: 750px) { - aside[role=sidebar]{ @include collapse-sidebar; } + aside.sidebar{ @include collapse-sidebar; } } #content { margin-right: 0px; } .toggle-sidebar { display: none; } } @media only screen and (min-width: 550px) { - body > header { font-size: 1em; } + body > header { font-size: $header-font-size; } } @media only screen and (min-width: 750px) { - aside[role=sidebar] { @include collapse-sidebar; } + aside.sidebar { @include collapse-sidebar; } +} +#main, #content, .sidebar { + @extend .group; } @media only screen and (min-width: 768px) { body { -webkit-text-size-adjust: auto; } - body > header { font-size: 1.2em; } + body > header { font-size: $header-font-size * 1.2; } #main { - @extend .group; padding: 0; margin: 0 auto; } #content { - @extend .group; + overflow: visible; margin-right: $sidebar-width-medium; position: relative; .no-sidebar & { margin-right: 0; border-right: 0; } @@ -120,8 +149,7 @@ body.sidebar-footer { float: left; } } - aside[role=sidebar] { - @extend .group; + aside.sidebar { width: $sidebar-width-medium - $sidebar-pad-medium*2; padding: 0 $sidebar-pad-medium $sidebar-pad-medium; background: none; @@ -139,7 +167,7 @@ body.sidebar-footer { } @media only screen and (min-width: 992px) { - body > header { font-size: 1.3em; } + body > header { font-size: $header-font-size * 1.3; } #content { margin-right: $sidebar-width-wide; } #content { > div, > article { @@ -147,12 +175,11 @@ body.sidebar-footer { padding-bottom: $pad-wide/2; } } - aside[role=sidebar] { + aside.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; } } } @@ -162,3 +189,4 @@ body.sidebar-footer { ul, ol { margin-left: 0; } } } + diff --git a/.themes/classic/sass/base/_solarized.scss b/.themes/classic/sass/base/_solarized.scss index 30cceb8c..45d8fc5e 100644 --- a/.themes/classic/sass/base/_solarized.scss +++ b/.themes/classic/sass/base/_solarized.scss @@ -18,17 +18,29 @@ $solar-green: #859900 !default; $solarized: dark !default; @if $solarized == light { - $base03: #fdf6e3; - $base02: #eee8d5; - $base01: #93a1a1; - $base00: #839496; - $base0: #657b83; - $base1: #586e75; - $base2: #073642; - $base3: #002b36; + + $_base03: $base03; + $_base02: $base02; + $_base01: $base01; + $_base00: $base00; + $_base0: $base0; + $_base1: $base1; + $_base2: $base2; + $_base3: $base3; + + $base03: $_base3; + $base02: $_base2; + $base01: $_base1; + $base00: $_base0; + $base0: $_base00; + $base1: $_base01; + $base2: $_base02; + $base3: $_base03; } /* non highlighted code colors */ $pre-bg: $base03 !default; -$pre-border: $base02 !default; +$pre-border: darken($base02, 5) !default; $pre-color: $base1 !default; + + diff --git a/.themes/classic/sass/base/_theme.scss b/.themes/classic/sass/base/_theme.scss index fce47e53..9a50a8b4 100644 --- a/.themes/classic/sass/base/_theme.scss +++ b/.themes/classic/sass/base/_theme.scss @@ -1,4 +1,4 @@ -$noise-bg: image-url('noise.png') top left; +$noise-bg: image-url('noise.png') top left !default; $img-border: inline-image('dotted-border.png'); // Main Link Colors @@ -23,6 +23,8 @@ $type-border: #ddd !default; /* Navigation */ $nav-bg: #ccc !default; +$nav-bg-front: image-url('noise.png') !default; +$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)) !default; $nav-color: darken($nav-bg, 38) !default; $nav-color-hover: darken($nav-color, 25) !default; $nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default; @@ -39,13 +41,15 @@ $sidebar-link-color-hover: $link-color-hover !default; $sidebar-link-color-active: $link-color-active !default; $sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; $sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; -$sidebar-border: darken($sidebar-bg, 7) !default; +$sidebar-border-hover: darken($sidebar-bg, 7) !default; $sidebar-link-color-subdued: lighten($sidebar-color, 20) !default; $sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default; $twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default; $footer-color: #888 !default; $footer-bg: #ccc !default; +$footer-bg-front: image-url('noise.png') !default; +$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)) !default; $footer-color: darken($footer-bg, 38) !default; $footer-color-hover: darken($footer-color, 10) !default; $footer-border-top: lighten($footer-bg, 15) !default; @@ -60,7 +64,7 @@ $page-border-bottom: darken($footer-bg, 5) !default; a { @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); } -aside[role=sidebar] a { +aside.sidebar a { @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active); } a { diff --git a/.themes/classic/sass/base/_typography.scss b/.themes/classic/sass/base/_typography.scss index ef83065b..b68753fa 100644 --- a/.themes/classic/sass/base/_typography.scss +++ b/.themes/classic/sass/base/_typography.scss @@ -1,21 +1,30 @@ $blockquote: $type-border !default; -$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; +$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default; +$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default; +$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; +$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default; +$header-title-font-family: $heading-font-family !default; +$header-subtitle-font-family: $heading-font-family !default; // Fonts .heading { - font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; + font-family: $heading-font-family; } -.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; } -.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; } +.sans { font-family: $sans; } +.serif { font-family: $serif; } .mono { font-family: $mono; } body > header h1 { font-size: 2.2em; @extend .heading; + font-family: $header-title-font-family; font-weight: normal; line-height: 1.2em; margin-bottom: 0.6667em; } +body > header h2 { + font-family: $header-subtitle-font-family; +} body { line-height: 1.5em; @@ -56,12 +65,12 @@ h6, section h5, section section h4, section section section h3 { p, blockquote, ul, ol { margin-bottom: 1.5em; } ul { list-style-type: disc; - ul { list-style-type: circle; - ul { list-style-type: square; }}} + ul { list-style-type: circle; margin-bottom: 0px; + ul { list-style-type: square; margin-bottom: 0px; }}} ol { list-style-type: decimal; - ol { list-style-type: lower-alpha; - ol { list-style-type: lower-roman; }}} + ol { list-style-type: lower-alpha; margin-bottom: 0px; + ol { list-style-type: lower-roman; margin-bottom: 0px; }}} ul, ol { &, ul, ol { margin-left: 1.3em; }} @@ -115,7 +124,8 @@ blockquote { } } -.has-pullquote:before { +.pullquote-right:before, +.pullquote-left:before { /* Reset metrics. */ padding: 0; border: none; @@ -134,6 +144,13 @@ blockquote { font-size: 1.4em; line-height: 1.45em; } + +.pullquote-left:before { + /* Make left pullquotes align properly. */ + float: left; + margin: .5em 1.5em 1em 0; +} + /* @extend this to force long lines of continuous text to wrap */ .force-wrap { white-space: -moz-pre-wrap; |