Sparanoid Middleman

So when picking a static site generator I went through quite a few options, at the time I was really leaning toward just simply coding everything with no help from a generator but quickly learned how much time would be saved using it. I was pretty big on ruby at the time and was suggested Middleman, I picked it up quickly due to using rails frequently at the time and so it was decided right then and there. I got lazy and decided I wanted to simply use a premade theme but quickly saw that all the good ones were on Jekyll and other frameworks. One in particular that really resonated with me was Almace Scaffolding which Sparanoid was using for their site and really liked everything about it. But what really drew me was how each article/page got it’s own colors independent from the rest of the site. This was a “How did they do that?/I think I can figure it out!” moment for me, and decided to recreate it as much as I could in Middleman.

This blog is the result of that, I made some small personal changes that fit me better (and some being a result of me focusing on other parts of the theme). Much like the original theme, I’m most proud of the ability to assign colors to each page/article independent of one another.

To achieve this I made use of YAML/Frontmatter to parse and assign RGB values to the correct elements. This ended up being a little more involved than I initially thought (which in itself was a bit involved coming to the conclusion to send the info to the frontmatter). I made a partial to do the heavy lifting, after looking around on middleman forums and in the documentation (even looked at ruby and Rails documentation), I remembered that I could convert erb to html and that I could style/utilize CSS within HTML. So the partial ends up looking like

<style>
  <% if current_article.data.bg_color? %>
    body {
      background-color: rgb(<%= current_article.data.bg_color %>);
    }
    .header {

      background-image: linear-gradient(rgba(<%= current_article.data.bg_color %>,0.93), rgba(<%= current_article.data.bg_color %>,0.93));
    }

  <% end %>

  <% if current_article.data.text_color? %>
    .article p {
      color: rgb(<%= current_article.data.text_color %>);
    }
    .header {
      color: rgb(<%= current_article.data.text_color %>);
    }
    .header .meta small{
      color: rgb(<%= current_article.data.text_color %>);
    }
    .content ul li {
      color: rgb(<%= current_article.data.text_color %>);
    }

  <% end %>

  <% if current_article.data.link_color? %>
    .header a {
      color: rgb(<%= current_article.data.link_color %>);
      text-decoration: none;}

    .header a:active, .header a:focus, .header a:hover {
      text-decoration: underline; }

    .article a {
      color: rgb(<%= current_article.data.link_color %>);
      text-decoration: none;
      transition: color 0.2s linear; }

    .article a:active, .article a:focus, .article a:hover {
      text-decoration: underline;}

      body {
        border-top: 6px solid rgb(<%= current_article.data.link_color %>);
      }


    footer li a {
      color: rgb(<%= current_article.data.link_color %>);
      text-decoration: none;
      transition: color 0.2s linear;}

      footer li a:active, footer li a:focus, footer li a:hover {
        text-decoration: underline;
        color: rgb(<%= current_article.data.link_color %>);}

      .navbar a{
        color: rgba(<%= current_article.data.link_color %>, 0.75);
      }

      .navbar a:active, .navbar a:focus, .navbar a:hover {
        color: rgba(<%= current_article.data.link_color %>, 1); }

        ::selection {
          color: rgba(<%= current_article.data.link_color %>, 0.70);
        }
        ::-moz-selection {
          color: rgba(<%= current_article.data.link_color %>, 0.70);
        }

  <% end %>
</style>

This is where pretty much all of the site’s magic happens, I decided on 4 separate color fields: bg_color, category_color, text_color, link_color. This gives me a lot of control on how the colors are presented. I originally didn’t have a category_color field, which controlled the color of the entry title in the article listing view, instead the category color was derived from the text_color but realized when I used the color white on a dark background it made seeing the title text impossible in the article listing view.

Also took the time to incorporate the external link mechanic (the square next to the title), it’s not very intuitive in my opinion but I think it looks great, and usually just supply the link plainly for visitors.

I need to do proper documentation but I honestly had/have no plans for this to be a thing in any major sense, all credits go to the team over at Sparanoid, I created this Middleman version purely to sate my belief that I could recreate it.