From 21991758aa0de8b5f2b12b0e102db3b73f0b11f9 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Sat, 22 Nov 2014 01:06:18 +0000
Subject: [PATCH] Cleanup layout Sass

Continues on from #4441

- Reformats the layout Sass files (comments, white space)
- DRY up small chunks of CSS to make it more comprehensible
---
 core/client/assets/sass/layouts/about.scss    | 121 ++++++-----
 core/client/assets/sass/layouts/auth.scss     | 108 +++++-----
 core/client/assets/sass/layouts/content.scss  | 150 ++++++++-----
 core/client/assets/sass/layouts/default.scss  |  78 ++++---
 core/client/assets/sass/layouts/editor.scss   | 197 ++++++++++--------
 core/client/assets/sass/layouts/error.scss    |  27 ++-
 core/client/assets/sass/layouts/settings.scss | 166 +++++----------
 core/client/assets/sass/layouts/setup.scss    |  50 ++++-
 core/client/assets/sass/layouts/tags.scss     |  74 +++----
 core/client/assets/sass/layouts/user.scss     | 140 ++++++++-----
 core/client/assets/sass/layouts/users.scss    |  11 -
 core/client/templates/settings/users/user.hbs |   2 +-
 12 files changed, 619 insertions(+), 505 deletions(-)

diff --git a/core/client/assets/sass/layouts/about.scss b/core/client/assets/sass/layouts/about.scss
index 46f8f33e0b80..de0a1b2db08e 100644
--- a/core/client/assets/sass/layouts/about.scss
+++ b/core/client/assets/sass/layouts/about.scss
@@ -1,13 +1,43 @@
-//
+// ------------------------------------------------------------
 // About Ghost
-// --------------------------------------------------
 // Slug: /ghost/settings/about
+//
+// Styles for the About Ghost page, detailing environment & top
+// contributors.
+//
+// * Wrapper
+// * Logo & Version
+// * Environment & Get Involved
+// * Contributors
+// * Credits & Copyright
+// ------------------------------------------------------------
 
-.settings-about {
 
+//
+// Wrapper
+// --------------------------------------------------
+
+.settings-about {
     h1 {
         letter-spacing: 0;
     }
+}
+
+
+//
+// Logo & Version
+// --------------------------------------------------
+
+.about-ghost-intro {
+    @media (max-width: 550px) {
+        padding-top: 40px;
+    }
+
+    h1 {
+        margin-top: -6px;
+        margin-bottom: -21px;
+        font-feature-settings: normal;
+    }
 
     .ghost_logo {
         position: relative;
@@ -22,49 +52,33 @@
         };
     }
 
+    .version {
+        font-weight: 300;
+        font-size: 1.8rem;
+        position: relative;
+        top: -3px;
+        left: -9px;
+        color: $blue;
+    }
+
     h1 + p {
         margin-top: 1px;
         color: $midgrey;
     }
-
-}
-
-
-//
-// App Details
-// --------------------------------------------------
+}//.about-ghost-intro
 
 // Special case to hide the desktop page header, because
 // in this instance the Ghost logo replaces it.
-.settings-view-about {
-    @media (min-width: 901px) {
-        .settings-view-header {
-            display: none;
-        }
+@media (min-width: 901px) {
+    .settings-view-about .settings-view-header {
+        display: none;
     }
 }
 
-.about-ghost-intro {
-    h1 {
-        margin-top: -6px;
-        margin-bottom: -21px;
-        font-feature-settings: normal;
-
-        .version {
-            font-weight: 300;
-            font-size: 1.8rem;
-            position: relative;
-            top: -3px;
-            left: -9px;
-            color: $blue;
-        }
-    }
-
-    @media (max-width: 550px) {
-        padding-top: 40px;
-    }
 
-}
+//
+// Environment & Get Involved
+// --------------------------------------------------
 
 .about-environment-help {
     margin-top: 35px;
@@ -77,6 +91,7 @@
         margin: 2px 0 0 0;
         line-height: 1.6;
     }
+
     dt, dd {
         width: auto;
         float: left;
@@ -84,9 +99,11 @@
         margin: 0;
         font-feature-settings: normal;
     }
+
     dt {
         margin-right: 5px;
     }
+
     .about-environment-detail {
         text-transform: capitalize;
     }
@@ -106,7 +123,6 @@
         padding-top: 9px;
         padding-bottom: 9px;
         min-height: 32px;
-
         background: #A1ADB3;
         color: #fff;
 
@@ -117,19 +133,19 @@
         &:nth-child(1) {
             margin-bottom: 11px;
         }
-
     }
-
-} // .about-help
+}//.about-help
 
 @media (min-width: 501px) {
     .about-environment-help {
         max-width: 430px;
     }
+
     .about-environment {
         float: left;
         width: calc(100% - 190px);
     }
+
     .about-help {
         float: right;
         width: 170px;
@@ -152,6 +168,7 @@
 
         a {
             display: block;
+            position: relative;
 
             @media (min-width: 601px) {
                 margin-right: 9px;
@@ -162,13 +179,6 @@
                 margin-bottom: 6px;
             }
 
-            img {
-                width: 100%;
-                display: block;
-                border-radius: 100%;
-            }
-
-            position: relative;
             &:before {
                 opacity: 0;
                 content: attr(title);
@@ -184,6 +194,7 @@
                 font-size: 1rem;
                 pointer-events: none;
             }
+
             &:after {
                 opacity: 0;
                 content: '';
@@ -194,6 +205,7 @@
                 transition: opacity 0.15s ease-in-out;
                 @include triangle(8px, $darkgrey, "down");
             }
+
             &:hover {
                 &:before,
                 &:after {
@@ -201,11 +213,14 @@
                 }
             }
 
-        }
-
-    } // li
-
-} // .top-contributors
+            img {
+                width: 100%;
+                display: block;
+                border-radius: 100%;
+            }
+        }//a
+    }//li
+}//.top-contributors
 
 
 //
@@ -245,6 +260,7 @@
         &:visited {
             color: inherit;
         }
+
         &:hover,
         &:focus,
         &:active {
@@ -252,5 +268,4 @@
             color: $blue;
         }
     }
-
-} // .about-copyright
+}//.about-copyright
\ No newline at end of file
diff --git a/core/client/assets/sass/layouts/auth.scss b/core/client/assets/sass/layouts/auth.scss
index 526c95a234fc..fe9c79b823ae 100644
--- a/core/client/assets/sass/layouts/auth.scss
+++ b/core/client/assets/sass/layouts/auth.scss
@@ -1,10 +1,19 @@
+// ------------------------------------------------------------
+// Authentication
+// Slug: /ghost/[signin/signup/forgotten/reset]
 //
