Browse code

imrpoved support for light colored solarized theme

Brandon Mathis authored on 26/07/2011 at 16:08:07
Showing 4 changed files
... ...
@@ -1,18 +1,34 @@
1
-$base03:    #002b36 !default; //darkest blue
2
-$base02:    #073642 !default; //dark blue
3
-$base01:    #586e75 !default; //darkest gray
4
-$base00:    #657b83 !default; //dark gray
5
-$base0:     #839496 !default; //medium gray
6
-$base1:     #93a1a1 !default; //medium light gray
7
-$base2:     #eee8d5 !default; //cream
8
-$base3:     #fdf6e3 !default; //white
9
-$yellow:    #b58900 !default;
10
-$orange:    #cb4b16 !default;
11
-$red:       #dc322f !default;
12
-$magenta:   #d33682 !default;
13
-$violet:    #6c71c4 !default;
14
-$blue:      #268bd2 !default;
15
-$cyan:      #2aa198 !default;
16
-$green:     #859900 !default;
1
+$base03:          #002b36 !default; //darkest blue
2
+$base02:          #073642 !default; //dark blue
3
+$base01:          #586e75 !default; //darkest gray
4
+$base00:          #657b83 !default; //dark gray
5
+$base0:           #839496 !default; //medium gray
6
+$base1:           #93a1a1 !default; //medium light gray
7
+$base2:           #eee8d5 !default; //cream
8
+$base3:           #fdf6e3 !default; //white
9
+$solar-yellow:    #b58900 !default;
10
+$solar-orange:    #cb4b16 !default;
11
+$solar-red:       #dc322f !default;
12
+$solar-magenta:   #d33682 !default;
13
+$solar-violet:    #6c71c4 !default;
14
+$solar-blue:      #268bd2 !default;
15
+$solar-cyan:      #2aa198 !default;
16
+$solar-green:     #859900 !default;
17 17
 
18
+$solarized: dark !default;
19
+
20
+@if $solarized == light {
21
+  $base03: #fdf6e3;
22
+  $base02: #eee8d5;
23
+  $base01: #93a1a1;
24
+  $base00: #839496;
25
+  $base0:  #657b83;
26
+  $base1:  #586e75;
27
+  $base2:  #073642;
28
+  $base3:  #002b36;
29
+}
30
+
31
+/* non highlighted code colors */
18 32
 $pre-bg: $base03 !default;
33
+$pre-border: $base02 !default;
34
+$pre-color: $base1 !default;
... ...
@@ -21,11 +21,6 @@ $text-color: #222 !default;
21 21
 $text-color-light: #aaa !default;
22 22
 $type-border: #ddd !default;
23 23
 
24
-/* non highlighted code colors */
25
-$pre-bg: $base03 !default;
26
-$pre-border: $base02 !default;
27
-$pre-color: $base1 !default;
28
-
29 24
 /* Navigation */
30 25
 $nav-bg: #ccc !default;
31 26
 $nav-color: darken($nav-bg, 38) !default;
... ...
@@ -85,4 +80,3 @@ body {
85 85
     }
86 86
   }
87 87
 }
88
-
... ...
@@ -9,12 +9,5 @@
9 9
 //$sidebar-link-color-hover: darken(#7ab662, 9);
10 10
 
11 11
 
12
-//To use the light Solarized highlighting theme uncomment this block
13
-//$base03: $base3;
14
-//$base02: $base2;
15
-//$base01: $base1;
16
-//$base00: $base0;
17
-//$base0: $base00;
18
-//$base1: $base01;
19
-//$base2: $base02;
20
-//$base3: $base03;
12
+//To use the light Solarized highlighting theme uncomment the following line
13
+//$solarized: light
... ...
@@ -3,14 +3,22 @@
3 3
     text-align: right;
4 4
     font-size: 13px;
5 5
     line-height: 1.45em;
