Improve style of highlighted syntax

_posts/2011-03-10-sample-post.md

@@ -96,9 +96,3 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
 Make any link standout more when applying the `.btn` class.
 
 <div markdown="0"><a href="#" class="btn">This is a button</a></div>
-
-<div markdown="0"><a href="#" class="btn btn-inverse">This is an inverse button</a></div>
-
-<div markdown="0"><a href="#" class="btn btn-small">This is small button</a></div>
-
-<div markdown="0"><a href="#" class="btn btn-inverse btn-small">Small inverse button</a></div>

_posts/2013-08-16-code-highlighting-post.md

@@ -0,0 +1,114 @@
+---
+layout: post
+title: Syntax Highlighting Post
+description: "Demo post displaying the various ways of highlighting code in Markdown."
+modified: 2013-08-20
+tags: [sample post, code, highlighting]
+---
+
+[Syntax highlighting](http://en.wikipedia.org/wiki/Syntax_highlighting) is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.
+
+### Pygments Code Blocks
+
+To modify styling and highlight colors edit `/assets/less/pygments.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.highlight`.
+
+{% highlight css %}
+#container {
+    float: left;
+    margin: 0 -240px 0 0;
+    width: 100%;
+}
+{% endhighlight %}
+
+Line numbering enabled:
+
+{% highlight html linenos %}
+{% raw %}
+<nav class="pagination" role="navigation">
+    {% if page.previous %}
+        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+    {% endif %}
+    {% if page.next %}
+        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+    {% endif %}
+</nav><!-- /.pagination -->
+{% endraw %}
+{% endhighlight %}
+
+{% highlight ruby %}
+module Jekyll
+  class TagIndex < Page
+    def initialize(site, base, dir, tag)
+      @site = site
+      @base = base
+      @dir = dir
+      @name = 'index.html'
+      self.process(@name)
+      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+      self.data['tag'] = tag
+      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
+      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
+      self.data['title'] = "#{tag_title_prefix}#{tag}"
+      self.data['description'] = "An archive of posts tagged #{tag}."
+    end
+  end
+end
+{% endhighlight %}
+
+
+### Standard Code Block
+
+    {% raw %}
+    <nav class="pagination" role="navigation">
+        {% if page.previous %}
+            <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+        {% endif %}
+        {% if page.next %}
+            <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+        {% endif %}
+    </nav><!-- /.pagination -->
+    {% endraw %}
+
+
+### Fenced Code Blocks
+
+To modify styling and highlight colors edit `/assets/less/coderay.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.coderay`. Line numbers and a few other things can be modified in `_config.yml` under `coderay`.
+
+~~~ css
+#container {
+    float: left;
+    margin: 0 -240px 0 0;
+    width: 100%;
+}
+~~~
+
+~~~ html
+{% raw %}<nav class="pagination" role="navigation">
+    {% if page.previous %}
+        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+    {% endif %}
+    {% if page.next %}
+        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+    {% endif %}
+</nav><!-- /.pagination -->{% endraw %}
+~~~
+
+~~~ ruby
+module Jekyll
+  class TagIndex < Page
+    def initialize(site, base, dir, tag)
+      @site = site
+      @base = base
+      @dir = dir
+      @name = 'index.html'
+      self.process(@name)
+      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+      self.data['tag'] = tag
+      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
+      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
+      self.data['title'] = "#{tag_title_prefix}#{tag}"
+      self.data['description'] = "An archive of posts tagged #{tag}."
+    end
+  end
+end
+~~~

assets/css/ie.css

