baseline for dfx-mdl

Signed-off-by: Tony Tkacik <tonydamage@gmail.com>

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "3rd-party/quantum-colors"]
+	path = 3rd-party/quantum-colors
+	url = git@github.com:nkpfstr/quantum-colors.git

3rd-party/quantum-colors

@@ -0,0 +1 @@
+Subproject commit 30e54b1e5db47b0ac496b0f93c485ffb1ab83148

_config.yml

@@ -1,5 +1,5 @@
 # Site settings
-title: Your awesome title
+title: fašnmejkr
 email: your-email@domain.com
 description: > # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this
@@ -7,6 +7,8 @@ description: > # this means to ignore newlines until "baseurl:"
   Google search results) and in your feed.xml site description.
 baseurl: "" # the subpath of your site, e.g. /blog/
 url: "http://yourdomain.com" # the base hostname & protocol for your site
+
+# FIXME: Should be better structured
 twitter_username: jekyllrb
 github_username:  jekyll
 google_play: 'GDGX'
@@ -15,23 +17,32 @@ google_plus_per: '+GDGManagua'  #Personal link
 facebook_app_id: 12345
 
 # Layout settings
+# FIXME: Should be renamed
 header_type: default  # values [ drawer, default ]
 post_type: highlight    # values [ highlight, default ]
 pagination_type: default  # values [ ops, default ]
 
-more_vert:
+disqus: false
-  option1:
-    name: Cool Option 1
-    link: www.myawesomelink.com
-  option2:
-    name: Cool Option 2
-    link: www.myawesomelink.com
-  option3:
-    name: Cool Option 3
-    link: www.myawesomelink.com
-
-disqus: true
 disqus_shortname: 'gdgmanagua'
 
 # Build settings
 markdown: kramdown
+
+material:
+  primary: purple
+  secondary: pink
+
+
+# Enable for Asciidoc
+# gems:
+#  - jekyll-asciidoc
+#
+#
+#asciidoc: {}
+#asciidoctor:
+#  base_dir: :docdir
+#  safe: unsafe
+#  attributes:
+#    - idseparator=_
+#    - source-highlighter=coderay
+#    - icons=font

_includes/cards.html

@@ -0,0 +1,31 @@
+<div class="mdl-grid">
+
+{% for post in cards %}
+  <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone">
+
+    <div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
+      <h2 class="mdl-card__title-text"><a href="{{ post.url | prepend: site.baseurl }}" >{{ post.title }}</a></h2>
+    </div>
+    <div class="mdl-card__supporting-text">
+      <span>{{ post.date | date: "%b %-d, %Y" }}</span>
+      <p>{{ post.excerpt }}</p>
+    </div>
+    <div class="mdl-card__actions mdl-card--border">
+      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">
+        Read More
+      </a>
+    </div>
+    <div class="mdl-card__menu">
+      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="post-{{ post.id }}">
+        <i class="material-icons">share</i>
+      </button>
+      <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="post-{{ post.id }}">
+        <li><a href="https://www.facebook.com/dialog/share?app_id={{site.facebook_app_id}}&display=page&href={{ post.url | prepend: site.baseurl }}&redirect_uri={{ site.baseurl }}" class="mdl-menu__item">Facebook</a></li>
+        <li><a href="https://twitter.com/share?url={{ post.url | prepend: site.baseurl }}&text={{ post.title }}&via={{ site.twitter_username }}" class="mdl-menu__item">Twitter</a></li>
+        <li><a href="https://plus.google.com/share?url={{ post.url | prepend: site.baseurl }}" class="mdl-menu__item">Google+</a></li>
+      </ul>
+    </div>
+  </div>
+
+  {% endfor %}
+</div>

_includes/footer.html

@@ -80,7 +80,7 @@
           </a>
         </li>
       {% endif %}
-	  
+
       </ul>
     </div>
 
@@ -99,7 +99,7 @@
     <div class="mdl-logo">{{ site.title }}</div>
     <ul class="mdl-mega-footer--link-list">
       <li><a href="#">Help</a></li>
