fix desgin

views/index.slim

@@ -1,9 +1,10 @@
-h2 Example
-span ➜ 
-a href="/I%20am%20a%20pen!" "I am a pen!"
+#welcome
+  h2 Example
+  span ➜ 
+  a href="/I%20am%20a%20pen!" "I am a pen!"
 
-h2 by URL
-img src="/by_url.png"
+  h2 by URL
+  img src="/by_url.png"
 
-h2 by the Bookmarklet
-img src="/by_bookmarklet.png"
+  h2 by the Bookmarklet
+  img src="/by_bookmarklet.png"

views/layout.slim

@@ -12,18 +12,21 @@ html
       h2 { color: #BBB; border-bottom: dashed 1px #CCC; font-size: 160%; }
       a { color: blue; text-decoration: none; }
       a:hover { text-decoration: underline; }
-      img { display: block; width: 96%; margin: 0 auto; }
+      img { display: block; width: 100%; margin: 0 auto; }
       #wrap { max-width: 600px; margin: 0 auto; }
-      #footer { text-align: right; color: #999; clear: both; }
+      #welcome { margin: 0 8px; }
+      #content { margin: 0 8px 12px 8px; }
+      #footer { text-align: right; color: #999; }
       #footer ul { margin: 0; }
       #footer ul li { list-style: none; margin: 2px 2px; padding: 0; }
       #powerd-by-google-translate-api { color: #666; font-size: 80%; text-align: right; }
       #powerd-by-google-translate-api a { color: #666; }
-      .source, .target { margin: 4px 8px; padding: 8px; border: solid 1px #CCC; border-radius: 8px; }
+      .source, .target { margin: 2px 0; padding: 8px; border: solid 1px #CCC; border-radius: 8px; }
       .arrow { text-align: center; color: #CCC; }
       .bookmarklet { font-weight: bold; }
       .created-by { font-size: 80%; }
       .created-by a { color: #666; }
+      .clear { clear: both; }
 
   body
     #wrap

views/show.slim

@@ -1,21 +1,25 @@
-.source = text
+#content
+  .source = text
 
-.arrow ⬇
+  .arrow ⬇
 
-.target
-  #google-translate-result ...
-  #powerd-by-google-translate-api
-    span powerd by 
-    a href="http://code.google.com/intl/ja/apis/language/translate/overview.html" Google Translate API
+  .target
+    #google-translate-result ...
+    #powerd-by-google-translate-api
+      span powerd by 
+      a href="http://code.google.com/intl/ja/apis/language/translate/overview.html" Google Translate API
 
-javascript:
-  function googleTranslate(response) {
-      var result = response.data.translations[0].translatedText;
-      $('#google-translate-result').text(result);
-  }
-  $(function() {
-      $('<script>').attr({
-          type: "text/javascript",
-          src: "https://www.googleapis.com/language/translate/v2?key=AIzaSyDf3VkeewjJd884BrTyOBiw-1KggQ0537g&source=#{source}&target=#{target}&callback=googleTranslate&q=#{text}"
-      }).appendTo($('head'));
-  });
+
+  javascript:
+    function googleTranslate(response) {
+        var result = response.data.translations[0].translatedText;
+        $('#google-translate-result').text(result);
+    }
+    $(function() {
+        $('<script>').attr({
+            type: "text/javascript",
+            src: "https://www.googleapis.com/language/translate/v2?key=AIzaSyDf3VkeewjJd884BrTyOBiw-1KggQ0537g&source=#{source}&target=#{target}&callback=googleTranslate&q=#{text}"
+        }).appendTo($('head'));
+    });
+
+.clear