~xdavidwu/xdavidwu.link

c0e5ec5b852c7e6d8956e2068e4f660d91b78f36 — Michael Rose 10 years ago 66dd137
Improve style of highlighted syntax
M _posts/2011-03-10-sample-post.md => _posts/2011-03-10-sample-post.md +1 -7
@@ 95,10 95,4 @@ 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>
<div markdown="0"><a href="#" class="btn">This is a button</a></div>
\ No newline at end of file

A _posts/2013-08-16-code-highlighting-post.md => _posts/2013-08-16-code-highlighting-post.md +114 -0
@@ 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
~~~
\ No newline at end of file

M assets/css/ie.css => assets/css/ie.css +92 -6
@@ 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 {

M assets/css/main.css => assets/css/main.css +613 -129
@@ 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 */
.err {
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
/* Error */
.k {
.highlight .k {
  color: #000000;
  font-weight: bold;
}
/* Keyword */
.o {
.highlight .o {
  color: #000000;
  font-weight: bold;
}
/* Operator */
.cm {
.highlight .cm {
  color: #999988;
  font-style: italic;
}
/* Comment.Multiline */
.cp {
.highlight .cp {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
/* Comment.Preproc */
.c1 {
.highlight .c1 {
  color: #999988;
  font-style: italic;
}
/* Comment.Single */
.cs {
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
/* Comment.Special */
.gd {
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}
/* Generic.Deleted */
.ge {
.highlight .ge {
  color: #000000;
  font-style: italic;
}
/* Generic.Emph */
.gr {
.highlight .gr {
  color: #aa0000;
}
/* Generic.Error */
.gh {
.highlight .gh {
  color: #999999;
}
/* Generic.Heading */
.gi {
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}
/* Generic.Inserted */
.go {
.highlight .go {
  color: #888888;
}
/* Generic.Output */
.gp {
.highlight .gp {
  color: #555555;
}
/* Generic.Prompt */
.gs {
.highlight .gs {
  font-weight: bold;
}
/* Generic.Strong */
.gu {
.highlight .gu {
  color: #aaaaaa;
}
/* Generic.Subheading */
.gt {
.highlight .gt {
  color: #aa0000;
}
/* Generic.Traceback */
.kc {
.highlight .kc {
  color: #000000;
  font-weight: bold;
}
/* Keyword.Constant */
.kd {
.highlight .kd {
  color: #000000;
  font-weight: bold;
}
/* Keyword.Declaration */
.kn {
.highlight .kn {
  color: #000000;
  font-weight: bold;
}
/* Keyword.Namespace */
.kp {
.highlight .kp {
  color: #000000;
  font-weight: bold;
}
/* Keyword.Pseudo */
.kr {
.highlight .kr {
  color: #000000;
  font-weight: bold;
}
/* Keyword.Reserved */
.kt {
.highlight .kt {
  color: #445588;
  font-weight: bold;
}
/* Keyword.Type */
.m {
.highlight .m {
  color: #009999;
}
/* Literal.Number */
.s {
.highlight .s {
  color: #d01040;
}
/* Literal.String */
.na {
.highlight .na {
  color: #008080;
}
/* Name.Attribute */
.nb {
.highlight .nb {
  color: #0086b3;
}
/* Name.Builtin */
.nc {
.highlight .nc {
  color: #445588;
  font-weight: bold;
}
/* Name.Class */
.no {
.highlight .no {
  color: #008080;
}
/* Name.Constant */
.nd {
.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}
/* Name.Decorator */
.ni {
.highlight .ni {
  color: #800080;
}
/* Name.Entity */
.ne {
.highlight .ne {
  color: #990000;
  font-weight: bold;
}
/* Name.Exception */
.nf {
.highlight .nf {
  color: #990000;
  font-weight: bold;
}
/* Name.Function */
.nl {
.highlight .nl {
  color: #990000;
  font-weight: bold;
}
/* Name.Label */
.nn {
.highlight .nn {
  color: #555555;
}
/* Name.Namespace */
.nt {
.highlight .nt {
  color: #000080;
}
/* Name.Tag */
.nv {
.highlight .nv {
  color: #008080;
}
/* Name.Variable */
.ow {
.highlight .ow {
  color: #000000;
  font-weight: bold;
}
/* Operator.Word */
.w {
.highlight .w {
  color: #bbbbbb;
}
/* Text.Whitespace */
.mf {
.highlight .mf {
  color: #009999;
}
/* Literal.Number.Float */
.mh {
.highlight .mh {
  color: #009999;
}
/* Literal.Number.Hex */
.mi {
.highlight .mi {
  color: #009999;
}
/* Literal.Number.Integer */
.mo {
.highlight .mo {
  color: #009999;
}
/* Literal.Number.Oct */
.sb {
.highlight .sb {
  color: #d01040;
}
/* Literal.String.Backtick */
.sc {
.highlight .sc {
  color: #d01040;
}
/* Literal.String.Char */
.sd {
.highlight .sd {
  color: #d01040;
}
/* Literal.String.Doc */
.s2 {
.highlight .s2 {
  color: #d01040;
}
/* Literal.String.Double */
.se {
.highlight .se {
  color: #d01040;
}
/* Literal.String.Escape */
.sh {
.highlight .sh {
  color: #d01040;
}
/* Literal.String.Heredoc */
.si {
.highlight .si {
  color: #d01040;
}
/* Literal.String.Interpol */
.sx {
.highlight .sx {
  color: #d01040;
}
/* Literal.String.Other */
.sr {
.highlight .sr {
  color: #009926;
}
/* Literal.String.Regex */
.s1 {
.highlight .s1 {
  color: #d01040;
}
/* Literal.String.Single */
.ss {
.highlight .ss {
  color: #990073;
}
/* Literal.String.Symbol */
.bp {
.highlight .bp {
  color: #999999;
}
/* Name.Builtin.Pseudo */
.vc {
.highlight .vc {
  color: #008080;
}
/* Name.Variable.Class */
.vg {
.highlight .vg {
  color: #008080;
}
/* Name.Variable.Global */
.vi {
.highlight .vi {
  color: #008080;
}
/* Name.Variable.Instance */
.il {
.highlight .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 {

M assets/less/coderay.less => assets/less/coderay.less +5 -6
@@ 1,14 1,13 @@
.CodeRay {
  background-color: #efefef;
  font-family: @code-font;
  font-size: 80%;
  .font(12);
  color: #333332;
  margin-bottom: 1.5em;
}

.CodeRay pre {
  margin: 0px;
  padding: 1em;
  pre {
    margin: 0px;
    padding: 1em;
  }
}

div.CodeRay { }

M assets/less/main.less => assets/less/main.less +2 -0
@@ 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";

M assets/less/normalize.less => assets/less/normalize.less +1 -1
@@ 171,7 171,7 @@ samp {
 */

pre {
    white-space: pre-wrap;
    white-space: pre;
}

/**

M assets/less/page.less => assets/less/page.less +33 -0
@@ 317,6 317,9 @@ body {
		}
	}
}

// Browser Upgrade
// --------------------------------------------------
.browser-upgrade {
	background: #000;
	text-align: center;


@@ 332,4 335,34 @@ body {
			border-bottom: 1px solid @white;
		}
	}
}

// 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();
}
\ No newline at end of file

M assets/less/pygments.less => assets/less/pygments.less +73 -73
@@ 1,74 1,74 @@
.highlight {
  background-color: #efefef;
  font-family: @code-font;
  font-size: 80%;
  color: #333332;
  margin-bottom: 1.5em;
}

.highlight pre {
  margin: 0px;
  padding: 1em;
}

.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 */
\ No newline at end of file
	background-color: #efefef;
	font-family: @code-font;
	.font(12);
	color: #333332;
	margin-bottom: 1.5em;
	pre {
		position: relative;
		margin: 0;
		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 */
}
\ No newline at end of file

M assets/less/typography.less => assets/less/typography.less +16 -7
@@ 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 {