-// Auth
-// --------------------------------------------------
-// Slug: /ghost/signin/
+// Styles for the authentication pages
+//
+// * Auth colours & wrappers
+// * Sign In
+// * Signup & Reset
+// * Forgot Password
+// ------------------------------------------------------------
+
+
+//
+// Auth colours & wrappers
 // --------------------------------------------------
-// Covers styles for all auth screens, login, signup
-// forgot password, and so on.
 
 .ghost-login,
 .ghost-signup,
@@ -28,27 +37,28 @@
         margin: 0;
         position: relative;
         transition: background ease 0.25s;
+
         &:focus {
             border: none;
             background: lighten($darkgrey, 15%);
         }
     }
 
+    // Changes the default Webkit yellow autofill colour to grey
     input:-webkit-autofill {
         -webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important;
     }
-
-}
+}//.ghost-login, .ghost-signup, .ghost-forgotten, .ghost-reset
 
 .login-box,
 .signup-box,
 .forgotten-box,
 .reset-box {
+    display: table;
     max-width: 530px;
     height: 90%;
     margin: 0 auto;
     padding: 0;
-    display: table;
 
     @media (max-width: 630px) {
         max-width: 264px;
@@ -59,6 +69,7 @@
 
 //
 // Sign In
+// Slug: /ghost/signin/
 // --------------------------------------------------
 
 .login-form {
@@ -82,6 +93,14 @@
         }
     }
 
+    .email-wrap {
+        margin-right: 3px;
+
+        @media (max-width: 630px) {
+            margin-right: 0;
+        }
+    }
+
     .email,
     .password {
         display: inline-block;
@@ -91,19 +110,6 @@
 
         @media (max-width: 630px) {
             width: 264px;
-        }
-    } // .email, .password
-
-    .email-wrap {
-        margin-right: 3px;
-        @media (max-width: 630px) {
-            margin-right: 0;
-        }
-    } // .email-wrap
-
-    @media (max-width: 630px) {
-        .email,
-        .password {
             border-radius: 2px;
         }
     }
@@ -119,19 +125,15 @@
 
     button {
         width: 85px;
-        height: 36px;
-        margin:0 0 0 10px;
-        padding: 0.5em 1.37em;
-        min-height: 30px;
-        min-width: 80px;
-        box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
+        height: 37px;
+        margin-left: 10px;
 
         @media (max-width: 630px) {
             margin: 0;
             width: 100%;
             margin-bottom: 1em;
         }
-    } // button
+    }
 
     .meta {
         clear: both;
@@ -146,13 +148,14 @@
             color: lighten($midgrey, 5%);
             text-decoration: none;
         }
-    } // a
-
-} // .login-form
+    }
+}//.login-form
 
 
 //
-// Signup / Reset
+// Signup & Reset
+// Slug: /ghost/signup
+// Slug: /ghost/reset/t0k3n
 // --------------------------------------------------
 
 .signup-form,
@@ -166,8 +169,7 @@
         width: 264px;
     }
 
-    div { // Yes. Really.
-        // TODO: Same here as above
+    .password-wrap {
         position: relative;
         margin: 0 0 1em 0;
         background: lighten($darkgrey, 10%);
@@ -187,28 +189,28 @@
     .name-wrap {
         position: relative;
         border-radius: 2px;
+    }
 
-        .name {
-            border-radius: 2px;
-        }
+    .name {
+        border-radius: 2px;
     }
 
     .email-wrap {
         position: relative;
         border-radius: 2px;
+    }
 
-        .email {
-            border-radius: 2px;
-        }
+    .email {
+        border-radius: 2px;
     }
 
     .password-wrap {
         position: relative;
         border-radius: 2px;
+    }
 
-        .password {
-            border-radius: 2px;
-        }
+    .password {
+        border-radius: 2px;
     }
 
     button {
@@ -220,12 +222,12 @@
         min-width: 80px;
         box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
     }
-
-} // .signup-form, .reset-form
+}//.signup-form, .reset-form
 
 
 //
 // Forgot Password
+// Slug: /ghost/forgotten
 // --------------------------------------------------
 
 .forgotten-form {
@@ -240,21 +242,15 @@
         float: left;
         border-radius: 2px;
         width: 100%;
-    } // .email-wrap
+    }
 
     .email {
         padding: 8px 10px;
         border-radius: 2px;
-    } // .email
+    }
 
     button {
         width: 100%;
-        height: 36px;
-        margin: 0 0 1em 0;
-        padding: 0.5em 1.37em;
-        min-height: 30px;
-        min-width: 80px;
-        box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
-    } // button
-
-} // .forgotten-form
\ No newline at end of file
+        height: 37px;
+    }
+}//.forgotten-form
\ No newline at end of file
diff --git a/core/client/assets/sass/layouts/content.scss b/core/client/assets/sass/layouts/content.scss
index 4f0eb5f0175d..526aca88f5b9 100644
--- a/core/client/assets/sass/layouts/content.scss
+++ b/core/client/assets/sass/layouts/content.scss
@@ -1,7 +1,21 @@
-//
+// ------------------------------------------------------------
 // Content Management
-// --------------------------------------------------
 // Slug: /ghost/
+//
+// Styles for the content management page, which is where
+// the posts are listed.
+//
+// * Container
+// * Show/Hide on mobile
+// * Content List
+// * Preview
+// * No Posts
+// * Keyboard Focus Animations
+// ------------------------------------------------------------
+
+
+//
+// Container
 // --------------------------------------------------
 
 .content-view-container {
@@ -14,11 +28,16 @@
     }
 }
 
-// Show/hide content list & preview on mobile
+
+//
+// Show/Hide on mobile
+// --------------------------------------------------
+
 .content-list {
     &.show-menu {
         display: block;
     }
+
     &.show-content {
         display: none;
     }
@@ -28,11 +47,17 @@
     &.show-menu {
         display: none;
     }
+
     &.show-content {
         display: block;
     }
 }
 
