Merge pull request TryGhost#4561 from PaulAdamDavis/sass-layout-cleanup

Cleanup layout Sass
hilln · Dec 3, 2014 · 52de820 · 52de820
2 parents 1375704 + 2199175
commit 52de820
Show file tree

Hide file tree

Showing 12 changed files with 619 additions and 505 deletions.
diff --git 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,16 +91,19 @@
         margin: 2px 0 0 0;
         line-height: 1.6;
     }
+
     dt, dd {
         width: auto;
         float: left;
         display: inline-block;
         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,18 +205,22 @@
                 transition: opacity 0.15s ease-in-out;
                 @include triangle(8px, $darkgrey, "down");
             }
+
             &:hover {
                 &:before,
                 &:after {
                     opacity: 1;
                 }
             }
 
-        }
-
-    } // li
-
-} // .top-contributors
+            img {
+                width: 100%;
+                display: block;
+                border-radius: 100%;
+            }
+        }//a
+    }//li
+}//.top-contributors
 
 
 //
@@ -245,12 +260,12 @@
         &:visited {
             color: inherit;
         }
+
         &:hover,
         &:focus,
         &:active {
             text-decoration: none;
             color: $blue;
         }
     }
-
-} // .about-copyright
+}//.about-copyright