Browse code

1. Removed unnecessary guardfile 2. Separated Solarized color pack into a partial. 3. Changed up sass partial load order to support simple color and style overrides.

Brandon Mathis authored on 18/06/2011 at 20:42:08
Showing 10 changed files
1 1
deleted file mode 100644
... ...
@@ -1,3 +0,0 @@
1
-guard 'livereload', :api_version => '1.6' do
2
-  watch(/public\/\S[css|js|html|png|jpg|gif]/)
3
-end
4 1
deleted file mode 100644
... ...
@@ -1,12 +0,0 @@
1
-//@import "partials/shared";
2
-//@import "partials/search";
3
-
4
-/* layout partials */
5
-@import "partials/header";
6
-@import "partials/navigation";
7
-@import "partials/page";
8
-@import "partials/sidebar";
9
-@import "partials/blog";
10
-@import "partials/footer";
11
-
12
-@import "partials/syntax";
... ...
@@ -2,7 +2,18 @@
2 2
 @include reset-html5;
3 3
 
4 4
 @import "core/utilities";
5
+@import "partials/solarized";
6
+@import "custom/colors";
5 7
 @import "core/theme";
6 8
 @import "core/layout";
7 9
 @import "core/typography";
8
-@import "partials";
10
+
11
+/* layout partials */
12
+@import "partials/header";
13
+@import "partials/navigation";
14
+@import "partials/page";
15
+@import "partials/sidebar";
16
+@import "partials/blog";
17
+@import "partials/footer";
18
+@import "partials/syntax";
19
+@import "custom/styles";
... ...
@@ -11,7 +11,6 @@ $sidebar-width-wide: 300px;
11 11
 
12 12
 .group { @include pie-clearfix; }
13 13
 
14
-//html {  }
15 14
 body {
16 15
   -webkit-text-size-adjust: none;
17 16
   max-width: 1350px;
... ...
@@ -42,7 +41,14 @@ body {
42 42
 }
43 43
 
44 44
 .toggle-sidebar { display: none; }
45
-#articles { width: 100%; + aside { display: none; } }
45
+#articles { width: 100%;
46
+  + aside {
47
+    float: none;
48
+    padding: 0 $pad-min 1px;
49
+    background-color: $sidebar-bg;
50
+    border-top: 1px solid $sidebar-border;
51
+  }
52
+}
46 53
 