+
+//
+// Content List
+// --------------------------------------------------
+
 .content-list {
     width: 33%;
     padding: 15px;
@@ -53,6 +78,7 @@
     .content-filter {
         position: relative;
         z-index: 300;
+
         > a {
             padding: 5px;
             margin-left: -5px;
@@ -63,21 +89,6 @@
         }
     }
 
-    &.keyboard-focused {
-        // This has to be a pseudo element to sit over the top of everything else in the content list
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 500;
-            pointer-events: none;
-            animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
-        }
-    }
-
     .btn-green {
         @include icon($i-add);
         position: absolute;
@@ -94,9 +105,9 @@
         right: 0;
         bottom: 0;
         left: 0;
+        padding-top: 40px;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
-        padding-top: 40px;
     }
 
     .entry-title {
@@ -110,6 +121,7 @@
         float: right;
         text-align: right;
         margin-left: 15px;
+
         @media (max-width: 900px) {
             float: none;
         }
@@ -119,8 +131,13 @@
         font-size: 1.3rem;
         font-weight: 300;
 
-        .draft { color: $red; }
-        .scheduled { color: $orange; }
+        .draft {
+            color: $red;
+        }
+
+        .scheduled {
+            color: $orange;
+        }
     }
 
     .featured .status {
@@ -143,16 +160,9 @@
         border-bottom: $lightbrown 1px solid;
 
         a {
-
             display: block;
             padding: 20px 20px;
             color: rgba(0,0,0,0.5);
-            @media (max-width: 400px) {
-                padding: 15px;
-            }
-            @media (max-width: 900px) {
-                padding-right: 40px;
-            }
 
             @include icon-after($i-chevron) {
                 position: absolute;
@@ -160,24 +170,29 @@
                 margin-top: -6px;
                 right: 15px;
             }
-            @media (min-width: 901px) {
-                &:after {
-                    display: none;
-                }
-            }
 
             &:hover {
                 text-decoration: none;
             }
 
-        } // a
+            @media (max-width: 400px) {
+                padding: 15px;
+            }
 
-    } // li
+            @media (max-width: 900px) {
+                padding-right: 40px;
+            }
+
+            @media (min-width: 901px) {
+                &:after {
+                    display: none;
+                }
+            }
+        }//a
+    }//li
 
     li.active {
         @media (min-width: 901px) {
-            // only apply active styles on larger devices
-
             border-bottom: lighten($midgrey, 40%) 1px solid;
             background: lighten($lightbrown, 5%);
             box-shadow:
@@ -190,11 +205,9 @@
                 color: $darkgrey;
                 font-weight: normal;
             }
-
         }
-    } // li.active
-
-} // .content-list
+    }//li.active
+}//.content-list
 
 
 //
@@ -218,16 +231,13 @@
         overflow: visible;
     }
 
-    &.keyboard-focused {
-        animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
-    }
-
     .unfeatured {
         @include icon($i-unfeatured, 14px);
         vertical-align: -6%;
         margin: 0 7px 0 -5px;
         padding: 3px;
     }
+
     .featured {
         @include icon($i-featured, 14px);
         vertical-align: -6%;
@@ -259,7 +269,7 @@
             max-width: 700px;
             margin:0 auto;
         }
-    } // .content-preview-content
+    }
 
     .post-controls {
         float:right;
@@ -281,10 +291,11 @@
         width:100%;
         height:auto;
     }
-} // .content-preview
+}//.content-preview
 
 .post-preview-header {
-    .page-title, .btn-back {
+    .page-title,
+    .btn-back {
         display: none;
     }
 
@@ -319,7 +330,6 @@
             right: 4px;
         }
 
-
         .post-edit {
             color: #fff;
             background-color: transparent;
@@ -327,20 +337,26 @@
 
         .featured, .unfeatured, small {
             display: none;
-        } // @media (max-width: 900px)
-    }
+        }//@media (max-width: 900px)
+    }//@media (max-width: 900px)
 
     @media (min-width: 901px) {
         .unfeatured, .featured {
             float: left;
         }
+
         .post-published-by {
             float: left;
             margin-top: 7px;
             margin-left: 3px;
         }
     }
-} // .post-preview-header
+}//.post-preview-header
+
+
+//
+// No Posts
+// --------------------------------------------------
 
 .no-posts-box {
     position: relative;
@@ -349,6 +365,7 @@
     padding: 0px;
     display: table;
     z-index: 600;
+
     @media (max-width: 900px) {
         position: fixed;
         top: 45%;
@@ -359,6 +376,7 @@
         vertical-align: middle;
         display: table-cell;
         text-align: center;
+
         @media (max-width: 900px) {
             display: block;
             position: relative;
@@ -370,6 +388,30 @@
             font-weight: 200;
             font-size: 2em;
         }
-    } // ,no-posts
+    }//.no-posts
+}//.no-posts-box
+
+
+//
+// Keyboard Focus Animations
+// --------------------------------------------------
+
+// The inset shadow to show which area has keyboard focus
+.content-list.keyboard-focused {
+    // This has to be a pseudo element to sit over the top of everything else in the content list
+    &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 500;
+        pointer-events: none;
+        animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
+    }
+}
 
-} // .no-posts-box
+.content-preview.keyboard-focused {
+    animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/layouts/default.scss b/core/client/assets/sass/layouts/default.scss
index 3ffab74c3c50..f42306e251ee 100644
--- a/core/client/assets/sass/layouts/default.scss
+++ b/core/client/assets/sass/layouts/default.scss
@@ -1,6 +1,20 @@
+// ------------------------------------------------------------
+// Default Styles
+//
+// Styles for containers and elements used throughout Ghost
+//
+// * Global Container
+// * Main Layout
+// * Content Panel
+// * The header bar
+// ------------------------------------------------------------
+
+
 //
 // Global Container
 // --------------------------------------------------
+// Absolutely everything goes in here. It helps
+// reliably position other elements,
 
 #container {
     position: absolute;
@@ -11,11 +25,12 @@
     overflow: hidden;
 }
 
+
 //
 // Main Layout
 // --------------------------------------------------
-
 // The <main> content wrapper
+
 .viewport {
     position: absolute;
     top: 0;
@@ -30,17 +45,20 @@
         transition: transform 0.4s cubic-bezier($settings-menu-bezier);
     }
 
-    // This selector ends up being `body.settings-menu-expanded .viewport`
+    // Compiles to `body.settings-menu-expanded .viewport`
     body.global-nav-expanded & {
         transform: translate3d(260px, 0px, 0px);
     }
 
