apply rot's new web design

76 files changed, 1400 insertions, 614 deletions

diff --git a/app/api/api_deprecated.rb b/app/api/api_deprecated.rb
index 9af04fb..746fe0d 100644
--- a/app/api/api_deprecated.rb
+++ b/app/api/api_deprecated.rb
@@ -48,28 +48,28 @@ class ApiDeprecated < Grape::API
       end
     end
 
-    desc "Deprecated. Use GET tweets/user_best"
+    desc "Deprecated. Use GET tweets/user_best", deprecated: true
     params_user[]
     params_pagination[]
     get "best", rabl: "tweets" do
       @tweets = paginate user.tweets.reacted.order_by_reactions
     end
 
-    desc "Deprecated. Use GET tweets/user_timeline"
+    desc "Deprecated. Use GET tweets/user_timeline", deprecated: true
     params_user[]
     params_pagination_with_ids[]
     get "timeline", rabl: "tweets" do
       @tweets = paginate_with_ids user.tweets.reacted.order_by_id
     end
 
-    desc "Deprecated. Use GET tweets/user_discoveries"
+    desc "Deprecated. Use GET tweets/user_discoveries", deprecated: true
     params_user[]
     params_pagination_with_ids[]
     get "discoveries", rabl: "tweets" do
       @tweets = paginate_with_ids(Tweet).discovered_by(user).order_by_id
     end
 
-    desc "Deprecated. Use GET tweets/user_discovered_by"
+    desc "Deprecated. Use GET tweets/user_discovered_by", deprecated: true
     params_user[]
     params_user_b[]
     params_pagination_with_ids[]
diff --git a/app/assets/fonts/aclog.eot b/app/assets/fonts/aclog.eot
new file mode 100644
index 0000000..b084556
--- /dev/null
+++ b/app/assets/fonts/aclog.eot
diff --git a/app/assets/fonts/aclog.svg b/app/assets/fonts/aclog.svg
new file mode 100644
index 0000000..e67e8e4
--- /dev/null
+++ b/app/assets/fonts/aclog.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="aclog" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
+<glyph unicode="&#xe600;" d="M853.080 309c0 0-22.408 79.148-95.508 139.396-13.316 11.62-30.64 23.396-53.272 34.712-4.404 2.2-8.74 4.284-13.044 6.312-1.26 0.592-2.504 1.168-3.756 1.748-3.204 1.484-6.376 2.916-9.52 4.308-1.172 0.516-2.348 1.044-3.512 1.552-4.132 1.792-8.224 3.528-12.244 5.164-0.392 0.16-0.768 0.3-1.156 0.46-3.66 1.48-7.264 2.888-10.824 4.248-1.184 0.452-2.356 0.888-3.528 1.328-2.936 1.092-5.832 2.148-8.696 3.164-1.016 0.36-2.040 0.728-3.044 1.080-3.732 1.296-7.408 2.536-11.008 3.7-0.6 0.192-1.18 0.368-1.776 0.56-3.048 0.972-6.040 1.9-8.992 2.78-1.068 0.32-2.124 0.632-3.18 0.936-2.652 0.776-5.256 1.512-7.828 2.22-0.828 0.228-1.668 0.468-2.488 0.688-3.284 0.88-6.5 1.712-9.64 2.488-0.664 0.164-1.3 0.308-1.956 0.468-2.516 0.608-4.988 1.188-7.408 1.732-0.928 0.208-1.84 0.412-2.752 0.608-2.328 0.508-4.6 0.988-6.832 1.436-0.632 0.128-1.28 0.264-1.908 0.388-2.784 0.548-5.484 1.052-8.104 1.516-0.628 0.112-1.224 0.208-1.84 0.316-2.032 0.348-4.012 0.676-5.94 0.976-0.752 0.116-1.488 0.232-2.224 0.344-1.976 0.296-3.892 0.572-5.748 0.82-0.42 0.056-0.86 0.12-1.272 0.176-2.236 0.292-4.368 0.552-6.42 0.784-0.52 0.060-1.004 0.108-1.512 0.164-1.556 0.168-3.060 0.32-4.5 0.456-0.284 0.028-0.604 0.064-0.884 0.088-0.024 0-0.052 0-0.076 0-15.676 1.42-24.388 1.012-24.388 1.012v108c0 30.8-19.776 40.38-43.944 21.288l-294.052-232.284 292.212-205.76c25.184-17.732 45.788-7.040 45.788 23.76v33c0 1.944-0.072 3.94-0.204 5.98l0.204 0.020v80c0 0 9.324 1.248 24.672 2.2 1.616 0.1 3.308 0.196 5.052 0.288 0.52 0.028 1.024 0.056 1.556 0.084 2.216 0.108 4.528 0.212 6.928 0.3 0.512 0.020 1.052 0.036 1.576 0.052 2 0.068 4.060 0.128 6.172 0.176 0.704 0.016 1.404 0.032 2.12 0.048 2.668 0.052 5.4 0.092 8.228 0.108 0.116 0 0.24 0 0.352 0 2.688 0.012 5.464 0 8.28-0.028 0.8-0.008 1.608-0.020 2.416-0.032 2.508-0.036 5.064-0.092 7.66-0.168 0.56-0.016 1.108-0.024 1.672-0.044 3.088-0.096 6.244-0.228 9.44-0.388 0.76-0.036 1.532-0.084 2.296-0.124 2.6-0.14 5.232-0.304 7.892-0.488 0.844-0.060 1.684-0.112 2.536-0.176 3.332-0.252 6.696-0.528 10.096-0.852 0.472-0.044 0.948-0.1 1.416-0.148 2.968-0.292 5.964-0.62 8.98-0.98 0.952-0.112 1.908-0.228 2.86-0.348 3.124-0.392 6.268-0.816 9.424-1.28 0.4-0.060 0.792-0.108 1.192-0.168 3.5-0.524 7.020-1.112 10.548-1.744 0.916-0.164 1.84-0.336 2.76-0.508 2.844-0.528 5.692-1.088 8.54-1.688 0.84-0.176 1.68-0.34 2.516-0.524 3.532-0.764 7.064-1.584 10.584-2.468 0.7-0.176 1.4-0.368 2.1-0.552 2.904-0.748 5.796-1.536 8.684-2.368 0.972-0.28 1.948-0.56 2.916-0.848 3.524-1.052 7.036-2.148 10.516-3.332 88-30 127.408-63.64 127.408-63.64 23.44-20.024 35.756-12.136 27.388 17.508z" />
+<glyph unicode="&#xe601;" d="M889 415h-95v232c0 26.4-21.6 48-48 48h-304l104.5-104h87.5c26.4 0 48-21.376 48-47.5v-128.5h-66l-0.008-0.324c-3.204 0.204-6.336 0.324-9.324 0.324h-11.668c-26.4 0-32.924-15.468-14.5-34.376l124-127.248c0 0 0.004 0 0.004-0.004l33.496-34.372 34.184 33.668c0.004 0.004 0.012 0.008 0.016 0.016l130.604 128.636c18.804 18.524 12.596 33.68-13.804 33.68zM135 481h95v-232c0-26.4 21.6-48 48-48h304l-104.5 104h-87.5c-26.4 0-48 21.376-48 47.5v128.5h66l0.008 0.324c3.204-0.204 6.336-0.324 9.324-0.324h11.668c26.4 0 32.924 15.468 14.5 34.376l-157.5 161.624-34.184-33.668c-0.004-0.004-0.012-0.008-0.016-0.016l-130.6-128.636c-18.808-18.524-12.596-33.68 13.8-33.68z" />
+<glyph unicode="&#xe602;" d="M818.424 543.2l-197.624 28.716-88.372 179.076c-11.24 22.768-29.62 22.768-40.86 0l-88.376-179.072-110.7-16.084-0.056-0.156c-1.452-0.132-2.896-0.276-4.284-0.48l-82.584-12c-25.124-3.652-30.808-21.136-12.624-38.856l143-139.4-18.14-105.772c-0.004-0.028-0.012-0.056-0.016-0.080l-15.604-90.968c-4.292-25.020 10.584-35.828 33.056-24.020l78.384 41.216c2.828 1.484 5.692 3.252 8.56 5.252l0.648-0.412 89.168 46.88 176.756-92.928c22.472-11.812 37.348-1 33.056 24.020l-33.764 196.824 71.188 69.392c0.008 0 0.008 0.008 0.016 0.008l71.8 69.996c18.18 17.712 12.5 35.2-12.628 38.848z" />
+<glyph unicode="&#xe603;" d="M868.784 669.304c-26.252-11.644-54.468-19.516-84.084-23.052 30.224 18.116 53.44 46.808 64.368 80.996-28.284-16.776-59.616-28.96-92.964-35.528-26.704 28.456-64.752 46.232-106.856 46.232-80.852 0-146.404-65.548-146.404-146.392 0-11.476 1.296-22.648 3.792-33.364-121.668 6.104-229.544 64.388-301.748 152.96-12.6-21.62-19.82-46.768-19.82-73.6 0-50.788 25.844-95.6 65.128-121.852-24 0.76-46.572 7.344-66.312 18.312-0.008-0.612-0.012-1.224-0.012-1.84 0-70.928 50.464-130.1 117.436-143.548-12.284-3.344-25.22-5.132-38.572-5.132-9.432 0-18.604 0.916-27.544 2.624 18.632-58.16 72.696-100.492 136.756-101.672-50.104-39.264-113.232-62.668-181.82-62.668-11.816 0-23.468 0.692-34.92 2.044 64.788-41.536 141.74-65.772 224.416-65.772 269.28 0 416.532 223.076 416.532 416.532 0 6.348-0.144 12.66-0.424 18.936 28.604 20.64 53.428 46.424 73.052 75.784z" />
+<glyph unicode="&#xe604;" d="M511.984 805.132c-202.188 0-366.152-163.94-366.152-366.18 0-161.788 104.908-299.036 250.432-347.46 18.308-3.332 24.992 7.948 24.992 17.648 0 8.7-0.32 31.744-0.492 62.304-101.86-22.128-123.348 49.080-123.348 49.080-16.648 42.28-40.656 53.564-40.656 53.564-33.248 22.704 2.512 22.264 2.512 22.264 36.748-2.592 56.084-37.764 56.084-37.764 32.668-55.924 85.7-39.772 106.568-30.42 3.328 23.664 12.784 39.82 23.248 48.956-81.312 9.26-166.792 40.652-166.792 180.98 0 39.976 14.272 72.664 37.692 98.256-3.764 9.26-16.332 46.496 3.588 96.908 0 0 30.744 9.844 100.696-37.536 29.204 8.124 60.528 12.184 91.668 12.328 31.108-0.144 62.412-4.204 91.672-12.328 69.916 47.384 100.608 37.536 100.608 37.536 19.972-50.412 7.396-87.644 3.64-96.908 23.444-25.596 37.624-58.284 37.624-98.256 0-140.68-85.608-171.632-167.188-180.676 13.152-11.328 24.856-33.676 24.856-67.832 0-48.956-0.44-88.42-0.44-100.452 0-9.792 6.584-21.16 25.18-17.604 145.388 48.516 250.188 185.672 250.188 347.416 0.004 202.236-163.936 366.176-366.18 366.176z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/app/assets/fonts/aclog.ttf b/app/assets/fonts/aclog.ttf
new file mode 100644
index 0000000..21f59b7
--- /dev/null
+++ b/app/assets/fonts/aclog.ttf
diff --git a/app/assets/fonts/aclog.woff b/app/assets/fonts/aclog.woff
new file mode 100644
index 0000000..aec25ae
--- /dev/null
+++ b/app/assets/fonts/aclog.woff
diff --git a/app/assets/images/apple-touch-icon-precomposed.png b/app/assets/images/apple-touch-icon-precomposed.png
new file mode 100644
index 0000000..3843725
--- /dev/null
+++ b/app/assets/images/apple-touch-icon-precomposed.png
diff --git a/app/assets/images/bird_gray_16.png b/app/assets/images/bird_gray_16.png
deleted file mode 100644
index 8cf5afa..0000000
--- a/app/assets/images/bird_gray_16.png
+++ /dev/null
diff --git a/app/assets/images/favicon.ico b/app/assets/images/favicon.ico
new file mode 100644
index 0000000..9a4f651
--- /dev/null
+++ b/app/assets/images/favicon.ico
diff --git a/app/assets/images/favorite.png b/app/assets/images/favorite.png
deleted file mode 100644
index d4c53be..0000000
--- a/app/assets/images/favorite.png
+++ /dev/null
diff --git a/app/assets/images/feature_1.png b/app/assets/images/feature_1.png
new file mode 100644
index 0000000..fa22b31
--- /dev/null
+++ b/app/assets/images/feature_1.png
diff --git a/app/assets/images/feature_2.png b/app/assets/images/feature_2.png
new file mode 100644
index 0000000..ca276e5
--- /dev/null
+++ b/app/assets/images/feature_2.png
diff --git a/app/assets/images/feature_3.png b/app/assets/images/feature_3.png
new file mode 100644
index 0000000..19c7270
--- /dev/null
+++ b/app/assets/images/feature_3.png
diff --git a/app/assets/images/loading.gif b/app/assets/images/loading.gif
index 5b33f7e..84c9086 100644
--- a/app/assets/images/loading.gif
+++ b/app/assets/images/loading.gif
diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
new file mode 100644
index 0000000..bb50607
--- /dev/null
+++ b/app/assets/images/logo.png
diff --git a/app/assets/images/missing_profile_image.png b/app/assets/images/missing_profile_image.png
deleted file mode 100644
index 3d1e0f9..0000000
--- a/app/assets/images/missing_profile_image.png
+++ /dev/null
diff --git a/app/assets/images/notification_profile_image.png b/app/assets/images/notification_profile_image.png
deleted file mode 100644
index 9974304..0000000
--- a/app/assets/images/notification_profile_image.png
+++ /dev/null
diff --git a/app/assets/images/rails.png b/app/assets/images/rails.png
deleted file mode 100644
index d5edc04..0000000
--- a/app/assets/images/rails.png
+++ /dev/null
diff --git a/app/assets/images/reply.png b/app/assets/images/reply.png
deleted file mode 100644
index 5493c72..0000000
--- a/app/assets/images/reply.png
+++ /dev/null
diff --git a/app/assets/images/retweet.png b/app/assets/images/retweet.png
deleted file mode 100644
index 94e3595..0000000
--- a/app/assets/images/retweet.png
+++ /dev/null
diff --git a/app/assets/images/tile-image.png b/app/assets/images/tile-image.png
new file mode 100644
index 0000000..5bf0715
--- /dev/null
+++ b/app/assets/images/tile-image.png
diff --git a/app/assets/javascripts/_define_application.js b/app/assets/javascripts/_define_application.js
new file mode 100644
index 0000000..db8f8ce
--- /dev/null
+++ b/app/assets/javascripts/_define_application.js
@@ -0,0 +1,3 @@
+if (this.Application === undefined) {
+    this.Application = {};
+}
diff --git a/app/assets/javascripts/_html-autoload.js b/app/assets/javascripts/_html-autoload.js
index 5003935..440488f 100644
--- a/app/assets/javascripts/_html-autoload.js
+++ b/app/assets/javascripts/_html-autoload.js
@@ -7,6 +7,7 @@
             content: $("#content"),
             link: $("link[rel=next]"),
             onStart: function() { },
