Browse code

1. Some general styling improvements especially for syntax and navigation 2. JS line numbering now supports embedded gists 3. Added a favicon

Brandon Mathis authored on 16/06/2011 at 02:50:01
Showing 7 changed files
... ...
@@ -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>
33 36
new file mode 100644
34 37
Binary files /dev/null and b/themes/classic/source/images/favicon.png differ
... ...
@@ -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&hellip;</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+'">&bull; '+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&hellip;</option>');
4
+  $($('body > nav ul[role=main-nav] a')).each(function(link) {
5
+    mobileNav.children('select').append('<option value="'+link.href+'">&bull; '+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
+