@@ -140,7 +140,7 @@ samp {
  * Improve readability of pre-formatted text in all browsers.
  */
 pre {
-  white-space: pre-wrap;
+  white-space: pre;
 }
 /**
  * Set consistent quote types.
@@ -370,6 +370,10 @@ table {
 .pull-right {
   float: right;
 }
+.image-pull-right {
+  float: right;
+  margin-top: 0;
+}
 .clearfix {
   *zoom: 1;
 }
@@ -430,6 +434,41 @@ h1 {
   margin-bottom: 26px;
   margin-bottom: 1.625rem;
 }
+h2 {
+  font-size: 28px;
+  font-size: 1.75rem;
+  line-height: 0.9286;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
+h3 {
+  font-size: 24px;
+  font-size: 1.5rem;
+  line-height: 1.0833;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
+h4 {
+  font-size: 18px;
+  font-size: 1.125rem;
+  line-height: 1.4444;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
+h5 {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.625;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
+h6 {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.8571;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
 a {
   text-decoration: none;
   color: #343434;
@@ -448,11 +487,6 @@ a:hover,
 a:active {
   outline: 0;
 }
-.link-arrow {
-  font-weight: 100;
-  text-decoration: underline;
-  font-style: normal;
-}
 figcaption {
   padding-top: 10px;
   font-size: 14px;
@@ -1425,6 +1459,58 @@ body {
 .browser-upgrade a:hover {
   border-bottom: 1px solid #ffffff;
 }
+#goog-fixurl ul {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+#goog-fixurl ul li {
+  list-style-type: none;
+}
+#goog-wm-qt {
+  width: auto;
+  margin-right: 10px;
+  margin-bottom: 20px;
+  padding: 8px 20px;
+  display: inline-block;
+  font-size: 14px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  color: #111111;
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: #919191;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+#goog-wm-sb {
+  display: inline-block;
+  margin-bottom: 20px;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-size: 0.875rem;
+  background-color: #111111;
+  color: #ffffff;
+  border: 2px solid #111111 !important;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+}
+#goog-wm-sb:visited {
+  color: #ffffff;
+}
+#goog-wm-sb:hover {
+  background-color: #ffffff;
+  color: #111111;
+}
+#goog-wm-sb:active {
+  -webkit-transform: translate(0, 2px);
+  -moz-transform: translate(0, 2px);
+  -ms-transform: translate(0, 2px);
+  -o-transform: translate(0, 2px);
+  transform: translate(0, 2px);
+}
 /* 480px wide ============================================== */
 .article-author-top,
 .article-author-bottom {

assets/css/main.css

@@ -140,7 +140,7 @@ samp {
  * Improve readability of pre-formatted text in all browsers.
  */
 pre {
-  white-space: pre-wrap;
+  white-space: pre;
 }
 /**
  * Set consistent quote types.
@@ -370,6 +370,10 @@ table {
 .pull-right {
   float: right;
 }
+.image-pull-right {
+  float: right;
+  margin-top: 0;
+}
 .clearfix {
   *zoom: 1;
 }
@@ -430,6 +434,41 @@ h1 {
   margin-bottom: 26px;
   margin-bottom: 1.625rem;
 }
+h2 {
+  font-size: 28px;
+  font-size: 1.75rem;
+  line-height: 0.9286;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
+h3 {
+  font-size: 24px;
+  font-size: 1.5rem;
+  line-height: 1.0833;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
+h4 {
+  font-size: 18px;
+  font-size: 1.125rem;
+  line-height: 1.4444;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
+h5 {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.625;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
+h6 {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.8571;
+  margin-bottom: 26px;
+  margin-bottom: 1.625rem;
+}
 a {
   text-decoration: none;
   color: #343434;
@@ -448,11 +487,6 @@ a:hover,
 a:active {
   outline: 0;
 }
-.link-arrow {
-  font-weight: 100;
-  text-decoration: underline;
-  font-style: normal;
-}
 figcaption {
   padding-top: 10px;
   font-size: 14px;
@@ -547,282 +581,680 @@ pre {
 .highlight {
   background-color: #efefef;
   font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
-  font-size: 80%;
+  font-size: 12px;
+  font-size: 0.75rem;
+  line-height: 2.1667;
   color: #333332;
   margin-bottom: 1.5em;
+  /* Comment */
+
+  /* Error */
+
+  /* Keyword */
+
+  /* Operator */
+
+  /* Comment.Multiline */
+
+  /* Comment.Preproc */
+
+  /* Comment.Single */
+
+  /* Comment.Special */
+
+  /* Generic.Deleted */
+
+  /* Generic.Emph */
+
+  /* Generic.Error */
+
+  /* Generic.Heading */
+
+  /* Generic.Inserted */
+
+  /* Generic.Output */
+
+  /* Generic.Prompt */
+
+  /* Generic.Strong */
+
+  /* Generic.Subheading */
+
+  /* Generic.Traceback */
+
+  /* Keyword.Constant */
+
+  /* Keyword.Declaration */
+
+  /* Keyword.Namespace */
+
+  /* Keyword.Pseudo */
+
+  /* Keyword.Reserved */
+
+  /* Keyword.Type */
+
+  /* Literal.Number */
+
+  /* Literal.String */
+
+  /* Name.Attribute */
+
+  /* Name.Builtin */
+
+  /* Name.Class */
+
+  /* Name.Constant */
+
+  /* Name.Decorator */
+
+  /* Name.Entity */
+
+  /* Name.Exception */
+
+  /* Name.Function */
+
+  /* Name.Label */
+
+  /* Name.Namespace */
+
+  /* Name.Tag */
+
+  /* Name.Variable */
+
+  /* Operator.Word */
+
+  /* Text.Whitespace */
+
+  /* Literal.Number.Float */
+
+  /* Literal.Number.Hex */
+
+  /* Literal.Number.Integer */
+
+  /* Literal.Number.Oct */
+
+  /* Literal.String.Backtick */
+
+  /* Literal.String.Char */
+
+  /* Literal.String.Doc */
+
+  /* Literal.String.Double */
+
+  /* Literal.String.Escape */
+
+  /* Literal.String.Heredoc */
+
+  /* Literal.String.Interpol */
+
+  /* Literal.String.Other */
+
+  /* Literal.String.Regex */
+
+  /* Literal.String.Single */
+
+  /* Literal.String.Symbol */
+
+  /* Name.Builtin.Pseudo */
+
+  /* Name.Variable.Class */
+
+  /* Name.Variable.Global */
+
+  /* Name.Variable.Instance */
+
+  /* Literal.Number.Integer.Long */
+
 }
 .highlight pre {
-  margin: 0px;
+  position: relative;
+  margin: 0;
   padding: 1em;
 }
-.hll {
+.highlight .lineno {
+  padding-right: 24px;
+  color: #b3b3b1;
+}
+.highlight .hll {
   background-color: #ffffcc;
 }
-.c {
+.highlight .c {
   color: #999988;
   font-style: italic;
 }
-/* Comment */
+.highlight .err {
-.err {
   color: #a61717;
   background-color: #e3d2d2;
 }
-/* Error */
+.highlight .k {
-.k {
   color: #000000;
   font-weight: bold;
 }
-/* Keyword */
+.highlight .o {
-.o {
   color: #000000;
   font-weight: bold;
 }
-/* Operator */
+.highlight .cm {
-.cm {
   color: #999988;
   font-style: italic;
 }
-/* Comment.Multiline */
+.highlight .cp {
-.cp {
   color: #999999;
   font-weight: bold;
   font-style: italic;
 }
-/* Comment.Preproc */
+.highlight .c1 {
-.c1 {
   color: #999988;
   font-style: italic;
 }
-/* Comment.Single */
+.highlight .cs {
-.cs {
   color: #999999;
   font-weight: bold;
   font-style: italic;
 }
-/* Comment.Special */
+.highlight .gd {
-.gd {
   color: #000000;
   background-color: #ffdddd;
 }
-/* Generic.Deleted */
+.highlight .ge {
-.ge {
   color: #000000;
   font-style: italic;
 }
-/* Generic.Emph */
+.highlight .gr {
-.gr {
   color: #aa0000;
 }
-/* Generic.Error */
+.highlight .gh {
-.gh {
   color: #999999;
 }
-/* Generic.Heading */
+.highlight .gi {
-.gi {
   color: #000000;
   background-color: #ddffdd;
 }
-/* Generic.Inserted */
+.highlight .go {
-.go {
   color: #888888;
 }
-/* Generic.Output */
+.highlight .gp {
-.gp {
   color: #555555;
 }
-/* Generic.Prompt */
+.highlight .gs {
-.gs {
   font-weight: bold;
 }
-/* Generic.Strong */
+.highlight .gu {
-.gu {
   color: #aaaaaa;
 }
-/* Generic.Subheading */
+.highlight .gt {
-.gt {
   color: #aa0000;
 }
-/* Generic.Traceback */
+.highlight .kc {
-.kc {
   color: #000000;
   font-weight: bold;
 }
-/* Keyword.Constant */
+.highlight .kd {
-.kd {
   color: #000000;
   font-weight: bold;
 }
-/* Keyword.Declaration */
+.highlight .kn {
-.kn {
   color: #000000;
   font-weight: bold;
 }
-/* Keyword.Namespace */
+.highlight .kp {
-.kp {
   color: #000000;
   font-weight: bold;
 }
-/* Keyword.Pseudo */
+.highlight .kr {
-.kr {
   color: #000000;
   font-weight: bold;
 }
-/* Keyword.Reserved */
+.highlight .kt {
-.kt {
   color: #445588;
   font-weight: bold;
 }
-/* Keyword.Type */
+.highlight .m {
-.m {
   color: #009999;
 }
-/* Literal.Number */
+.highlight .s {
-.s {
   color: #d01040;
 }
-/* Literal.String */
+.highlight .na {
-.na {
   color: #008080;
 }
-/* Name.Attribute */
+.highlight .nb {
-.nb {
   color: #0086b3;
 }
-/* Name.Builtin */
+.highlight .nc {
-.nc {
   color: #445588;
   font-weight: bold;
 }
-/* Name.Class */
+.highlight .no {
-.no {
   color: #008080;
 }
-/* Name.Constant */
+.highlight .nd {
-.nd {
   color: #3c5d5d;
   font-weight: bold;
 }
-/* Name.Decorator */
+.highlight .ni {
-.ni {
   color: #800080;
 }
-/* Name.Entity */
+.highlight .ne {
-.ne {
   color: #990000;
   font-weight: bold;
 }
-/* Name.Exception */
+.highlight .nf {
-.nf {
   color: #990000;
   font-weight: bold;
 }
-/* Name.Function */
+.highlight .nl {
-.nl {
   color: #990000;
   font-weight: bold;
 }
-/* Name.Label */
+.highlight .nn {
-.nn {
   color: #555555;
 }
-/* Name.Namespace */
+.highlight .nt {
-.nt {
   color: #000080;
 }
-/* Name.Tag */
+.highlight .nv {
-.nv {
   color: #008080;
 }
-/* Name.Variable */
+.highlight .ow {
-.ow {
   color: #000000;
   font-weight: bold;
 }
-/* Operator.Word */
+.highlight .w {
-.w {
   color: #bbbbbb;
 }
-/* Text.Whitespace */
+.highlight .mf {
-.mf {
   color: #009999;
 }
-/* Literal.Number.Float */
+.highlight .mh {
-.mh {
   color: #009999;
 }
-/* Literal.Number.Hex */
+.highlight .mi {
-.mi {
   color: #009999;
 }
-/* Literal.Number.Integer */
+.highlight .mo {
-.mo {
   color: #009999;
 }
-/* Literal.Number.Oct */
+.highlight .sb {
-.sb {
   color: #d01040;
 }
-/* Literal.String.Backtick */
+.highlight .sc {
-.sc {
   color: #d01040;
 }
-/* Literal.String.Char */
+.highlight .sd {
-.sd {
   color: #d01040;
 }
-/* Literal.String.Doc */
+.highlight .s2 {
-.s2 {
   color: #d01040;
 }
-/* Literal.String.Double */
+.highlight .se {
-.se {
   color: #d01040;
 }
-/* Literal.String.Escape */
+.highlight .sh {
-.sh {
   color: #d01040;
 }
-/* Literal.String.Heredoc */
+.highlight .si {
-.si {
   color: #d01040;
 }
-/* Literal.String.Interpol */
+.highlight .sx {
-.sx {
   color: #d01040;
 }
-/* Literal.String.Other */
+.highlight .sr {
-.sr {
   color: #009926;
 }
-/* Literal.String.Regex */
+.highlight .s1 {
-.s1 {
   color: #d01040;
 }
-/* Literal.String.Single */
+.highlight .ss {
-.ss {
   color: #990073;
 }
-/* Literal.String.Symbol */
+.highlight .bp {
-.bp {
   color: #999999;
 }
-/* Name.Builtin.Pseudo */
+.highlight .vc {
-.vc {
   color: #008080;
 }
-/* Name.Variable.Class */
+.highlight .vg {
-.vg {
   color: #008080;
 }
-/* Name.Variable.Global */
+.highlight .vi {
-.vi {
   color: #008080;
 }
-/* Name.Variable.Instance */
+.highlight .il {
-.il {
   color: #009999;
 }
-/* Literal.Number.Integer.Long */.clearfix {
+.CodeRay {
+  background-color: #efefef;
+  font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
+  font-size: 12px;
+  font-size: 0.75rem;
+  line-height: 2.1667;
+  color: #333332;
+  margin-bottom: 1.5em;
+}
+.CodeRay pre {
+  margin: 0px;
+  padding: 1em;
+}
+span.CodeRay {
+  white-space: pre;
+  border: 0px;
+  padding: 2px;
+}
+table.CodeRay {
+  border-collapse: collapse;
+  width: 100%;
+  padding: 2px;
+}
+table.CodeRay td {
+  padding: 1em 0.5em;
+  vertical-align: top;
+}
+.CodeRay .line-numbers,
+.CodeRay .no {
+  background-color: #ECECEC;
+  color: #AAA;
+  text-align: right;
+}
+.CodeRay .line-numbers a {
+  color: #AAA;
+}
+.CodeRay .line-numbers tt {
+  font-weight: bold;
+}
+.CodeRay .line-numbers .highlighted {
+  color: #ff0000;
+}
+.CodeRay .line {
+  display: block;
+  float: left;
+  width: 100%;
+}
+.CodeRay span.line-numbers {
+  padding: 0 24px 0 4px;
+}
+.CodeRay .code {
+  width: 100%;
+}
+ol.CodeRay {
+  font-size: 10pt;
+}
+ol.CodeRay li {
+  white-space: pre;
+}
+.CodeRay .code pre {
+  overflow: auto;
+}
+.CodeRay .debug {
+  color: white ! important;
+  background: blue ! important;
+}
+.CodeRay .annotation {
+  color: #000077;
+}
+.CodeRay .attribute-name {
+  color: #ff0088;
+}
+.CodeRay .attribute-value {
+  color: #770000;
+}
+.CodeRay .binary {
+  color: #509;
+  font-weight: bold;
+}
+.CodeRay .comment {
+  color: #998;
+  font-style: italic;
+}
+.CodeRay .char {
+  color: #0044dd;
+}
+.CodeRay .char .content {
+  color: #0044dd;
+}
+.CodeRay .char .delimiter {
+  color: #003399;
+}
+.CodeRay .class {
+  color: #458;
+  font-weight: bold;
+}
+.CodeRay .complex {
+  color: #A08;
+  font-weight: bold;
+}
+.CodeRay .constant {
+  color: teal;
+}
+.CodeRay .color {
+  color: #00aa00;
+}
+.CodeRay .class-variable {
+  color: #336699;
+}
+.CodeRay .decorator {
+  color: #B0B;
+}
+.CodeRay .definition {
+  color: #099;
+  font-weight: bold;
+}
+.CodeRay .directive {
+  color: #088;
+  font-weight: bold;
+}
+.CodeRay .delimiter {
+  color: #000000;
+}
+.CodeRay .doc {
+  color: #997700;
+}
+.CodeRay .doctype {
+  color: #3344bb;
+}
+.CodeRay .doc-string {
+  color: #D42;
+  font-weight: bold;
+}
+.CodeRay .escape {
+  color: #666;
+  font-weight: bold;
+}
+.CodeRay .entity {
+  color: #800;
+  font-weight: bold;
+}
+.CodeRay .error {
+  color: #F00;
+  background-color: #ffaaaa;
+}
+.CodeRay .exception {
+  color: #C00;
+  font-weight: bold;
+}
+.CodeRay .filename {
+  color: #099;
+}
+.CodeRay .function {
+  color: #900;
+  font-weight: bold;
+}
+.CodeRay .global-variable {
+  color: teal;
+  font-weight: bold;
+}
+.CodeRay .hex {
+  color: #058;
+  font-weight: bold;
+}
+.CodeRay .integer {
+  color: #099;
+}
+.CodeRay .include {
+  color: #B44;
+  font-weight: bold;
+}
+.CodeRay .inline {
+  color: #000000;
+}
+.CodeRay .inline .inline {
+  background: #cccccc;
+}
+.CodeRay .inline .inline .inline {
+  background: #bbbbbb;
+}
+.CodeRay .inline .inline-delimiter {
+  color: #D14;
+}
+.CodeRay .inline-delimiter {
+  color: #D14;
+}
+.CodeRay .important {
+  color: #f00;
+}
+.CodeRay .interpreted {
+  color: #B2B;
+  font-weight: bold;
+}
+.CodeRay .instance-variable {
+  color: #008080;
+}
+.CodeRay .label {
+  color: #970;
+  font-weight: bold;
+}
+.CodeRay .local-variable {
+  color: #996633;
+}
+.CodeRay .octal {
+  color: #40E;
+  font-weight: bold;
+}
+.CodeRay .predefined-constant {
+  font-weight: bold;
+}
+.CodeRay .predefined {
+  color: #369;
+  font-weight: bold;
+}
+.CodeRay .preprocessor {
+  color: #579;
+}
+.CodeRay .pseudo-class {
+  color: #00C;
+  font-weight: bold;
+}
+.CodeRay .predefined-type {
+  color: #074;
+  font-weight: bold;
+}
+.CodeRay .reserved,
+.keyword {
+  color: #000;
+  font-weight: bold;
+}
+.CodeRay .key {
+  color: #808;
+}
+.CodeRay .key .delimiter {
+  color: #606;
+}
+.CodeRay .key .char {
+  color: #80f;
+}
+.CodeRay .value {
+  color: #088;
+}
+.CodeRay .regexp {
+  background-color: #fff0ff;
+}
+.CodeRay .regexp .content {
+  color: #880088;
+}
+.CodeRay .regexp .delimiter {
+  color: #440044;
+}
+.CodeRay .regexp .modifier {
+  color: #cc22cc;
+}
+.CodeRay .regexp .function {
+  color: #404;
+  font-weight: bold;
+}
+.CodeRay .string {
+  color: #D20;
+}
+.CodeRay .string .string .string {
+  background-color: #ffd0d0;
+}
+.CodeRay .string .content {
+  color: #D14;
+}
+.CodeRay .string .char {
+  color: #D14;
+}
+.CodeRay .string .delimiter {
+  color: #D14;
+}
+.CodeRay .shell {
+  color: #dd1144;
+}
+.CodeRay .shell .delimiter {
+  color: #dd1144;
+}
+.CodeRay .symbol {
+  color: #990073;
+}
+.CodeRay .symbol .content {
+  color: #aa6600;
+}
+.CodeRay .symbol .delimiter {
+  color: #663300;
+}
+.CodeRay .tag {
+  color: #007700;
+}
+.CodeRay .tag-special {
+  color: #D70;
+  font-weight: bold;
+}
+.CodeRay .type {
+  color: #339;
+  font-weight: bold;
+}
+.CodeRay .variable {
+  color: #003366;
+}
+.CodeRay .insert {
+  background: #afa;
+}
+.CodeRay .delete {
+  background: #faa;
+}
+.CodeRay .change {
+  color: #aaf;
+  background: #007;
+}
+.CodeRay .head {
+  color: #f8f;
+  background: #550055;
+}
+.CodeRay .insert .insert {
+  color: #080;
+  font-weight: bold;
+}
+.CodeRay .delete .delete {
+  color: #800;
+  font-weight: bold;
+}
+.CodeRay .change .change {
+  color: #66f;
+}
+.CodeRay .head .head {
+  color: #f4f;
+}
+.clearfix {
   *zoom: 1;
 }
 .clearfix:before,
@@ -1782,6 +2214,58 @@ body {
 .browser-upgrade a:hover {
   border-bottom: 1px solid #ffffff;
 }
+#goog-fixurl ul {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+#goog-fixurl ul li {
+  list-style-type: none;
+}
+#goog-wm-qt {
+  width: auto;
+  margin-right: 10px;
+  margin-bottom: 20px;
+  padding: 8px 20px;
+  display: inline-block;
+  font-size: 14px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  color: #111111;
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: #919191;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+#goog-wm-sb {
+  display: inline-block;
+  margin-bottom: 20px;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-size: 0.875rem;
+  background-color: #111111;
+  color: #ffffff;
+  border: 2px solid #111111 !important;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+}
+#goog-wm-sb:visited {
+  color: #ffffff;
+}
+#goog-wm-sb:hover {
+  background-color: #ffffff;
+  color: #111111;
+}
+#goog-wm-sb:active {
+  -webkit-transform: translate(0, 2px);
+  -moz-transform: translate(0, 2px);
+  -ms-transform: translate(0, 2px);
+  -o-transform: translate(0, 2px);
+  transform: translate(0, 2px);
+}
 /* jQuery Magnific-Popup =================================== */
 /* Magnific Popup CSS */
 .mfp-bg {

assets/less/coderay.less

@@ -1,14 +1,13 @@
 .CodeRay {
   background-color: #efefef;
   font-family: @code-font;
-  font-size: 80%;
+  .font(12);
   color: #333332;
   margin-bottom: 1.5em;
-}
+  pre {
-
-.CodeRay pre {
     margin: 0px;
     padding: 1em;
+  }
 }
 
 div.CodeRay { }

assets/less/main.less

@@ -14,6 +14,8 @@
 @import "typography.less";
 /* Pygments Syntax highlighting ============================= */
 @import "pygments.less";
+// Coderay Syntax highlighting ===============================
+@import "coderay.less";
 // MIXINS =====================================================
 @import "mixins.less";
 @import "grid.less";

assets/less/normalize.less

@@ -171,7 +171,7 @@ samp {
  */
 
 pre {
-    white-space: pre-wrap;
+    white-space: pre;
 }
 
 /**

assets/less/page.less

@@ -317,6 +317,9 @@ body {
 		}
 	}
 }
+
+// Browser Upgrade
+// --------------------------------------------------
 .browser-upgrade {
 	background: #000;
 	text-align: center;
@@ -333,3 +336,33 @@ body {
 		}
 	}
 }
+
+// Google Search
+// --------------------------------------------------
+#goog-fixurl {
+	ul {
+		list-style: none;
+		margin-left: 0;
+		padding-left: 0;
+		li {
+			list-style-type: none;
+		}
+	}
+}
+#goog-wm-qt {
+	width: auto;
+	margin-right: 10px;
+	margin-bottom: 20px;
+	padding: 8px 20px;
+	display: inline-block;
+	.font-rem(14);
+	background-color: @white;
+	color: @black;
+	border-width: 2px !important;
+	border-style: solid !important;
+	border-color: lighten(@black,50);
+	.rounded(3px);
+}
+#goog-wm-sb {
+	.btn();
+}

assets/less/pygments.less

@@ -1,74 +1,74 @@
 .highlight {
 	background-color: #efefef;
 	font-family: @code-font;
-  font-size: 80%;
+	.font(12);
 	color: #333332;
 	margin-bottom: 1.5em;
-}
+	pre {
-
+		position: relative;
-.highlight pre {
+		margin: 0;
-  margin: 0px;
 		padding: 1em;
+	}
+	.lineno { padding-right: 24px; color: lighten(#333332,50);}
+	.hll { background-color: #ffffcc }
+	.c { color: #999988; font-style: italic } /* Comment */
+	.err { color: #a61717; background-color: #e3d2d2 } /* Error */
+	.k { color: #000000; font-weight: bold } /* Keyword */
+	.o { color: #000000; font-weight: bold } /* Operator */
+	.cm { color: #999988; font-style: italic } /* Comment.Multiline */
+	.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+	.c1 { color: #999988; font-style: italic } /* Comment.Single */
+	.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+	.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+	.ge { color: #000000; font-style: italic } /* Generic.Emph */
+	.gr { color: #aa0000 } /* Generic.Error */
+	.gh { color: #999999 } /* Generic.Heading */
+	.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+	.go { color: #888888 } /* Generic.Output */
+	.gp { color: #555555 } /* Generic.Prompt */
+	.gs { font-weight: bold } /* Generic.Strong */
+	.gu { color: #aaaaaa } /* Generic.Subheading */
+	.gt { color: #aa0000 } /* Generic.Traceback */
+	.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+	.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+	.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+	.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+	.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+	.kt { color: #445588; font-weight: bold } /* Keyword.Type */
+	.m { color: #009999 } /* Literal.Number */
+	.s { color: #d01040 } /* Literal.String */
+	.na { color: #008080 } /* Name.Attribute */
+	.nb { color: #0086B3 } /* Name.Builtin */
+	.nc { color: #445588; font-weight: bold } /* Name.Class */
+	.no { color: #008080 } /* Name.Constant */
+	.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+	.ni { color: #800080 } /* Name.Entity */
+	.ne { color: #990000; font-weight: bold } /* Name.Exception */
+	.nf { color: #990000; font-weight: bold } /* Name.Function */
+	.nl { color: #990000; font-weight: bold } /* Name.Label */
+	.nn { color: #555555 } /* Name.Namespace */
+	.nt { color: #000080 } /* Name.Tag */
+	.nv { color: #008080 } /* Name.Variable */
+	.ow { color: #000000; font-weight: bold } /* Operator.Word */
+	.w { color: #bbbbbb } /* Text.Whitespace */
+	.mf { color: #009999 } /* Literal.Number.Float */
+	.mh { color: #009999 } /* Literal.Number.Hex */
+	.mi { color: #009999 } /* Literal.Number.Integer */
+	.mo { color: #009999 } /* Literal.Number.Oct */
+	.sb { color: #d01040 } /* Literal.String.Backtick */
+	.sc { color: #d01040 } /* Literal.String.Char */
+	.sd { color: #d01040 } /* Literal.String.Doc */
+	.s2 { color: #d01040 } /* Literal.String.Double */
+	.se { color: #d01040 } /* Literal.String.Escape */
+	.sh { color: #d01040 } /* Literal.String.Heredoc */
+	.si { color: #d01040 } /* Literal.String.Interpol */
+	.sx { color: #d01040 } /* Literal.String.Other */
+	.sr { color: #009926 } /* Literal.String.Regex */
+	.s1 { color: #d01040 } /* Literal.String.Single */
+	.ss { color: #990073 } /* Literal.String.Symbol */
+	.bp { color: #999999 } /* Name.Builtin.Pseudo */
+	.vc { color: #008080 } /* Name.Variable.Class */
+	.vg { color: #008080 } /* Name.Variable.Global */
+	.vi { color: #008080 } /* Name.Variable.Instance */
+	.il { color: #009999 } /* Literal.Number.Integer.Long */
 }
-
-.hll { background-color: #ffffcc }
-.c { color: #999988; font-style: italic } /* Comment */
-.err { color: #a61717; background-color: #e3d2d2 } /* Error */
-.k { color: #000000; font-weight: bold } /* Keyword */
-.o { color: #000000; font-weight: bold } /* Operator */
-.cm { color: #999988; font-style: italic } /* Comment.Multiline */
-.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
-.c1 { color: #999988; font-style: italic } /* Comment.Single */
-.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-.ge { color: #000000; font-style: italic } /* Generic.Emph */
-.gr { color: #aa0000 } /* Generic.Error */
-.gh { color: #999999 } /* Generic.Heading */
-.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-.go { color: #888888 } /* Generic.Output */
-.gp { color: #555555 } /* Generic.Prompt */
-.gs { font-weight: bold } /* Generic.Strong */
-.gu { color: #aaaaaa } /* Generic.Subheading */
-.gt { color: #aa0000 } /* Generic.Traceback */
-.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
-.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
-.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
-.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
-.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
-.kt { color: #445588; font-weight: bold } /* Keyword.Type */
-.m { color: #009999 } /* Literal.Number */
-.s { color: #d01040 } /* Literal.String */
-.na { color: #008080 } /* Name.Attribute */
-.nb { color: #0086B3 } /* Name.Builtin */
-.nc { color: #445588; font-weight: bold } /* Name.Class */
-.no { color: #008080 } /* Name.Constant */
-.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
-.ni { color: #800080 } /* Name.Entity */
-.ne { color: #990000; font-weight: bold } /* Name.Exception */
-.nf { color: #990000; font-weight: bold } /* Name.Function */
-.nl { color: #990000; font-weight: bold } /* Name.Label */
-.nn { color: #555555 } /* Name.Namespace */
-.nt { color: #000080 } /* Name.Tag */
-.nv { color: #008080 } /* Name.Variable */
-.ow { color: #000000; font-weight: bold } /* Operator.Word */
-.w { color: #bbbbbb } /* Text.Whitespace */
-.mf { color: #009999 } /* Literal.Number.Float */
-.mh { color: #009999 } /* Literal.Number.Hex */
-.mi { color: #009999 } /* Literal.Number.Integer */
-.mo { color: #009999 } /* Literal.Number.Oct */
-.sb { color: #d01040 } /* Literal.String.Backtick */
-.sc { color: #d01040 } /* Literal.String.Char */
-.sd { color: #d01040 } /* Literal.String.Doc */
-.s2 { color: #d01040 } /* Literal.String.Double */
-.se { color: #d01040 } /* Literal.String.Escape */
-.sh { color: #d01040 } /* Literal.String.Heredoc */
-.si { color: #d01040 } /* Literal.String.Interpol */
-.sx { color: #d01040 } /* Literal.String.Other */
-.sr { color: #009926 } /* Literal.String.Regex */
-.s1 { color: #d01040 } /* Literal.String.Single */
-.ss { color: #990073 } /* Literal.String.Symbol */
-.bp { color: #999999 } /* Name.Builtin.Pseudo */
-.vc { color: #008080 } /* Name.Variable.Class */
-.vg { color: #008080 } /* Name.Variable.Global */
-.vi { color: #008080 } /* Name.Variable.Instance */
-.il { color: #009999 } /* Literal.Number.Integer.Long */

assets/less/typography.less

@@ -11,7 +11,22 @@ h1, h2, h3, h4, h5, h6 {
 	font-family: @heading-font;
 }
 h1 {
-	.font-size(32);
+	.font-size(32)
+}
+h2 {
+	.font-size(28)
+}
+h3 {
+	.font-size(24)
+}
+h4 {
+	.font-size(18)
+}
+h5 {
+	.font-size(16)
+}
+h6 {
+	.font-size(14);
 }
 
 // Links
@@ -35,12 +50,6 @@ a {
 	}
 }
 
-.link-arrow {
-	font-weight: 100;
-	text-decoration: underline;
-	font-style: normal;
-}
-
 // Figures
 // --------------------------------------------------
 figcaption {