FEATURE: Native theme support

This feature introduces the concept of themes. Themes are an evolution
of site customizations.

Themes introduce two very big conceptual changes:

- A theme may include other "child themes", children can include grand
children and so on.

- A theme may specify a color scheme

The change does away with the idea of "enabled" color schemes.

It also adds a bunch of big niceties like

- You can source a theme from a git repo

- History for themes is much improved

- You can only have a single enabled theme. Themes can be selected by
    users, if you opt for it.

On a technical level this change comes with a whole bunch of goodies

- All CSS is now compiled using a custom pipeline that uses libsass
    see /lib/stylesheet

- There is a single pipeline for css compilation (in the past we used
    one for customizations and another one for the rest of the app

- The stylesheet pipeline is now divorced of sprockets, there is no
   reliance on sprockets for CSS bundling

- CSS is generated with source maps everywhere (including themes) this
    makes debugging much easier

- Our "live reloader" is smarter and avoid a flash of unstyled content
   we run a file watcher in "puma" in dev so you no longer need to run
   rake autospec to watch for CSS changes

app/assets/stylesheets/embed.scss

@@ -0,0 +1,177 @@
+@import "./vendor/normalize";
+@import "./common/foundation/base";
+@import "./common/foundation/variables";
+@import "./common/foundation/colors";
+@import "./common/foundation/mixins";
+
+article.post {
+  border-bottom: 1px solid #ddd;
+
+  img.avatar {
+    border-radius: 50%;
+  }
+
+  &.deleted {
+    background-color: #ffe5e5;
+  }
+
+  .quote .title {
+    border-left: 5px solid darken(dark-light-diff($primary, $secondary, 97%, -45%), 10%);
+    background-color: dark-light-diff($primary, $secondary, 97%, -45%);
+    padding: 10px 10px 0 12px;
+    .avatar { margin-right: 7px; }
+  }
+
+  ol, ul {
+    clear: none;
+  }
+
+  blockquote {
+    padding: 10px 8px 10px 13px;
+    margin: 0 0 10px 0;
+    background-color: dark-light-diff($primary, $secondary, 97%, -45%);
+    border-left: 5px solid darken(dark-light-diff($primary, $secondary, 97%, -45%), 10%);
+    p {
+      margin: 0 0 10px 0;
+    }
+    p:last-of-type {
+      margin-bottom:0;
+    }
+  }
+
+  .post-date {
+    float: right;
+    color: #aaa;
+    font-size: 0.857em;
+    margin: 10px 4px 0 0;
+  }
+
+  .author {
+    padding: 10px 5px;
+    float: left;
+
+    img {
+      max-width: 45px;
+      border-radius: 50%;
+    }
+  }
+
+
+  .cooked {
+    padding: 10px 0;
+    margin-left: 65px;
+    word-wrap: break-word;
+    word-break: break-word;
+
+    pre {
+      white-space: pre-wrap;
+    }
+    img {
+      max-width:100%;
+    }
+    p {
+      margin: 0 0 1em 0;
+    }
+  }
+}
+
+.username {
+  font-size: 0.929em;
+  margin: 0 0 10px 0;
+
+  a {
+    color: #5c5c5c
+  }
+  a.staff {
+    background-color: #ffffc2;
+  }
+
+  a.new-user {
+    color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%));
+  }
+
+  span.title {
+    font-weight: normal;
+    color: #999;
+  }
+}
+
+img.emoji {
+  width: 20px;
+  height: 20px;
+}
+
+.in-reply-to {
+  font-size: 0.929em;
+  text-align: center;
+  margin: 10px 20px 6px 0;
+  display: inline-block;
+  float: right;
+  color: #0088cc;
+}
+
+.replies {
+  font-size: 1.071em;
+  color: #999;
+}
+
+.clearfix {
+  clear: both;
+}
+
+
+header.discourse {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 8px;
+  font-size: 1.286em;
+  border-bottom: 3px solid #ddd;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  h3 {
+    margin: 0 auto 0 0;
+    font-size: 1.0em;
+  }
+}
+
+.embed-error {
+  padding: 0 10px;
+}
+
+footer {
+  font-size: 1.286em;
+  margin-top: 0.5em;
+  .button {
+    color: white;
+    padding: 6px 8px;
+    background-color: #0088cc;
+    display: inline-block;
+  }
+}
+
+.logo {
+  float: right;
+  max-height: 30px;
+}
+
+// load onebox CSS at the end
+@import "./common/base/onebox";
+
+// we apparently use bottom margins on paras in the embed CSS, leading to weirdness
+// which we will now clean up
+aside.onebox {
+  margin-bottom: 20px;
+  p {
+    margin-bottom: 0 !important;
+  }
+}
+
+// images large enough for the lightbox wrapper don't have bottom margins
+// either, unless we add one now
+div.lightbox-wrapper {
+  margin-bottom: 20px;
+}