--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/form_clear_main.coffee	Sat Jun 27 14:46:01 2015 +0900
@@ -0,0 +1,5 @@
+$(document).on "click", ".js-form-main-clear", (e) ->
+  e.preventDefault()
+  $(e.target).parents("form").find(".js-form-main")
+    .val("")
+    .focus()

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/show_paste.coffee	Sat Jun 27 14:46:01 2015 +0900
@@ -0,0 +1,4 @@
+$(document).ready ->
+  $("[id^=L]").click (e) ->
+    console.log $(e.target).attr("id")
+    document.location = "##{$(e.target).attr("id")}"

--- a/app/assets/stylesheets/_components.scss	Mon Jun 08 19:14:53 2015 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,26 +0,0 @@
-.input-url1 { display: none; }
-
-input[type=radio] {
-  margin-right: $spacing/2;
-}
-
-.alert {
-  padding: $spacing;
-}
-
-.alert-danger {
-  background-color: $danger;
-
-  strong { color: $danger-dark; }
-}
-
-.alert-info {
-  background-color: $info;
-
-  strong { color: $info-dark; }
-}
-
-.field_with_errors {
-  display: flex;
-  border: 2px solid $danger-dark;
-}

--- a/app/assets/stylesheets/_layout.scss	Mon Jun 08 19:14:53 2015 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,46 +0,0 @@
-*, ::before, ::after {
-  position: relative;
-  box-sizing: border-box;
-}
-
-body, h1, input {
-  margin: 0px;
-}
-
-html, body {
-  height: 100%;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-}
-
-
-header {
-  flex: none;
-  background: #eee;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: $spacing/2 $spacing;
-
-}
-
-main {
-  flex: 1 0 auto;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  padding: $spacing;
-}
-
-body, button, input {
-  font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-.alert {
-  flex: none;
-}

--- a/app/assets/stylesheets/_new-paste.scss	Mon Jun 08 19:14:53 2015 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,82 +0,0 @@
-#new_paste {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-
-  width: 100%;
-
-  #paste-form {
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: $spacing;
-
-    > * {
-      flex: 1 0 auto;
-    }
-
-    textarea {
-      resize: none;
-      width: 100%;
-    }
-  }
-
-  #paste-control {
-    flex: none;
-
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-
-    flex-direction: column;
-    @media (min-width: $screen-sm) {
-      flex-direction: row;
-    }
-
-    .radio {
-      display: inline-flex;
-      align-items: center;
-      margin-right: $spacing;
-    }
-    .form-group {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .form-label {
-      display: block;
-      margin-bottom: $spacing/2;
-    }
-
-    .inputs {
-      display: flex;
-      justify-content: space-around;
-      > * {
-        margin-right: $spacing;
-        flex: 1;
-
-        &:last-child {
-          margin-right: 0px;
-        }
-      }
-      &.right {
-        margin-top: $spacing;
-        min-height: $spacing * 4;
-      }
-
-      @media (min-width: $screen-sm) {
-        > * {
-          flex: 1 1 auto;
-        }
-
-        &.right {
-          margin-top: 0px;
-          > * {
-            margin-left: $spacing;
-            margin-right: 0px;
-          }
-        }
-      }
-    }
-  }
-}

--- a/app/assets/stylesheets/_show-paste.scss	Mon Jun 08 19:14:53 2015 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,56 +0,0 @@
-#paste-show {
-  flex: 1 0 auto;
-  display: flex;
-  flex-direction: column;
-
-  .nav {
-    flex: none;
-    display: flex;
-    list-style: none;
-    justify-content: space-between;
-    padding: 0px;
-    margin: (-$spacing) (-$spacing) $spacing;
-
-    li {
-      flex: 1;
-
-      a {
-        display: block;
-        padding: $spacing;
-        text-align: center;
-        &:hover {
-          background-color: #ccc;
-        }
-      }
-    }
-  }
-
-  pre {
-    white-space: pre-wrap;
-  }
-}
-
-#paste {
-  flex: 1 0 auto;
-
-  font-family: $monospace;
-  ol {
-    background-color: #eee;
-  }
-  li {
-    background-color: #fff;
-    &:hover {
-      background-color: $info;
-    }
-
-    &:target {
-      background-color: $info;
-    }
-  }
-}
-
-#paste-show-nav {
-  flex: none;
-  display: flex;
-  flex-direction: column;
-}