47 54
 @media only screen and (min-width: 550px) {
48 55
   body > header { font-size: 1em; }
... ...
@@ -68,7 +74,7 @@ body {
68 68
     + aside {
69 69
       width: $sidebar-width-medium - $sidebar-pad-medium*2;
70 70
       padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
71
-      display: block;
71
+      background: none;
72 72
       float: left;
73 73
       margin: 0 -100% 0 0;
74 74
     }
... ...
@@ -112,14 +118,14 @@ body {
112 112
 }
113 113
 
114 114
 @media only screen and (min-width: 992px) {
115
-  body > header {
116
-    font-size: 1.3em;
117
-  }
115
+  body > header { font-size: 1.3em; }
118 116
   body > nav + div > div { margin-right: $sidebar-width-wide; }
119 117
   #articles {
118
+    padding-top: $pad-wide/2;
119
+    padding-bottom: $pad-wide/2;
120 120
     + aside {
121 121
       width: $sidebar-width-wide - $sidebar-pad-wide*2;
122
-      padding: 0 $sidebar-pad-wide $sidebar-pad-wide;
122
+      padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
123 123
     }
124 124
   }
125 125
 }
... ...
@@ -1,50 +1,54 @@
1 1
 // Main Link Colors
2
-$link-color: lighten(#165b94, 3);
3
-$link-color-hover: adjust-hue($link-color, -200);
4
-$link-color-visited: darken(adjust_hue($link_color, 70), 10);
5
-$link-color-active: darken($link-color-hover, 15);
2
+$link-color: lighten(#165b94, 3) !default;
3
+$link-color-hover: adjust-hue($link-color, -200) !default;
4
+$link-color-visited: darken(adjust_hue($link_color, 70), 10) !default;
5
+$link-color-active: darken($link-color-hover, 15) !default;
6 6
 
7 7
 // Main Section Colors
8
-$body-color: #333333;
9
-$light-text: #999999;
10
-$page-bg: #252525;
11
-$article-border: #eeeeee;
12
-$main-bg: #f5f5f5;
8
+$body-color: #333333 !default;
9
+$light-text: #999999 !default;
10
+$page-bg: #252525 !default;
11
+$article-border: #eeeeee !default;
12
+$main-bg: #f5f5f5 !default;
13 13
 
14
-$header-bg: #333;
15
-$header-border: lighten($header-bg, 15);
16
-$title-color: #f2f2f2;
17
-$subtitle-color: #aaa;
14
+$header-bg: #333 !default;
15
+$header-border: lighten($header-bg, 15) !default;
16
+$title-color: #f2f2f2 !default;
17
+$subtitle-color: #aaa !default;
18 18
 
19
-$type-border: #ddd;
20
-$type-color-light: #555;
21
-$type-color: #222;
19
+$type-color: #222 !default;
20
+$type-color-light: #555 !default;
21
+$type-border: #ddd !default;
22 22
 
23
-$nav-bg: #ccc;
24
-$nav-color: darken($nav-bg, 38);
23
+
24
+/* Navigation */
25
+$nav-bg: #ccc !default;
26
+$nav-color: darken($nav-bg, 38) !default;
25 27
 $nav-color-hover: darken($nav-color, 25);
28
+$nav-placeholder: desaturate(darken($nav-bg, 10), 15);
26 29
 $nav-border: darken($nav-bg, 10);
27 30
 $nav-border-top: lighten($nav-bg, 15);
28 31
 $nav-border-bottom: darken($nav-bg, 25);
29 32
 $nav-border-left: darken($nav-bg, 11);
30 33
 $nav-border-right: lighten($nav-bg, 7);
31 34
 
32
-$sidebar-bg: #eee;
33
-$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2);
35
+/* Sidebar colors */
36
+$sidebar-bg: #eee !default;
37
+$sidebar-link-color: $link-color !default;
38
+$sidebar-link-color-hover: $link-color-hover !default;
39
+$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
34 40
 $sidebar-border: desaturate(darken($sidebar-bg, 7), 10);
35 41
 $sidebar-border: darken($sidebar-bg, 7);
36
-$sidebar-link-color: $link-color;
37
-$sidebar-link-color-hover: $link-color-hover;
38 42
 $sidebar-link-color-subdued: lighten($sidebar-color, 20);
39
-$sidebar-link-color-subdued-hover: $link-color-hover;//darken($sidebar-link-color-subdued, 20);
43
+$sidebar-link-color-subdued-hover: $sidebar-link-color-hover;
40 44
 $twitter-status-link: lighten($sidebar-link-color-subdued, 15);
41 45
 
42
-$footer-color: #999999;
43
-$footer-bg: #ccc;
46
+$footer-color: #999999 !default;
47
+$footer-bg: #ccc !default;
44 48
 $footer-color: darken($footer-bg, 38);
45 49
 $footer-color-hover: darken($footer-color, 10);
46
-$footer-placeholder: desaturate(darken($footer-bg, 10), 15);
47 50
 $footer-border-top: lighten($footer-bg, 15);
51
+$footer-border-bottom: darken($footer-bg, 15);
48 52
 $footer-link-color: darken($footer-bg, 38);
49 53
 $footer-link-color-hover: darken($footer-color, 25);
50 54
 $page-border-bottom: darken($footer-bg, 5);
51 55
new file mode 100644
... ...
@@ -0,0 +1,22 @@
0
+// Here you can easily change your sites's color scheme.
1
+// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works.
2
+
3
+//$header-bg: #263347;
4
+//$subtitle-color: lighten($header-bg, 58);
5
+//$nav-bg: desaturate(lighten(#8fc17a, 18), 5);
6
+//$sidebar-bg: desaturate(#eceff5, 8);
7
+//$sidebar-link-color: saturate(#526f9a, 10);
8
+//$sidebar-link-color-hover: darken(#7ab662, 9);
9
+
10
+
11
+//To use the light Solarized highlighting theme uncomment this block
12
+/*
13
+$base03: $base3;
14
+$base02: $base2;
15
+$base01: $base1;
16
+$base00: $base0;
17
+$base0: $base00;
18
+$base1: $base01;
19
+$base2: $base02;
20
+$base3: $base03;
21
+*/
0 22
new file mode 100644
... ...
@@ -0,0 +1,2 @@
0
+// This File is imported last, and will override other styles in the cascade
1
+// Add styles here to make changes without digging in too much
0 2
deleted file mode 100644
1 3
new file mode 100644
... ...
@@ -0,0 +1,16 @@
0
+$base03:    #002b36; //darkest blue
1
+$base02:    #073642; //dark blue
2
+$base01:    #586e75; //darkest gray
3
+$base00:    #657b83; //dark gray
4
+$base0:     #839496; //medium gray
5
+$base1:     #93a1a1; //medium light gray
6
+$base2:     #eee8d5; //cream
7
+$base3:     #fdf6e3; //white
8
+$yellow:    #b58900;
9
+$orange:    #cb4b16;
10
+$red:       #dc322f;
11
+$magenta:   #d33682;
12
+$violet:    #6c71c4;
13
+$blue:      #268bd2;
14
+$cyan:      #2aa198;
15
+$green:     #859900;
... ...
@@ -1,30 +1,3 @@
1
-$base03:    #002b36; //darkest blue
2
-$base02:    #073642; //dark blue
3
-$base01:    #586e75; //darkest gray
4
-$base00:    #657b83; //dark gray
5
-$base0:     #839496; //medium gray
6
-$base1:     #93a1a1; //medium light gray
7
-$base2:     #eee8d5; //cream
8
-$base3:     #fdf6e3; //white
9
-$yellow:    #b58900;
10
-$orange:    #cb4b16;
11
-$red:       #dc322f;
12
-$magenta:   #d33682;
13
-$violet:    #6c71c4;
14
-$blue:      #268bd2;
15
-$cyan:      #2aa198;
16
-$green:     #859900;
17
-
18
-// If you prefer light colors, uncomment the following block to change themes
19
-//$base03: $base3;
20
-//$base02: $base2;
21
-//$base01: $base1;
22
-//$base00: $base0;
23
-//$base0: $base00;
24
-//$base1: $base01;
25
-//$base2: $base02;
26
-//$base3: $base03;
27
-
28 1
 .highlight, html .gist .gist-file .gist-syntax .gist-highlight {
29 2
   .line-numbers {
30 3
     text-align: right;