Initial commit w/currently running code

18 files changed, 854 insertions, 0 deletions

diff --git a/app/assets/images/.keep b/app/assets/images/.keep
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/assets/images/.keep
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
new file mode 100644
index 0000000..9bca50a
--- /dev/null
+++ b/app/assets/javascripts/application.js
@@ -0,0 +1,18 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require turbolinks
+//= require jquery.typeahead.min
+//= require moment.min
+//= require_directory .
diff --git a/app/assets/javascripts/arches.js b/app/assets/javascripts/arches.js
new file mode 100644
index 0000000..dee720f
--- /dev/null
+++ b/app/assets/javascripts/arches.js
@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
diff --git a/app/assets/javascripts/index/typeahead.js b/app/assets/javascripts/index/typeahead.js
new file mode 100644
index 0000000..3232fe8
--- /dev/null
+++ b/app/assets/javascripts/index/typeahead.js
@@ -0,0 +1,26 @@
+$(function() {
+  $('#q').typeahead({
+    order: 'asc',
+    dynamic: true,
+    delay: 500,
+    source: {
+      packages: {
+        display: 'name',
+        href: function(item) { return '/packages/' + item.category + '/' + item.name; },
+        url: [{
+          type: 'GET',
+          url: "/packages/suggest.json",
+          data: {
+            q: "{{query}}"
+          }
+        }, 'results'],
+        template: '<span class="kk-suggest-cat">{{category}}</span>/<span class="kk-suggest-pkg">{{name}}</span> <span class="kk-suggest-detail">{{description}}</span>'
+      }
+    },
+    callback: {
+      onClick: function(node, a, item, event) {
+        window.location = item.href;
+      }
+    }
+  });
+});
diff --git a/app/assets/javascripts/kkuleomi.js b/app/assets/javascripts/kkuleomi.js
new file mode 100644
index 0000000..3a01529
--- /dev/null
+++ b/app/assets/javascripts/kkuleomi.js
@@ -0,0 +1,9 @@
+$(document).on('ready page:load kkuleomi:ajax', function(event) {
+  $('[data-toggle="tooltip"]').tooltip();
+
+  $('.kk-i18n-date').each(function(idx) {
+    // TODO: Support different date formats
+    var me = $(this);
+    me.text(moment.unix(me.data('utcts')).local().format('ddd, D MMM YYYY HH:mm'));
+  });
+});
diff --git a/app/assets/javascripts/packages/show.js b/app/assets/javascripts/packages/show.js
new file mode 100644
index 0000000..01f5300
--- /dev/null
+++ b/app/assets/javascripts/packages/show.js
@@ -0,0 +1,24 @@
+$(function() {
+  var atom = $('#package-title').data('atom');
+
+  $.ajax({
+    url: '/packages/' + atom + '/changelog'
+  }).done(function(data) {
+    $('#changelog-container').html(data);
+    $(document).trigger('kkuleomi:ajax');
+  }).fail(function() {
+    $('#changelog-container > li').html('<span class="fa fa-fw fa-3x fa-ban text-danger"></span><br><br>Changelog currently not available. Please check back later.');
+  });
+
+  $('#kk-keyword-legend-btn').popover({
+    content: function(btn) {
+      return $('#kk-keyword-legend-text').html();
+    },
+    html: true,
+    trigger: 'toggle'
+  });
+
+  $('#kk-keyword-legend-btn').click(function() {
+    return false;
+  });
+});
diff --git a/app/assets/javascripts/useflags/render-bubbles.js b/app/assets/javascripts/useflags/render-bubbles.js
new file mode 100644
index 0000000..6c99e43
--- /dev/null
+++ b/app/assets/javascripts/useflags/render-bubbles.js
@@ -0,0 +1,70 @@
+$('#bubble-placeholder').show();
+
+var width = 600;
+    height = 600;
+
+var diameter = 960,
+    format = d3.format(",d"),
+    color = d3.scale.category20c();
+
+var bubble = d3.layout.pack()
+    .sort(null)
+    .size([width, height])
+    .padding(1.5);
+
+var svg = d3.select("#bubble-placeholder").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+    .attr("class", "bubble");
+
+d3.json("/useflags/popular.json", function(error, root) {
+  if (error) throw error;
+
+  var node = svg.selectAll(".node")
+      .data(bubble.nodes(classes(root))
+      .filter(function(d) { return !d.children; }))
+    .enter().append("g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+  node.append("title")
+      .text(function(d) { return d.className + ": " + format(d.value); });
+
+  node.append("circle")
+      .attr("r", function(d) { return d.r; })
+      .attr("class", "kk-useflag-circle")
+      .attr("onclick", function(d) { return "location.href='/useflags/" + d.className + "';"; })
+      .style("fill", function(d) { return color(d.className); });
+
+  node.append("text")
+      .attr("dy", ".3em")
+      .attr('class', 'kk-useflag-circle')
+      .attr("onclick", function(d) { return "location.href='/useflags/" + d.className + "';"; })
+      .style("text-anchor", "middle")
+      .style("font-size", function(d) {
+        var len = d.className.substring(0, d.r / 3).length;
+        var size = d.r/3;
+        size *= 8 / len;
+        if (len == 1) {
+          size -= 60;
+        }
+        size += 1;
+        return Math.round(size)+'px';
+      })
+      .text(function(d) { return d.className.substring(0, d.r / 3); });
+});
+
+// Returns a flattened hierarchy containing all leaf nodes under the root.
+function classes(root) {
+  var classes = [];
+
+  function recurse(name, node) {
+    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
+    else classes.push({packageName: name, className: node.name, value: node.size});
+  }
+
+  recurse(null, root);
+  return {children: classes};
+}
+
+d3.select(self.frameElement).style("height", height + "px");
diff --git a/app/assets/javascripts/useflags/typeahead.js b/app/assets/javascripts/useflags/typeahead.js
new file mode 100644
index 0000000..3912380
--- /dev/null
+++ b/app/assets/javascripts/useflags/typeahead.js
@@ -0,0 +1,25 @@
+$(function() {
+  $('#q').typeahead({
+    order: "asc",
+    dynamic: true,
+    source: {
+      use: {
+        display: 'name',
+        href: function(item) { return '/useflags/' + item.name; },
+        url: [{
+          type: 'GET',
+          url: "/useflags/suggest.json",
+          data: {
+            q: "{{query}}"
+          }
+        }, 'results'],
+        template: '<span>{{name}}</span> <span class="kk-suggest-detail">{{description}}</span>'
+      }
+    },
+    callback: {
+      onClick: function(node, a, item, event) {
+        window.location = item.href;
+      }
+    }
+  });
+});
diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/assets/stylesheets/about.scss
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
new file mode 100644
index 0000000..6b38ea1
--- /dev/null
+++ b/app/assets/stylesheets/application.css
@@ -0,0 +1,16 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_tree .
+ *= require jquery.typeahead.min
+ *= require_self
+ */
diff --git a/app/assets/stylesheets/arches.scss b/app/assets/stylesheets/arches.scss
new file mode 100644
index 0000000..f0daf89
--- /dev/null
+++ b/app/assets/stylesheets/arches.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the Arches controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/assets/stylesheets/categories.scss b/app/assets/stylesheets/categories.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/app/assets/stylesheets/categories.scss
@@ -0,0 +1 @@
+
diff --git a/app/assets/stylesheets/index.scss b/app/assets/stylesheets/index.scss
new file mode 100644
index 0000000..00db929
--- /dev/null
+++ b/app/assets/stylesheets/index.scss
@@ -0,0 +1,9 @@
+.site-welcome {
+  font-size: 2.5em;
+  text-align: center;
+  margin-bottom: 1em;
+
+  @media screen and (max-width: 767px) {
+    font-size: 1.75em;
+  }
+}
diff --git a/app/assets/stylesheets/keywords.scss b/app/assets/stylesheets/keywords.scss
new file mode 100644
index 0000000..e860d2f
--- /dev/null
+++ b/app/assets/stylesheets/keywords.scss
@@ -0,0 +1,24 @@
+.kk-keyword-stable {
+  background-color: #81C784;
+  color: #2E7D32;
+}
+
+.kk-keyword-testing {
+  background-color: #FFF176;
+  color: #a08700;
+}
+
+.kk-keyword-unavailable {
+  background-color: #d5d5d5;
+  color: #666;
+}
+
+.kk-keyword-masked {
+  background-color: #EF9A9A;
+  color: #B71C1C;
+}
+
+.kk-keyword-unknown {
+  background-color: #fafafa;
+  color: #333;
+}
diff --git a/app/assets/stylesheets/misc.scss b/app/assets/stylesheets/misc.scss
new file mode 100644
index 0000000..f3c557d
--- /dev/null
+++ b/app/assets/stylesheets/misc.scss
@@ -0,0 +1,158 @@
+h1 {
+  a.kk-feed-icon {
+    font-size: 65%;
+  }
+}
+
+.label {
+  cursor: default;
+}
+
+.kk-cell-sep-right {
+  border-right-width: 3px !important;
+}
+
+.panel {
+  table.table {
+    tr {
+      th:first-child,
+      td:first-child {
+        padding-left: 1em;
+      }
+    }
+  }
+}
+
+.black {
+  color: #333;
+}
+
+td .alert {
+  margin-bottom: 0;
+}
+
+.kk-nobreak-cell {
+  white-space: nowrap;
+}
+
+.kk-panel-content-sorry {
+  background-color: #f0f0f0;
+  text-align: center;
+  padding-top: 2em;
+  padding-bottom: 2em;
+  color: #666;
+}
+
+.kk-3col-list {
+  columns: 3;
+  -webkit-columns: 3;
+  -moz-columns: 3;
+}
+
+.kk-4col-list {
+  columns: 4;
+  -webkit-columns: 4;
+  -moz-columns: 4;
+}
+
+.kk-5col-list {
+  columns: 5;
+  -webkit-columns: 5;
+  -moz-columns: 5;
+}
+
+.kk-6col-list {
+  columns: 6;
+  -webkit-columns: 6;
+  -moz-columns: 6;
+}
+
+.kk-col-list {
+  @media screen and (max-width: 767px) {
+    columns: 1;
+    -webkit-columns: 1;
+    -moz-columns: 1;
+  }
+
+  padding: 0;
+
+  li {
+    list-style-type: none;
+
+    a:link,
+    a:hover,
+    a:active,
+    a:visited {
+      display: block;
+      padding: .2em;
+    }
+
+    a:hover {
+      background-color: #eee;
+      border-radius: 2px;
+      text-decoration: none;
+    }
+  }
+}
+
+.kk-col-list-header {
+  margin-top: 1em;
+
+  .kk-group-header {
+    display: block;
+    border-bottom: 1px solid #eee;
+  }
+}
+
+.kk-col-list .kk-col-list-header:first-of-type {
+  margin-top: 0;
+}
+
+.kk-group-header {
+  color: #8a8a8a;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  font-size: 90%;
+}
+
+.kk-suggest-cat {
+  color: #8a8a8a;
+}
+
+.kk-suggest-pkg {
+}
+
+.kk-suggest-detail {
+  float: right;
+  color: #8a8a8a;
+  font-size: 90%;
+
+  @media screen and (max-width: 767px) {
+    display: block;
+    float: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+body.kk .typeahead-list > li > a {
+  // Firefox workaround again
+  white-space: normal;
+}
+
+.kk-site-notice {
+  font-size: 90%;
+  padding-top: .5em;
+  padding-bottom: .5em;
+  text-align: center;
+}
+
+a.kk-box-meta-link:link,
+a.kk-box-meta-link:active,
+a.kk-box-meta-link:visited {
+  color: #aaa;
+}
+
+a.kk-box-meta-link:hover {
+  color: #555;
+}
diff --git a/app/assets/stylesheets/packages.scss b/app/assets/stylesheets/packages.scss
new file mode 100644
index 0000000..1c2811a
--- /dev/null
+++ b/app/assets/stylesheets/packages.scss
@@ -0,0 +1,232 @@
+.kk-keyword-header {
+  width: 5em;
+  font-size: 85%;
+  white-space: normal !important;
+}
+
+@media screen and (max-width: 767px) {
+  .kk-keyword-header {
+  min-width: 5em;
+  max-width: 5em;
+  }
+}
+
+.kk-version {
+  // Only set on small screens due to:
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=488725
+  @media screen and (max-width: 767px) {
+    white-space: nowrap;
+  }
+}
+
+.kk-slot {
+  color: #888;
+}
+
+.kk-keyword {
+  text-align: center;
+  white-space: normal !important;
+}
+
+.kk-search-result-header {
+  margin-top: 0;
+}
+
+.kk-metadata-key {
+  font-weight: bold;
+}
+
+.kk-package-title .kk-package-icon {
+  float: left;
+}
+
+.kk-package-title .kk-package-name {
+  margin-left: 1.3em;
+  word-wrap: break-word;
+}
+
+.kk-package-title .kk-package-cat {
+  padding-left: 2.05em;
+}
+
+.kk-package-maindesc {
+  margin-top: 1.75em;
+}
+
+.kk-package-homepage {
+  margin: 0;
+  font-size: 125%;
+}
+
+.kk-byline {
+  padding-left: 1em;
+  font-style: italic;
+}
+
+.kk-commit {
+  font-family: monospace;
+}
+
+.kk-changelog-diffstat {
+  margin-top: 1em;
+  margin-bottom: 0;
+  border: 1px solid #ddd;
+  border-top: none;
+}
+
+.kk-changelog-diffstat {
+  a:link, a:visited, a:active {
+    color: #333;
+  }
+}
+
+.kk-changelog-diffstat-icon {
+  width: 20px;
+}
+
+.kk-octicon-spacer {
+  padding-left: 18px;
+}
+
+.kk-useflag a:link,
+.kk-useflag a:visited {
+  padding: 0.2em;
+  padding-top: 0.1em;
+  padding-bottom: 0.1em;
+  background-color: #f0f0f0;
+  border: 1px solid #eaeaea;
+  border-radius: 2px;
+  color: #333;
+  font-family: monospace;
+  font-size: 90%;
+}
+
+.kk-useflag a:hover {
+  background-color: #e9e9e9;
+  color: #305d8c;
+}
+
+.kk-useflag a:hover {
+  text-decoration: none;
+}
+
+.kk-useflag {
+  list-style-type: none;
+  margin-bottom: 0.4em;
+  margin-right: 0.2em;
+}
+
+.kk-useflag-container {
+  padding: 0;
+  margin-top: .4em;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.kk-useflag-container-many {
+  justify-content: space-between;
+}
+
+.kk-useflag-container-few {
+  justify-content: flex-start;
+}
+
+.kk-useflag-group {
+  color: #8a8a8a;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  font-size: 90%;
+}
+
+.kk-versions-table {
+  .kk-restrict-label,
+  .kk-properties-label {
+    float: right;
+
+    @media screen and (max-width: 767px) {
+      float: none;
+    }
+  }
+}
+
+.kk-version-card > p:last-of-type {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 767px) {
+  .kk-version-card > p:first-of-type {
+    margin-top: .5em;
+  }
+}
+
+.kk-mask {
+  background-color: #f2dede;
+}
+
+.kk-mask-details {
+  font-size: 90%;
+
+  .row {
+    margin-bottom: 1em;
+  }
+
+  margin-top: 1em;
+  margin-bottom: -1em;
+}
+
+.kk-mask-reason {
+  a:link,
+  a:visited {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
+.kk-mask-atoms {
+  max-height: 3.6em;
+  overflow-x: scroll;
+  line-height: 1.2em;
+}
+
+.popover .kk-keyword-legend {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 240px;
+}
+
+.kk-package-detailed {
+  h4 {
+    margin-bottom: 5px;
+  }
+}
+
+.kk-package-detailed-toolbox {
+  float:right;
+  margin-top: -1.75em;
+}
+
+.kk-inline-changelog-entry {
+  font-size: 90%;
+  border-radius: 2px;
+  border: 1px solid #ddd;
+  background-color: #f5f5f5;
+  margin-top: 5px;
+
+  a:link,
+  a:active,
+  a:visited,
+  a:hover {
+    display: block;
+    padding: 5px;
+    color: #333;
+  }
+
+  .kk-commit-message {
+    margin-left: .5em;
+  }
+
+  .kk-commit {
+    color: #999;
+  }
+}
diff --git a/app/assets/stylesheets/sprockets-octicons.scss b/app/assets/stylesheets/sprockets-octicons.scss
new file mode 100755
index 0000000..cef21ae
--- /dev/null
+++ b/app/assets/stylesheets/sprockets-octicons.scss
@@ -0,0 +1,217 @@
+@font-face {
+  font-family: 'octicons';
+  src: font-url('octicons.eot?#iefix') format('embedded-opentype'),
+       font-url('octicons.woff') format('woff'),
+       font-url('octicons.ttf') format('truetype'),
+       font-url('octicons.svg#octicons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+// .octicon is optimized for 16px.
+// .mega-octicon is optimized for 32px but can be used larger.
+.octicon, .mega-octicon {
+  font: normal normal normal 16px/1 octicons;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.mega-octicon { font-size: 32px; }
+
+.octicon-alert:before { content: '\f02d'} /*  */
+.octicon-arrow-down:before { content: '\f03f'} /*  */
+.octicon-arrow-left:before { content: '\f040'} /*  */
+.octicon-arrow-right:before { content: '\f03e'} /*  */
+.octicon-arrow-small-down:before { content: '\f0a0'} /*  */
+.octicon-arrow-small-left:before { content: '\f0a1'} /*  */
+.octicon-arrow-small-right:before { content: '\f071'} /*  */
+.octicon-arrow-small-up:before { content: '\f09f'} /*  */
+.octicon-arrow-up:before { content: '\f03d'} /*  */
+.octicon-microscope:before,
+.octicon-beaker:before { content: '\f0dd'} /*  */
+.octicon-bell:before { content: '\f0de'} /*  */
+.octicon-book:before { content: '\f007'} /*  */
+.octicon-bookmark:before { content: '\f07b'} /*  */
+.octicon-briefcase:before { content: '\f0d3'} /*  */
+.octicon-broadcast:before { content: '\f048'} /*  */
+.octicon-browser:before { content: '\f0c5'} /*  */
+.octicon-bug:before { content: '\f091'} /*  */
+.octicon-calendar:before { content: '\f068'} /*  */
+.octicon-check:before { content: '\f03a'} /*  */
+.octicon-checklist:before { content: '\f076'} /*  */
+.octicon-chevron-down:before { content: '\f0a3'} /*  */
+.octicon-chevron-left:before { content: '\f0a4'} /*  */
+.octicon-chevron-right:before { content: '\f078'} /*  */
+.octicon-chevron-up:before { content: '\f0a2'} /*  */
+.octicon-circle-slash:before { content: '\f084'} /*  */
+.octicon-circuit-board:before { content: '\f0d6'} /*  */
+.octicon-clippy:before { content: '\f035'} /*  */
+.octicon-clock:before { content: '\f046'} /*  */
+.octicon-cloud-download:before { content: '\f00b'} /*  */
+.octicon-cloud-upload:before { content: '\f00c'} /*  */
+.octicon-code:before { content: '\f05f'} /*  */
+.octicon-color-mode:before { content: '\f065'} /*  */
+.octicon-comment-add:before,
+.octicon-comment:before { content: '\f02b'} /*  */
+.octicon-comment-discussion:before { content: '\f04f'} /*  */
+.octicon-credit-card:before { content: '\f045'} /*  */
+.octicon-dash:before { content: '\f0ca'} /*  */
+.octicon-dashboard:before { content: '\f07d'} /*  */
+.octicon-database:before { content: '\f096'} /*  */
+.octicon-clone:before,
+.octicon-desktop-download:before { content: '\f0dc'} /*  */
+.octicon-device-camera:before { content: '\f056'} /*  */
+.octicon-device-camera-video:before { content: '\f057'} /*  */
+.octicon-device-desktop:before { content: '\f27c'} /*  */
+.octicon-device-mobile:before { content: '\f038'} /*  */
+.octicon-diff:before { content: '\f04d'} /*  */
+.octicon-diff-added:before { content: '\f06b'} /*  */
+.octicon-diff-ignored:before { content: '\f099'} /*  */
+.octicon-diff-modified:before { content: '\f06d'} /*  */
+.octicon-diff-removed:before { content: '\f06c'} /*  */
+.octicon-diff-renamed:before { content: '\f06e'} /*  */
+.octicon-ellipsis:before { content: '\f09a'} /*  */
+.octicon-eye-unwatch:before,
+.octicon-eye-watch:before,
+.octicon-eye:before { content: '\f04e'} /*  */
+.octicon-file-binary:before { content: '\f094'} /*  */
+.octicon-file-code:before { content: '\f010'} /*  */
+.octicon-file-directory:before { content: '\f016'} /*  */
+.octicon-file-media:before { content: '\f012'} /*  */
+.octicon-file-pdf:before { content: '\f014'} /*  */
+.octicon-file-submodule:before { content: '\f017'} /*  */
+.octicon-file-symlink-directory:before { content: '\f0b1'} /*  */
+.octicon-file-symlink-file:before { content: '\f0b0'} /*  */
+.octicon-file-text:before { content: '\f011'} /*  */
+.octicon-file-zip:before { content: '\f013'} /*  */
+.octicon-flame:before { content: '\f0d2'} /*  */
+.octicon-fold:before { content: '\f0cc'} /*  */
+.octicon-gear:before { content: '\f02f'} /*  */
+.octicon-gift:before { content: '\f042'} /*  */
+.octicon-gist:before { content: '\f00e'} /*  */
+.octicon-gist-secret:before { content: '\f08c'} /*  */
+.octicon-git-branch-create:before,
+.octicon-git-branch-delete:before,
+.octicon-git-branch:before { content: '\f020'} /*  */
+.octicon-git-commit:before { content: '\f01f'} /*  */
+.octicon-git-compare:before { content: '\f0ac'} /*  */
+.octicon-git-merge:before { content: '\f023'} /*  */
+.octicon-git-pull-request-abandoned:before,
+.octicon-git-pull-request:before { content: '\f009'} /*  */
+.octicon-globe:before { content: '\f0b6'} /*  */
+.octicon-graph:before { content: '\f043'} /*  */
+.octicon-heart:before { content: '\2665'} /* ♥ */
+.octicon-history:before { content: '\f07e'} /*  */
+.octicon-home:before { content: '\f08d'} /*  */
+.octicon-horizontal-rule:before { content: '\f070'} /*  */
+.octicon-hubot:before { content: '\f09d'} /*  */
+.octicon-inbox:before { content: '\f0cf'} /*  */
+.octicon-info:before { content: '\f059'} /*  */
+.octicon-issue-closed:before { content: '\f028'} /*  */
+.octicon-issue-opened:before { content: '\f026'} /*  */
+.octicon-issue-reopened:before { content: '\f027'} /*  */
+.octicon-jersey:before { content: '\f019'} /*  */
+.octicon-key:before { content: '\f049'} /*  */
+.octicon-keyboard:before { content: '\f00d'} /*  */
+.octicon-law:before { content: '\f0d8'} /*  */
+.octicon-light-bulb:before { content: '\f000'} /*  */
+.octicon-link:before { content: '\f05c'} /*  */
+.octicon-link-external:before { content: '\f07f'} /*  */
+.octicon-list-ordered:before { content: '\f062'} /*  */
+.octicon-list-unordered:before { content: '\f061'} /*  */
+.octicon-location:before { content: '\f060'} /*  */
+.octicon-gist-private:before,
+.octicon-mirror-private:before,
+.octicon-git-fork-private:before,
+.octicon-lock:before { content: '\f06a'} /*  */
+.octicon-logo-github:before { content: '\f092'} /*  */
+.octicon-mail:before { content: '\f03b'} /*  */
+.octicon-mail-read:before { content: '\f03c'} /*  */
+.octicon-mail-reply:before { content: '\f051'} /*  */
+.octicon-mark-github:before { content: '\f00a'} /*  */
+.octicon-markdown:before { content: '\f0c9'} /*  */
+.octicon-megaphone:before { content: '\f077'} /*  */
+.octicon-mention:before { content: '\f0be'} /*  */
+.octicon-milestone:before { content: '\f075'} /*  */
+.octicon-mirror-public:before,
+.octicon-mirror:before { content: '\f024'} /*  */
+.octicon-mortar-board:before { content: '\f0d7'} /*  */
+.octicon-mute:before { content: '\f080'} /*  */
+.octicon-no-newline:before { content: '\f09c'} /*  */
+.octicon-octoface:before { content: '\f008'} /*  */
+.octicon-organization:before { content: '\f037'} /*  */
+.octicon-package:before { content: '\f0c4'} /*  */
+.octicon-paintcan:before { content: '\f0d1'} /*  */
+.octicon-pencil:before { content: '\f058'} /*  */
+.octicon-person-add:before,
+.octicon-person-follow:before,
+.octicon-person:before { content: '\f018'} /*  */
+.octicon-pin:before { content: '\f041'} /*  */
+.octicon-plug:before { content: '\f0d4'} /*  */
+.octicon-repo-create:before,
+.octicon-gist-new:before,
+.octicon-file-directory-create:before,
+.octicon-file-add:before,
+.octicon-plus:before { content: '\f05d'} /*  */
+.octicon-primitive-dot:before { content: '\f052'} /*  */
+.octicon-primitive-square:before { content: '\f053'} /*  */
+.octicon-pulse:before { content: '\f085'} /*  */
+.octicon-question:before { content: '\f02c'} /*  */
+.octicon-quote:before { content: '\f063'} /*  */
+.octicon-radio-tower:before { content: '\f030'} /*  */
+.octicon-repo-delete:before,
+.octicon-repo:before { content: '\f001'} /*  */
+.octicon-repo-clone:before { content: '\f04c'} /*  */
+.octicon-repo-force-push:before { content: '\f04a'} /*  */
+.octicon-gist-fork:before,
+.octicon-repo-forked:before { content: '\f002'} /*  */
+.octicon-repo-pull:before { content: '\f006'} /*  */
+.octicon-repo-push:before { content: '\f005'} /*  */
+.octicon-rocket:before { content: '\f033'} /*  */
+.octicon-rss:before { content: '\f034'} /*  */
+.octicon-ruby:before { content: '\f047'} /*  */
+.octicon-screen-full:before { content: '\f066'} /*  */
+.octicon-screen-normal:before { content: '\f067'} /*  */
+.octicon-search-save:before,
+.octicon-search:before { content: '\f02e'} /*  */
+.octicon-server:before { content: '\f097'} /*  */
+.octicon-settings:before { content: '\f07c'} /*  */
+.octicon-shield:before { content: '\f0e1'} /*  */
+.octicon-log-in:before,
+.octicon-sign-in:before { content: '\f036'} /*  */
+.octicon-log-out:before,
+.octicon-sign-out:before { content: '\f032'} /*  */
+.octicon-squirrel:before { content: '\f0b2'} /*  */
+.octicon-star-add:before,
+.octicon-star-delete:before,
+.octicon-star:before { content: '\f02a'} /*  */
+.octicon-stop:before { content: '\f08f'} /*  */
+.octicon-repo-sync:before,
+.octicon-sync:before { content: '\f087'} /*  */
+.octicon-tag-remove:before,
+.octicon-tag-add:before,
+.octicon-tag:before { content: '\f015'} /*  */
+.octicon-telescope:before { content: '\f088'} /*  */
+.octicon-terminal:before { content: '\f0c8'} /*  */
+.octicon-three-bars:before { content: '\f05e'} /*  */
+.octicon-thumbsdown:before { content: '\f0db'} /*  */
+.octicon-thumbsup:before { content: '\f0da'} /*  */
+.octicon-tools:before { content: '\f031'} /*  */
+.octicon-trashcan:before { content: '\f0d0'} /*  */
+.octicon-triangle-down:before { content: '\f05b'} /*  */
+.octicon-triangle-left:before { content: '\f044'} /*  */
+.octicon-triangle-right:before { content: '\f05a'} /*  */
+.octicon-triangle-up:before { content: '\f0aa'} /*  */
+.octicon-unfold:before { content: '\f039'} /*  */
+.octicon-unmute:before { content: '\f0ba'} /*  */
+.octicon-versions:before { content: '\f064'} /*  */
+.octicon-watch:before { content: '\f0e0'} /*  */
+.octicon-remove-close:before,
+.octicon-x:before { content: '\f081'} /*  */
+.octicon-zap:before { content: '\26A1'} /* ⚡ */
diff --git a/app/assets/stylesheets/useflags.scss b/app/assets/stylesheets/useflags.scss
new file mode 100644
index 0000000..90f667d
--- /dev/null
+++ b/app/assets/stylesheets/useflags.scss
@@ -0,0 +1,20 @@
+.kk-useflag-circle {
+  cursor: pointer;
+}
+
+.kk-useflag-bubble-container {
+  text-align: center;
+  overflow: scroll;
+}
+
+.kk-useflag-listing {
+  a:link,
+  a:visited {
+    color: #333;
+  }
+}
+
+form.useflag-search {
+  margin-top: 2.5em;
+  margin-bottom: 1em;
+}