(a bit of) whitespace

Has someone just said “lowlevel”?

Heads up!

This is my old blog, which is no longer updated, doesn't reflect my current opinions, and remains here for archival purposes only. Please don't take it too seriously; and visit whitequark.org to see my current work!

Insets for Octopress

When I’ve been adding errata to my Ruby Hacking Guide translation, I wanted to format it as insets. Since there wasn’t an implementation already, I wrote my own. Here is how it looks like:

I’m an inset!

I contain some interesting remarks about the text.

The corresponding source would be:

1
2
3
{% inset I'm an inset! %}
I contain some interesting remarks about the <em>text</em>.
{% endinset %}

Note that you have to write HTML inside the inset. Unfortunately, there is no portable way to make various Markdown converters supported by Octopress parse contents of block-level tags as Markdown.

To use it, you need to add two files to your Octopress source tree, and append @import "insets"; to sass/custom/_styles.scss.

plugins/inset.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module Jekyll
  class Inset < Liquid::Block
    def initialize(tag_name, markup, tokens)
      super

      @title = markup.strip
    end

    def render(context)
      %Q{<div class="inset"><h4>#{@title}</h4><p>#{super}</p></div>}
    end
  end
end

Liquid::Template.register_tag('inset', Jekyll::Inset)
sass/custom/_insets.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.inset {
  ul, ol {
    margin-left: 1.3em;
  }

  background: $base03 $noise-bg;
  border-top: 2px solid darken($base03, 4);
  border-bottom: 2px solid darken($base03, 4);

  margin-bottom: 1.5em;
  padding-top: 1.5em;

  margin-left: -$pad-min;
  margin-right: -$pad-min;
  padding-left: $pad-min;
  padding-right: $pad-min;
  @media only screen and (min-width: 480px) {
    margin-left: -$pad-narrow;
    margin-right: -$pad-narrow;
    padding-left: $pad-narrow;
    padding-right: $pad-narrow;
  }
  @media only screen and (min-width: 768px) {
    margin-left: -$pad-medium;
    margin-right: -$pad-medium;
    padding-left: $pad-medium;
    padding-right: $pad-medium;
  }
  @media only screen and (min-width: 992px) {
    margin-left: -$pad-wide;
    margin-right: -$pad-wide;
    padding-left: $pad-wide;
    padding-right: $pad-wide;
  }
}