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

This commit is contained in:
Brandon Mathis 2011-07-17 20:28:02 -04:00
parent 790521a44b
commit 4dfc5c1d67
3 changed files with 8 additions and 4 deletions

View File

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

View File

@ -1,2 +1,7 @@
// This File is imported last, and will override other styles in the cascade // This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much // 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; }
// }

View File

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