6
-    background: $base02 $noise-bg !important;
7
-    border-right: 1px solid darken($base03, 2) !important;
8
-    @include box-shadow(lighten($base02, 2) -1px 0 inset);
9
-    text-shadow: darken($base02, 10) 0 -1px;
6
+    @if $solarized == light {
7
+      background: lighten($base03, 1) $noise-bg !important;
8
+      border-right: 1px solid darken($base02, 2) !important;
9
+      @include box-shadow(lighten($base03, 2) -1px 0 inset);
10
+      text-shadow: lighten($base02, 2) 0 -1px;
11
+    } @else {
12
+      background: $base02 $noise-bg !important;
13
+      border-right: 1px solid darken($base03, 2) !important;
14
+      @include box-shadow(lighten($base02, 2) -1px 0 inset);
15
+      text-shadow: darken($base02, 10) 0 -1px;
16
+    }
10 17
     span { color: $base01 !important; }
11 18
     padding: .8em !important;
12 19
     @include border-radius(0);
13 20
   }
21
+  border: 1px solid $pre-border !important;
14 22
 }
15 23
 html .gist .gist-file {
16 24
   margin-bottom: 1.8em;
... ...
@@ -18,7 +26,11 @@ html .gist .gist-file {
18 18
   border: none;
19 19
   padding-top: image-height("code_bg.png") !important;
20 20
   .gist-syntax {
21
-    border-bottom: 1px solid darken($base03, 2) !important;
21
+    @if $solarized == dark {
22
+      border-bottom: 1px solid $base03 !important;
23
+    } @else if $solarized == light {
24
+      border-bottom: 0px;
25
+    }
22 26
     .gist-highlight{
23 27
       background: $base03 !important;
24 28
       pre {
... ...
@@ -31,7 +43,12 @@ html .gist .gist-file {
31 31
    border: 1px solid lighten($base02, 2) !important;
32 32
    color: $base01;
33 33
    font-size: .7em !important;
34
-   background: $base02 $noise-bg;
34
+   @if $solarized == light {
35
+     background: lighten($base03, 2) $noise-bg;
36
+     border-top: 1px solid lighten($base03, 2) !important;
37
+   } @else {
38
+     background: $base02 $noise-bg;
39
+   }
35 40
    @extend .sans;
36 41
    line-height: 1.5em;
37 42
     a {
... ...
@@ -101,62 +118,62 @@ p code {
101 101
   .cp     { color: $base01 !important; font-style: italic !important;  }                     /* Comment.Preproc */
102 102
   .c1     { color: $base01 !important; font-style: italic !important; }                     /* Comment.Single */
103 103
   .cs     { color: $base01 !important; font-weight: bold !important; font-style: italic !important; }   /* Comment.Special */
104
-  .err    { color: $red !important; background: none !important; }                                            /* Error */
105
-  .k      { color: $orange !important; }                       /* Keyword */
104
+  .err    { color: $solar-red !important; background: none !important; }                                            /* Error */
105
+  .k      { color: $solar-orange !important; }                       /* Keyword */
106 106
   .o      { color: $base1 !important; font-weight: bold !important; }                       /* Operator */
107 107
   .p      { color: $base1 !important; }                                             /* Operator */
108
-  .ow     { color: $cyan !important; font-weight: bold !important; }                       /* Operator.Word */
109
-  .gd     { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: inline-block; }               /* Generic.Deleted */
110
-  .gd .x  { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: inline-block; }               /* Generic.Deleted.Specific */
108
+  .ow     { color: $solar-cyan !important; font-weight: bold !important; }                       /* Operator.Word */
109
+  .gd     { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; }               /* Generic.Deleted */
110
+  .gd .x  { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-block; }               /* Generic.Deleted.Specific */
111 111
   .ge     { color: $base1 !important; font-style: italic !important; }                      /* Generic.Emph */
112 112
   //.gr     { color: #aa0000 }                                          /* Generic.Error */
113 113
   .gh     { color: $base01 !important; }                                          /* Generic.Heading */
114
-  .gi     { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: inline-block; }               /* Generic.Inserted */
115
-  .gi .x  { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: inline-block; }               /* Generic.Inserted.Specific */
114
+  .gi     { color: $base1 !important; background-color: mix($solar-green, $base03, 20%) !important; display: inline-block; }               /* Generic.Inserted */
115
+  .gi .x  { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-block; }               /* Generic.Inserted.Specific */
116 116
   //.go     { color: #888888 }                                          /* Generic.Output */
117 117
   //.gp     { color: #555555 }                                          /* Generic.Prompt */
118 118
   .gs     { color: $base1 !important; font-weight: bold !important; }                                       /* Generic.Strong */
119
-  .gu     { color: $violet !important; }                                          /* Generic.Subheading */
119
+  .gu     { color: $solar-violet !important; }                                          /* Generic.Subheading */
120 120
   //.gt     { color: #aa0000 }                                          /* Generic.Traceback */
121
-  .kc     { color: $green !important; font-weight: bold !important; }                       /* Keyword.Constant */
122
-  .kd     { color: $blue !important; }                       /* Keyword.Declaration */
123
-  .kp     { color: $orange !important; font-weight: bold !important; }                       /* Keyword.Pseudo */
124
-  .kr     { color: $magenta !important; font-weight: bold !important; }                       /* Keyword.Reserved */
125
-  .kt     { color: $cyan !important; }                       /* Keyword.Type */
126
-  .n      { color: $blue !important; }
127
-  .na     { color: $blue !important; }                                          /* Name.Attribute */
128
-  .nb     { color: $green !important; }                                          /* Name.Builtin */
129
-  .nc     { color: $magenta !important;}                                                   /* Name.Class */
130
-  .no     { color: $yellow !important; }                                          /* Name.Constant */
121
+  .kc     { color: $solar-green !important; font-weight: bold !important; }                       /* Keyword.Constant */
122
+  .kd     { color: $solar-blue !important; }                       /* Keyword.Declaration */
123
+  .kp     { color: $solar-orange !important; font-weight: bold !important; }                       /* Keyword.Pseudo */
124
+  .kr     { color: $solar-magenta !important; font-weight: bold !important; }                       /* Keyword.Reserved */
125
+  .kt     { color: $solar-cyan !important; }                       /* Keyword.Type */
126
+  .n      { color: $solar-blue !important; }
127
+  .na     { color: $solar-blue !important; }                                          /* Name.Attribute */
128
+  .nb     { color: $solar-green !important; }                                          /* Name.Builtin */
129
+  .nc     { color: $solar-magenta !important;}                                                   /* Name.Class */
130
+  .no     { color: $solar-yellow !important; }                                          /* Name.Constant */
131 131
   //.ni     { color: #800080 }                                          /* Name.Entity */
132
-  .nl     { color: $green !important; }
133
-  .ne     { color: $blue !important; font-weight: bold !important; }                       /* Name.Exception */
134
-  .nf     { color: $blue !important; font-weight: bold !important; }                       /* Name.Function */
135
-  .nn     { color: $yellow !important; }                                          /* Name.Namespace */
136
-  .nt     { color: $blue !important; font-weight: bold !important; }                                          /* Name.Tag */
137
-  .nx     { color: $yellow !Important; }
132
+  .nl     { color: $solar-green !important; }
133
+  .ne     { color: $solar-blue !important; font-weight: bold !important; }                       /* Name.Exception */
134
+  .nf     { color: $solar-blue !important; font-weight: bold !important; }                       /* Name.Function */
135
+  .nn     { color: $solar-yellow !important; }                                          /* Name.Namespace */
136
+  .nt     { color: $solar-blue !important; font-weight: bold !important; }                                          /* Name.Tag */
137
+  .nx     { color: $solar-yellow !Important; }
138 138
   //.bp     { color: #999999 }                                          /* Name.Builtin.Pseudo */
139 139
   //.vc     { color: #008080 }                                          /* Name.Variable.Class */
140
-  .vg     { color: $blue !important; }                                          /* Name.Variable.Global */
141
-  .vi     { color: $blue !important; }                                          /* Name.Variable.Instance */
142
-  .nv     { color: $blue !important; }                                          /* Name.Variable */
140
+  .vg     { color: $solar-blue !important; }                                          /* Name.Variable.Global */
141
+  .vi     { color: $solar-blue !important; }                                          /* Name.Variable.Instance */
142
+  .nv     { color: $solar-blue !important; }                                          /* Name.Variable */
143 143
   //.w      { color: #bbbbbb }                                          /* Text.Whitespace */
144
-  .mf     { color: $cyan !important; }                                          /* Literal.Number.Float */
145
-  .m      { color: $cyan !important; }                                          /* Literal.Number */
146
-  .mh     { color: $cyan !important; }                                          /* Literal.Number.Hex */
147
-  .mi     { color: $cyan !important; }                                          /* Literal.Number.Integer */
144
+  .mf     { color: $solar-cyan !important; }                                          /* Literal.Number.Float */
145
+  .m      { color: $solar-cyan !important; }                                          /* Literal.Number */
146
+  .mh     { color: $solar-cyan !important; }                                          /* Literal.Number.Hex */
147
+  .mi     { color: $solar-cyan !important; }                                          /* Literal.Number.Integer */
148 148
   //.mo     { color: #009999 }                                          /* Literal.Number.Oct */
149
-  .s      { color: $cyan !important; }                                             /* Literal.String */
149
+  .s      { color: $solar-cyan !important; }                                             /* Literal.String */
150 150
   //.sb     { color: #d14 }                                             /* Literal.String.Backtick */
151 151
   //.sc     { color: #d14 }                                             /* Literal.String.Char */
152
-  .sd     { color: $cyan !important; }                                             /* Literal.String.Doc */
153
-  .s2     { color: $cyan !important; }                                             /* Literal.String.Double */
154
-  .se     { color: $red !important; }                                             /* Literal.String.Escape */
152
+  .sd     { color: $solar-cyan !important; }                                             /* Literal.String.Doc */
153
+  .s2     { color: $solar-cyan !important; }                                             /* Literal.String.Double */
154
+  .se     { color: $solar-red !important; }                                             /* Literal.String.Escape */
155 155
   //.sh     { color: #d14 }                                             /* Literal.String.Heredoc */
156
-  .si     { color: $blue !important; }                                             /* Literal.String.Interpol */
156
+  .si     { color: $solar-blue !important; }                                             /* Literal.String.Interpol */
157 157
   //.sx     { color: #d14 }                                             /* Literal.String.Other */
158
-  .sr     { color: $cyan !important; }                                          /* Literal.String.Regex */
159
-  .s1     { color: $cyan !important; }                                             /* Literal.String.Single */
158
+  .sr     { color: $solar-cyan !important; }                                          /* Literal.String.Regex */
159
+  .s1     { color: $solar-cyan !important; }                                             /* Literal.String.Single */
160 160
   //.ss     { color: #990073 }                                          /* Literal.String.Symbol */
161 161
   //.il     { color: #009999 }                                          /* Literal.Number.Integer.Long */
162 162
   div { .gd, .gd .x, .gi, .gi .x { display: block; }}
... ...
@@ -169,9 +186,17 @@ p code {
169 169
   overflow-y: hidden;
170 170
   overflow-x: auto;
171 171
 }
172
+
173
+$solar-scroll-bg: rgba(#fff, .15);
174
+$solar-scroll-thumb: rgba(#fff, .2);
175
+@if $solarized == light {
176
+  $solar-scroll-bg: rgba(#000, .15);
177
+  $solar-scroll-thumb: rgba(#000, .15);
178
+}
179
+
172 180
 pre, .highlight, .gist-highlight {
173
-  &::-webkit-scrollbar {  height: .5em; background: rgba(#fff, .15); }
174
-  &::-webkit-scrollbar-thumb:horizontal { background: rgba(#fff, .2);  -webkit-border-radius: 4px; border-radius: 4px }
181
+  &::-webkit-scrollbar {  height: .5em; background: $solar-scroll-bg; }
182
+  &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb;  -webkit-border-radius: 4px; border-radius: 4px }
175 183
 }
176 184
 
177 185
 .highlight code { @extend .pre-code; background: #000;}
... ...
@@ -186,7 +211,9 @@ figure[role=code] {
186 186
     @extend .code-title;
187 187
     a { @extend .download-source; }
188 188
   }
189
-  .highlight { margin-bottom: 0; border-bottom: 1px solid darken($base03, 2) !important; }
189
+  .highlight {
190
+    margin-bottom: 0;
191
+  }
190 192
 }
191 193
 .code-title {
192 194
   text-align: center;
... ...
@@ -215,5 +242,3 @@ figure[role=code] {
215 215
   text-shadow: #cbcccc 0 1px 0;
216 216
   padding-left: 3em;
217 217
 }
218
-
219
-