... | ... |
@@ -50,3 +50,4 @@ $textinput-border-focus: #989898; |
50 | 50 |
#articles a, #articles + aside a { |
51 | 51 |
@include link-colors($link-color, $hover: saturate(darken($link_color, 15), 20), $focus: saturate(darken($link_color, 15), 20), $visited: darken(adjust_hue($link_color, 70), 10)); |
52 | 52 |
} |
53 |
+a { @include transition(color, .5s); } |
... | ... |
@@ -5,11 +5,11 @@ |
5 | 5 |
height: image-height($img); |
6 | 6 |
} |
7 | 7 |
|
8 |
-@mixin selection($bg: #b4d5fe, $color: inherit){ |
|
8 |
+@mixin selection($bg, $color: inherit, $text-shadow: none){ |
|
9 | 9 |
* { |
10 |
- &::-moz-selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px; } |
|
11 |
- &::-webkit-selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px;} |
|
12 |
- &::selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px; } |
|
10 |
+ &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
|
11 |
+ &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
|
12 |
+ &::selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
|
13 | 13 |
} |
14 | 14 |
} |
15 | 15 |
|
... | ... |
@@ -14,6 +14,7 @@ body > nav { |
14 | 14 |
.search { |
15 | 15 |
padding: .3em .5em 0; |
16 | 16 |
font-size: .85em; |
17 |
+ @extend .sans; |
|
17 | 18 |
line-height: 1.1em; |
18 | 19 |
width: 95%; |
19 | 20 |
@include border-radius(.5em); |
... | ... |
@@ -58,7 +59,7 @@ body > nav { |
58 | 58 |
text-shadow: lighten($nav-bg, 12) 0 1px; |
59 | 59 |
float: left; |
60 | 60 |
text-decoration: none; |
61 |
- font-size: .9em; |
|
61 |
+ font-size: 1em; |
|
62 | 62 |
padding: .1em 0; |
63 | 63 |
line-height: 1.5em; |
64 | 64 |
} |
... | ... |
@@ -82,7 +83,7 @@ body > nav { |
82 | 82 |
} |
83 | 83 |
} |
84 | 84 |
ul[data-subscription$=email] + form { |
85 |
- width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 48px; |
|
85 |
+ width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px; |
|
86 | 86 |
.search { width: 91%; } |
87 | 87 |
} |
88 | 88 |
fieldset[role=mobile-nav] { display: none; } |
... | ... |
@@ -94,7 +95,7 @@ body > nav { |
94 | 94 |
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 5px; |
95 | 95 |
} |
96 | 96 |
ul[data-subscription$=email] + form { |
97 |
- width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 48px; |
|
97 |
+ width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 58px; |
|
98 | 98 |
} |
99 | 99 |
} |
100 | 100 |
} |
... | ... |
@@ -25,51 +25,73 @@ $green: #859900; |
25 | 25 |
//$base2: $base02; |
26 | 26 |
//$base3: $base03; |
27 | 27 |
|
28 |
-.gutter { |
|
29 |
- .line-numbers { |
|
28 |
+.highlight, html .gist .gist-file .gist-syntax .gist-highlight { |
|
29 |
+ pre.line-numbers { |
|
30 | 30 |
text-align: right; |
31 | 31 |
background: $base02 !important; |
32 |
- border-right: 1px solid darken($base03, 2); |
|
32 |
+ border-right: 1px solid darken($base03, 2) !important; |
|
33 | 33 |
@include box-shadow(lighten($base02, 2) -1px 0 inset); |
34 | 34 |
text-shadow: darken($base02, 10) 0 -1px; |
35 | 35 |
span { color: $base01 !important; } |
36 |
+ padding-left: .8em !important; |
|
37 |
+ padding-right: .8em !important; |
|
36 | 38 |
} |
37 | 39 |
} |
38 | 40 |
html .gist .gist-file { |
39 | 41 |
margin-bottom: 1.5em; |
42 |
+ position: relative; |
|
40 | 43 |
border: none; |
44 |
+ padding-top: image-height("code_bg.png") !important; |
|
41 | 45 |
.gist-syntax { |
42 |
- border-bottom: 1px solid #515151 !important; |
|
46 |
+ border-bottom: 1px solid darken($base03, 2) !important; |
|
43 | 47 |
.gist-highlight{ |
44 | 48 |
background: $base03 !important; |
45 | 49 |
pre { |
46 | 50 |
@extend .pre; |
47 |
- overflow-y: hidden; |
|
48 |
- overflow-x: auto; |
|
51 |
+ } |
|
52 |
+ pre.line-numbers { |
|
53 |
+ |
|
49 | 54 |
} |
50 | 55 |
} |
51 | 56 |
} |
52 | 57 |
.gist-meta { |
53 |
- @include background(linear-gradient(#b0b0b0, #a7a7a7)); |
|
54 |
- padding: 0.5em; |
|
55 |
- background-color: #bababa !important; |
|
56 |
- border: 1px solid #9c9c9c; |
|
57 |
- border-top: 1px solid #d0d0d0; |
|
58 |
- border-bottom: 1px solid #777777; |
|
59 |
- font-size: .7em !important; |
|
60 |
- font-family: "Helvetica Neue", Arial, sans-serif !important; |
|
61 |
- color: #464646 !important; |
|
62 |
- line-height: 1.4em; |
|
58 |
+ padding: .6em 0.8em; |
|
59 |
+ border: 1px solid lighten($base02, 2) !important; |
|
60 |
+ color: $base01; |
|
61 |
+ font-size: .7em !important; |
|
62 |
+ background: $base02; |
|
63 |
+ @extend .sans; |
|
64 |
+ line-height: 1.5em; |
|
65 |
+ a { |
|
66 |
+ color: mix($base1, $base01) !important; |
|
67 |
+ @include hover-link; |
|
68 |
+ &:hover { color: $base1 !important; } |
|
69 |
+ } |
|
70 |
+ a[href*='#file'] { |
|
71 |
+ position: absolute; top: 0; left:0; right:-10px; |
|
72 |
+ color: #474747 !important; |
|
73 |
+ @extend .code-title; |
|
74 |
+ &:hover { color: $link-color !important; } |
|
75 |
+ } |
|
76 |
+ a[href*=raw]{ |
|
77 |
+ @extend .download-source; |
|
78 |
+ top: .4em; |
|
79 |
+ } |
|
63 | 80 |
} |
64 | 81 |
} |
65 | 82 |
pre { @extend .pre; } |
66 | 83 |
|
67 | 84 |
.pre { |
68 | 85 |
@extend .mono; |
86 |
+ @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); |
|
69 | 87 |
font-size: .8em; |
88 |
+ overflow: scroll; |
|
89 |
+ overflow-y: hidden; |
|
90 |
+ overflow-x: auto; |
|
70 | 91 |
line-height: 1.45em; |
71 | 92 |
padding: 1em 1.2em !important; |
72 | 93 |
background: $base03 !important; |
94 |
+ code { background: $base03 !important; overflow: hidden; } |
|
73 | 95 |
color: $base1 !important; |
74 | 96 |
span { color: $base1 !important; } |
75 | 97 |
span { font-style: normal !important; font-weight: normal !important; } |
... | ... |
@@ -84,13 +106,13 @@ pre { @extend .pre; } |
84 | 84 |
.o { color: $base1 !important; font-weight: bold !important; } /* Operator */ |
85 | 85 |
.p { color: $base1 !important; } /* Operator */ |
86 | 86 |
.ow { color: $cyan !important; font-weight: bold !important; } /* Operator.Word */ |
87 |
- .gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: block; } /* Generic.Deleted */ |
|
88 |
- .gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: block; } /* Generic.Deleted.Specific */ |
|
87 |
+ .gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */ |
|
88 |
+ .gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */ |
|
89 | 89 |
.ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */ |
90 | 90 |
//.gr { color: #aa0000 } /* Generic.Error */ |
91 | 91 |
.gh { color: $base01 !important; } /* Generic.Heading */ |
92 |
- .gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: block; } /* Generic.Inserted */ |
|
93 |
- .gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: block; } /* Generic.Inserted.Specific */ |
|
92 |
+ .gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */ |
|
93 |
+ .gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */ |
|
94 | 94 |
//.go { color: #888888 } /* Generic.Output */ |
95 | 95 |
//.gp { color: #555555 } /* Generic.Prompt */ |
96 | 96 |
.gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */ |
... | ... |
@@ -136,28 +158,37 @@ pre { @extend .pre; } |
136 | 136 |
.s1 { color: $cyan !important; } /* Literal.String.Single */ |
137 | 137 |
//.ss { color: #990073 } /* Literal.String.Symbol */ |
138 | 138 |
//.il { color: #009999 } /* Literal.Number.Integer.Long */ |
139 |
+ div { .gd, .gd .x, .gi, .gi .x { display: block; }} |
|
139 | 140 |
} |
140 | 141 |
|
141 |
-.highlight { |
|
142 |
+.highlight, .gist-highlight { |
|
142 | 143 |
margin-bottom: 1.5em; |
144 |
+ background: $base03; |
|
143 | 145 |
overflow-y: hidden; |
144 |
- .gutter pre { |
|
145 |
- padding-left: .8em !important; |
|
146 |
- padding-right: .8em !important; |
|
146 |
+ overflow-x: auto; |
|
147 |
+ pre { overflow: visible; } |
|
148 |
+} |
|
149 |
+figure { |
|
150 |
+ margin-bottom: 1.5em; |
|
151 |
+ figcaption { |
|
152 |
+ position: relative; |
|
153 |
+ @extend .code-title; |
|
154 |
+ a { @extend .download-source; } |
|
147 | 155 |
} |
156 |
+ .highlight { margin-bottom: 0; border-bottom: 1px solid darken($base03, 2) !important; } |
|
148 | 157 |
} |
149 |
- |
|
150 |
-h3.filename { |
|
158 |
+h3.filename { @extend .code-title; } |
|
159 |
+.code-title { |
|
160 |
+ text-align: center; |
|
151 | 161 |
font-size: 13px; |
152 | 162 |
line-height: 2em; |
153 |
- text-align: center; |
|
154 | 163 |
text-shadow: #cbcccc 0 1px 0; |
155 | 164 |
color: #474747; |
156 | 165 |
font-style: normal; |
157 | 166 |
margin-bottom: 0; |
158 | 167 |
|
159 | 168 |
@include border-top-radius(5px); |
160 |
- font-family: "Helvetica Neue",Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; |
|
169 |
+ font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; |
|
161 | 170 |
background: #aaaaaa image-url("code_bg.png") top repeat-x; |
162 | 171 |
border: 1px solid #565656; |
163 | 172 |
border-top-color: #cbcbcb; |
... | ... |
@@ -165,3 +196,15 @@ h3.filename { |
165 | 165 |
border-right-color: #a5a5a5; |
166 | 166 |
border-bottom: 0; |
167 | 167 |
} |
168 |
+ |
|
169 |
+.download-source { |
|
170 |
+ position: absolute; right: .8em; |
|
171 |
+ @include hover-link; |
|
172 |
+ color: #666 !important; |
|
173 |
+ &:hover { color: $link-color !important; } |
|
174 |
+ z-index: 1; |
|
175 |
+ font-size: 13px; |
|
176 |
+ text-shadow: #cbcccc 0 1px 0; |
|
177 |
+ padding-left: 3em; |
|
178 |
+} |
|
179 |
+ |
... | ... |
@@ -23,10 +23,13 @@ |
23 | 23 |
<meta name="keywords" content="{{page.keywords}}"/> |
24 | 24 |
{% endif %} |
25 | 25 |
|
26 |
+ <link href="/images/favicon.png" rel="shortcut icon" /> |
|
26 | 27 |
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> |
27 | 28 |
<script src="/javascripts/modernizr-2.0.js"></script> |
28 | 29 |
<script src="/javascripts/ender.js"></script> |
29 | 30 |
<script src="/javascripts/octopress.js" type="text/javascript"></script> |
31 |
+ <link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'> |
|
32 |
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'> |
|
30 | 33 |
{% include google_analytics.html %} |
31 | 34 |
<link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml"/> |
32 | 35 |
</head> |
... | ... |
@@ -1,12 +1,11 @@ |
1 | 1 |
function getNav(){ |
2 |
- var fieldset = $('body > nav fieldset[role=site-search]').after('<fieldset role="mobile-nav"></fieldset>').next(); |
|
3 |
- var select = $(fieldset).append('<select></select>').children(); |
|
4 |
- select.append('<option value="">Navigate…</option>'); |
|
5 |
- $($('body > nav ul[role=main-nav] a').concat($('body > nav ul[role=subscription] a'))).each(function(link) { |
|
6 |
- select.append('<option value="'+link.href+'">• '+link.text+'</option>') |
|
2 |
+ var mobileNav = $('body > nav fieldset[role=site-search]').after('<fieldset role="mobile-nav"></fieldset>').next().append('<select></select>'); |
|
3 |
+ mobileNav.children('select').append('<option value="">Navigate…</option>'); |
|
4 |
+ $($('body > nav ul[role=main-nav] a')).each(function(link) { |
|
5 |
+ mobileNav.children('select').append('<option value="'+link.href+'">• '+link.text+'</option>') |
|
7 | 6 |
}); |
8 |
- select.bind('change', function(event){ |
|
9 |
- if (select.val()) window.location.href = select.val(); |
|
7 |
+ mobileNav.children('select').bind('change', function(event){ |
|
8 |
+ if (event.target.value) window.location.href = event.target.value; |
|
10 | 9 |
}); |
11 | 10 |
} |
12 | 11 |
function addSidebarToggler() { |
... | ... |
@@ -37,20 +36,10 @@ function testFeatures() { |
37 | 37 |
} |
38 | 38 |
} |
39 | 39 |
|
40 |
-function addDivLines(){ |
|
41 |
- $('div.highlight pre code').each(function(el){ |
|
42 |
- var content = bonzo(el).html(); |
|
43 |
- var lines = content.replace(/\s*$/g, '').split('\n'); |
|
44 |
- var count = lines.length; |
|
45 |
- bonzo(lines).each(function(line, index){ |
|
46 |
- if(line == '') line = ' '; |
|
47 |
- lines[index] = '<div class="line">' + line + '</div>'; |
|
48 |
- }); |
|
49 |
- $(el).html(lines.join('')); |
|
50 |
- }); |
|
51 |
-} |
|
52 |
-function preToTable(){ |
|
53 |
- $('div.highlight').each(function(code){ |
|
40 |
+function addCodeLineNumbers(){ |
|
41 |
+ if (navigator.appName == 'Microsoft Internet Explorer') { return } |
|
42 |
+ $('div.highlight pre code').each(function(el){ addDivLines(el); }); |
|
43 |
+ $('div.highlight, div.gist-highlight').each(function(code){ |
|
54 | 44 |
var tableStart = '<table cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter">'; |
55 | 45 |
var lineNumbers = '<pre class="line-numbers">'; |
56 | 46 |
var tableMiddle = '</pre></td><td class="code" width="100%">'; |
... | ... |
@@ -63,6 +52,16 @@ function preToTable(){ |
63 | 63 |
$(code).html(table); |
64 | 64 |
}); |
65 | 65 |
} |
66 |
+function addDivLines(el){ |
|
67 |
+ var content = $(el).html(); |
|
68 |
+ var lines = content.replace(/\s*$/g, '').split(/\n/); |
|
69 |
+ var count = lines.length; |
|
70 |
+ $(lines).each(function(line, index){ |
|
71 |
+ if(line == '') line = ' '; |
|
72 |
+ lines[index] = '<div class="line">' + line + '</div>'; |
|
73 |
+ }); |
|
74 |
+ $(el).html(lines.join('')); |
|
75 |
+} |
|
66 | 76 |
|
67 | 77 |
function flashVideoFallback(){ |
68 | 78 |
var flashplayerlocation = "/assets/jwplayer/player.swf", |
... | ... |
@@ -102,10 +101,9 @@ function wrapFlashVideos(){ |
102 | 102 |
|
103 | 103 |
$.domReady(function(){ |
104 | 104 |
testFeatures(); |
105 |
- addDivLines(); |
|
106 | 105 |
flashVideoFallback(); |
107 | 106 |
wrapFlashVideos(); |
108 |
- preToTable(); |
|
107 |
+ addCodeLineNumbers(); |
|
109 | 108 |
getNav(); |
110 | 109 |
addSidebarToggler(); |
111 | 110 |
}); |
... | ... |
@@ -144,3 +142,4 @@ b=j.userAgent.toLowerCase(),d=j.platform.toLowerCase(),g=d?/win/.test(d):/win/.t |
144 | 144 |
a&&b&&d&&i&&k){d+="";i+="";var p={};if(f&&typeof f===o)for(var m in f)p[m]=f[m];p.data=a;p.width=d;p.height=i;a={};if(c&&typeof c===o)for(var n in c)a[n]=c[n];if(e&&typeof e===o)for(var r in e)typeof a.flashvars!=l?a.flashvars+="&"+r+"="+e[r]:a.flashvars=r+"="+e[r];if(t(k))b=s(p,a,b),j.success=!0,j.ref=b}h&&h(j)},ua:g,getFlashPlayerVersion:function(){return{major:g.pv[0],minor:g.pv[1],release:g.pv[2]}},hasFlashPlayerVersion:t,createSWF:function(a,b,d){if(g.w3)return s(a,b,d)},getQueryParamValue:function(a){var b= |
145 | 145 |
i.location.search||i.location.hash;if(b){/\?/.test(b)&&(b=b.split("?")[1]);if(a==null)return u(b);for(var b=b.split("&"),d=0;d<b.length;d++)if(b[d].substring(0,b[d].indexOf("="))==a)return u(b[d].substring(b[d].indexOf("=")+1))}return""}}}(); |
146 | 146 |
|
147 |
+ |