--- a/app/assets/stylesheets/_variables.scss	Mon Jun 08 19:14:53 2015 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,9 +0,0 @@
-$spacing: 10px;
-$screen-sm: 600px;
-
-$danger: scale-color(#f00, $lightness: 90%);
-$danger-dark: darken($danger, 60%);
-$info: scale-color(#0f0, $lightness: 90%);
-$info-dark: darken($info, 60%);
-
-$monospace: Consolas, monospace;

--- a/app/assets/stylesheets/application.scss	Mon Jun 08 19:14:53 2015 +0900
+++ b/app/assets/stylesheets/application.scss	Sat Jun 27 14:46:01 2015 +0900
@@ -1,6 +1,224 @@
-@import "variables";
-@import "components";
-@import "layout";
+$spacing: 10px;
+$screen-sm: 600px;
+
+$bg: #fff;
+$gray: #eee;
+$gray-dark: darken($gray, 20%);
+$danger: scale-color(#f00, $lightness: 90%);
+$danger-dark: darken($danger, 60%);
+$info: scale-color(#0f0, $lightness: 90%);
+$info-dark: darken($info, 60%);
+$primary: scale-color(#06f, $lightness: 90%);
+
+$monospace: Consolas, monospace;
+
+*, ::before, ::after {
+  position: relative;
+  box-sizing: border-box;
+}
+
+body, button, input, textarea {
+  font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+p, h1 {
+  margin: 0px;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0px;
+  display: flex;
+  flex-direction: column;
+}
+
+.input-url1 { display: none !important; }
+
+.monospaced {
+  font-family: $monospace;
+}
+
+.header {
+  background-color: $gray;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing;
+  flex: none;
+}
+
+.main {
+  display: flex;
+  flex: 1 0 auto;
+  padding: $spacing;
+  flex-direction: column;
+}
+
+.main-form {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-textarea-container {
+  flex: 1 0 auto;
+  display: flex;
+}
+
+.main-textarea {
+  width: 100%;
+}
+
+.settings {
+  display: flex;
+  margin: $spacing (-$spacing/2) 0px;
+}
+
+.settings-item {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin: 0px $spacing/2;
+
+  @media (min-width: $screen-sm) {
+    flex: none;
+  }
+}
+
+.settings-label {
+  margin-bottom: $spacing/2;
+}
+
+.actions {
+  display: flex;
+}
+
+.action {
+  flex: 1;
+  @media (min-width: $screen-sm) {
+    flex: none;
+  }
+  margin: 0px $spacing/2;
+}
 
-@import "new-paste";
-@import "show-paste";
+.alert {
+  padding: $spacing;
+  flex: none;
+}
+
+.alert-danger {
+  background-color: $danger;
+}
+
+.alert-info {
+  background-color: $info;
+}
+
+.field_with_errors {
+  display: flex;
+  width: 100%;
+  border: 1px solid $danger-dark;
+}
+
+.paste-content {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.paste-nav {
+  display: flex;
+  justify-content: space-between;
+  margin: 0px (-$spacing/2);
+}
+
+.paste-nav-item {
+  flex: 1 1 0px;
+  text-align: center;
+  border: 1px solid $gray-dark;
+  margin: 0px $spacing/2 $spacing;
+  padding: $spacing;
+
+  &:hover {
+    background-color: $gray-dark;
+  }
+}
+
+.active {
+  background-color: $gray;
+}
+
+.paste-plain {
+  background-color: $gray;
+  margin: 0px;
+  border: 1px solid $gray-dark;
+  flex: none;
+}
+
+.line {
+  background-color: $bg;
+  flex: 1;
+}
+
+.paste-nav--bottom {
+  margin-top: $spacing;
+  margin-bottom: 0px;
+}
+
+.settings-item--inline {
+  flex-direction: row;
+  flex: 1;
+}
+
+.action--horizontal-minimum {
+  margin: 0px;
+  flex: none;
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: $screen-sm) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.btn {
+  box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.1) inset;
+  border: 0px;
+  background-color: $gray;
+  cursor: pointer;
+  padding: $spacing ($spacing*2);
+}
+
+@mixin btn-color($color) {
+  background-color: $color;
+
+  &:hover {
+    background-color: darken($color, 10%);
+  }
+
+  &:focus {
+    background-color: darken($color, 20%);
+  }
+}
+
+.btn--primary {
+  @include btn-color($primary);
+}
+
+.btn--danger {
+  @include btn-color($danger);
+}
+
+.btn--min-width {
+  flex: none;
+}

--- a/app/views/layouts/application.html.erb	Mon Jun 08 19:14:53 2015 +0900
+++ b/app/views/layouts/application.html.erb	Sat Jun 27 14:46:01 2015 +0900
@@ -8,10 +8,12 @@
   </head>
   <body>
     <%= yield(:before_page_header) %>
-    <header>
-      <h1><%= content_for :title %></h1>
-      <p class="credit">
-       Zeropaste.
+    <header class="header">
+      <h1>
+        <%= link_to "Zeropaste", root_path %> / <%= content_for :title %>
+      </h1>
+
+      <p>
        <a href="https://bitbucket.org/nanaya1/zeropaste">Source</a>.
        <%= link_to 'Donate', 'https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=me%40myconan%2enet&lc=ID&item_name=Zeropaste%20development&currency_code=USD&bn=PP%2dDonationsBF%3abtn_subscribe_LG%2egif%3aNonHosted' %>.
       </p>
@@ -19,7 +21,7 @@
 
     <%= render "layouts/alerts" %>
 
-    <main>
+    <main class="main">
       <%= yield %>
     </main>
 

--- a/app/views/pastes/_form.html.erb	Mon Jun 08 19:14:53 2015 +0900
+++ b/app/views/pastes/_form.html.erb	Sat Jun 27 14:46:01 2015 +0900
@@ -1,33 +1,38 @@
-<%= form_for @paste do |f| %>
+<%= form_for @paste, :html => { :class => "main-form" } do |f| %>
   <%= render "shared/filter_spam" %>
-  <div id="paste-form">
-    <%= f.text_area :paste, :rows => 10, :autofocus => true %>
+  <div class="main-textarea-container">
+    <%= f.text_area :paste, :rows => 10, :autofocus => true, :class => "main-textarea monospaced" %>
   </div>
 
-  <div id="paste-control">
-    <div class="inputs left">
+  <div class="settings-group">
 
-      <div class="vertical-flex">
-        <%= f.label :key, t(".deletion_key"), :class => "form-label" %>
+    <div class="settings">
+
+      <div class="settings-item">
+        <%= f.label :key, t(".deletion_key"), :class => "settings-label" %>
         <%= f.text_field :key %>
       </div>
 
-      <div class="vertical-flex">
-        <div class="form-label"><%= t(".privacy.label") %></div>
+      <div class="settings-item">
+        <div class="settings-label"><%= t(".privacy.label") %></div>
 
         <% paste_privacy_options.each do |label, value| %>
-          <label class="radio">
+          <label>
             <%= f.radio_button :is_private, value %>
             <span><%= t(".privacy.#{label}") %></span>
           </label>
         <% end %>
       </div>
+
     </div>
 
-    <div class="inputs right">
-      <%= f.button %>
+    <div class="settings">
+
+      <%= f.button :class => "action btn btn--primary" %>
 
-      <%= button_tag t(".clear"), :type => "button", :id => "reset_paste" %>
+      <%= button_tag t(".clear"), :type => "button", :class => "action btn btn--danger" %>
+
     </div>
+
   </div>
 <% end %>

--- a/app/views/pastes/show.html.erb	Mon Jun 08 19:14:53 2015 +0900
+++ b/app/views/pastes/show.html.erb	Sat Jun 27 14:46:01 2015 +0900
@@ -1,41 +1,35 @@
 <% provide :title, "Paste ##{@paste.id}" %>
 
-<div id="paste-show" data-id="<%= @paste.id %>">
-  <ul id="paste-mode" class="nav nav-tabs">
-    <li class="active"><%= link_to 'Plain', '#pl', :data => { :toggle => 'pill' } %></li>
-    <li><%= link_to 'Highlight', '#hl', :data => { :toggle => 'pill' } %></li>
-    <li><%= link_to 'Markdown', '#md', :data => { :toggle => 'pill' } %></li>
-  </ul>
+<div class="paste-content">
+  <div class="paste-nav">
+    <%= link_to 'Plain', '#pl', :class => "paste-nav-item active" %>
+    <%= link_to 'Highlight', '#hl', :class => "paste-nav-item" %>
+    <%= link_to 'Markdown', '#md', :class => "paste-nav-item" %>
+  </div>
 
-  <div id="paste">
-    <% lines = @paste.paste.split("\n") %>
-    <%# list number contains <n> + "." + <2.5 * spaces (approx)> %>
-    <ol style="padding-left: <%= lines.size.to_s.length + 4 %>ch">
-      <% lines.each.with_index(1) do |line, i| %>
-        <li id="L<%= i %>">
-          <%= line %>
-        </li>
-      <% end %>
-    </ol>
-  </div>
+  <% lines = @paste.paste.split("\n") %>
+  <%# list number contains <n> + "." + <2.5 * spaces (approx)> %>
+  <ol style="padding-left: <%= lines.size.to_s.length + 4 %>ch" class="paste-plain monospaced">
+    <% lines.each.with_index(1) do |line, i| %>
+      <li id="L<%= i %>" class="line">
+        <%= line %>
+      </li>
+    <% end %>
+  </ol>
 </div>
 
-<nav id="paste-show-nav">
-  <%= form_for @paste, :method => :delete, :authenticity_token => false do |f| %>
+<div class="settings">
+  <%= form_for @paste, :method => :delete, :authenticity_token => false, :html => { :class => "settings-item settings-item--inline" } do |f| %>
 
-    <div class="row"><div class="col-md-4">
-      <div class="input-group">
-        <%= f.text_field :key, :value => nil, :placeholder => 'Deletion key', :class => "form-control", :autofocus => f.object.errors.any? %>
-        <span class="input-group-btn">
-          <%= f.button 'Delete this paste', :class => 'btn btn-danger' %>
-        </span>
-      </div>
-    </div></div>
+    <%= f.text_field :key, :value => nil, :placeholder => 'Deletion key', :autofocus => f.object.errors.any?, :class => "main-textarea" %>
+
+    <%= f.button 'Delete this paste', :class => 'btn btn--danger btn--min-width' %>
   <% end %>
 
-  <ul class="nav nav-pills">
-    <li><%= link_to 'Raw', paste_path(@paste, :txt) %></li>
-    <li><%= link_to 'Derive', root_path(:base => @paste) %></li>
-    <li><%= link_to 'More Paste', root_path %></li>
-  </ul>
-</nav>
+</div>
+
+<div class="paste-nav paste-nav--bottom">
+    <%= link_to 'Raw', paste_path(@paste, :txt), :class => "paste-nav-item" %>
+    <%= link_to 'Derive', root_path(:base => @paste), :class => "paste-nav-item" %>
+    <%= link_to 'More Paste', root_path, :class => "paste-nav-item" %>
+</div>