scoped titlebar styling to figcaptions under figures with role="code", added an example for overriding a style in sass/custom/styles.scss

.themes/classic/plugins/include_code.rb

@@ -25,7 +25,7 @@ module Jekyll
         code = file.read
         file_type = file.extname
         url = "#{context.registers[:site].config['url']}/#{code_dir}/#{@file}"
-        source = "<figure><figcaption><span>#{file.basename}</span> <a href='#{url}'>download</a></figcaption>\n"
+        source = "<figure role=code><figcaption><span>#{file.basename}</span> <a href='#{url}'>download</a></figcaption>\n"
         source += "{% highlight #{file_type} %}\n" + code + "\n{% endhighlight %}</figure>"
         partial = Liquid::Template.parse(source)
         context.stack do

.themes/classic/sass/custom/_styles.scss

@@ -1,2 +1,7 @@
 // This File is imported last, and will override other styles in the cascade
 // Add styles here to make changes without digging in too much
+
+// For example if you want indented lists on all screen sizes uncomment the following lines
+// #content article {
+//  ul, ol { margin-left: 1.4em; }
+// }

.themes/classic/sass/partials/_syntax.scss

@@ -84,6 +84,7 @@ p code {
 
 .pre-code {
   @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
+  font-family: $mono !important;
   overflow: scroll;
   overflow-y: hidden;
   display: block;
@@ -173,7 +174,7 @@ pre, .highlight, .gist-highlight {
 }
 
 .highlight code { @extend .pre-code; background: #000;}
-figure {
+figure[role=code] {
   margin-bottom: 1.5em;
   figcaption {
     position: relative;
@@ -209,5 +210,3 @@ figure {
   text-shadow: #cbcccc 0 1px 0;
   padding-left: 3em;
 }
-
-