From 6eed16a115d3dd7024ae1d74bf9fa54462fa718d Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Thu, 9 Apr 2015 15:59:17 +0200
Subject: [PATCH] Cleaned up some derpy settings padding and widths

---
 core/client/app/styles/layouts/about.scss     | 10 +++---
 core/client/app/styles/layouts/settings.scss  | 34 ++++++++++++-------
 .../app/templates/settings/code-injection.hbs | 12 +++----
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/core/client/app/styles/layouts/about.scss b/core/client/app/styles/layouts/about.scss
index 01f13ec887..3162838f8a 100644
--- a/core/client/app/styles/layouts/about.scss
+++ b/core/client/app/styles/layouts/about.scss
@@ -23,16 +23,18 @@
     }
 }
 
+@media (min-width: 901px) {
+    .settings-content .settings-about {
+        padding: 25px 40px 0;
+    }
+}
+
 
 //
 // Logo & Version
 // --------------------------------------------------
 
 .about-ghost-intro {
-    @media (max-width: 550px) {
-        padding-top: 40px;
-    }
-
     h1 {
         margin-top: -6px;
         margin-bottom: -21px;
diff --git a/core/client/app/styles/layouts/settings.scss b/core/client/app/styles/layouts/settings.scss
index 95014a6dd7..31d30be45d 100644
--- a/core/client/app/styles/layouts/settings.scss
+++ b/core/client/app/styles/layouts/settings.scss
@@ -174,11 +174,7 @@
     }
 
     .content {
-        padding: 40px;
-
-        @media (max-width: 550px) {
-            padding-top: 15px;
-        }
+        padding: 0 40px;
 
         @media (max-width: 900px) {
             position: absolute;
@@ -186,12 +182,13 @@
             right: 0;
             bottom: 0;
             left: 0;
-            padding-left: 15px;
-            padding-right: 15px;
+            padding: 15px;
             overflow-x: hidden;
             overflow-y: auto;
             -webkit-overflow-scrolling: touch;
         }
+
+
     }//.content
 
     .word-count {
@@ -409,7 +406,7 @@
 
     // &.last-navigation-item {
     &:last-child {
-        padding-left: 27px; // simulate .navigation-item-drag-handle width + horizontal padding
+        padding-left: 17px; // simulate .navigation-item-drag-handle width + horizontal padding
 
         .navigation-item-drag-handle {
             display: none;
@@ -418,15 +415,15 @@
 }
 
 .navigation-item-drag-handle {
-    padding: 6px 17px 0 10px;
-    width: 27px;
+    padding: 6px 17px 0 0;
+    width: 17px;
     cursor: move;
 
     @media (max-width: 600px) {
         &:before {
             position: absolute;
             top: 50%;
-            left: 4px;
+            left: 0;
             margin-top: -9px;
             z-index: 20;
         }
@@ -517,6 +514,19 @@
 // Code Injection
 // --------------------------------------------------
 
+.settings-code {
+    .form-group {
+        max-width: 700px;
+
+        p {
+            margin: 0 0 4px 0;
+        }
+    }
+    code {
+        vertical-align: middle;
+    }
+}
+
 .settings-code-editor {
     width: 100%;
     min-width: 250px;
@@ -534,4 +544,4 @@
         outline: 0;
     }
 
-}
\ No newline at end of file
+}
diff --git a/core/client/app/templates/settings/code-injection.hbs b/core/client/app/templates/settings/code-injection.hbs
index 7941881bc6..b7e4411077 100644
--- a/core/client/app/templates/settings/code-injection.hbs
+++ b/core/client/app/templates/settings/code-injection.hbs
@@ -9,21 +9,19 @@
 <section class="content settings-code">
     <form id="settings-code" novalidate="novalidate">
         <fieldset>
-            <div class="form-group">
-                <p>
-                    Ghost allows you to inject code into the top and bottom of your template files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta data.
-                </p>
-            </div>
+            <p>
+                Ghost allows you to inject code into the top and bottom of your theme files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta tags.
+            </p>
 
             <div class="form-group">
                 <label for="ghost-head">Blog Header</label>
-                <p>Code here will be injected to the \{{ghost_head}} helper at the top of your page</p>
+                <p>Code here will be injected into the <code>\{{ghost_head}}</code> tag on every page of your blog</p>
                 {{gh-cm-editor id="ghost-head" name="codeInjection[ghost_head]" class="settings-code-editor" type="text" value=model.ghost_head}}
             </div>
 
             <div class="form-group">
                 <label for="ghost-foot">Blog Footer</label>
-                <p>Code here will be injected to the \{{ghost_foot}} helper at the bottom of your page</p>
+                <p>Code here will be injected into the <code>\{{ghost_foot}}</code> tag on every page of your blog</p>
                 {{gh-cm-editor id="ghost-foot" name="codeInjection[ghost_foot]" class="settings-code-editor" type="text" value=model.ghost_foot}}
             </div>
         </fieldset>