-    // This selector ends up being `body.settings-menu-expanded .viewport`
+    // Compiles to `body.settings-menu-expanded .viewport`
     body.settings-menu-expanded & {
         @media (max-width: 350px) {
             transform: translate3d(-100%, 0px, 0px);
         }
+
         @media (min-width: 351px) {
+            transform: translate3d(-350px, 0px, 0px);
+
             &:before {
                 content: '';
                 position: absolute;
@@ -51,15 +69,39 @@
                 width: 1px;
                 background: #EDECE4;
             }
-            transform: translate3d(-350px, 0px, 0px);
         }
     }
+}//.viewport
+
+
+//
+// Content Panel
+// --------------------------------------------------
+// We can't use position:fixed on .page-header because it would
+// break the mobile menu. So we create an overflow-auto content
+// area which scrolls just underneath the header, making it look
+// like the header is position:fixed.
+
+.page-content {
+    position: absolute;
+    top: 60px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #fff;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    @media (max-width: 900px) {
+        top: 44px;
+    }
 }
 
 
 //
-// The header bar - visible below 900px
+// The header bar
 // --------------------------------------------------
+// Visible below 900px, as the nav isn't covering this.
 
 .page-header {
     position: relative;
@@ -113,28 +155,4 @@
     width: 44px;
     height: 44px;
     color: #fff;
-}
-
-
-//
-// The panel which wraps the main content area
-// --------------------------------------------------
-// We can't use position:fixed on .page-header because it would
-// break the mobile menu. So we create an overflow-auto content
-// area which scrolls just underneath the header, making it look
-// like the header is position:fixed.
-
-.page-content {
-    position: absolute;
-    top: 60px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: #fff;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    @media (max-width: 900px) {
-        top: 44px;
-    }
-}
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
index 189fc2b7520d..8f0cf0edc045 100644
--- a/core/client/assets/sass/layouts/editor.scss
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -1,10 +1,25 @@
-//
+// ------------------------------------------------------------
 // Editor
-// --------------------------------------------------
 // Slug: /ghost/editor/
+//
+// Styles for the Editor
+//
+// * Post Title
+// * Container & Floating Headers
+// * Editor
+// * Markdown Help Icon
+// * Post Preview
+// * Zen Mode
+// * Publish Bar
+// * Post Settings Menu meta Data
+// * Markdown Help Modal
+// ------------------------------------------------------------
+
+
+//
+// Post Title
 // --------------------------------------------------
 
- // The main post title
 .entry-container .entry-title {
     height: 60px;
     padding: 0 20px;
@@ -25,7 +40,12 @@
             outline: 0;
         }
     }
-} // .entry-title
+}//.entry-title
+
+
+//
+// Container & Floating Headers
+// --------------------------------------------------
 
 .editor {
 
@@ -41,8 +61,13 @@
     }
 
     // The two content panel wrappers, positioned left/right
-    .entry-markdown { left: 0; }
-    .entry-preview { right: 0; border-left: $lightbrown 1px solid; }
+    .entry-markdown {
+        left: 0;
+    }
+    .entry-preview {
+        right: 0;
+        border-left: $lightbrown 1px solid;
+    }
 
     // The visual styles for both panels
     .entry-markdown,
@@ -55,8 +80,16 @@
         border-top: $lightbrown 1px solid;
         background: #fff;
 
-        // Convert all content areas to small boxes
+        // Hide markdown icon + wordcount when we hit mobile
+        @media (max-width: 400px) {
+            .markdown-help,
+            .entry-word-count {
+                display: none;
+            }
+        }
+
         @media (max-width: 1000px) {
+            // Convert all content areas to small boxes
             top: 100px;
             left: 0;
             right: 0;
@@ -64,13 +97,23 @@
             border: none;
             z-index: 100;
             min-height: 380px;
-            .markdown, .entry-preview-content {
+
+            .markdown,
+            .entry-preview-content {
                 height: 50px;
                 overflow: hidden;
             }
-        }
+
+            // Correctly colour the markdown icon when inactive and hovered
+            &:not(.active) .markdown-help:hover:before {
+                color: #fff;
+            }
+        }//@media (max-width: 1000px)
 
         .floatingheader {
+            a {
+                color: $brown;
+            }
 
             // Turn headers into tabs which act as links
             // both headers set to grey/inactive colour
@@ -90,27 +133,12 @@
                 }
             }
 
-            a {
-                color: $brown;
-            }
-
             .entry-word-count {
                 float: right;
                 position: relative;
                 top: 2px;
             }
-
-        }
-
-        @media (max-width: 1000px) {
-            &:not(.active) {
-                .markdown-help {
-                    &:hover:before {
-                        color: #fff;
-                    }
-                }
-            }
-        }
+        }//.floatingheader
 
         // Give the tab with the .active class the highest z-index
         &.active {
@@ -133,24 +161,23 @@
                 color: $brown;
                 background: #fff;
                 box-shadow: none;
+
                 a {
                     color: $brown;
                 }
             }
         }
+    }//.entry-markdown, .entry-preview
 
-        // Hide markdown icon + wordcount when we hit mobile
-        @media (max-width: 400px) {
-            .markdown-help,
-            .entry-word-count {
-                display: none;
-            }
-        }
+}
 
-    } // .entry-markdown, .entry-preview
 
-    .entry-markdown-content {
+//
+// Editor
+// --------------------------------------------------
 
+.editor {
+    .entry-markdown-content {
         textarea {
             border: 0;
             width: 100%;
@@ -166,25 +193,27 @@
             left: 0;
             -webkit-overflow-scrolling: touch;
 
+            &:focus {
+                outline: 0;
+            }
+
             @media (max-width: 600px) {
                 padding: 10px;
             }
+
             @media (min-width: 601px) and (max-width: 1000px) {
                 padding: 15px;
             }
+
             @media (min-width: 1001px) {
                 top: 40px;
             }
+
             @media (max-height: 560px) {
                 height: calc(100% - 5px);
             }
-
-            &:focus {
-                outline: 0;
-            }
-        }
-
-    } // .entry-markdown-content
+        }//textarea
+    }//.entry-markdown-content
 
     .CodeMirror {
         height: auto;
@@ -220,6 +249,7 @@
         @media (max-width: 1000px) {padding-top: 25px;}
         @media (max-width: 400px) {padding: 15px 0;}
     }
+
     .CodeMirror pre {
         padding: 0 40px; /* Horizontal padding of content */
         @media (max-width: 400px) {padding: 0 15px;}
@@ -275,39 +305,39 @@
         user-select: none;
         cursor: default;
 
-        // Tweak padding for smaller screens
-        @media (max-width: 1000px) {
-            padding-top: 20px;
-        }
         @media (max-width: 400px) {
             padding: 15px;
         }
+
+        @media (max-width: 1000px) {
+            padding-top: 20px;
+        }
     }
 
     // Special case, when scrolling, add shadows to content headers.