-      <li><a href="#">Privacy & Terms</a></li>
+      <li><a href="#">Privacy &amp; Terms</a></li>
     </ul>
   </div>
 

_includes/head.html

@@ -10,11 +10,16 @@
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
 
   <!-- Material Design Lite css Library -->
-  <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
+  <!--
-  
+  <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/code.getmdl.io/1.2.1/material.{{ site.material.primary }}-{{ site.material.secondary }}.min.css">
+  -->
   <!-- Material Design Fonts -->
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
   <!-- Custom theme css -->
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ "/css/coderay_github.css" | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ "/css/quickie.css" | prepend: site.baseurl }}">
+
+
 </head>

_includes/header.html

@@ -1,3 +1,4 @@
+
   <header class="mdl-layout__header">
 
     <div class="mdl-layout__header-row">
@@ -5,7 +6,7 @@
       <span class="mdl-layout-title">{{ site.title }}</span>
       <!-- Add spacer, to align navigation to the right -->
       <div class="mdl-layout-spacer"></div>
-      
+
 
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable is-upgraded">
         <label class="mdl-button mdl-js-button mdl-button--icon" for="js-search__input">
@@ -28,16 +29,8 @@
       </ul>
     </div>
   </header>
-
   <div class="mdl-layout__drawer">
     <span class="mdl-layout-title">Menu</span>
-    <nav class="mdl-navigation">
+    {% include navigation.html %}
-    {% for page in site.pages %}
-      {% if page.title %}
-      <a class="mdl-navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
-      {% endif %}
-    {% endfor %}
-    </nav>
 
   </div>
-

_includes/header_fixed.html

@@ -1,6 +1,6 @@
 <header class="mdl-layout__header">
   <div class="mdl-layout__header-row">
-    
+
     <div class="mdl-layout-spacer"></div>
 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
@@ -9,7 +9,7 @@
              for="js-search__input">
         <i class="material-icons">search</i>
       </label>
-      
+
       <div class="mdl-textfield__expandable-holder">
         <input class="mdl-textfield__input" type="text" name="sample"
                id="js-search__input" />
@@ -30,11 +30,5 @@
 </header>
 <div class="mdl-layout__drawer">
   <span class="mdl-layout-title"><a href="{{ site.url }}">{{ site.title }}</a></span>
-  <nav class="mdl-navigation">
+  {% include navigation.html %}
-    {% for page in site.pages %}
-      {% if page.title %}
-    <a class="mdl-navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
-      {% endif %}
-    {% endfor %}
-  </nav>
 </div>

_includes/navigation.html

@@ -0,0 +1,14 @@
+<nav class="mdl-navigation">
+  {% for page in site.pages %}
+    {% if page.title %}
+  <a class="mdl-navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+    {% endif %}
+  {% endfor %}
+
+  {% for page in site.patterns %}
+    {% if page.title %}
+  <a class="mdl-navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+    {% endif %}
+  {% endfor %}
+
+</nav>

_layouts/default.html

@@ -11,22 +11,26 @@
       {% include search_result.html %}
       {% include header_fixed.html %}
     {% else %}
-    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" >
-      {% include search_result.html %}
       {% include header.html %}
     {% endif %}
 
-    {{ content }}
+      <div class="mdl-layout__content">
-    {% include footer.html %}
+      {{ content }}
 
+      {% include footer.html %}
+      </div>
     </div>
     <!-- /End Layout -->
 
-    <!-- Material Design Lite js Library -->
-    <script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
     {% if site.pagination_type == 'ops' %}
     <script rel="javascript" type="text/javascript" src="{{ "/js/site.js" | prepend: site.baseurl }}"></script>
     {% endif %}