+            onReceived: function(obj) { },
             onComplete: function() { }
         };
         opts = $.extend({}, defaults, _opts);
@@ -18,7 +19,9 @@
                 opts.onStart();
                 loading = true;
                 $.getJSON(opts.link.attr("href"), function(json, status) {
-                    opts.content.append(json.html);
+                    var obj = $(json.html)
+                    opts.onReceived(obj);
+                    opts.content.append(obj);
                     opts.link.attr("href", json.next_url);
                     loading = false;
                     opts.onComplete();
diff --git a/app/assets/javascripts/apidocs.js b/app/assets/javascripts/apidocs.js
index fa17510..0ed942d 100644
--- a/app/assets/javascripts/apidocs.js
+++ b/app/assets/javascripts/apidocs.js
@@ -1,12 +1,14 @@
-$(function() {
-    var loading = $("#example_request_loading");
-    if (loading) {
-        var code = loading.parent();
-        $.ajax($("#example_request_uri").text()).done(function(data) {
-            code.text(JSON.stringify(data, null, 2));
-        }).fail(function() {
-            code.text("failed to load example....");
-        });
+Application.apidocs = {
+    endpoint: function() {
+        var loading = $("#example_request_loading");
+        if (loading) {
+            var code = loading.parent();
+            $.ajax($("#example_request_uri").text()).done(function(data) {
+                code.text(JSON.stringify(data, null, 2));
+            }).fail(function() {
+                code.text("failed to load example....");
+            });
+        }
     }
-});
+};
 
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index a28e46c..ac13e17 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -1,3 +1,18 @@
 //= require jquery
 //= require jquery_ujs
+//= require bootstrap
 //= require _widgets
+//= require _define_application
+//= require_tree .
+
+$(function() {
+    var controller = $("body").data("controller");
+    var action = $("body").data("action");
+
+    var ac = Application[controller];
+    if (ac !== undefined) {
+        if (ac["_"] !== undefined) { ac["_"](); }
+        if (ac[action] !== undefined) { ac[action](); }
+    }
+});
+
diff --git a/app/assets/javascripts/tweets.js b/app/assets/javascripts/tweets.js
index 69d8cd5..d838f3b 100644
--- a/app/assets/javascripts/tweets.js
+++ b/app/assets/javascripts/tweets.js
@@ -1,25 +1,31 @@
-//= require _html-autoload
-$(function() {
-    var format_tweet = function() {
-        $("time").each(
-            function() {
-                $(this).text(new Date($(this).attr("datetime"))
-                             .toLocaleString())
-            });
-    };
+Application.tweets = {
+    _: function() {
+        if ($("#statuses")) {
+            var format_tweet = function(d) {
+                $("time", d).each(
+                    function() {
+                        $(this).text(new Date($(this).attr("datetime"))
+                                     .toLocaleString());
+                    });
+            };
+            format_tweet($(".statuses"));
 
-    $.autopager({
-        content: $(".tweets"),
-        link: $("link[rel=next]"),
-        onStart: function() {
-            $(".loading").show();
-        },
-        onComplete: function() {
-            $(".loading").hide();
-            format_tweet();
+            if ($("link[rel=next]")) {
+                $.autopager({
+                    content: $(".statuses"),
+                    link: $("link[rel=next]"),
+                    onStart: function() {
+                        $(".loading").show();
+                    },
+                    onReceived: function(obj) {
+                        format_tweet(obj);
+                    },
+                    onComplete: function() {
+                        $(".loading").hide();
+                    }
+                });
+            }
         }
-    });
-
-    format_tweet();
-});
+    }
+};
 
diff --git a/app/assets/stylesheets/_sidebar.css.sass b/app/assets/stylesheets/_sidebar.css.sass
deleted file mode 100644
index 8222b73..0000000
--- a/app/assets/stylesheets/_sidebar.css.sass
+++ /dev/null
@@ -1,23 +0,0 @@
-@import "bootstrap/mixins"
-
-.sidebar
-  margin-top: 20px
-  .screen_name
-    text-align: center
-    font-size: larger
-    margin: 10px 0
-  .avatar
-    text-align: center
-  .records
-    list-style: none
-      margin: 0 0 20px
-    li
-      @include clearfix
-      border-top: 1px solid #dddddd
-      span
-        display: block
-        float: left
-        line-height: 20px
-        padding: 4px 5px
-      .data
-        float: right
diff --git a/app/assets/stylesheets/about.css.sass b/app/assets/stylesheets/about.css.sass
deleted file mode 100644
index 13ef3fa..0000000
--- a/app/assets/stylesheets/about.css.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-@import url(http://fonts.googleapis.com/css?family=Lato:300)
-
-.index
-  font-family: "Lato", "Ubuntu", "Helvetica Neue", Arial, sans-serif
-  h1
-    margin: 200px auto 120px
-    font-size: 120px
-  p
-    margin: 30px
-    font-size: larger
-
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
deleted file mode 100644
index 93b5e99..0000000
--- a/app/assets/stylesheets/application.css.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- *= require_self
- *= require_tree .
- */
-@import "bootstrap"
-
-body
-  font-family: "Ubuntu", "Helvetica Neue", Arial, sans-serif
-a
-  text-decoration: none
-  color: #3b5998
-h1
-  font-size: 32px
-body > .container
-  margin-bottom: 30px
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
new file mode 100644
index 0000000..b648e46
--- /dev/null
+++ b/app/assets/stylesheets/application.css.scss
@@ -0,0 +1,883 @@
+/* aclog CSS */

+@import url(http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css);

+@import url(http://fonts.googleapis.com/css?family=Raleway:400,800);

+

+/* ================ Icon ================ */

+

+@font-face {

+	font-family: 'aclog';

+	src: font-url('aclog.eot?ypfutt');

+	src: font-url('aclog.eot?#iefixypfutt') format('embedded-opentype'),

+		 font-url('aclog.woff?ypfutt') format('woff'),

+		 font-url('aclog.ttf?ypfutt') format('truetype'),

+		 font-url('aclog.svg?ypfutt#aclog') format('svg');

+	font-weight: normal;

+	font-style: normal;

+}

+

+.aclogicon {

+	font-family: 'aclog';

+	speak: none;

+	font-style: normal;

+	font-weight: normal;

+	font-variant: normal;

+	text-transform: none;

+	line-height: 1;

+	-webkit-font-smoothing: antialiased;

+	-moz-osx-font-smoothing: grayscale;

+}

+

+.aclogicon-reply:before {

+	content: "\e600";

+}

+.aclogicon-retweet:before {

+	content: "\e601";

+}

+.aclogicon-fav:before {

+	content: "\e602";

+}

+.aclogicon-twitter:before {

+	content: "\e603";

+}

+.aclogicon-github:before {

+	content: "\e604";

+}

+

+/* ================ Base ================ */

+

+body {

+	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

+}

+

+body, .navbar {

+	background-color: #e7e3df;

+}

+

+a, .btn.btn-link {

+	color: #d09827;

+}

+

+a:hover,

+a:focus,

+.btn.btn-link:hover,

+.btn.btn-link:focus {

+	color: #9d7015;

+}

+

+h1 {

+	margin: 15px 0;

+	font-size: 42px;

+	font-family: Raleway, Helvetica Neue, Helvetica, Arial, sans-serif;

+	font-weight: 400;

+}

+

+h2 {

+	font-size: 24px;

+}

+

+h3 {

+	font-size: 18px;

+}

+

+code, pre {

+	background: #eeebe8;

+}

+

+pre {

+	border-color: #cecac7;

+}

+

+::selection {

+	color: #fff;

+	background-color: #edc63c;

+}

+

+::-moz-selection {

+	color: #fff;

+	background-color: #eea236;

+}

+

+.alert-aclog {

+	color: #8b773e;

+	background-color: #eee182;

+	border-color: #edc63c;

+}

+

+.navbar-brand {

+	font-size: 24px;

+	font-family: Raleway, Helvetica Neue, Helvetica, Arial, sans-serif;

+	font-weight: 600;

+}

+

+.navbar-brand:hover,

+.navbar-brand:focus {

+	color: #333;

+}

+

+.navbar .container {

+    padding: 5px 10px;

+	border-bottom: 1px solid #ccc8c5;

+}

+

+.navbar-nav > li > a,

+.navbar-brand {

+	padding-top: 0;

+    padding-bottom: 0;

+	color: #777;

+    height: 44px;

+    line-height: 44px;

+    transition: all .1s ease;

+}

+

+.navbar-nav > li > a {

+	font-family: Raleway, Helvetica Neue, Helvetica, Arial, sans-serif;

+	text-transform: uppercase;

+}

+

+.navbar-nav > li > a:hover,

+.navbar-nav > .active > a,

+.navbar-nav > .active > a:hover,

+.navbar-nav > .active > a:focus,

+.navbar-nav > .open > a,

+.navbar-nav > .open > a:hover,

+.navbar-nav > .open > a:focus {

+	color: #333;

+    background-color: #cecac7;

+}

+

+.navbar-nav > li > a:focus,

+.navbar-nav > li > a:focus {

+	background-color: transparent;

+}

+

+.navbar-nav .open .dropdown-menu {

+    padding: 0;

+	background-color: #444;

+    border-radius: 0;

+}

+

+.navbar-nav .open .dropdown-menu > li > a {

+    padding: 10px 15px;

+    color: #9d9d9d;

+    transition: all .1s ease;

+}

+

+.navbar-nav .open .dropdown-menu > li > a:hover,

+.navbar-nav .open .dropdown-menu > li > a:focus {

+    color: #fff;

+    background-color: #222;

+}

+

+.dropdown-menu .divider {

+    margin: 0;

+    background-color: #666;

+}

+

+.navbar-toggle {

+	border-color: #777;

+    margin-top: 5px;

+    margin-bottom: 5px;

+}

+

+.navbar-toggle:hover,

+.navbar-toggle:focus {

+	background-color: #ccc;

+}

+

+.navbar-toggle .icon-bar {

+	background-color: #777;

+}

+

+.navbar-nav .open form.dropdown-menu {

+	min-width: 240px;

+	padding: 15px;

+}

+

+.navbar-nav .open form.dropdown-menu input {

+	color: #ccc;

+	background-color: #222;

+	border: none;

+}

+

+.form-control:focus {

+	border-color: #edc63c;

+	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(237,198,60,.6);

+	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(237,198,60,.6);

+}

+

+.btn:focus,

+.navbar-toggle:focus {

+	outline-color: #edc63c;

+}

+

+.btn {

+	padding-left: 30px;

+	padding-right: 30px;

+	color: #fff;

+	background-color: #edc63c;

+	border-color: #f0ad4e;

+}

+

+.btn:hover, .btn:focus,

+.btn:hover, .btn:active {

+	color: #fff;

+	background-color: #f0ad4e;

+	border-color: #eea236;

+}

+

+.btn.btn-link {

+	padding-left: 12px;

+	padding-right: 12px;

+	background-color: transparent;

+	border: none;

+	outline: none;

+}

+

+.navbar-nav .signup {

+	margin: 4px 15px 0;

+	height: auto;

+	background-color: #f0f0f0;

+	border: 1px solid #ccc;

+	border-radius: 4px;

+	line-height: 36px;

+	text-align: center;

+}

+

+.navbar-nav .signup:hover {

+	background-color: #ddd;

+	border-color: #bbb;

+}

+

+.navbar-nav .signup:active {

+	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);

+	box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);

+}

+

+.navbar-nav .open form.dropdown-menu .btn {

+	padding-left: 12px;

+	padding-right: 12px;

+}

+

+.list-group-item {

+	color: #777;

+	background-color: transparent;

+	border-color: #cecac7;

+	border-width: 0 0 1px 0;

+}

+

+.list-group-item:first-child,

+.list-group-item:last-child {

+	border-radius: 0;

+}

+

+a.list-group-item:hover,

+a.list-group-item:focus {

+	color: #333;

+	background-color: #cecac7;

+}

+

+a.list-group-item.active,

+a.list-group-item.active:hover,

+a.list-group-item.active:focus {

+	color: #fff;

+	background-color: #edc63c;

+	border-bottom-color: #f0ad4e;

+	border-width: 0 0 1px 0;

+}

+

+.list-group-col {

+	float: left;

+	width: 50%;

+}

+

+.list-group-col:first-child .list-group-item {

+	border-right: 1px solid #cecac7;

+}

+

+.list-group-col:first-child .list-group-item.active {

+	border-right: none;

+}

+

+.list-group .list-group-head {

+	display: block;

+	padding: 10px 15px 5px;

+	color: #aaa;

+	font-size: 12px;

+	font-weight: bold;

+	text-transform: uppercase;

+	border-bottom: 2px solid #cecac7;

+}

+

+.list-group.list-group-scroll {

+	max-height: 300px;

+	overflow: scroll;

+	overflow-x: hidden;

+	overflow-y: scroll;

+}

+

+.table>thead>tr>th,

+.table>tbody>tr>th,

+.table>tfoot>tr>th,

+.table>thead>tr>td,

+.table>tbody>tr>td,

+.table>tfoot>tr>td {

+	border-bottom: solid 1px;

+	border-color: #cecac7;

+}

+

+.api-params th {

+	font-weight: bold;

+}

+

+.api-params th small {

+	display: block;

+	color: #777;

+	font-weight: normal;

+}

+

+.api-params b {

+	font-weight: bold

+}

+

+.deprecated,

+.deprecated:hover,

+.deprecated:focus  {

+	text-decoration: line-through !important;

+}

+

+.error-page {

+	text-align: center;

+}

+

+.error-page h1 {

+	font-size: 100px;

+}

+

+.error-page p {

+	color: #777;

+	font-size: 24px;

+}

+

+@media (min-width: 768px) {

+	h1 {

+		margin-top: 0;

+	}

+

+	h1.setting {

+		margin: 0;

+		text-align: right;

+	}

+

+    .navbar .container {

+        padding-left: 0;

+        padding-right: 0;

+    }

+

+    .navbar-nav.navbar-right:last-child {

+	    margin-right: 0;

+    }

+

+	.navbar-nav .signup {

+		margin-left: 0;

+		margin-right: 0;

+	}

+

+	.list-group.list-group-scroll {

+		max-height: none;

+		overflow: visible;

+	}

+

+	.error-page h1 {

+		font-size: 150px;

+	}

+}

+

+/* ================ Front Page ================ */

+

+.front-hero {

+	padding-top: 75px;

+	padding-bottom: 50px;

+	font-size: 18px;

+	text-align: center;

+}

+

+.front-hero img {

+	max-width: 100%;

+	height: auto;

+}

+

+.front-hero h1 {

+	margin: 0 0 50px;

+	font-size: 64px;

+	font-weight: 600;

+}

+

+.front-hero p {

+	margin-bottom: 0;

+}

+

+.front-feature,

+.front-feature-right {

+	padding-top: 100px;

+	padding-bottom: 100px;

+	color: #777;

+	text-align: center;

+	overflow: hidden;

+}

+

+.front-feature {

+	background-color: #fdfdfd;

+}

+

+.front-feature-right {

+	background-color: #e7e3df;

+}

+

+.front-feature h1,

+.front-feature-right h1 {

+	margin-bottom: 30px;

+	color: #555;

+	font-size: 40px;

+	text-transform: uppercase;

+}

+

+.front-feature img,

+.front-feature-right img {

+	max-width: 100%;

+	height: auto;

+}

+

+.front-feature-misc {

+	color: #777;

+	padding-top: 50px;

+	padding-bottom: 50px;

+	background-color: #e7e3df;

+	text-align: center;

+}

+

+.front-feature-misc .row > div {

+	margin-bottom: 45px;

+}

+

+.front-feature-misc .row > div:last-child {

+	margin-bottom: 0;

+}

+

+.front-feature-misc p {

+	margin: 0 auto;

+	width: 50%;

+}

+

+.front-feature-misc h1 {

+	display: inline-block;

+	margin: 0 auto 15px;

+	font-size: 24px;

+	text-transform: uppercase;

+}

+

+.front-footer {

+	padding-top: 30px;

+	padding-bottom: 30px;

+	color: #777;

+	background-color: #444;

+	font-size: 12px;

+	text-align: center;

+	border-top: 5px solid #edc63c;

+}

+

+.front-footer p {

+	margin-bottom: 30px;

+}

+

+.front-footer p:last-child {

+	margin-bottom: 0;

+}

+

+.front-footer a.aclogicon {

+	display: inline-block;

+	margin-right: 15px;

+	padding: 2px;

+	color: #777;

+	font-size: 28px;

+	text-decoration: none;

+	border: 2px solid #777;

+	border-radius: 50%;

+	transition: all .25s ease;

+}

+

+.front-footer a.aclogicon:last-child {

+	margin-right: 0;

+}

+

+.front-footer a.aclogicon:hover {

+	color: #edc63c;

+	border-color: #edc63c;

+}

+

+@media (min-width: 768px) {

+	.front-hero img {

+		max-width: none;

+	}

+

+	.front-feature {

+		text-align: left;

+	}

+

+	.front-feature-right {

+		text-align: right;

+	}

+

+	.front-feature img,

+	.front-feature-right img {

+		max-width: none;

+	}

+

+	.front-feature p,

+	.front-feature-misc p {

+		padding: 0;

+	}

+

+	.front-feature-misc p {

+		width: 75%;

+	}

+

+	.front-feature-misc .row > div {

+		margin-bottom: 0;

+	}

+}

+

+/* ================ Sidebar ================ */

+

+.sidebar h1 {

+	margin-top: 0;

+	font-size: 32px;

+}

+

+.sidebar p {

+	text-align: center;

+	margin-bottom: 5px;

+	vertical-align: top;

+}

+

+.sidebar a.aclogicon {

+	color: #999;

+	font-size: 20px;

+}

+

+.sidebar a.aclogicon:hover {

+	color: #333;

+	text-decoration: none;

+}

+

+.sidebar ul.records {

+	list-style: none;

+	padding-left: 0;

+	margin-bottom: 30px;

+}

+

+.sidebar ul.records li {

+	padding: 5px 15px;

+	border-bottom: 1px solid #ccc;

+}

+

+.sidebar ul.records li span {

+	float: left;

+	padding-top: 4px;

+}

+

+.sidebar ul.records li span.data {

+	padding-top: 0;

+	float: right;

+	font-size: 18px;

+	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

+}

+

+.sidebar ul.records li span.data span {

+	float: none;

+	padding-left: 7px;

+	color: #999;

+	font-size: 14px;

+}

+

+.sidebar-list {

+	margin-left: 0;

+}

+

+ul.records li:before,

+ul.records li:after {

+	display: table;

+	content: " ";

+}

+

+ul.records li:after {

+	clear: both;

+}

+

+/* ================ Status ================ */

+

+.status {

+	margin-top: 0;

+	margin-bottom: 15px;

+	background-color: #fff;

+	border-radius: 5px;

+	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.2);

+	box-shadow: 0 1px 5px rgba(0,0,0,0.2);

+	transition: all ease-out 0.4s;

+}

+

+.status.loaded {

+	margin-top: 100px;

+	opacity: .2;

+}

+

+.status ul {

+	margin: 0;

+	padding: 0;

+	list-style: none;

+}

+

+.status-tweet {

+	padding: 15px 15px 10px 15px;

+	position: relative;

+}

+

+.status-user {

+	display: block;

+	position: absolute;

+	width: 48px;

+}

+

+.status-head {

+	margin-left: 68px;

+}

+

+.status-content a img {

+	opacity: 0.3;

+}

+

+.status-content a:hover img {

+	opacity: 0.7;

+}

+

+.status-head a,

+.status-foot a {

+	color: #999;

+}

+

+.status-head a:hover,

+.status-foot a:hover {

+	color: #333;

+	text-decoration: none;

+}

+

+.status-head .time {

+	display: block;

+	margin-top: 2px;

+	font-size: 12px;

+}

+

+.status-head .time a.source {

+	display: inline-block;

+	margin-left: 5px;

+	font-size: 20px;

+	vertical-align: bottom;

+}

+

+.status-text {

+	margin: 15px 0;

+	font-size: 18px;

+	word-wrap: break-word;

+}

+

+.status-foot a.source {

+	margin: 5px 0;

+	float: left;

+	font-size: 12px;

+}

+

+.status-foot ul {

+	float: right;

+}

+

+.status-foot ul li {

+	display: block;

+	float: left;

+}

+

+.status-foot ul li a {

+	margin-right: 5px;

+	padding: 5px;

+	font-size: 20px;

+}

+

+.status-foot ul li a:last-child {

+	margin-right: 0;

+}

+

+.status-responses {

+	clear: both;

+	padding: 10px 15px 15px 15px;

+	border-top: 1px solid #ddd;

+}

+

+.status-responses dl {

+	position: relative;

+	margin: 10px 0 0 0;

+	clear: both;

+}

+

+.status-responses dt {

+	position: absolute;

+	top: 5px;

+	left: 10px;

+	font-size: 10px;

+	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

+	text-transform: uppercase;

+	text-align: right;

+}

+

+.status-responses dt span {

+	display: block;

+	font-size: 16px;

+	font-weight: bold;

+}

+

+.status-responses dt a {

+	color: #777;

+	text-decoration: none;

+}

+

+.status-responses dt a:hover {

+	color: #333;

+}

+

+.status-responses dd {

+	margin-left: 68px;

+}

+

+.status-responses dd.timeline {

+	max-height: 88px;

+	overflow: hidden;

+}

+

+.status-responses dd li {

+	float: left;

+    display: block;

+}

+

+.status-responses dd img {

+	width: 44px;

+	height: 44px;

+}

+

+p.loading {

+	margin: 30px 0;

+	text-align: center;

+}

+

+.status.status-reply {

+	background-color: transparent;

+	border: 1px solid #cecac7;

+	-webkit-box-shadow: none;

+	box-shadow: none;

+}

+

+.status.status-reply .status-text {

+	font-size: 14px;

+}

+

+.status-tweet:before,

+.status-head:before,

+.status-foot:before,

+.status-responses:before,

+.status-responses ul:before,

+.status-tweet:after,

+.status-head:after,

+.status-foot:after,

+.status-responses:after,

+.status-responses ul:after {

+	display: table;

+	content: " ";

+}

+

+.status-tweet:after,

+.status-head:after,

+.status-foot:after,

+.status-responses:after,

+.status-responses ul:after {

+    clear: both;

+}

+

+@media (min-width: 768px) {

+	.status-content {

+		margin-left: 68px;

+	}

+

+	.status-head {

+		margin-left: 0;

+	}

+

+	.status-head .user {

+		float: left;

+	}

+

+	.status-head .time {

+		float: right;

+	}

+

+	.status-head .time {

+		margin-top: 0;

+	}

+

+	.status-responses dd.timeline {

+		max-height: none;

+	}

+

+	.status-responses dd img {

+		width: 42px;

+		height: 42px;

+	}

+}

+

+@media (min-width: 1200px) {

+	.status-responses dd img {

+		width: 44px;

+		height: 44px;

+	}

+}

+

+/* ================ User list ================ */

+

+ul.user-list {

+	padding: 15px 0;

+	padding-left: 0;

+	list-style: none;

+}

+

+ul.user-list li {

+	display: inline-block;

+}

+

+ul.user-list img,

+ul.user-list span {

+	display: block;

+	margin-bottom: 5px;

+}

+

+ul.user-list span {

+	margin-bottom: 0;

+	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

+}

+

+ul.user-list a {

+	display: block;

+	padding: 10px 20px;

+	color: #333;

+	font-size: 18px;

+	text-decoration: none;

+	text-align: right;

+}

+

+ul.user-list a:hover {

+	background-color: #cecac7;

+}

diff --git a/app/assets/stylesheets/tweets.css.sass b/app/assets/stylesheets/tweets.css.sass
deleted file mode 100644
index da01da3..0000000
--- a/app/assets/stylesheets/tweets.css.sass
+++ /dev/null
@@ -1,118 +0,0 @@
-@import "bootstrap/mixins"
-
-.tweets
-  width: 572px
-  .tweet
-    margin: 15px 0
-    .content
-      overflow: hidden
-      background: #ffffff
-      border-top: 1px solid #c1c5cb
-      padding: 15px
-      .left
-        float: left
-        width: 60px
-        .avatar
-          img
-            width: 48px
-            height: 48px
-        ul.actions
-          li
-            padding: 0
-            margin: 0
-          li.twitter
-            a
-              float: left
-              img
-                width: 16px
-                height: 16px
-                vertical-align: bottom
-      .tweet_content_fix
-        float: left
-        width: 0
-        height: 85px
-      .tweet_content
-        float: left
-        width: 473px
-        .user
-          padding: 0 5px 15px
-          color: #666666
-          a
-            color: #666666
-          .name
-            font-size: 14px
-          .screen_name
-            font-size: 12px
-          .in_reply_to
-            float: right
-            font-size: 12px
-        .text
-          font-size: 18px
-          line-height: 25px
-          padding: 0 5px 15px
-          word-wrap: break-word
-          .quiet
-            font-size: 14px
-            color: #999999
-            line-height: inherit
-        .meta
-          padding: 0 5px
-          color: #666666
-          font-size: 12px
-          span
-            margin: 0 2px
-          .twitter_bird
-            display: block
-            float: left
-            img
-              vertical-align: top
-              margin-top: 1px
-          .created_at
-            display: block
-            float: left
-          .source
-            display: block
-            float: right
-    .stats
-      border-top: 1px solid #c1c5cb
-      background: #ffffff
-      padding: 15px
-      dl
-        @include clearfix()
-        margin: 0 0 3px 0
-        dt
-          float: left
-          text-align: left
-          width: 60px
-          .count, .type
-            color: #666666
-            display: block
-          .count
-            font-weight: bold
-            font-size: 14px
-          .type
-            font-weight: normal
-            font-size: 10px
-            text-transform: uppercase
-          .full
-            font-weight: normal
-            font-size: 9px
-        dd
-          float: left
-          margin: 0
-          ul
-            @include clearfix()
-            margin: 0
-            width: 480px
-            li
-              float: left
-              padding: 0
-              width: 48px
-              height: 48px
-              img
-                width: 48px
-                height: 48px
-                vertical-align: bottom
-.loading
-  margin: 30px
-  display: none
diff --git a/app/assets/stylesheets/users.css.sass b/app/assets/stylesheets/users.css.sass
deleted file mode 100644
index 38e0772..0000000
--- a/app/assets/stylesheets/users.css.sass
+++ /dev/null
@@ -1,28 +0,0 @@
-.users
-  ul
-    padding: 0
-    margin: 0
-    li
-      width: 48px
-      margin: 12px
-      padding: 0
-      color: #666666
-      a
-        color: inherit
-        &:hover
-          text-decoration: inherit
-      .avatar
-        display: block
-        margin-bottom: 6px
-        img
-          width: 48px
-          height: 48px
-      .count, .type
-        display: block
-      .count
-        font-weight: bold
-        font-size: 14px
-      .type
-        font-weight: normal
-        font-size: 10px
-        text-transform: uppercase
diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb
index 77d6194..5e60063 100644
--- a/app/controllers/about_controller.rb
+++ b/app/controllers/about_controller.rb
@@ -2,10 +2,4 @@ class AboutController < ApplicationController
   def index
     render layout: "index"
   end
-
-  def about
-  end
-
-  def api
-  end
 end
diff --git a/app/controllers/errors_controller.rb b/app/controllers/errors_controller.rb
index 112e2d3..8328388 100644
--- a/app/controllers/errors_controller.rb
+++ b/app/controllers/errors_controller.rb
@@ -7,28 +7,19 @@ class ErrorsController < ApplicationController
 
     case @exception
     when OAuth::Unauthorized
-      # /i/callback
+      # only /i/callback: when Cancel pressed on Twitter's OAuth
       redirect_to root_path
-    when Aclog::Exceptions::LoginRequired
+    when Aclog::Exceptions::LoginRequired,
+         Aclog::Exceptions::UserProtected,
+         Aclog::Exceptions::AccountPrivate
       @status = 403
-      @message = t("error.login_required")
-    when Aclog::Exceptions::OAuthEchoUnauthorized
-      @status = 401
-      @message = t("error.oauth_echo_unauthorized")
+      @message = t("error.forbidden")
     when ActionController::RoutingError,
          ActiveRecord::RecordNotFound,
-         ActionView::MissingTemplate
+         ActionView::MissingTemplate,
+         Aclog::Exceptions::UserNotRegistered
       @status = 404
-      @message = t("error.routing_error")
-    when Aclog::Exceptions::UserNotRegistered
-      @status = 404
-      @message = t("error.user_not_registered")
-    when Aclog::Exceptions::UserProtected
-      @status = 403
-      @message = t("error.user_protected")
-    when Aclog::Exceptions::AccountPrivate
-      @status = 403
-      @message = t("error.account_private")
+      @message = t("error.not_found")
     else
       @status = 500
       @message = "#{t("error.internal_error")}: #{@exception.class}"
diff --git a/app/controllers/settings_controller.rb b/app/controllers/settings_controller.rb
index 967b54c..ca30d46 100644
--- a/app/controllers/settings_controller.rb
+++ b/app/controllers/settings_controller.rb
@@ -1,6 +1,5 @@
 class SettingsController < ApplicationController
   before_action :set_account
-  layout "index"
 
   def index
   end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 3d5eedd..479c9c9 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -7,20 +7,12 @@ module ApplicationHelper
     end
   end
 
-  def caption(text)
-    content_for :caption do
-      if text.is_a? Symbol
-        content_for(text)
-      else
-        text
-      end
+  def link_to_with_active(name, options = {}, html_options = {}, &block)
+    if current_page?(options)
+      html_options[:class] = (html_options[:class].to_s + " active").strip
     end
-  end
 
-  def sidebar(name)
-    content_for :sidebar do
-      render "shared/sidebar/#{name}"
-    end
+    link_to name, options, html_options, &block
   end
 
   # utf8, form
diff --git a/app/helpers/tweets_helper.rb b/app/helpers/tweets_helper.rb
index 704c28f..18c6097 100644
--- a/app/helpers/tweets_helper.rb
+++ b/app/helpers/tweets_helper.rb
@@ -13,9 +13,9 @@ module TweetsHelper
     text.gsub(/\r\n|\r|\n/, "<br />").html_safe
   end
 
-  def link_to_source_text(source)
+  def link_to_source_text(source, *args)
     if /^<a href="(.+?)" rel="nofollow">(.+?)<\/a>/ =~ source
-      link_to $2, $1
+      link_to $2, $1, *args
     else
       source
     end
diff --git a/app/views/about/about.html.haml b/app/views/about/about.html.haml
deleted file mode 100644
index f610ada..0000000
--- a/app/views/about/about.html.haml
+++ /dev/null
@@ -1,23 +0,0 @@
-- title "about aclog"
-- caption :title
-- sidebar :i
-%p
-  aclog は
-  = link_to "Twitter", "https://twitter.com"
-  に投稿されたツイート、またそれらのツイートのお気に入り登録・リツイートを収集し見やすい形で表示することができるサービスです。
-%p
-  %h3 特長
-  %ul
-    %li お気に入り登録・リツイートはすべてリアルタイムに収集されます。Streaming API を利用しています。
-    %li ツイートを非公開にしている方でもご利用いただけます。あなたとあなたのフォロワーのみが閲覧可能になります。
-    %li RSS に対応しています。ご利用の RSS リーダーで閲覧することも可能です。
-    %li JSON 形式での API を提供しています。Twitter クライアントに統合させることもできます。
-    %li
-      The MIT License の
-      = link_to "オープンソース", "https://github.com/rhenium/aclog"
-      のサービスです。
-%p
-  %h3 はじめる
-  Twitter 経由で aclog にログインすることによって収集が開始されます。あとは全自動であなたのアクティビティが収集されます。
-%hr
-
diff --git a/app/views/about/index.html.haml b/app/views/about/index.html.haml
index 03a7f2c..072c6b8 100644
--- a/app/views/about/index.html.haml
+++ b/app/views/about/index.html.haml
@@ -1,9 +1,54 @@
 - title "aclog"
-.index.text-center
-  %h1
-    aclog
-    - if Rails.env.development?
-      %span.text-error (dev)
+.front-hero
+  .container
+    %p
+      %img{alt: "aclog", src: image_path("logo.png"), height: 200, width: 200}
+    %h1 aclog
+    %p
+      %a.twitter-share-button{href: "https://twitter.com/share", data: { count: "none", lang: "en" }} ツイート
+.front-feature
+  .container
+    .row
+      .col-sm-6.col-sm-push-6
+        %img{alt: "Collect activities", src: image_path("feature_1.png"), height: 200, width: 400}
+      .col-sm-6.col-sm-pull-6
+        %h1 Collect Activities
+        %p aclogに一度サインアップするだけで、ツイート、お気に入り、リツイートをリアルタイムで自動収集。
+.front-feature-right
+  .container
+    .row
+      .col-sm-6
+        %img{alt: "Discover topics easily", src: image_path("feature_2.png"), height: 200, width: 400}
+      .col-sm-6
+        %h1 Discover Topics
+        %p aclogの見やすいUIで、話題のツイートを発見できます。自分のツイートがどれくらい話題になっているかも一目瞭然。
+.front-feature
+  .container
+    .row
+      .col-sm-6.col-sm-push-6
+        %img{alt: "Protected account is OK", src: image_path("feature_3.png"), height: 200, width: 400}
+      .col-sm-6.col-sm-pull-6
+        %h1 Protected User Available
+        %p Twitterで非公開設定にしている方でもご利用いただけます。ツイートは自分とフォロワーしか見られないので安心です。
+.front-feature-misc
+  .container
+    .row
+      .col-sm-3
+        %h1 Notification
+        %p 一定数のふぁぼ&amp;RTが集まると、通知アカウントがリプライで通知します。もちろん無効にすることもできます。
+      .col-sm-3
+        %h1 RSS Feeds
+        %p RSSを配信しているので、今日のベストツイートを購読できます。
+      .col-sm-3
+        %h1 aclog API
+        %p
+          JSONな aclog API を用意。
+          = link_to "APIドキュメント", about_api_path
+          をご覧下さい。
+      .col-sm-3
+        %h1 OSS
+        %p aclog は MIT License のオープンソース・サービスです。
+.front-footer
   %p
-    = link_to "Tweet", "https://twitter.com/share", class: "twitter-share-button", data: {text: "aclog - Twitter ふぁぼられ収集サービス", count: "none", url: "http://aclog.koba789.com/"}
-
+    /%a.aclogicon.aclogicon-twitter{href: "https://twitter.com/aclog3"}
+    %a.aclogicon.aclogicon-github{href: "https://github.com/rhenium/aclog"}
diff --git a/app/views/apidocs/endpoint.html.haml b/app/views/apidocs/endpoint.html.haml
index f84d0cc..675722a 100644
--- a/app/views/apidocs/endpoint.html.haml
+++ b/app/views/apidocs/endpoint.html.haml
@@ -1,36 +1,30 @@
 - title "API Documentation: "
-- caption nil
-- sidebar :i
-%ul.breadcrumb
-  %li= link_to "Documentation", about_api_path
-  %li.active= format_endpoint_name(@endpoint)
-%h1.page-header= format_endpoint_name(@endpoint)
-%div
-  %div= @endpoint.route_description
-  %h2 Resource URL
-  %div= api_url + @endpoint.route_path
-  %h2 Parameters
-  %table.table
-    %tbody
-      - @endpoint.route_params.each do |name, options|
-        %tr
-          %td
-            %strong= name
-            - if options[:required]
-              %small required
-            - else
-              %small optional
-          %td
-            %p= options[:desc]
-            %p
-              Type:
-              = options[:type]
-  - if @example_request_uri
-    %h2 Example Request
-    .request
-      %span= @endpoint.route_method
-      %code#example_request_uri= @example_request_uri
-    .response
-      %pre
-        %code
-          #example_request_loading= image_tag "loading.gif", alt: "loading..."
+%h1= format_endpoint_name(@endpoint)
+%p= @endpoint.route_description
+%h2 Resource URL
+%p= api_url + @endpoint.route_path
+%h2 Parameters
+%table.table.api-params
+  %tbody
+    - @endpoint.route_params.each do |name, options|
+      %tr
+        %th
+          = name
+          - if options[:required]
+            %small required
+          - else
+            %small optional
+        %td
+          %p= options[:desc]
+          %p
+            %b> Type
+            \:
+            = options[:type]
+- if @example_request_uri
+  %h2 Example Request
+  %p
+    %span= @endpoint.route_method
+    %code#example_request_uri= @example_request_uri
+  %pre
+    %code
+      #example_request_loading= image_tag "loading.gif", alt: "loading..."
diff --git a/app/views/apidocs/index.html.haml b/app/views/apidocs/index.html.haml
index 2f37d73..9aa5a8c 100644
--- a/app/views/apidocs/index.html.haml
+++ b/app/views/apidocs/index.html.haml
@@ -1,36 +1,21 @@
 - title "API documentation"
-- caption nil
-- sidebar :i
-%ul.breadcrumb
-  %li.active Documentation
-%h1.page-header Aclog API
-%p
-  Aclog では JSON 形式の API を提供しています。
-%hr
-%p
-  ツイートを非公開にしているアカウントの情報にアクセスするには本人であるか、対象のアカウントをフォローしている必要があります。Aclog API では、その認証に OAuth Echo を使用します。
-%p
-  OAuth Echo を使用するには以下のリクエストヘッダを使用します。
-  %pre
-    %code
-      :preserve
-        X-Auth-Service-Provider: https://api.twitter.com/1.1/account/verify_credentials.json
-        X-Verify-Credentials-Authorization: OAuth rea...
-%p
-  OAuth Echo の詳細については
-  = link_to "Twitter のドキュメント", "https://dev.twitter.com/pages/oauth_echo"
-  を参照してください。
-
-%h2.page-header Endpoints
+%h2 OAuth
+%p ツイートを非公開にしているアカウントの情報にアクセスするには本人であるか、対象のアカウントをフォローしている必要があります。Aclog API では、その認証に OAuth Echo を使用します。
+%p OAuth Echo を使用するには以下のリクエストヘッダを使用します。
+%pre
+  %code
+    :preserve
+      X-Auth-Service-Provider: https://api.twitter.com/1.1/account/verify_credentials.json
+      X-Verify-Credentials-Authorization: OAuth rea...
+OAuth Echo の詳細については
+%a{href: "#"} Twitter のドキュメント
+を参照してください。
+%h2 Endpoints
 - @routes.values.inject(:merge).each do |namespace, endpoints|
   %h3= namespace.titleize
   %table.table
-    %thead
-      %th Resource
-      %th Description
     %tbody
       - endpoints.select {|_, e| !e.route_nodoc }.each do |path, endpoint|
         %tr
-          %td= link_to format_endpoint_name(endpoint), about_api_endpoint_path(endpoint.route_method.downcase, namespace, path)
+          %td= link_to format_endpoint_name(endpoint), about_api_endpoint_path(endpoint.route_method.downcase, namespace, path), class: (endpoint.route_deprecated ? "deprecated" : nil)
           %td= endpoint.route_description
-
diff --git a/app/views/errors/render_error.html.haml b/app/views/errors/render_error.html.haml
index 783576c..c7a4811 100644
--- a/app/views/errors/render_error.html.haml
+++ b/app/views/errors/render_error.html.haml
@@ -1,4 +1,11 @@
 - title "Error"
-- sidebar @user ? :users : :i
-.lead
-  = @message
+- if @user
+  .col-sm-3.col-md-offset-1
+    = render "shared/sidebar_user", user: @user
+  .col-sm-9.col-md-7.col-lg-6.error-page
+    %h1= response.status
+    %p= @message
+- else
+  .container.error-page
+    %h1= response.status
+    %p= @message
diff --git a/app/views/layouts/_base.html.haml b/app/views/layouts/_base.html.haml
index 58b83f8..1a4a203 100644
--- a/app/views/layouts/_base.html.haml
+++ b/app/views/layouts/_base.html.haml
@@ -2,28 +2,73 @@
 %html{xmlns: "http://www.w3.org/1999/xhtml"}
   %head
     %title= yield :title
+    %meta{name: "viewport", content: "width=device-width"}
+    %meta{"http-equiv" => "X-UA-Compatible", content: "IE=edge,chrome=1"}
+    %link{rel: "shortcut icon", href: image_path("favicon.ico")}
+    %link{rel: "apple-touch-icon-precomposed", href: image_path("apple-touch-icon-precomposed.png")}
+    %meta{name: "msapplication-TileImage", content: image_path("tile-image.png")}
+    %meta{name: "msapplication-TileColor", content: "#f0eadb"}
     = stylesheet_link_tag "application", media: "all"
     = javascript_include_tag "application"
-    = javascript_include_tag params[:controller]
-    %meta{name: "viewport", content: "width=600px"}
     - if @next_url
       %link{rel: "next", href: @next_url}
     - if @prev_url
       %link{rel: "prev", href: @prev_url}
-  %body
-    .navbar.navbar-default.navbar-static-top
+  %body{data: { controller: controller.controller_path, action: controller.action_name }}
+    %nav.navbar.navbar-static-top
       .container
         .navbar-header
+          %button.navbar-toggle{type: "button", data: { toggle: "collapse", target: "#menu" }}
+            %span.sr-only Toggle navigation
+            %span.icon-bar
+            %span.icon-bar
+            %span.icon-bar
           = link_to "aclog", root_path, class: "navbar-brand"
-        .navbar-right
-          %ul.nav.navbar-nav
-            %li
-              = link_to "about", about_path
+        #menu.collapse.navbar-collapse
+          %ul.nav.navbar-nav.navbar-right
+            %li.dropdown
+              %a.dropdown-toggle{href: "#", data: { toggle: "dropdown" }}
+                All
+                %b.caret
+              %ul.dropdown-menu
+                %li
+                  = link_to "Best", best_path
+                %li
+                  = link_to "Recent", recent_path
+                %li
+                  = link_to "Timeline", timeline_path
+            %li.dropdown
+              %a.dropdown-toggle{href: "#", data: { toggle: "dropdown" }, onclick: "setTimeout(function() { $(\"#jump_to\").focus(); }, 0)"}
+                User
+                %b.caret
+              %form.dropdown-menu
+                .input-group
+                  %input.form-control{id: "jump_to", type: "text", placeholder: "Screen name"}
+                  %span.input-group-btn
+                    %button.btn{type: "submit", onclick: "this.form.action = \"#{user_path(":screen_name")}\".replace(\":screen_name\", $(\"#jump_to\").val()); this.form.submit();"} Go
             - if logged_in?
-              %li= link_to "settings", settings_path
-              %li= link_to "logout", logout_path
-              %li= link_to "@" + session[:account].user.screen_name, user_path(session[:account].user.screen_name)
+              %li.dropdown
+                %a.dropdown-toggle{href: "#", data: { toggle: "dropdown" }}
+                  %img{src: current_user.profile_image_url, alt: "@" + current_user.screen_name, height: "24", width: "24"}
+                  %b.caret
+                %ul.dropdown-menu
+                  %li
+                    = link_to "Best", user_path(current_user.screen_name)
+                  %li
+                    = link_to "Timeline", user_timeline_path(current_user.screen_name)
+                  %li
+                    = link_to "Discoveries", user_discoveries_path(current_user.screen_name)
+                  %li
+                    = link_to "Discovered by", user_discovered_by_path(current_user.screen_name)
+                  %li
+                    = link_to "Discovered users", user_discovered_users_path(current_user.screen_name)
+                  %li.divider
+                  %li
+                    = link_to "Setting", settings_path
+                  %li
+                    = link_to "API", about_api_path
+                  %li
+                    = link_to "Sign out", logout_path
             - else
-              %li= link_to "login", "/i/login?redirect_after_login=" + CGI.escape(request.fullpath)
-    .container
-      = yield
+              %li= link_to "Sign in", "/i/login?redirect_after_login=" + CGI.escape(request.fullpath), class: "signup"
+    = yield
diff --git a/app/views/layouts/apidocs.html.haml b/app/views/layouts/apidocs.html.haml
new file mode 100644
index 0000000..e94be66
--- /dev/null
+++ b/app/views/layouts/apidocs.html.haml
@@ -0,0 +1,14 @@
+= render layout: "layouts/base" do
+  .container
+    .row
+      .col-sm-3.sidebar
+        %h1 aclog API
+        .sidebar-list
+          .list-group.list-group-scroll
+            = link_to_with_active "Index", about_api_path, class: "list-group-item"
+            - @routes.values.inject(:merge).each do |namespace, endpoints|
+              %span.list-group-head= namespace.titleize
+              - endpoints.select {|_, e| !e.route_nodoc }.each do |path, endpoint|
+                = link_to_with_active format_endpoint_name(endpoint), about_api_endpoint_path(endpoint.route_method.downcase, namespace, path), class: "list-group-item"
+      .col-sm-9
+        = yield
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 9c01e3b..f1f149e 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,7 +1,4 @@
 = render layout: "layouts/base" do
-  .row
-    .col-sm-3
-      .sidebar= yield :sidebar
-    .col-sm-9
-      %h1= yield :caption
+  .container
+    .row
       = yield
diff --git a/app/views/layouts/tweets.html.haml b/app/views/layouts/tweets.html.haml
deleted file mode 100644
index b305189..0000000
--- a/app/views/layouts/tweets.html.haml
+++ /dev/null
@@ -1,8 +0,0 @@
-= render layout: "layouts/base" do
-  .row
-    .col-sm-3
-      .sidebar= yield :sidebar
-    .col-sm-9
-      %h1= yield :caption
-      .tweets= yield
-      .loading= image_tag "loading.gif", alt: "loading..."
diff --git a/app/views/settings/confirm_deactivation.html.haml b/app/views/settings/confirm_deactivation.html.haml
index ca605a9..6eb1e4d 100644
--- a/app/views/settings/confirm_deactivation.html.haml
+++ b/app/views/settings/confirm_deactivation.html.haml
@@ -1,5 +1,5 @@
 - title "Account Deactivation"
-- caption :title
+%h1 Deactivation
 = form_tag "/i/settings/deactivate", method: :post do
   = link_to "Cancel", action: "index"
   = submit_tag
diff --git a/app/views/settings/deactivate.html.haml b/app/views/settings/deactivate.html.haml
index 8b006fe..709a7fc 100644
--- a/app/views/settings/deactivate.html.haml
+++ b/app/views/settings/deactivate.html.haml
@@ -1,4 +1,4 @@
 - title "Account Deactivation"
-- caption :title
+%h1 Deactivation
 ご利用ありがとうございました。記録を停止されますが、データは削除されません。もう一度ログインをすると記録が再開されます。
 
diff --git a/app/views/settings/index.html.haml b/app/views/settings/index.html.haml
index 09e1856..01a3ef6 100644
--- a/app/views/settings/index.html.haml
+++ b/app/views/settings/index.html.haml
@@ -1,14 +1,13 @@
-- title "Account Settings"
-- caption :title
-= form_tag "/i/settings/update", method: :post do
-  .checkbox
-    = check_box_tag :notification, true, @account.notification
-    = label_tag :notification, t("views.settings.enable_notification")
-  .checkbox
-    = check_box_tag :private, true, @account.private
-    = label_tag :private, t("views.settings.hide_best")
-  .form-group
-    = submit_tag "Submit", class: "btn btn-default"
-
-= link_to t("views.settings.confirm_deactivation"), controller: "settings", action: "confirm_deactivation"
-
+- title "Settings"
+%h1.col-sm-3.col-md-offset-1.setting Settings
+.col-sm-9.col-md-7.col-lg-6
+  = form_tag "/i/settings/update", method: :post do
+    .checkbox
+      = check_box_tag :notification, true, @account.notification
+      = label_tag :notification, t("views.settings.enable_notification")
+    .checkbox
+      = check_box_tag :private, true, @account.private
+      = label_tag :private, t("views.settings.hide_best")
+    .form-group
+      = submit_tag "Submit", class: "btn btn-default"
+      = link_to t("views.settings.confirm_deactivation"), { controller: "settings", action: "confirm_deactivation" }, class: "btn btn-link"
diff --git a/app/views/shared/__sidebar_thresholds.html.haml b/app/views/shared/__sidebar_thresholds.html.haml
new file mode 100644
index 0000000..3a27f6d
--- /dev/null
+++ b/app/views/shared/__sidebar_thresholds.html.haml
@@ -0,0 +1,7 @@
+- counts.each_slice(2).to_a.transpose.each do |ns|
+  .list-group-col
+    - ns.each do |n|
+      - if [params[:reactions].to_i, 1].max == n
+        = link_to "#{n}~", params, class: "list-group-item active"
+      - else
+        = link_to "#{n}~", params.merge(reactions: (n == 1 ? nil : n)), class: "list-group-item"
diff --git a/app/views/shared/_sidebar_all.html.haml b/app/views/shared/_sidebar_all.html.haml
new file mode 100644
index 0000000..3efe2e7
--- /dev/null
+++ b/app/views/shared/_sidebar_all.html.haml
@@ -0,0 +1,11 @@
+.sidebar
+  %h1 All
+  - _show_thresholds = ["all_timeline"].include?(params[:action])
+  .sidebar-list{class: _show_thresholds ? "row" : ""}
+    .list-group{class: _show_thresholds ? "col-xs-6 col-sm-12" : ""}
+      = link_to_with_active "Best", best_path, class: "list-group-item"
+      = link_to_with_active "Recent", recent_path, class: "list-group-item"
+      = link_to_with_active "Timeline", timeline_path, class: "list-group-item"
+    - if _show_thresholds
+      .list-group.col-xs-6.col-sm-12
+        = render "shared/_sidebar_thresholds", counts: [1, 10, 50, 100, 500, 1000]
diff --git a/app/views/shared/_sidebar_user.html.haml b/app/views/shared/_sidebar_user.html.haml
new file mode 100644
index 0000000..2b68f7b
--- /dev/null
+++ b/app/views/shared/_sidebar_user.html.haml
@@ -0,0 +1,36 @@
+.sidebar
+  %p
+    %img.icon.img-rounded{alt: user.screen_name, src: user.profile_image_url_original, height: 64, width: 64}
+  %p= "@" + user.screen_name
+  %p
+    %a.aclogicon.aclogicon-twitter{href: user.twitter_url}
+  - if user.registered?
+    %ul.records
+      %li
+        %span Reactions
+        %span.data= user.stats.reactions_count
+      %li
+        %span Average
+        %span.data= user.stats.average_reactions_count.round(2)
+      %li
+        %span Joined
+        %span.data
+          = user.stats.since_join
+          %span> d ago
+  - else
+    .alert.alert-aclog @#{user.screen_name} は aclog に登録していません
+  - _show_thresholds = ["timeline", "discoveries", "discovored_by"].include?(params[:action])
+  .sidebar-list{class: _show_thresholds ? "row" : ""}
+    .list-group{class: _show_thresholds ? "col-xs-6 col-sm-12" : ""}
+      - if authorized_to_show_user_best?(user)
+        = link_to_with_active "Best", user_path(user.screen_name), class: "list-group-item"
+        = link_to_with_active "Timeline", user_timeline_path(user.screen_name), class: "list-group-item"
+      - else
+        = link_to_with_active "Timeline", user_path(user.screen_name), class: "list-group-item"
+      = link_to_with_active "Discoveries", user_discoveries_path(user.screen_name), class: "list-group-item"
+      - if authorized_to_show_user_best?(user)
+        = link_to_with_active "Discovered by", user_discovered_by_path(user.screen_name), class: "list-group-item"
+        = link_to_with_active "Discovered users", user_discovered_users_path(user.screen_name), class: "list-group-item"
+    - if _show_thresholds
+      .list-group.col-xs-6.col-sm-12
+        = render "shared/_sidebar_thresholds", counts: [1, 3, 10, 30, 50, 100]
diff --git a/app/views/shared/sidebar/_i.html.haml b/app/views/shared/sidebar/_i.html.haml
deleted file mode 100644
index 04150c2..0000000
--- a/app/views/shared/sidebar/_i.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-.list-group
-  = link_to "about", about_path, class: "list-group-item"
-  = link_to "api", about_api_path, class: "list-group-item"
-.list-group
-  = link_to "best", best_path, class: "list-group-item"
-  = link_to "recent", recent_path, class: "list-group-item"
-  = link_to "timeline", timeline_path, class: "list-group-item"
diff --git a/app/views/shared/sidebar/_users.html.haml b/app/views/shared/sidebar/_users.html.haml
deleted file mode 100644
index dbd91ae..0000000
--- a/app/views/shared/sidebar/_users.html.haml
+++ /dev/null
@@ -1,29 +0,0 @@
-.avatar
-  = link_to user_path(@user.screen_name) do
-    = image_tag @user.profile_image_url_original, alt: @user.screen_name, width: 64, height: 64, class: "icon img-rounded"
-.screen_name= link_to @user.screen_name, @user.twitter_url
-- if @user.registered? && @user.account.active?
-  %ul.list-group.records
-    %li
-      %span reactions
-      %span.data= @user.stats.reactions_count
-    %li
-      %span average
-      %span.data= @user.stats.average_reactions_count.round(2)
-    %li
-      %span joined
-      %span.data= @user.stats.since_join.to_s + "d ago"
-- else
-  .alert.alert-info
-    = "@#{@user.screen_name} #{t("views.sidebar.user_not_registered")}"
-.user_nav
-  .list-group
-    - if authorized_to_show_user_best?(@user)
-      = link_to "best", user_path(@user.screen_name), class: "list-group-item"
-      = link_to "timeline", user_timeline_path(@user.screen_name), class: "list-group-item"
-    - else
-      = link_to "timeline", user_path(@user.screen_name), class: "list-group-item"
-    = link_to "discoveries", user_discoveries_path(@user.screen_name), class: "list-group-item"
-    - if authorized_to_show_user_best?(@user)
-      = link_to "discovered by", user_discovered_by_path(@user.screen_name), class: "list-group-item"
-      = link_to "discovered users", user_discovered_users_path(@user.screen_name), class: "list-group-item"
diff --git a/app/views/tweets/_timeline_thresholds.html.haml b/app/views/tweets/_timeline_thresholds.html.haml
deleted file mode 100644
index 785cad2..0000000
--- a/app/views/tweets/_timeline_thresholds.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-.thresholds
-  .btn-group
-    - counts.sort.each do |c|
-      - if [params[:reactions].to_i, 1].max == c
-        %button.btn.btn-default.active{type: "button"}= "#{c} acts"
-      - else
-        = link_to "#{c} acts", params.merge(reactions: c), class: "btn btn-default"
diff --git a/app/views/tweets/_tweet.html.haml b/app/views/tweets/_tweet.html.haml
index 0acbf8f..e77b4e2 100644
--- a/app/views/tweets/_tweet.html.haml
+++ b/app/views/tweets/_tweet.html.haml
@@ -1,3 +1,3 @@
-.tweet
+.status
   = render partial: "tweet_content", locals: { tweet: tweet }
   = render partial: "tweet_stats", locals: { tweet: tweet }
diff --git a/app/views/tweets/_tweet_content.html.haml b/app/views/tweets/_tweet_content.html.haml
index 830f294..1106e5b 100644
--- a/app/views/tweets/_tweet_content.html.haml
+++ b/app/views/tweets/_tweet_content.html.haml
@@ -1,47 +1,35 @@
-- unless authorized_to_show_user? tweet.user
-  .content
-    .left
-      .avatar
-        = image_tag "missing_profile_image.png", alt: "protected", title: "protected user"
-    .tweet_content_fix
-    .tweet_content
-      .user
-        %span.name Protected
-        %span.screen_name -
-      .text
-        .quiet
-          ユーザーは非公開です
-      .meta.clearfix
-        %span.twitter_bird= image_tag("bird_gray_16.png", alt: "Twitter")
-        %span.created_at
-          %time{datetime: tweet.tweeted_at.to_datetime.rfc3339}= tweet.tweeted_at
-        %span.source via -
+- if authorized_to_show_user? tweet.user
+  .status-tweet
+    %a.status-user{href: user_path(tweet.user_screen_name), title: "#{tweet.user_name} (@#{tweet.user_screen_name})"}
+      = image_tag tweet.user_profile_image_url, alt: "@" + tweet.user_screen_name, height: 48, width: 48
+    .status-content
+      .status-head
+        %a.user{href: user_path(tweet.user_screen_name)}
+          %span= tweet.user_name
+          %span= "@" + tweet.user_screen_name
+        %span.time
+          %a{href: tweet_path(tweet), title: "このツイートの詳細を見る"}
+            %time{datetime: tweet.tweeted_at.to_datetime.rfc3339}= tweet.tweeted_at
+          %a.source.aclogicon.aclogicon-twitter{href: tweet.twitter_url, title: "Twitter で見る"}
+      %p.status-text= format_tweet_text tweet.text
+      .status-foot
+        = link_to_source_text(tweet.source, class: "source")
+        %ul
+          %li
+            %a.aclogicon.aclogicon-fav{href: "https://twitter.com/intent/favorite?tweet_id=#{tweet.id}", title: "お気に入り登録"}
+          %li
+            %a.aclogicon.aclogicon-retweet{href: "https://twitter.com/intent/retweet?tweet_id=#{tweet.id}", title: "リツイート"}
+          %li
+            %a.aclogicon.aclogicon-reply{href: "https://twitter.com/intent/tweet?in_reply_to=#{tweet.id}", title: "返信"}
 - else
-  .content
-    .left
-      .avatar
-        = link_to user_path(tweet.user_screen_name) do
-          = image_tag tweet.user_profile_image_url, alt: tweet.user_screen_name, title: tweet.user_name
-      %ul.list-inline.actions
-        %li.twitter
-          = link_to image_tag("reply.png", alt: "reply"), "https://twitter.com/intent/tweet?in_reply_to=#{tweet.id}"
-          = link_to image_tag("retweet.png", alt: "retweet"), "https://twitter.com/intent/retweet?tweet_id=#{tweet.id}"
-          = link_to image_tag("favorite.png", alt: "favorite"), "https://twitter.com/intent/favorite?tweet_id=#{tweet.id}"
-    .tweet_content_fix
-    .tweet_content
-      .user
-        %span.name= link_to tweet.user_name, user_path(tweet.user_screen_name)
-        %span.screen_name= link_to tweet.user_screen_name, user_path(tweet.user_screen_name)
-        - if tweet.in_reply_to
-          %span.in_reply_to= link_to "in reply to @" + tweet.in_reply_to.user_screen_name, tweet_path(tweet.in_reply_to.id)
-      .text
-        = format_tweet_text tweet.text
-      .meta.clearfix
-        %span.twitter_bird
-          = link_to image_tag("bird_gray_16.png", alt: "Twitter"), tweet.twitter_url, target: "_blank"
-        %span.created_at
-          = link_to tweet_path(tweet.id) do
+  .status-tweet
+    %a.status-user{href: "#", title: "非公開のユーザー"}
+      = image_tag "protected_profile_image.png", alt: "非公開のユーザー", height: 48, width: 48
+    .status-content
+      .status-head
+        %span.time
+          %a{href: "#", title: "aclogでこのツイートの詳細を見る"}
             %time{datetime: tweet.tweeted_at.to_datetime.rfc3339}= tweet.tweeted_at
-        %span.source
-          via
-          = link_to_source_text(tweet.source)
+          %a.source.aclogicon.aclogicon-twitter{href: "#", title: "Twitter公式サイトで見る"}
+      %p.status-text ユーザーはツイートを非公開にしています
+      .status-foot
diff --git a/app/views/tweets/_tweet_without_stats.html.haml b/app/views/tweets/_tweet_reply.html.haml
index 93b61ba..8b189f8 100644
--- a/app/views/tweets/_tweet_without_stats.html.haml
+++ b/app/views/tweets/_tweet_reply.html.haml
@@ -1,2 +1,2 @@
-.tweet
+.status.status-reply
   = render partial: "tweet_content", locals: { tweet: tweet }
diff --git a/app/views/tweets/_tweet_stats.html.haml b/app/views/tweets/_tweet_stats.html.haml
index c8be1fa..d25367d 100644
--- a/app/views/tweets/_tweet_stats.html.haml
+++ b/app/views/tweets/_tweet_stats.html.haml
@@ -1,26 +1,26 @@
-- if authorized_to_show_user? tweet.user
-  .stats
-    %dl
-      - [["favs", tweet.favorites_count, tweet.favoriters], ["retweets", tweet.retweets_count, tweet.retweeters]].each do |title, count, users|
-        - if count > 0
+.status-responses
+  - [["Favs", tweet.favorites_count, tweet.favoriters], ["RTs", tweet.retweets_count, tweet.retweeters]].each do |title, count, users|
+    - if count > 0
+      - if authorized_to_show_user?(tweet.user)
+        %dl
           %dt
             = link_to tweet_path(tweet.id, full: true) do
-              %span.count= count
-              %span.type= title
-          %dd
-            %ul.list-inline
+              %span>= count
+              = title
+          %dd{class: params[:action] != "show" ? "timeline" : ""}
+            %ul
               - users.limit(favorites_truncate_count).each do |m|
                 %li
-                  - if !m.protected? || session[:user_id] == m.id || session[:user_id] == tweet.user_id
-                    = link_to user_path(m.screen_name) do
-                      = image_tag m.profile_image_url, alt: "@#{m.screen_name}", title: "#{m.name} (@#{m.screen_name})"
+                  - if !m.protected? || (logged_in? && (m.id == current_user.id || tweet.user.id == current_user.id))
+                    %a{href: user_path(m.screen_name), title: "#{m.name} (@#{m.screen_name})"}
+                      %img{alt: "@" + m.screen_name, src: m.profile_image_url}
                   - else
-                    = image_tag "missing_profile_image.png", alt: "protected", title: "protected user"
-- else
-  .stats
-    %dl
-      - [["favs", tweet.favorites_count, tweet.favoriters], ["retweets", tweet.retweets_count, tweet.retweeters]].each do |title, count, users|
-        - if count > 0
+                    %a{href: "#", title: "Protected User"}
+                      %img{alt: "Protected User", src: image_path("protected_profile_image.png")}
+      - else
+        %dl
           %dt
-            %span.count= count
-            %span.type= title
+            = link_to "#" do
+              %span>= count
+              = title
+          %dd{class: params[:action] != "show" ? "timeline" : ""}
diff --git a/app/views/tweets/all_best.html.haml b/app/views/tweets/all_best.html.haml
index 581e592..6f22069 100644
--- a/app/views/tweets/all_best.html.haml
+++ b/app/views/tweets/all_best.html.haml
@@ -1,4 +1,9 @@
 - title "Top Tweets"
-- caption :title
-- sidebar :i
-= render @tweets
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_all"
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    Best Tweets
+    %small of All
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/tweets/all_recent.html.haml b/app/views/tweets/all_recent.html.haml
index b2ceb40..2aa2f9a 100644
--- a/app/views/tweets/all_recent.html.haml
+++ b/app/views/tweets/all_recent.html.haml
@@ -1,4 +1,9 @@
 - title "Top Recent Tweets"
-- caption :title
-- sidebar :i
-= render @tweets
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_all"
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    Recent Best Tweets
+    %small of All
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/tweets/all_timeline.html.haml b/app/views/tweets/all_timeline.html.haml
index 4fa088a..6bb0ec4 100644
--- a/app/views/tweets/all_timeline.html.haml
+++ b/app/views/tweets/all_timeline.html.haml
@@ -1,5 +1,9 @@
-- title "Newest"
-- caption :title
-- sidebar :i
-= render "timeline_thresholds", counts: [1, 10, 50, 100, 500, 1000]
-= render @tweets
+- title "Timeline of All"
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_all"
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    Timeline
+    %small of All
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/tweets/best.html.haml b/app/views/tweets/best.html.haml
index 6c12ef4..62b04ae 100644
--- a/app/views/tweets/best.html.haml
+++ b/app/views/tweets/best.html.haml
@@ -1,4 +1,9 @@
 - title @user.screen_name + "'s Best Tweets"
-- caption :title
-- sidebar :users
-= render @tweets
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_user", user: @user
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    %small #{@user.screen_name} 's
+    Best Tweets
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/tweets/discovered_by.html.haml b/app/views/tweets/discovered_by.html.haml
index 63b0aeb..967a213 100644
--- a/app/views/tweets/discovered_by.html.haml
+++ b/app/views/tweets/discovered_by.html.haml
@@ -1,4 +1,9 @@
 - title @user.screen_name + "'s Discovered by " + @source_user.screen_name
-- caption :title
-- sidebar :users
-= render @tweets
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_user", user: @user
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    %small #{@user.screen_name} 's
+    Tweets
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/tweets/discoveries.html.haml b/app/views/tweets/discoveries.html.haml
index bebf34a..c0aaa96 100644
--- a/app/views/tweets/discoveries.html.haml
+++ b/app/views/tweets/discoveries.html.haml
@@ -1,4 +1,9 @@
 - title @user.screen_name + "'s Discoveries"
-- caption :title
-- sidebar :users
-= render @tweets
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_user", user: @user
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    %small #{@user.screen_name} 's
+    Discoveries
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/tweets/favorites.html.haml b/app/views/tweets/favorites.html.haml
deleted file mode 100644
index bebf34a..0000000
--- a/app/views/tweets/favorites.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-- title @user.screen_name + "'s Discoveries"
-- caption :title
-- sidebar :users
-= render @tweets
diff --git a/app/views/tweets/filter.html.haml b/app/views/tweets/filter.html.haml
index ac9b826..c5cbc8f 100644
--- a/app/views/tweets/filter.html.haml
+++ b/app/views/tweets/filter.html.haml
@@ -1,10 +1,11 @@
 - title "Filter"
-- caption :title
-- sidebar :i
-.search
-  = form_tag({}, method: "get", class: "form-inline") do
-    = field_set_tag do
-      = text_field_tag :q, params[:q]
-      = submit_tag "filter", class: "btn", name: nil
-= render @tweets
-
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_all"
+.col-sm-9.col-md-7.col-lg-6
+  .search
+    = form_tag({}, method: "get", class: "form-inline") do
+      = field_set_tag do
+        = text_field_tag :q, params[:q]
+        = submit_tag "filter", class: "btn", name: nil
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/tweets/recent.html.haml b/app/views/tweets/recent.html.haml
index 46d6d34..4eaca20 100644
--- a/app/views/tweets/recent.html.haml
+++ b/app/views/tweets/recent.html.haml
@@ -1,4 +1,9 @@
 - title @user.screen_name + "'s Recent Best Tweets"
-- caption :title
-- sidebar :users
-= render @tweets
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_user", user: @user
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    %small #{@user.screen_name} 's
+    Recent Best Tweets
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/tweets/retweets.html.haml b/app/views/tweets/retweets.html.haml
deleted file mode 100644
index bebf34a..0000000
--- a/app/views/tweets/retweets.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-- title @user.screen_name + "'s Discoveries"
-- caption :title
-- sidebar :users
-= render @tweets
diff --git a/app/views/tweets/show.html.haml b/app/views/tweets/show.html.haml
index c41ebf6..9191829 100644
--- a/app/views/tweets/show.html.haml
+++ b/app/views/tweets/show.html.haml
@@ -1,11 +1,11 @@
 - title CGI.unescapeHTML(strip_tags(format_tweet_text(@tweet.text))) + " from @" + @user.screen_name
-- caption @user.screen_name + "'s Tweet"
-- sidebar :users
-= render partial: "tweet_without_stats", collection: @replies_before, as: :tweet
-%hr
-= render @tweet
-%hr
-= render partial: "tweet_without_stats", collection: @replies_after, as: :tweet
-- if logged_in?
-  .pull-right
-    %span.import= link_to "update", import_path(@tweet.id)
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_user", user: @user
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    %small #{@user.screen_name} 's
+    Tweet
+  .statuses
+    = render partial: "tweet_reply", collection: @replies_before, as: :tweet
+    = render @tweet
+    = render partial: "tweet_reply", collection: @replies_after, as: :tweet
diff --git a/app/views/tweets/timeline.html.haml b/app/views/tweets/timeline.html.haml
index 17e385a..55b3a55 100644
--- a/app/views/tweets/timeline.html.haml
+++ b/app/views/tweets/timeline.html.haml
@@ -1,5 +1,9 @@
 - title @user.screen_name + "'s Newest"
-- caption :title
-- sidebar :users
-= render "timeline_thresholds", counts: [1, 3, 10, 30, 50]
-= render @tweets
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_user", user: @user
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    %small #{@user.screen_name} 's
+    Newest
+  .statuses= render @tweets
+  %p.loading= image_tag "loading.gif", width: 16, height: 16, alt: "Loading..."
diff --git a/app/views/users/discovered_by.html.haml b/app/views/users/discovered_by.html.haml
index 1c88b86..88ad860 100644
--- a/app/views/users/discovered_by.html.haml
+++ b/app/views/users/discovered_by.html.haml
@@ -1,14 +1,15 @@
 - title @user.screen_name + " is Discovered by ..."
-- caption :title
-- sidebar :users
-.users
-  %ul.list-inline
-    - @result.each do |user_id, *counts|
-      - user = @cached_users[user_id]
-      %li
-        .avatar
-          = link_to user_path(user.screen_name) do
-            = image_tag user.profile_image_url, alt: user.screen_name, title: user.name
-        .data
-          .count
-            = link_to counts.sum, user_discovered_by_user_path(screen_name: @user.screen_name, screen_name_b: user.screen_name)
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_user", user: @user
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    %small #{@user.screen_name} is
+    Discovered by ...
+  .users
+    %ul.user-list
+      - @result.each do |user_id, *counts|
+        - user = @cached_users[user_id]
+        %li
+          %a{href: user_discovered_by_user_path(screen_name: @user.screen_name, screen_name_b: user.screen_name), title: "#{user.name} (@#{user.screen_name})"}
+            = image_tag user.profile_image_url, alt: "@" + user.screen_name
+            %span= counts.sum
diff --git a/app/views/users/discovered_users.html.haml b/app/views/users/discovered_users.html.haml
index 83cafdc..310d55c 100644
--- a/app/views/users/discovered_users.html.haml
+++ b/app/views/users/discovered_users.html.haml
@@ -1,14 +1,15 @@
 - title @user.screen_name + " is Discovering ..."
-- caption :title
-- sidebar :users
-.users
-  %ul.list-inline
-    - @result.each do |user_id, *counts|
-      - user = @cached_users[user_id]
-      %li
-        .avatar
-          = link_to user_path(user.screen_name) do
-            = image_tag user.profile_image_url, alt: user.screen_name, title: user.name
-        .data
-          .count
-            = link_to counts.sum, user_discovered_by_user_path(screen_name: user.screen_name, screen_name_b: @user.screen_name)
+.col-sm-3.col-md-offset-1
+  = render "shared/sidebar_user", user: @user
+.col-sm-9.col-md-7.col-lg-6
+  %h1
+    %small #{@user.screen_name} is
+    Discovering ...
+  .users
+    %ul.user-list
+      - @result.each do |user_id, *counts|
+        - user = @cached_users[user_id]
+        %li
+          %a{href: user_discovered_by_user_path(screen_name: user.screen_name, screen_name_b: @user.screen_name), title: "#{user.name} (@#{user.screen_name})"}
+            = image_tag user.profile_image_url, alt: "@" + user.screen_name
+            %span= counts.sum
diff --git a/app/views/users/stats.html.haml b/app/views/users/stats.html.haml
index 9bb08c1..f8465de 100644
--- a/app/views/users/stats.html.haml
+++ b/app/views/users/stats.html.haml
@@ -1,6 +1,4 @@
 - title "Stats"
-- caption :title
-- sidebar :users
 .avatar
   = image_tag @user.profile_image_url_original, alt: @user.screen_name, width: 128, height: 128
 - if @user.registered? && @user.account.active?
@@ -9,6 +7,6 @@
     %dt Received reactions
     %dd= @user.stats.reactions_count
     %dt Registered
-    %dd= format_time @user.account.created_at
+    %dd= @user.account.created_at
     %dt Last update
-    %dd= format_time @user.stats.updated_at
+    %dd= @user.stats.updated_at
diff --git a/config/application.rb b/config/application.rb
index 8e8204f..863e229 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -38,7 +38,7 @@ module Aclog
       ErrorsController.action(:render_error).call(env)
     end
 
-    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
+    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.eot *.woff *.ttf *.svg)
     config.assets.precompile += [Proc.new { |path, fn| fn =~ /app\/assets/ && %w(.js).include?(File.extname(path)) }]
 
     config.generators do |g|
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index 82ff49f..87900ed 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -1,14 +1,8 @@
 ja:
   error:
-    tweet_not_found: ツイートが見つかりませんでした
-    user_not_found: ユーザーが見つかりませんでした
-    login_required: このページの表示にはログインが必要です
-    oauth_echo_unauthorized: OAuth Echo 認証に失敗しました
-    routing_error: このページは存在しません
-    user_not_registered: ユーザーは登録していません
-    user_protected: ユーザーはツイートを非公開にしています
-    account_private: ユーザーは aclog を非公開にしています
-    internal_error: 内部エラー
+    not_found: このページは存在しません
+    forbidden: このページを表示する権限がありません
+    internal_error: エラー
   views:
     settings:
       enable_notification: リプライ通知を有効にする
diff --git a/config/routes.rb b/config/routes.rb
index 5d813db..5c87a11 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -20,7 +20,6 @@ Aclog::Application.routes.draw do
   get "/i/timeline" =>                          "tweets#all_timeline",              as: "timeline"
   get "/i/filter" =>                            "tweets#filter",                    as: "filter"
 
-  get "/about" =>                               "about#about",                      as: "about"
   get "/about/api" =>                           "apidocs#index",                    as: "about_api"
   get "/about/api/:method/:namespace/:path" =>  "apidocs#endpoint",                 as: "about_api_endpoint", constraints: { namespace: /[\w\/]+/ }