-    .scrolling {
-
-        .floatingheader {
-            @media (max-width: 1000px) {
+    @media (max-width: 1000px) {
+        .scrolling{
+            .floatingheader {
                 box-shadow: none;
-            }
 
-            &::before,
-            &::after {
-                @media (max-width: 1000px) {
+                &:before,
+                &:after {
                     display: none;
                 }
             }
-        }
-        .CodeMirror-scroll,
-        .entry-preview-content {
-            @media (max-width: 1000px) {
+
+            .CodeMirror-scroll,
+            .entry-preview-content {
                 box-shadow: 0 5px 5px rgba(0,0,0,0.05) inset;
             }
         }
-    } // .scrolling
+    }
+}//.editor
 
-} // .editor
+
+//
+// Markdown Help Icon
+// --------------------------------------------------
 
 .markdown-help {
     position: relative;
@@ -344,10 +374,12 @@
         text-decoration: none;
         color: $grey;
     }
+
     .img-placeholder {
         border: 5px dashed $grey;
         height: 100px;
         position: relative;
+
         span {
             display: block;
             height: 30px;
@@ -358,18 +390,19 @@
             text-align: center;
         }
     }
+
     a {
         &.image-edit {
             width: 16px;
             height: 16px;
         }
     }
+
     img {
         max-width: 100%;
         height: auto;
         margin: 0 auto;
     }
-
 }
 
 // Placeholder objects for <script> & <iframe>
@@ -391,9 +424,11 @@
 
 body.zen {
     background: lighten($lightbrown, 3%);
+
     .usermenu {
         display: none;
     }
+
     .global-nav,
     .page-header,
     #publish-bar {
@@ -413,8 +448,7 @@ body.zen {
         bottom: 0;
         transition: all 0.5s ease-out;
     }
-
-}
+}//body.zen
 
 
 //
@@ -456,8 +490,7 @@ body.zen {
             border-top: rgba(255,255,255,0.3) 1px solid;
         }
     }
-
-}
+}//#publish-bar
 
 .extended-tags { // When the tag bar is exapanded
     position: static;
@@ -468,6 +501,7 @@ body.zen {
             right: 10px;
         }
     }
+
     .tags {
         width: 281px;
     }
@@ -488,10 +522,9 @@ body.zen {
     .right {
         display: none;
     }
-}
+}//.extended-tags
 
 #entry-tags {
