diff options
Diffstat (limited to '.themes/classic/sass')
| -rw-r--r-- | .themes/classic/sass/base/_solarized.scss | 48 | ||||
| -rw-r--r-- | .themes/classic/sass/base/_theme.scss | 6 | ||||
| -rw-r--r-- | .themes/classic/sass/custom/_colors.scss | 11 | ||||
| -rw-r--r-- | .themes/classic/sass/partials/_syntax.scss | 123 |
4 files changed, 108 insertions, 80 deletions
diff --git a/.themes/classic/sass/base/_solarized.scss b/.themes/classic/sass/base/_solarized.scss index 2a1cfddb..30cceb8c 100644 --- a/.themes/classic/sass/base/_solarized.scss +++ b/.themes/classic/sass/base/_solarized.scss @@ -1,18 +1,34 @@ -$base03: #002b36 !default; //darkest blue -$base02: #073642 !default; //dark blue -$base01: #586e75 !default; //darkest gray -$base00: #657b83 !default; //dark gray -$base0: #839496 !default; //medium gray -$base1: #93a1a1 !default; //medium light gray -$base2: #eee8d5 !default; //cream -$base3: #fdf6e3 !default; //white -$yellow: #b58900 !default; -$orange: #cb4b16 !default; -$red: #dc322f !default; -$magenta: #d33682 !default; -$violet: #6c71c4 !default; -$blue: #268bd2 !default; -$cyan: #2aa198 !default; -$green: #859900 !default; +$base03: #002b36 !default; //darkest blue +$base02: #073642 !default; //dark blue +$base01: #586e75 !default; //darkest gray +$base00: #657b83 !default; //dark gray +$base0: #839496 !default; //medium gray +$base1: #93a1a1 !default; //medium light gray +$base2: #eee8d5 !default; //cream +$base3: #fdf6e3 !default; //white +$solar-yellow: #b58900 !default; +$solar-orange: #cb4b16 !default; +$solar-red: #dc322f !default; +$solar-magenta: #d33682 !default; +$solar-violet: #6c71c4 !default; +$solar-blue: #268bd2 !default; +$solar-cyan: #2aa198 !default; +$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; +} + +/* non highlighted code colors */ $pre-bg: $base03 !default; +$pre-border: $base02 !default; +$pre-color: $base1 !default; diff --git a/.themes/classic/sass/base/_theme.scss b/.themes/classic/sass/base/_theme.scss index 3953fe35..fce47e53 100644 --- a/.themes/classic/sass/base/_theme.scss +++ b/.themes/classic/sass/base/_theme.scss @@ -21,11 +21,6 @@ $text-color: #222 !default; $text-color-light: #aaa !default; $type-border: #ddd !default; -/* non highlighted code colors */ -$pre-bg: $base03 !default; -$pre-border: $base02 !default; -$pre-color: $base1 !default; - /* Navigation */ $nav-bg: #ccc !default; $nav-color: darken($nav-bg, 38) !default; @@ -85,4 +80,3 @@ body { } } } - diff --git a/.themes/classic/sass/custom/_colors.scss b/.themes/classic/sass/custom/_colors.scss index 0771a86c..1d733e42 100644 --- a/.themes/classic/sass/custom/_colors.scss +++ b/.themes/classic/sass/custom/_colors.scss @@ -9,12 +9,5 @@ //$sidebar-link-color-hover: darken(#7ab662, 9); -//To use the light Solarized highlighting theme uncomment this block -//$base03: $base3; -//$base02: $base2; -//$base01: $base1; -//$base00: $base0; -//$base0: $base00; -//$base1: $base01; -//$base2: $base02; -//$base3: $base03; +//To use the light Solarized highlighting theme uncomment the following line +//$solarized: light diff --git a/.themes/classic/sass/partials/_syntax.scss b/.themes/classic/sass/partials/_syntax.scss index 4ccd63d8..9bee3020 100644 --- a/.themes/classic/sass/partials/_syntax.scss +++ b/.themes/classic/sass/partials/_syntax.scss @@ -3,14 +3,22 @@ text-align: right; font-size: 13px; line-height: 1.45em; - background: $base02 $noise-bg !important; - border-right: 1px solid darken($base03, 2) !important; - @include box-shadow(lighten($base02, 2) -1px 0 inset); - text-shadow: darken($base02, 10) 0 -1px; + @if $solarized == light { + background: lighten($base03, 1) $noise-bg !important; + border-right: 1px solid darken($base02, 2) !important; + @include box-shadow(lighten($base03, 2) -1px 0 inset); + text-shadow: lighten($base02, 2) 0 -1px; + } @else { + background: $base02 $noise-bg !important; + border-right: 1px solid darken($base03, 2) !important; + @include box-shadow(lighten($base02, 2) -1px 0 inset); + text-shadow: darken($base02, 10) 0 -1px; + } span { color: $base01 !important; } padding: .8em !important; @include border-radius(0); } + border: 1px solid $pre-border !important; } html .gist .gist-file { margin-bottom: 1.8em; @@ -18,7 +26,11 @@ html .gist .gist-file { border: none; padding-top: image-height("code_bg.png") !important; .gist-syntax { - border-bottom: 1px solid darken($base03, 2) !important; + @if $solarized == dark { + border-bottom: 1px solid $base03 !important; + } @else if $solarized == light { + border-bottom: 0px; + } .gist-highlight{ background: $base03 !important; pre { @@ -31,7 +43,12 @@ html .gist .gist-file { border: 1px solid lighten($base02, 2) !important; color: $base01; font-size: .7em !important; - background: $base02 $noise-bg; + @if $solarized == light { + background: lighten($base03, 2) $noise-bg; + border-top: 1px solid lighten($base03, 2) !important; + } @else { + background: $base02 $noise-bg; + } @extend .sans; line-height: 1.5em; a { @@ -101,62 +118,62 @@ p code { .cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */ .c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */ .cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */ - .err { color: $red !important; background: none !important; } /* Error */ - .k { color: $orange !important; } /* Keyword */ + .err { color: $solar-red !important; background: none !important; } /* Error */ + .k { color: $solar-orange !important; } /* Keyword */ .o { color: $base1 !important; font-weight: bold !important; } /* Operator */ .p { color: $base1 !important; } /* Operator */ - .ow { color: $cyan !important; font-weight: bold !important; } /* Operator.Word */ - .gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */ - .gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */ + .ow { color: $solar-cyan !important; font-weight: bold !important; } /* Operator.Word */ + .gd { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */ + .gd .x { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */ .ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */ //.gr { color: #aa0000 } /* Generic.Error */ .gh { color: $base01 !important; } /* Generic.Heading */ - .gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */ - .gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */ + .gi { color: $base1 !important; background-color: mix($solar-green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */ + .gi .x { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */ //.go { color: #888888 } /* Generic.Output */ //.gp { color: #555555 } /* Generic.Prompt */ .gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */ - .gu { color: $violet !important; } /* Generic.Subheading */ + .gu { color: $solar-violet !important; } /* Generic.Subheading */ //.gt { color: #aa0000 } /* Generic.Traceback */ - .kc { color: $green !important; font-weight: bold !important; } /* Keyword.Constant */ - .kd { color: $blue !important; } /* Keyword.Declaration */ - .kp { color: $orange !important; font-weight: bold !important; } /* Keyword.Pseudo */ - .kr { color: $magenta !important; font-weight: bold !important; } /* Keyword.Reserved */ - .kt { color: $cyan !important; } /* Keyword.Type */ - .n { color: $blue !important; } - .na { color: $blue !important; } /* Name.Attribute */ - .nb { color: $green !important; } /* Name.Builtin */ - .nc { color: $magenta !important;} /* Name.Class */ - .no { color: $yellow !important; } /* Name.Constant */ + .kc { color: $solar-green !important; font-weight: bold !important; } /* Keyword.Constant */ + .kd { color: $solar-blue !important; } /* Keyword.Declaration */ + .kp { color: $solar-orange !important; font-weight: bold !important; } /* Keyword.Pseudo */ + .kr { color: $solar-magenta !important; font-weight: bold !important; } /* Keyword.Reserved */ + .kt { color: $solar-cyan !important; } /* Keyword.Type */ + .n { color: $solar-blue !important; } + .na { color: $solar-blue !important; } /* Name.Attribute */ + .nb { color: $solar-green !important; } /* Name.Builtin */ + .nc { color: $solar-magenta !important;} /* Name.Class */ + .no { color: $solar-yellow !important; } /* Name.Constant */ //.ni { color: #800080 } /* Name.Entity */ - .nl { color: $green !important; } - .ne { color: $blue !important; font-weight: bold !important; } /* Name.Exception */ - .nf { color: $blue !important; font-weight: bold !important; } /* Name.Function */ - .nn { color: $yellow !important; } /* Name.Namespace */ - .nt { color: $blue !important; font-weight: bold !important; } /* Name.Tag */ - .nx { color: $yellow !Important; } + .nl { color: $solar-green !important; } + .ne { color: $solar-blue !important; font-weight: bold !important; } /* Name.Exception */ + .nf { color: $solar-blue !important; font-weight: bold !important; } /* Name.Function */ + .nn { color: $solar-yellow !important; } /* Name.Namespace */ + .nt { color: $solar-blue !important; font-weight: bold !important; } /* Name.Tag */ + .nx { color: $solar-yellow !Important; } //.bp { color: #999999 } /* Name.Builtin.Pseudo */ //.vc { color: #008080 } /* Name.Variable.Class */ - .vg { color: $blue !important; } /* Name.Variable.Global */ - .vi { color: $blue !important; } /* Name.Variable.Instance */ - .nv { color: $blue !important; } /* Name.Variable */ + .vg { color: $solar-blue !important; } /* Name.Variable.Global */ + .vi { color: $solar-blue !important; } /* Name.Variable.Instance */ + .nv { color: $solar-blue !important; } /* Name.Variable */ //.w { color: #bbbbbb } /* Text.Whitespace */ - .mf { color: $cyan !important; } /* Literal.Number.Float */ - .m { color: $cyan !important; } /* Literal.Number */ - .mh { color: $cyan !important; } /* Literal.Number.Hex */ - .mi { color: $cyan !important; } /* Literal.Number.Integer */ + .mf { color: $solar-cyan !important; } /* Literal.Number.Float */ + .m { color: $solar-cyan !important; } /* Literal.Number */ + .mh { color: $solar-cyan !important; } /* Literal.Number.Hex */ + .mi { color: $solar-cyan !important; } /* Literal.Number.Integer */ //.mo { color: #009999 } /* Literal.Number.Oct */ - .s { color: $cyan !important; } /* Literal.String */ + .s { color: $solar-cyan !important; } /* Literal.String */ //.sb { color: #d14 } /* Literal.String.Backtick */ //.sc { color: #d14 } /* Literal.String.Char */ - .sd { color: $cyan !important; } /* Literal.String.Doc */ - .s2 { color: $cyan !important; } /* Literal.String.Double */ - .se { color: $red !important; } /* Literal.String.Escape */ + .sd { color: $solar-cyan !important; } /* Literal.String.Doc */ + .s2 { color: $solar-cyan !important; } /* Literal.String.Double */ + .se { color: $solar-red !important; } /* Literal.String.Escape */ //.sh { color: #d14 } /* Literal.String.Heredoc */ - .si { color: $blue !important; } /* Literal.String.Interpol */ + .si { color: $solar-blue !important; } /* Literal.String.Interpol */ //.sx { color: #d14 } /* Literal.String.Other */ - .sr { color: $cyan !important; } /* Literal.String.Regex */ - .s1 { color: $cyan !important; } /* Literal.String.Single */ + .sr { color: $solar-cyan !important; } /* Literal.String.Regex */ + .s1 { color: $solar-cyan !important; } /* Literal.String.Single */ //.ss { color: #990073 } /* Literal.String.Symbol */ //.il { color: #009999 } /* Literal.Number.Integer.Long */ div { .gd, .gd .x, .gi, .gi .x { display: block; }} @@ -169,9 +186,17 @@ p code { overflow-y: hidden; overflow-x: auto; } + +$solar-scroll-bg: rgba(#fff, .15); +$solar-scroll-thumb: rgba(#fff, .2); +@if $solarized == light { + $solar-scroll-bg: rgba(#000, .15); + $solar-scroll-thumb: rgba(#000, .15); +} + pre, .highlight, .gist-highlight { - &::-webkit-scrollbar { height: .5em; background: rgba(#fff, .15); } - &::-webkit-scrollbar-thumb:horizontal { background: rgba(#fff, .2); -webkit-border-radius: 4px; border-radius: 4px } + &::-webkit-scrollbar { height: .5em; background: $solar-scroll-bg; } + &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb; -webkit-border-radius: 4px; border-radius: 4px } } .highlight code { @extend .pre-code; background: #000;} @@ -186,7 +211,9 @@ figure[role=code] { @extend .code-title; a { @extend .download-source; } } - .highlight { margin-bottom: 0; border-bottom: 1px solid darken($base03, 2) !important; } + .highlight { + margin-bottom: 0; + } } .code-title { text-align: center; @@ -215,5 +242,3 @@ figure[role=code] { text-shadow: #cbcccc 0 1px 0; padding-left: 3em; } - - |