Major CSS revamp

- Get rid of Bootstrap (except we still rely on some JS)
- Use BEM class names
- Rework variables/theme config
- Fix various bugs, including some on mobile

The CSS is still not ideal – it needs to be cleaned up some more. But
that can be a focus for after beta.

less/forum/DiscussionPage.less

@@ -0,0 +1,145 @@
+.DiscussionPage-nav {
+  > ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+}
+
+@media @phone {
+  .DiscussionPage-nav {
+    margin: 0 -15px;
+    border-bottom: 1px solid @control-bg;
+
+    > ul > li {
+      margin: 15px;
+      display: inline-block;
+
+      &.item-controls, &.item-scrubber {
+        margin: 0;
+        display: block;
+      }
+    }
+  }
+}
+@media @tablet-up {
+  .DiscussionPage-nav {
+    float: right;
+
+    &, > ul {
+      width: 150px;
+    }
+    > ul {
+      position: fixed;
+      margin-top: 30px;
+      z-index: 1;
+
+      > li {
+        margin-bottom: 10px;
+      }
+    }
+    .ButtonGroup, .Button {
+      width: 100%;
+    }
+    .ButtonGroup:not(.itemCount1) {
+      .SplitDropdown-button {
+        width: 77%;
+      }
+      .Dropdown-toggle {
+        width: 22%;
+      }
+    }
+  }
+}
+
+@media @tablet-up {
+  .DiscussionPage-stream {
+    margin-right: 200px;
+  }
+}
+
+// ------------------------------------
+// Discussions Pane
+
+@media @phone {
+  .DiscussionPage-list {
+    display: none;
+  }
+}
+
+@media @tablet-up {
+  .DiscussionPage-list {
+    left: -@pane-width;
+    width: 100%;
+    position: fixed;
+    z-index: @zindex-pane;
+    overflow: auto;
+    top: @header-height;
+    bottom: 0;
+    width: @pane-width;
+    background: @body-bg;
+    padding-bottom: 40px;
+    border-top: 1px solid @control-bg;
+    .box-shadow(2px 2px 6px -2px @shadow-color);
+    .transition(left 0.2s);
+
+    .paneShowing & {
+      left: 0;
+    }
+    .DiscussionListItem {
+      margin: 0;
+      padding: 0;
+      border-radius: 0;
+
+      &.active {
+        background: @control-bg;
+      }
+    }
+    .DiscussionListItem-controls {
+      top: 5px;
+    }
+    .DiscussionListItem-content {
+      padding-left: 52px + 15px;
+      padding-right: 65px + 15px;
+    }
+    .DiscussionListItem-title {
+      font-size: 14px;
+    }
+    .DiscussionListItem-relevantPosts {
+      margin-left: -52px;
+      margin-right: -65px;
+    }
+    .DiscussionListItem-count {
+      margin-top: 11px;
+    }
+  }
+}
+
+@media @desktop-hd {
+  .DiscussionPage-list {
+    .panePinned & {
+      left: 0;
+      z-index: @zindex-composer - 1;
+      .transition(none);
+    }
+  }
+  // When the pane is pinned, move the other page content inwards
+  .App-content, .App-footer {
+    .hasPane.panePinned & {
+      margin-left: @pane-width;
+
+      .container {
+        max-width: 100%;
+        padding-left: 30px;
+        padding-right: 30px;
+      }
+    }
+  }
+  .App-header .container {
+    transition: width 0.2s;
+
+    .hasPane.panePinned & {
+      width: 100%;
+    }
+  }
+}