-
     input[type="text"].tag-input {
         display: inline-block;
         vertical-align: top;
@@ -499,7 +532,6 @@ body.zen {
         font-weight: 300;
         background: transparent;
         border: none;
-
         width: 100%;
         line-height: 1;
         padding: 9px;
@@ -523,26 +555,26 @@ body.zen {
         background: lighten($grey, 15%);
         border-radius: $border-radius;
         box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset, #000 0 1px 3px;
-
         user-select: none;
 
         &:hover {
             cursor: pointer;
         }
     }
-}
+}//#entry-tags
 
 .suggestions {
-
     top: auto;
     bottom: calc(100% + 15px);
 
     li.selected {
-        &, a {
+        &,
+        a {
             text-decoration: none;
             color: #fff;
             background: $blue;
         }
+
         mark {
             color: #fff;
         }
@@ -553,7 +585,6 @@ body.zen {
         color: #000;
         font-weight: bold;
     }
-
 }
 
 #entry-actions {
@@ -563,6 +594,7 @@ body.zen {
     align-items: center;
     margin-right: 6px;
     position: relative;
+
     .dropdown {
         position: absolute;
         bottom: 49px;
@@ -591,7 +623,7 @@ body.zen {
             display: none;
         }
     }
-}
+}//#entry-actions
 
 #entry-actions-menu {
     position: absolute;
@@ -601,6 +633,7 @@ body.zen {
 
 .tags-wrapper {
     white-space: nowrap;
+
     span {
         display: inline-block;
         margin-right: 10px;
@@ -612,6 +645,7 @@ body.zen {
     width: 40px;
     height: 40px;
     position: relative;
+
     &:before {
         position: absolute;
         top: 50%;
@@ -621,10 +655,12 @@ body.zen {
         color: #7D878A;
         transition: color 0.15s linear;
     }
+
     &:hover:before {
         color: #fff;
     }
-}//.tag-label
+}
+
 #entry-tags.focused {
     .tag-label:before {
         color: #fff;
@@ -636,10 +672,8 @@ body.zen {
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: space-between;
-
     align-items: center;
     justify-content: center;
-
     height: 100%;
     width: 100%;
 }
@@ -666,8 +700,7 @@ body.zen {
         padding-bottom: 9px;
         height: 70px;
     }
-
-}//.publish-bar-2
+}
 
 .publish-bar-tags-input {
     flex: 1 1 auto;
@@ -694,22 +727,20 @@ body.zen {
     &.active {
         color: $darkgrey;
     }
-} // .post-settings
+}//.post-settings
 
 .post-settings-menu {
-
     .dropdown-menu {
         top: auto;
         bottom: 100%;
         left: auto;
         right: 100%;
     }
-
-} // .post-settings-menu
+}//.post-settings-menu
 
 
 //
-// Post Settings Menu eta Data
+// Post Settings Menu meta Data
 // --------------------------------------------------
 
 // These styles are copied from Google.com
diff --git a/core/client/assets/sass/layouts/error.scss b/core/client/assets/sass/layouts/error.scss
index e0aea29f0617..0ba3365ebf6a 100644
--- a/core/client/assets/sass/layouts/error.scss
+++ b/core/client/assets/sass/layouts/error.scss
@@ -1,9 +1,18 @@
-//
+// ------------------------------------------------------------
 // Error Pages
-// --------------------------------------------------
 // Slug: /ghost/404
-// --------------------------------------------------
+//
 // Covers styles for all error screens, eg. 404, 500
+//
+// * Wrappers
+// * Image & error info
+// * Stack Trace
+// ------------------------------------------------------------
+
+
+//
+// Wrappers
+// --------------------------------------------------
 
 .error-content {
     max-width: 530px;
@@ -23,6 +32,11 @@
     vertical-align: middle;
 }
 
+
+//
+// Image & error info
+// --------------------------------------------------
+
 .error-image {
     display: inline-block;
     vertical-align: middle;
@@ -72,6 +86,11 @@
     }
 }
 
+
+//
+// Stack Trace
+// --------------------------------------------------
+
 .error-stack {
     margin: 1em auto;
     padding: 2em;
@@ -88,7 +107,7 @@
 .error-stack-list li {
     display: block;
 
-    &::before {
+    &:before {
         color: #BBB;
         content: "\21AA";
         display: inline-block;
diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss
index 3c1b7ba7d177..222ed0d681ba 100644
--- a/core/client/assets/sass/layouts/settings.scss
+++ b/core/client/assets/sass/layouts/settings.scss
@@ -1,15 +1,21 @@
-//
+// ------------------------------------------------------------
 // Settings
-// --------------------------------------------------
-// Slug: /ghost/settings/
-// --------------------------------------------------
+// Slug: /ghost/settings/[many]
+//
+// Styles for the content management page, which is where
+// the posts are listed.
+//
+// * Navigation
+// * Content
+// * Headers
+// * Custom Permalinks
+// ------------------------------------------------------------
 
 
 //
-// Sidebar
+// Navigation
 // --------------------------------------------------
 
-// Settings navigation
 .settings-nav {
     width: 25%;
     position: absolute;
@@ -19,11 +25,9 @@
     z-index: 700;
     background: #fff;
     box-shadow: $lightbrown 1px 0 0;
-    @media (max-width: 900px) {
-        width: 100%;
-    }
 
     @media (max-width: 900px) {
+        width: 100%;
         top: 0;
     }
 
@@ -32,12 +36,15 @@
         margin: 0;
         padding: 0;
         border-top: none;
-        @media (max-width: 900px) { border-bottom: #edece4 1px solid; }
+        @media (max-width: 900px) {
+            border-bottom: #edece4 1px solid;
+        }
     }
 
     li {
         border-top: #fff 1px solid;
         position: relative;
+
         @media (max-width: 900px) {
             margin-right: 0;
             border-top: #edece4 1px solid;
@@ -49,7 +56,6 @@
             top: 50%;
             left: 30px;
             transform: translateY(-50%);
-
             transition: color 0.1s;
             color: $brown;
 
@@ -57,6 +63,7 @@
                 left: 15px;
             }
         }
+
         &:hover:before {
             color: $darkgrey;
         }
@@ -86,21 +93,15 @@
             // Make space for icons
             &:before {
                 margin-right: 20px;
+
                 @media (max-width: 900px) {
                     margin-right: 15px;
                 }
             }
-        }
+        }//a
 
         &.active {
             @media (min-width: 900px) {
-                // only apply active styles on larger devices
-
-                // The icon
-                &:before {
-                    color: $darkgrey;
-                }
-
                 margin-right: 0;
                 position: relative;
                 z-index: 300;
@@ -108,28 +109,28 @@
                 box-shadow: #fff 1px 0 0, #edece4 0 1px 0;
                 transition: all 0.15s ease-out 0s;
 
+                // The icon
+                &:before {
+                    color: $darkgrey;
+                }
+
                 a {
                     color: $darkgrey;
                     font-weight: bold;
                     background: #fff;
+
                     &:focus {
                         background: $lightbrown;
                     }
                 }
-
             }
-        } // .active
+        }//.active
 
         &:first-of-type {
             border-top: none;
         }
-        &:first-of-type.active {
-            border-top: none;
-        }
-
-    } // li
-
-} // .settings-nav
+    }//li
+}//.settings-nav
 
 // Special cases for nav items
 .settings-nav-labs .icon-labs:before {
@@ -140,10 +141,9 @@
 //
 // Content
 // --------------------------------------------------
-
 // The main content panel on the right
-.settings-content {
 
+.settings-content {
     @media (max-width: 900px) {
         &.fade-in {
             animation: none;
@@ -156,7 +156,6 @@
         right: 0;
         left: 25%;
         bottom: 0;
-
         overflow: auto;
         -webkit-overflow-scrolling: touch;
     }
@@ -170,10 +169,6 @@
     .content {
         padding: 40px;
 
-        @media (max-width: 900px) {
-            padding-left: 15px;
-            padding-right: 15px;
-        }
         @media (max-width: 550px) {
             padding-top: 15px;
         }
@@ -184,22 +179,29 @@
             right: 0;
             bottom: 0;
             left: 0;
+            padding-left: 15px;
+            padding-right: 15px;
             overflow-x: hidden;
             overflow-y: auto;
             -webkit-overflow-scrolling: touch;
         }
-
-    } // .content
+    }//.content
 
     .word-count {
         float: right;
         font-weight: bold;
     }
-} // .settings-content
+}//.settings-content
 
+
+//
+// Headers
+// --------------------------------------------------
 // This is the header for /ghost/settings/view/