+
+
+    <!-- Material Design Lite js Library -->
+    <script rel="javascript" type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.2.1/material.js"></script>
+
     <script rel="javascript" type="text/javascript" src="{{ "/js/search.js" | prepend: site.baseurl }}"></script>
     <script rel="javascript" type="text/javascript">
       superSearch({

_layouts/page.html

@@ -2,15 +2,20 @@
 layout: default
 ---
 <div class="post-ribbon"></div>
-<main class="post-main mdl-layout__content">
+<main class="post-main">
   <div class="post-container mdl-grid">
     <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
-    <div class="post-section mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
+
-      <div class="mdl-color-text--grey-500">
+    <div class="post mdl-card mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800  mdl-cell mdl-cell--12-col">
+      <div class="mdl-card__media">
+        <div class="mdl-card__title">
+          <h3 class="mdl-card__title-text">{{ page.title }}</h3>
+        </div>
+      </div>
+      <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
       {{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}
       </div>
-      <h3>{{ page.title }}</h3>
+      <article class="mdl-card__supporting-text">
-      <article class="post-content">
         <p>{{ content }}</p>
       </article>
       {% if site.disqus %}

_layouts/post.html

@@ -2,22 +2,26 @@
 layout: default
 ---
 <div class="post-ribbon"></div>
-<main class="post-main mdl-layout__content">
+<main class="post-main">
   <div class="post-container mdl-grid">
     <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
-    <div class="post-section mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
+
-      <div class="mdl-color-text--grey-500">
+    <div class="post mdl-card mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800  mdl-cell mdl-cell--12-col">
-      {{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}{% if page.categories %} • {% for cat in page.categories %} {{ cat }} {% endfor %} {% endif %}
+      <div class="mdl-card__media">
+        <div class="mdl-card__title">
+          <h3 class="mdl-card__title-text">{{ page.title }}</h3>
+        </div>
       </div>
-      <h3>{{ page.title }}</h3>
+      <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
-      <article class="post-content">
+        {{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}{% if page.categories %} • {% for cat in page.categories %} {{ cat }} {% endfor %} {% endif %}
+      </div>
+      <article class="mdl-card__supporting-text">
         <p>{{ content }}</p>
       </article>
-      <!-- Disqus comments -->
       {% if site.disqus %}
       <div>
         <h3>Comments</h3>
-        {% include disqus.html %}
+          {% include disqus.html %}
       </div>
       {% endif %}
     </div>

_sass/_asciidoc.scss

@@ -0,0 +1,240 @@
+.title {
+    font-weight: bold;
+    color: $primary-color;
+}
+
+.listingblock,
+.literalblock {
+    @extend .admonition;
+
+    pre {
+        background: $grey-color-light;
+    }
+
+    pre.nowrap,
+    pre[class].nowrap {
+        overflow-x: auto;
+        white-space: pre;
+        word-wrap: normal;
+    }
+}
+
+.exampleblock {
+    @extend .admonition;
+    background: $yellow-100;
+
+    .title {
+        color: $primary-color;
+    }
+}
+
+.imageblock {
+    @extend .admonition;
+    padding: 0;
+
+    img {
+        width: 100%;
+    }
+
+    .title {
+        padding: 16px;
+    }
+}
+
+.admonitionblock {
+    @extend .admonition;
+    padding: 16px 16px 16px 0;
+    td.icon {
+        width: 55px;
+        padding: 0;
+        text-align: center;
+
+        .fa {
+            font-family: 'Material Icons';
+            font-weight: normal;
+            font-style: normal;
+            font-size: 36px;
+            line-height: 1;
+            letter-spacing: normal;
+            text-transform: none;
+            display: inline-block;
+            white-space: nowrap;
+            word-wrap: normal;
+            direction: ltr;
+            -webkit-font-feature-settings: 'liga';
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .icon-note:after {
+            content: "info";
+        }
+
+        .icon-important:after {
+            content: "announcement";
+        }
+
+        .icon-caution:after {
+            content: "warning";
+        }
+
+        .icon-warning:after {
+            content: "warning";
+        }
+
+        .icon-tip:after {
+            content: "lightbulb_outline";
+        }
+    }
+
+    &.note {
+        background: $blue-200;
+    }
+
+    &.tip {
+        background: $green-200;
+    }
+
+    &.warning {
+        background: $red-300;
+    }
+
+    &.important {
+        background: $orange-200;
+    }
+
+    &.caution {
+        background: $orange-200;
+    }
+}
+
+
+/* Numbers & Code excerpts */
+.conum{
+  &[data-value] {
+      display: inline-block;
+      color: $grey-50 !important;
+      background-color: $grey-800;
+      -webkit-border-radius: 100px;
+      border-radius: 100px;
+      text-align: center;
+      font-size: 0.75em;
+      width: 1.67em;
+      height: 1.67em;
+      line-height: 1.67em;
+      font-style: normal;
+      font-weight: bold;
+
+      * {
+          color: #grey-50 !important;
+      }
+
+      +b {
+          display: none;
+      }
+
+      &:after {
+          content: attr(data-value);
+      }
+  }
+  &:not([data-value]):empty {
+      display: none;
+  }
+}
+
+pre .conum[data-value] {
+    position: relative;
+    top: -.125em;
+}
+
+b.conum * {
+    color: inherit!important;
+}
+
+.quoteblock {
+    blockquote {
+        border: none;
+    }
+
+    blockquote:before {
+
+    }
+
+    .attribution {
+        text-align: right;
+    }
+}
+
+
+
+table.tableblock{
+    max-width:100%;
+    border-collapse: collapse;
+    position: relative;
+    border: 1px solid rgba(0,0,0,.12);
+    border-collapse: collapse;
+    /* white-space: nowrap; */
+    font-size: 13px;
+    background-color: #fff;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);margin: 16px 0px;
+   }
+
+  td>.paragraph:last-child p>p:last-child,
+  th>p:last-child,
+  td>p:last-child {
+    margin-bottom:0
+  }
+
+table.grid-all th.tableblock,table.grid-all td.tableblock{/* border-width:0 1px 1px 0; */}
+table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
+table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
+table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
+table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
+table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
+table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
+
+table.frame-all{border-width:1px}
+table.frame-sides{border-width:0 1px}
+table.frame-topbot{border-width:1px 0}
+
+
+
+table thead th,table tfoot th, tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{
+  font-weight:bold;
+}
+
+
+tbody tr th{
+    line-height:1.6;
+}
+
+p.tableblock{
+  font-size:1em;
+  >code:only-child{background:none;padding:0}
+}
+
+table.tableblock {
+    td, th {
+      position: relative;
+      vertical-align: middle;
+      height: 48px;
+      border-top: 1px solid rgba(0, 0, 0, 0.12);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      padding-top: 12px;
+      box-sizing: border-box;
+      &:first-of-type {
+        padding-left: 24px;
+      }
+      &:last-of-type {
+        padding-right: 24px;
+      }
+  }
+
+  tr {
+      position: relative;
+      min-height: 48px;
+      transition-duration: .28s;
+      transition-timing-function: cubic-bezier(.4,0,.2,1);
+      transition-property: background-color;
+      &:hover { background-color: #eeeeee; }
+  }
+}

_sass/_base.scss

@@ -12,8 +12,8 @@ ul, ol, dl, figure,
  * Blockquotes
  */
 blockquote {
-    color: $grey-color;
+    color: $grey-600;
-    border-left: 4px solid $grey-color-light;
+    border-left: 4px solid $grey-200;
     padding-left: $spacing-unit / 2;
     font-size: 18px;
     letter-spacing: -1px;
@@ -24,15 +24,27 @@ blockquote {
     }
 }
 
+.admonition {
+  margin: 16px -16px;
+  padding: 16px 16px 1px 16px;
+  background: $grey-color-light;
+}
+
+
+
 /**
  * Code formatting
  */
-pre,
 code {
-    font-size: 15px;
+    border: 1px solid $grey-200;
-    border: 1px solid $grey-color-light;
+}
-    border-radius: 3px;
+
-    background-color: #eef;
+pre {
+  background: $grey-200;
+}
+
+pre.highlight {
+  background: $grey-color-light;
 }
 
 code {
@@ -40,8 +52,7 @@ code {
 }
 
 pre {
-    padding: 8px 12px;
+    //@extend .admonition;
-    overflow-x: scroll;
 
     > code {
         border: 0;
@@ -50,6 +61,8 @@ pre {
     }
 }
 
+
+
 /**
  * Clearfix
  */
@@ -62,11 +75,7 @@ pre {
     }
 }
 
-/**
- * Icons
- */
 .icon {
-
     > svg {
         display: inline-block;
         width: 16px;
@@ -78,3 +87,13 @@ pre {
         }
     }
 }
+
+
+td, th {
+  &.halign-left {text-align:left}
+  &.halign-right {text-align:right}
+  &.halign-center {text-align:center}
+  &.valign-top {vertical-align:top}
+  &.valign-bottom {vertical-align:bottom}
+  &.valign-middle {vertical-align:middle}
+}

_sass/_post.scss

@@ -1,4 +1,11 @@
-//
+.post {
+  .mdl-card__supporting-text {
+    padding: 16px;
+    width: auto;
+  }
+}
+
+
 // Styles for post
 //
 
@@ -16,7 +23,7 @@
   flex-shrink: 0;
 
   .post-container {
-    max-width: 1600px;
+    max-width: 960px;
     width: calc(100% - 16px);
     margin: 0 auto;
   }

_sass/_quantum-colors.scss

@@ -0,0 +1 @@
+../3rd-party/quantum-colors/_quantum-colors.scss

asciidoc-preview.adoc

@@ -0,0 +1,69 @@
+---
+---
+# Asciidoc preview
+:table-class: foo
+
+
+A Jekyll theme based in Google Material Design Lite library.
+
+This is the base Jekyll Material Design Lite theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at jekyllrb.com
+
+You can find the source code for the Jekyll MDL theme at: github.com/gdg-managua/jekyll-mdl
+
+You can find the source code for Jekyll at github.com/jekyll/jekyll
+
+## Quotes
+
+.After landing the cloaked Klingon bird of prey in Golden Gate park:
+[quote, Captain James T. Kirk, Star Trek IV: The Voyage Home]
+Everybody remember where we parked.
+
+
+[quote, Monty Python and the Holy Grail]
+____
+Dennis: Come and see the violence inherent in the system. Help! Help! I'm being repressed!
+
+King Arthur: Bloody peasant!
+
+Dennis: Oh, what a giveaway! Did you hear that? Did you hear that, eh?
+That's what I'm on about! Did you see him repressing me? You saw him, Didn't you?
+____
+
+
+"I hold it that a little rebellion now and then is a good thing,
+and as necessary in the political world as storms in the physical."
+-- Thomas Jefferson, Papers of Thomas Jefferson: Volume 11
+
+[, Richard M. Nixon]
+""
+When the President does it, that means that it's not illegal.
+""
+
+
+## Admonition Blocks
+
+NOTE: NOTE  If you don’t want the default site colors, you can create custom themes
+for the site in the mdl theme creator. The site will create a custom css, something like this:
+
+TIP: TIP  If you don’t want the default site colors, you can create custom themes
+for the site in the mdl theme creator. The site will create a custom css, something like this:
+
+IMPORTANT: IMPORTANT  If you don’t want the default site colors, you can create custom themes
+for the site in the mdl theme creator. The site will create a custom css, something like this:
+
+CAUTION: CAUTION  If you don’t want the default site colors, you can create custom themes
+for the site in the mdl theme creator. The site will create a custom css, something like this:
+
+WARNING: Warning If you don’t want the default site colors, you can create custom themes
+for the site in the mdl theme creator. The site will create a custom css, something like this:
+
+
+.With Title
+NOTE: This note should have title.
+
+## Source Code Blocks
+
+[source, yaml]
+----
+include::_config.yml[]
+----

css/coderay_github.css

@@ -0,0 +1,124 @@
+.CodeRay pre {
+  margin: 0px;
+}
+
+div.CodeRay { }
+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: red }
+.CodeRay .line { display: block; float: left; width: 100%; }
+.CodeRay span.line-numbers { padding: 0px 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:#007 }
+.CodeRay .attribute-name { color:#f08 }
+.CodeRay .attribute-value { color:#700 }
+.CodeRay .binary { color:#509; font-weight:bold }
+.CodeRay .comment  { color:#998; font-style: italic;}
+.CodeRay .char { color:#04D }
+.CodeRay .char .content { color:#04D }
+.CodeRay .char .delimiter { color:#039 }
+.CodeRay .class { color:#458; font-weight:bold }
+.CodeRay .complex { color:#A08; font-weight:bold }
+.CodeRay .constant { color:teal; }
+.CodeRay .color { color:#0A0 }
+.CodeRay .class-variable { color:#369 }
+.CodeRay .decorator { color:#B0B; }
+.CodeRay .definition { color:#099; font-weight:bold }
+.CodeRay .directive { color:#088; font-weight:bold }
+.CodeRay .delimiter { color:black }
+.CodeRay .doc { color:#970 }
+.CodeRay .doctype { color:#34b }
+.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:#FAA }
+.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: black }
+.CodeRay .inline .inline { background: #ccc }
+.CodeRay .inline .inline .inline { background: #bbb }
+.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:teal }
+.CodeRay .label { color:#970; font-weight:bold }
+.CodeRay .local-variable { color:#963 }
+.CodeRay .octal { color:#40E; font-weight:bold }
+.CodeRay .operator { }
+.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:#808 }
+.CodeRay .regexp .delimiter { color:#404 }
+.CodeRay .regexp .modifier { color:#C2C }
+.CodeRay .regexp .function  { color:#404; font-weight: bold }
+
+.CodeRay .string { color: #D20; }
+.CodeRay .string .string { }
+.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:#D14 }
+.CodeRay .shell .content { }
+.CodeRay .shell .delimiter { color:#D14 }
+
+.CodeRay .symbol { color:#990073 }
+.CodeRay .symbol .content { color:#A60 }
+.CodeRay .symbol .delimiter { color:#630 }
+
+.CodeRay .tag { color:#070 }
+.CodeRay .tag-special { color:#D70; font-weight:bold }
+.CodeRay .type { color:#339; font-weight:bold }
+.CodeRay .variable  { color:#036 }
+
+.CodeRay .insert { background: #afa; }
+.CodeRay .delete { background: #faa; }
+.CodeRay .change { color: #aaf; background: #007; }
+.CodeRay .head { color: #f8f; background: #505 }
+
+.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; }

css/coderay_twilight.css

@@ -0,0 +1,134 @@
+/*
+  TextMate Twilight Theme for CodeRay syntax highlighter.
+  by: russbrooks.com
+*/
+.CodeRay {
+  background-color: #000;
+  font-size: 10px;
+  color: #F8F8F8;
+  padding: 1em 0px 1em 1em;
+}
+
+.CodeRay pre {
+  margin: 0px;
+}
+
+div.CodeRay { }
+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: red }
+.CodeRay .line { display: block; float: left; width: 100%; }
+.CodeRay span.line-numbers { padding: 0px 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:#007 }
+.CodeRay .attribute-name { color:#f08 }
+.CodeRay .attribute-value { color:#700 }
+.CodeRay .binary { color:#509; font-weight:bold }
+.CodeRay .comment  { color:#5F5A60;}
+.CodeRay .char { color:#04D }
+.CodeRay .char .content { color:#04D }
+.CodeRay .char .delimiter { color:#039 }
+.CodeRay .class { color:#9B703F; font-weight:bold }
+.CodeRay .complex { color:#A08; font-weight:bold }
+.CodeRay .constant { color:#9B5C2E; }
+.CodeRay .color { color:#0A0 }
+.CodeRay .class-variable { color:#7587A6 }
+.CodeRay .decorator { color:#B0B; }
+.CodeRay .definition { color:#099; font-weight:bold }
+.CodeRay .directive { color:#088; font-weight:bold }
+.CodeRay .delimiter { color:black }
+.CodeRay .doc { color:#970 }
+.CodeRay .doctype { color:#34b }
+.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; }
+.CodeRay .exception { color:#C00; font-weight:bold }
+.CodeRay .filename { color:#099; }
+.CodeRay .function { color:#dacf85; }
+.CodeRay .global-variable { color:#9a859c; font-weight:bold }
+.CodeRay .hex { color:#058; font-weight:bold }
+.CodeRay .integer  { color:#ddf2a3; }
+.CodeRay .include { color:#B44; font-weight:bold }
+.CodeRay .inline { color: #DAEFA3 }
+.CodeRay .inline .inline {  }
+.CodeRay .inline .inline .inline {  }
+.CodeRay .inline .inline-delimiter { color: #DAEFA3; }
+.CodeRay .inline-delimiter { color: #D14; }
+.CodeRay .important { color:#f00; }
+.CodeRay .interpreted { color:#B2B; font-weight:bold }
+.CodeRay .instance-variable { color:#7587A6 }
+.CodeRay .label { color:#970; font-weight:bold }
+.CodeRay .local-variable { color:#963 }
+.CodeRay .octal { color:#40E; font-weight:bold }
+.CodeRay .operator { }
+.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:#CDA869; font-weight:bold }
+
+.CodeRay .key { color: #808; }
+.CodeRay .key .delimiter { color: #606; }
+.CodeRay .key .char { color: #80f; }
+.CodeRay .value { color: #088; }
+
+.CodeRay .regexp .content { color:#808 }
+.CodeRay .regexp .delimiter { color:#404 }
+.CodeRay .regexp .modifier { color:#C2C }
+.CodeRay .regexp .function  { color:#404; font-weight: bold }
+
+.CodeRay .string { color: #8F9D6A; }
+.CodeRay .string .string {  }
+.CodeRay .string .string .string {  }
+.CodeRay .string .content { color: #8F9D6A; }
+.CodeRay .string .char { color: #8F9D6A; }
+.CodeRay .string .delimiter { color: #8F9D6A; }
+
+.CodeRay .shell { color:#D14 }
+.CodeRay .shell .content { }
+.CodeRay .shell .delimiter { color:#D14 }
+
+.CodeRay .symbol { color:#CF6A4C }
+.CodeRay .symbol .content { color:#A60 }
+.CodeRay .symbol .delimiter { color:#630 }
+
+.CodeRay .tag { color:#070 }
+.CodeRay .tag-special { color:#D70; font-weight:bold }
+.CodeRay .type { color:#339; font-weight:bold }
+.CodeRay .variable  { color:#036 }
+
+.CodeRay .insert { background: #afa; }
+.CodeRay .delete { background: #faa; }
+.CodeRay .change { color: #aaf; background: #007; }
+.CodeRay .head { color: #f8f; background: #505 }
+
+.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; }

css/main.scss

@@ -7,12 +7,21 @@
 
 @charset "utf-8";
 
+
+@import "https://storage.googleapis.com/code.getmdl.io/1.2.1/material.{{ site.material.primary }}-{{ site.material.secondary }}.min.css";
+@import
+        "quantum-colors";
+
 $spacing-unit:     30px;
 $super-search:     rgba(0, 191, 255, 0.85);
 $grey-color:       #828282;
 $grey-color-light: lighten($grey-color, 40%);
 $grey-color-dark:  darken($grey-color, 25%);
 
+$primary-color: ${{ site.material.primary }}-600;
+$highlight-color: ${{ site.material.secondary }}-600;
+
+
 
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import
@@ -20,5 +29,20 @@ $grey-color-dark:  darken($grey-color, 25%);
         "layout",
         "syntax-highlighting",
         "post",
-        "search"
+        "search",
+        "asciidoc"
+
 ;
+
+.page-content .mdl-card__title {
+  background: $primary-color;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}