-// It's black and fixed position at the top of the screen
-.settings-view-header {
+// On mobile, it's black and fixed position at the top of the screen
+
+.settings-view-header,
+.settings-subview-header {
     position: fixed;
     top: 0;
     left: 0;
@@ -229,25 +231,15 @@
         position: absolute;
         top: 4px;
         right: 4px;
-
     }
 
-    // Desktop
-    // On larger viewports, make it look like a simple heading
     @media (min-width: 900px) {
         position: static;
         height: auto;
         padding: 30px 40px;
-        text-align: left;
         line-height: 1.15em;
         background: none;
 
-        .btn-back {
-            display: none;
-            vertical-align: middle;
-            color: #666;
-        }
-
         .btn {
             vertical-align: middle;
             line-height: 1.428571429;
@@ -266,83 +258,33 @@
             position: static;
             float: right;
         }
-    }
-}
+    }//@media (min-width: 900px)
+}//.settings-view-header, .settings-subview-header
 
 
-// This is the header for /ghost/settings/view/subview/
-// It's black and fixed position at the top of the screen
-.settings-subview-header {
-    @include clearfix;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 3000;
-    height: 44px;
-    line-height: 44px;
-    text-align: center;
-    color: #fff;
-    background: #242628;
-
-    .btn-back {
-        position: absolute;
-        top: 4px;
-        left: 4px;
-        color: #fff;
-        background: transparent;
-    }
-
-    .btn {
-        vertical-align: top;
-        line-height: 1.45;
-    }
-
-    .page-actions {
-        position: absolute;
-        top: 4px;
-        right: 4px;
+.settings-view-header {
+    @media (min-width: 900px) {
+        text-align: left;
 
+        .btn-back {
+            display: none;
+            vertical-align: middle;
+            color: #666;
+        }
     }
+}
 
-    // Desktop
-    // On larger viewports, make it look like a simple heading
+.settings-subview-header {
     @media (min-width: 900px) {
-        position: static;
-        height: auto;
-        padding: 30px 40px;
-        line-height: 1.15em;
-        background: none;
-
         .btn-back {
             position: static;
             float:left;
             color: #666;
         }
-
-        .btn {
-            vertical-align: middle;
-            line-height: 1.428571429;
-        }
-
-        .page-title {
-            display: inline;
-            padding: 0;
-            font-size: 2.6rem;
-            line-height: 1.3;
-            overflow: visible;
-            color: $darkgrey;
-        }
-
-        .page-actions {
-            position: static;
-            float: right;
-        }
     }
 }
 
 
-
 //
 // Custom Permalinks
 // --------------------------------------------------
diff --git a/core/client/assets/sass/layouts/setup.scss b/core/client/assets/sass/layouts/setup.scss
index 749ca39cbafe..8032570b37e1 100644
--- a/core/client/assets/sass/layouts/setup.scss
+++ b/core/client/assets/sass/layouts/setup.scss
@@ -1,14 +1,24 @@
-//
+// ------------------------------------------------------------
 // Setup
-// --------------------------------------------------
+//
+// Styles for the Tag Management screen
 // Slug: /ghost/setup/
+//
+// * Page
+// * Wrapper
+// * Form
+// ------------------------------------------------------------
+
+
+//
+// Page
 // --------------------------------------------------
-// These styles cover /ghost/setup/ which is the first
-// screen that appears on a new Ghost install
+// Applied to the <body> element
 
 .ghost-setup {
     color: $midgrey;
     background: $darkgrey;
+
     @media (max-width: 550px) {
         background: darken($darkgrey, 5%);
     }
@@ -17,13 +27,19 @@
         padding-top: 15px;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
+
         @media (max-width: 550px) {
             top: 0;
         }
     }
 }
 
-// The wrapper to center the form in all ways
+
+//
+// Wrapper
+// --------------------------------------------------
+// Centered in the middle of the screen
+
 .setup-box {
     display: table;
     max-width: 500px;
@@ -32,24 +48,30 @@
     padding: 0;
 }
 
-// The form itself with the dark background
+
+//
+// Form
+// --------------------------------------------------
+
 .setup-form {
     max-width: 530px;
     padding: 40px;
     color: lighten($midgrey, 15%);
-    background: darken($darkgrey, 5%);
     border-radius: 2px;
 
     @media (max-width: 400px) {
         padding: 15px;
     }
 
+    @media (min-width: 551px) {
+        background: darken($darkgrey, 5%);
+    }
+
     header {
         margin-bottom: 30px;
     }
 
     label {
-        // width: 90px;
         color: $lightgrey;
         font-weight: 300;
 
@@ -59,7 +81,6 @@
     }
 
     .form-group input {
-        // width: 300px;
         padding: 7px;
         border: none;
         color: #fff;
@@ -84,6 +105,10 @@
         letter-spacing: 0;
         color: $lightgrey;
 
+        @media (max-width: 400px) {
+            font-size: 18px;
+        }
+
         @media (max-width: 550px) {
             font-size: 20px;
         }
@@ -97,7 +122,10 @@
         font-size: 16px;
         letter-spacing: 0;
         color: $midgrey;
-        white-space: nowrap;
+
+        @media (max-width: 400px) {
+            font-size: 12px;
+        }
 
         @media (max-width: 550px) {
             font-size: 14px;
@@ -119,4 +147,4 @@
         padding: 0.9em 1.8em;
         font-size: 13px;
     }
-}
\ No newline at end of file
+}//.setup-form
\ No newline at end of file
diff --git a/core/client/assets/sass/layouts/tags.scss b/core/client/assets/sass/layouts/tags.scss
index 01f20b7e581e..f0817c6687fc 100644
--- a/core/client/assets/sass/layouts/tags.scss
+++ b/core/client/assets/sass/layouts/tags.scss
@@ -1,10 +1,18 @@
-//
+// ------------------------------------------------------------
 // Tag Management
-// --------------------------------------------------
-// Slug: /ghost/settings/tags
-// --------------------------------------------------
+//
+// Styles for the Tag Management screen
+// Slug: /ghost/settings/tags/
+//
+// * Tags search
+// * Tag Item
+// ------------------------------------------------------------
 
+
+//
 // Tags search
+// --------------------------------------------------
+
 .tags-search {
     position: relative;
     display: inline-block;
@@ -16,12 +24,13 @@
         padding-right: 10px;
         transition: padding 0.3s ease-in-out;
 
-        .icon-search:before {
-            font-size: 1.3rem;
-        }
         &.active {
             box-shadow: none;
         }
+
+        .icon-search:before {
+            font-size: 1.3rem;
+        }
     }
 
     .tags-search-input {
@@ -40,16 +49,11 @@
     }
 
     &.opened {
-
-        .tags-search-input {
-            opacity: 1;
-            pointer-events: auto;
-        }
-
         @media (max-width: 400px) {
             .btn {
                 padding-left: 120px;
             }
+
             .tags-search-input {
                 width: 110px;
             }
@@ -59,13 +63,24 @@
             .btn {
                 padding-left: 140px;
             }
+
             .tags-search-input {
                 width: 130px;
             }
         }
-    }
+
+        .tags-search-input {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }//&.opened
 }//.tags-search
 
+
+//
+// Tag Item
+// --------------------------------------------------
+
 .settings-tag {
     position: relative;
     padding: 0 45px 0 0;
@@ -94,6 +109,7 @@
         position: relative;
         top: -2px;
     }
+
     .label-alt {
         text-transform: uppercase;
     }
@@ -117,32 +133,4 @@
         font-size: 16px;
         color: $midbrown;
     }
-}//.settings-tag
-
-// Tags with a parent get the arrow, and slightly different padding/margin
-// .settings-tag .settings-tag {
-//     margin-left: 36px;
-//     padding-bottom: 0;
-//     border-bottom: 0;
-//     margin-right: -35px;
-
-//     &:before,
-//     &:after {
-//         content: '';
-//         background: $lightbrown;
-//         position: absolute;
-//     }
-
-//     &:before {
-//         width: 1px;
-//         height: 16px;
-//         top: 16px;
-//         left: -34px;
-//     }
-//     &:after {
-//         width: 16px;
-//         height: 1px;
-//         top: 32px;
-//         left: -34px;
-//     }
-// }//.settings-tag .settings-tag
\ No newline at end of file
+}//.settings-tag
\ No newline at end of file
diff --git a/core/client/assets/sass/layouts/user.scss b/core/client/assets/sass/layouts/user.scss
index d2f36de8dfa8..2099804921f3 100644
--- a/core/client/assets/sass/layouts/user.scss
+++ b/core/client/assets/sass/layouts/user.scss
@@ -1,7 +1,38 @@
+// ------------------------------------------------------------
+// User
 //
-// Users
+// Styles for the Edit User page
+// Slug: /ghost/settings/users/:username/
+//
+// * User Actions
+// * Content Wrapper
+// * Cover Image
+// * Edit User Details
+// * User Image (Avatar)
+// ------------------------------------------------------------
+
+
+//
+// User Actions
 // --------------------------------------------------
-// Slug: /ghost/settings/users/username/
+
+.user-actions-cog {
+    padding: 9px 11px;
+}
+
+.user-actions-menu {
+    left: auto;
+    right: 0;
+    top: calc(100% + 17px);
+
+    &.fade-out {
+        animation-duration: 0.01s;
+    }
+}
+
+
+//
+// Content Wrapper
 // --------------------------------------------------
 
 .content.settings-user {
@@ -12,9 +43,10 @@
     }
 }
 
-.user-actions-cog {
-    padding: 9px 11px;
-}
+
+//
+// Cover Image
+// --------------------------------------------------
 
 .user-cover {
     position: relative;
@@ -37,7 +69,7 @@
         right: 0;
         bottom: 0;
         height: 110px;
-        background: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.18) );
+        background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.18));
     }
 }
 
@@ -53,6 +85,7 @@
     border-width: 0;
     border-radius: $border-radius;
     transition: color 0.3s ease, background 0.3s ease;
+
     @media (max-width: 1000px) {
         right: 15px;
     }
@@ -63,62 +96,49 @@
     }
 }
 
-.user-image + .form-group {
+
+//
+// Edit User Details
+// --------------------------------------------------
+
+.first-form-group {
     max-width: 500px;
-    @media (min-width: 651px) and (max-width: 1000px) {
-        width: calc(100% - 201px);
-    }
+
     @media (min-width: 651px) {
         min-width: 285px;
         left: 40px;
     }
-    @media (min-width: 1001px) {
-        width: calc(100% - 181px);
-    }
-}
-
-.user-profile {
-    position: relative;
-    z-index: 1;
-    @media (min-width: 651px) {
-        padding-left: 143px;
-    }
 
-    fieldset {
-        @media (max-width: 650px) {
-            padding: 0 40px;
-        }
-        @media (max-width: 550px) {
-            padding: 0 15px;
-        }
+    @media (min-width: 651px) and (max-width: 1000px) {
+        width: calc(100% - 201px);
     }
 
-    textarea {
-        min-width: 240px;
+    @media (min-width: 1001px) {
+        width: calc(100% - 181px);
     }
 }
 
 .user-details-top {
-
     position: relative;
 
     @media (max-width: 650px) {
         margin-top: 40px;
         margin-bottom: 0;
     }
-    @media (min-width: 651px) {
-        margin-top: -91px;
-    }
 
     @media (min-width: 651px) {
+        margin-top: -91px;
         margin-bottom: 0;
         padding: 0;
+
         p {
             color: #fff;
         }
+
         label[for="user-name"] {
             color: transparent;
         }
+
         .user-name {
             border-color: #fff;
         }
@@ -129,35 +149,61 @@
             width: calc(100% - 20px);
         }
     }
+}//.user-details-top
 
-}
-
-.user-image {
-    display: block;
-    position: absolute;
+.user-profile {
+    position: relative;
+    z-index: 1;
 
     @media (min-width: 651px) {
-        top: -19px;
-        left: -98px;
+        padding-left: 143px;
     }
 
-    @media (max-width: 650px) {
-        top: -159px;
-        left: 21px;
+    fieldset {
+        @media (max-width: 650px) {
+            padding: 0 40px;
+        }
+
+        @media (max-width: 550px) {
+            padding: 0 15px;
+        }
     }
 
+    textarea {
+        min-width: 240px;
+    }
+}
+
+
+//
+// User Image (Avatar)
+// --------------------------------------------------
+
+.user-image {
+    display: block;
+    position: absolute;
     width: 126px;
     height: 126px;
-    float: left;
     margin-left: -6px;
     margin-right: 20px;
+    padding: 3px;
+    float: left;
     text-align: center;
     border-radius: 100%;
     overflow: hidden;
-    padding: 3px;
     background: #fff;
     z-index: 2;
 
+    @media (min-width: 651px) {
+        top: -19px;
+        left: -98px;
+    }
+
+    @media (max-width: 650px) {
+        top: -159px;
+        left: 21px;
+    }
+
     .img {
         display: block;
         width: 120px;
@@ -172,7 +218,7 @@
             opacity: 1;
         }
     }
-}
+}//.user-image
 
 .edit-user-image {
     position: absolute;
diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss
index 67971e2f9fe9..c5ca75de5c10 100644
--- a/core/client/assets/sass/layouts/users.scss
+++ b/core/client/assets/sass/layouts/users.scss
@@ -196,17 +196,6 @@ a.user-list-item {
 }//.role-label
 
 
-//
-// User Actions
-// --------------------------------------------------
-
-.user-actions-menu {
-    left: auto;
-    right: 0;
-    top: calc(100% + 17px);
-}
-
-
 //
 // Invite User Modal
 // --------------------------------------------------
diff --git a/core/client/templates/settings/users/user.hbs b/core/client/templates/settings/users/user.hbs
index f60dd5775a81..6e6f75c06b17 100644
--- a/core/client/templates/settings/users/user.hbs
+++ b/core/client/templates/settings/users/user.hbs
@@ -39,7 +39,7 @@
                 <button type="button" {{action "openModal" "upload" user "image"}} class="edit-user-image js-modal-image">Edit Picture</button>
             </figure>
 
-            <div class="form-group">
+            <div class="form-group first-form-group">
                 <label for="user-name">Full Name</label>
                 {{input value=user.name id="user-name" class="user-name" placeholder="Full Name" autocorrect="off"}}
                 <p>Use your real name so people can recognise you</p>