Introduce CSScomb

app/styles/components/badges.css

@@ -3,18 +3,18 @@
 
 .badge {
     display: inline-block;
-    min-width: 10px;
     padding: 2px 4px;
-    box-shadow: 0 0 0 1px #777;
+    min-width: 10px;
-    font-size: 1rem;
-    font-weight: inherit;
-    color: #fff;
-    line-height: 1;
-    vertical-align: baseline;
-    white-space: nowrap;
-    text-align: center;
     background-color: #777;
     border-radius: 10px;
+    box-shadow: 0 0 0 1px #777;
+    color: #fff;
+    vertical-align: baseline;
+    text-align: center;
+    white-space: nowrap;
+    font-size: 1rem;
+    line-height: 1;
+    font-weight: inherit;
 }
 
 .badge:empty {
@@ -32,10 +32,10 @@
 }
 
 p .badge {
-    padding: 0 4px 3px;
     position: relative;
     top: -2px;
     margin-left: -1px;
+    padding: 0 4px 3px;
 }
 
 .nav-pills > li > a > .badge {

app/styles/components/dropdowns.css

@@ -15,20 +15,20 @@
     top: 100%;
     left: 0;
     float: left;
-    min-width: 220px;
-    padding: 5px 0;
     margin: 2px 0 0;
-    background-color: #fff;
+    padding: 5px 0;
+    min-width: 220px;
     border: color(var(--lightgrey) lightness(-15%)) 1px solid;
+    background-color: #fff;
+    background-clip: padding-box;
     border-radius: 4px;
     box-shadow: rgba(0, 0, 0, 0.175) 0 2px 6px;
-    background-clip: padding-box;
     list-style: none;
-    font-size: 1.4rem;
+    text-align: left;
-    font-weight: normal;
     text-transform: none;
     letter-spacing: 0;
-    text-align: left;
+    font-size: 1.4rem;
+    font-weight: normal;
 }
 
 .dropdown-menu.pull-right {
@@ -37,29 +37,29 @@
 }
 
 .dropdown-menu .divider {
-    height: 1px;
-    margin: 4px 0;
     overflow: hidden;
+    margin: 4px 0;
+    height: 1px;
     background: color(var(--lightgrey) lightness(-5%));
 }
 
 .dropdown-menu > li > a,
 .dropdown-menu > li > button {
     display: block;
-    width: 100%;
-    padding: 3px 20px;
     clear: both;
-    font-weight: normal;
+    padding: 3px 20px;
-    line-height: 1.9em;
+    width: 100%;
-    text-align: left;
     color: #333;
+    text-align: left;
     white-space: nowrap;
+    line-height: 1.9em;
+    font-weight: normal;
     transition: none;
 }
 
 .dropdown-menu i {
-    font-size: 0.9em;
     margin-right: 0.5rem;
+    font-size: 0.9em;
 }
 
 
@@ -71,9 +71,9 @@
 .dropdown-menu > li > a:focus,
 .dropdown-menu > li > button:hover,
 .dropdown-menu > li > button:focus {
-    text-decoration: none;
-    color: #fff;
     background: var(--blue);
+    color: #fff;
+    text-decoration: none;
 }
 
 /* Active */
@@ -83,10 +83,10 @@
 .dropdown-menu > .active > button,
 .dropdown-menu > .active > button:hover,
 .dropdown-menu > .active > button:focus {
-    color: #fff;
-    text-decoration: none;
     outline: 0;
     background-color: #428bca;
+    color: #fff;
+    text-decoration: none;
 }
 
 /* Disabled */
@@ -103,9 +103,9 @@
 .dropdown-menu > .disabled > a:focus,
 .dropdown-menu > .disabled > button:hover,
 .dropdown-menu > .disabled > button:focus {
-    text-decoration: none;
     background-color: transparent;
     background-image: none;
+    text-decoration: none;
     cursor: not-allowed;
 }
 

app/styles/components/modals.css

@@ -6,29 +6,29 @@
 /* ---------------------------------------------------------- */
 
 .modal-container {
-    display: none;
     position: fixed;
     top: 0;
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
     z-index: 1040;
-    padding-left: 10px;
+    display: none;
-    padding-right: 10px;
     overflow-x: auto;
     overflow-y: scroll;
+    padding-right: 10px;
+    padding-left: 10px;
     transition: all 0.15s linear 0s;
     transform: translateZ(0);
 }
 
 .modal-background {
-    display: none;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1030;
+    display: none;
     background: rgba(0, 0, 0, 0.6);
 }
 
@@ -38,15 +38,15 @@
 
 .modal,
 .modal-action {
-    left: 50%;
     right: auto;
+    left: 50%;
     z-index: 1050;
-    width: 100%;
-    max-width: 550px;
-    margin-left: auto;
     margin-right: auto;
+    margin-left: auto;
     padding-top: 30px;
     padding-bottom: 30px;
+    max-width: 550px;
+    width: 100%;
     pointer-events: auto;
 }
 
@@ -86,8 +86,8 @@
 .modal-content {
     position: relative;
     padding: 18px;
-    background-clip: padding-box;
     background-color: #fff;
+    background-clip: padding-box;
     border-radius: var(--border-radius);
     box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 6px;
 }
@@ -101,9 +101,9 @@
     top: 19px;
     right: 19px;
     z-index: 9999;
-    width: 16px;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    width: 16px;
     border: none;
 }
 
@@ -178,13 +178,13 @@
         max-width: 264px;
     }
     .modal-body .login-form .password-wrap {
-        width: 100%;
         margin: 0 auto 1em;
+        width: 100%;
     }
     .modal-body .login-form .btn {
         margin: 0;
-        width: 100%;
         margin-bottom: 1em;
+        width: 100%;
     }
 }
 

app/styles/components/pagination.css

@@ -3,8 +3,8 @@
 
 .pagination {
     display: inline-block;
-    padding-left: 0;
     margin: 20px 0;
+    padding-left: 0;
     border-radius: var(--border-radius);
 }
 
@@ -16,13 +16,13 @@
 .pagination > li > span {
     position: relative;
     float: left;
-    padding: 6px 12px;
-    line-height: 1.42857143;
-    text-decoration: none;
-    color: var(--blue);
-    background-color: #fff;
-    border: 1px solid #e1e1e1;
     margin-left: -1px;
+    padding: 6px 12px;
+    border: 1px solid #e1e1e1;
+    background-color: #fff;
+    color: var(--blue);
+    text-decoration: none;
+    line-height: 1.42857143;
 }
 
 .pagination > li:first-child > a,
@@ -42,8 +42,8 @@
 .pagination > li > a:focus,
 .pagination > li > span:hover,
 .pagination > li > span:focus {
-    color: #2a6496;
     background-color: #eee;
+    color: #2a6496;
 }
 
 .pagination > .active > a,
@@ -53,8 +53,8 @@
 .pagination > .active > span:hover,
 .pagination > .active > span:focus {
     z-index: 2;
-    color: #fff;
     background-color: #428bca;
+    color: #fff;
     cursor: default;
 }
 
@@ -64,9 +64,9 @@
 .pagination > .disabled > a,
 .pagination > .disabled > a:hover,
 .pagination > .disabled > a:focus {
-    color: #777;
-    background-color: #fff;
     border-color: #ddd;
+    background-color: #fff;
+    color: #777;
     cursor: not-allowed;
 }
 

app/styles/components/popovers.css

@@ -5,18 +5,18 @@
     position: relative;
     display: inline-block;
     padding: 11px 26px 13px 16px;
-    background: var(--darkgrey);
     min-width: 300px;
     max-width: 400px;
+    background: var(--darkgrey);
     border-radius: 6px;
-    font-size: 1.2rem;
     color: var(--midgrey);
+    font-size: 1.2rem;
 }
 
 .popover-title {
+    color: #fff;
     font-size: 1.4rem;
     font-weight: 300;
-    color: #fff;
 }
 
 .popover-desc {

app/styles/components/settings-menu.css

@@ -11,10 +11,10 @@
     right: 0;
     bottom: 0;
     z-index: 500;
+    overflow: hidden;
     width: 350px;
     border-left: #e1e1e1 1px solid;
     background: #fff;
-    overflow: hidden;
     transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
     transform: translate3d(350px, 0px, 0px);
 }
@@ -29,10 +29,10 @@ body.settings-menu-expanded .settings-menu-container {
     right: 0;
     bottom: 0;
     left: 0;
-    transform: translate3d(0, 0px, 0px);
-    opacity: 1;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+    opacity: 1;
+    transform: translate3d(0, 0px, 0px);
 }
 
 @media (min-width: 901px) {
@@ -63,10 +63,10 @@ body.settings-menu-expanded .settings-menu-container {
 }
 
 .settings-menu-header h4 {
-    font-weight: normal;
+    margin: 0;
     font-size: 1.6rem;
     line-height: 1.375;
-    margin: 0;
+    font-weight: normal;
 }
 
 .settings-menu-header .close {
@@ -93,16 +93,16 @@ body.settings-menu-expanded .settings-menu-container {
     position: absolute;
     top: 0;
     bottom: 7px;
-    width: 45px;
     padding: 0;
+    width: 45px;
 }
 
 .settings-menu-header-action:before {
     position: absolute;
     top: 50%;
-    transform: translateY(-50%);
     color: var(--midbrown);
     font-size: 2rem;
+    transform: translateY(-50%);
 }
 
 .settings-menu-header-action:hover:before {
@@ -118,9 +118,9 @@ body.settings-menu-expanded .settings-menu-container {
 }
 
 .settings-menu-content .image-uploader {
+    margin: 0 0 1.6rem 0;
     padding-top: 35px;
     padding-bottom: 35px;
-    margin: 0 0 1.6rem 0;
 }
 
 .settings-menu-content .image-uploader.image-uploader-url {
@@ -137,9 +137,9 @@ body.settings-menu-expanded .settings-menu-container {
 }
 
 .settings-menu-content .tag-delete-button:before {
-    margin-right: 4px;
-    top: -1px;
     position: relative;
+    top: -1px;
+    margin-right: 4px;
 }
 
 .settings-menu-content .tag-delete-button:hover,
@@ -152,10 +152,10 @@ body.settings-menu-expanded .settings-menu-container {
 }
 
 .settings-menu-content .pre-image-uploader {
-    width: auto;
+    margin-top: 0;
     min-height: 50px;
     max-height: 250px;
-    margin-top: 0;
+    width: auto;
 }
 
 .settings-menu-content .word-count {
@@ -163,11 +163,11 @@ body.settings-menu-expanded .settings-menu-container {
 }
 
 .ghost-url-preview {
-    width: 98%;
     /* Preview never wider than input */
     overflow: hidden;
-    white-space: nowrap;
+    width: 98%;
     text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 

app/styles/components/splitbuttons.css

@@ -38,24 +38,24 @@
 }
 
 .splitbtn .dropdown-toggle {
-    padding-left: 12px;
     padding-right: 12px;
+    padding-left: 12px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     /* This is the additional dropdown arrow, to the right of the button. */
 }
 
 .splitbtn .dropdown-toggle.btn-sm {
-    padding-left: 10px;
     padding-right: 10px;
+    padding-left: 10px;
 }
 
 .splitbtn .dropdown-toggle.btn-lg {
-    padding-left: 16px;
     padding-right: 16px;
+    padding-left: 16px;
 }
 
 .splitbtn .dropdown-toggle .options {
-    text-align: center;
     color: #fff;
+    text-align: center;
 }

app/styles/components/uploader.css

@@ -2,16 +2,16 @@
 /* ---------------------------------------------------------- */
 
 .image-uploader {
-    margin: 1.6em 0;
     position: relative;
     overflow: hidden;
+    margin: 1.6em 0;
     padding: 55px 60px;
-    border: #e1e1e1 3px dashed;
     width: 100%;
     height: auto;
-    text-align: center;
+    border: #e1e1e1 3px dashed;
-    color: var(--brown);
     background: #f9f8f5;
+    color: var(--brown);
+    text-align: center;
 }
 
 .image-uploader a {
@@ -28,14 +28,14 @@
 }
 
 .image-uploader .image-upload {
-    line-height: 12px;
-    padding: 10px;
-    display: block;
     position: absolute;
     bottom: 0;
     left: 0;
+    display: block;
+    padding: 10px;
     color: var(--brown);
     text-decoration: none;
+    line-height: 12px;
 }
 
 .image-uploader .image-upload:hover {
@@ -43,9 +43,9 @@
 }
 
 .image-uploader .btn-green {
-    display: inline-block;
     position: relative;
     z-index: 700;
+    display: inline-block;
     color: #fff;
 }
 
@@ -57,12 +57,12 @@
     position: absolute;
     right: 0;
     margin: 0;
-    opacity: 0;
-    transform-origin: right;
-    transform: scale(14);
     font-size: 23px;
-    direction: ltr;
+    opacity: 0;
     cursor: pointer;
+    transform: scale(14);
+    transform-origin: right;
+    direction: ltr;
 }
 
 .image-uploader input.main.right {
@@ -71,13 +71,13 @@
 }
 
 .image-uploader input.url {
-    font: -webkit-small-control;
-    vertical-align: middle;
-    padding: 9px 7px;
     margin: 10px 0;
+    padding: 9px 7px;
     outline: 0;
-    font-size: 1.1em;
     background: #fff;
+    vertical-align: middle;
+    font: -webkit-small-control;
+    font-size: 1.1em;
 }
 
 .image-uploader input.url + .btn.btn-blue {
@@ -86,20 +86,20 @@
 
 .image-uploader .progress {
     position: relative;
-    margin: -19px 0 44px 0;
     display: block;
     overflow: hidden;
+    margin: -19px 0 44px 0;
     background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
     border-radius: 12px;
     box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px inset;
 }
 
 .image-uploader .fileupload-loading {
-    display: block;
     top: 50%;
+    display: block;
+    margin: -28px auto 0;
     width: 35px;
     height: 28px;
-    margin: -28px auto 0;
     background-size: contain;
 }
 
@@ -123,14 +123,14 @@
 /* ---------------------------------------------------------- */
 
 .pre-image-uploader {
-    margin: 1.6em 0;
     position: relative;
     overflow: hidden;
+    margin: 1.6em 0;
+    min-height: 46px;
     height: auto;
-    color: var(--brown);
     background: rgba(0, 0, 0, 0.1);
     border-radius: 2px;
-    min-height: 46px;
+    color: var(--brown);
 }
 
 .pre-image-uploader input {
@@ -151,8 +151,8 @@
 
 .pre-image-uploader img {
     display: block;
-    max-width: 100%;
     margin: 0 auto;
+    max-width: 100%;
     line-height: 0;
 }
 
@@ -160,18 +160,18 @@
     position: absolute;
     top: 10px;
     right: 10px;
-    padding: 8px;
     z-index: 300;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: var(--border-radius);
+    box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 1px;
     color: #fff;
     text-decoration: none;
     line-height: 0;
-    border-radius: var(--border-radius);
-    background: rgba(0, 0, 0, 0.6);
-    box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 1px;
 }
 
 .pre-image-uploader .image-cancel:hover {
+    background: var(--red);
     color: #fff;
     cursor: pointer;
-    background: var(--red);
 }

app/styles/csscomb.json

@@ -0,0 +1,234 @@
+{
+    "remove-empty-rulesets": true,
+    "always-semicolon": true,
+    "color-case": "lower",
+    "block-indent": "    ",
+    "color-shorthand": true,
+    "element-case": "lower",
+    "eof-newline": true,
+    "leading-zero": true,
+    "quotes": "double",
+    "space-before-colon": "",
+    "space-after-colon": " ",
+    "space-before-combinator": " ",
+    "space-after-combinator": " ",
+    "space-between-declarations": "\n",
+    "space-before-opening-brace": " ",
+    "space-after-opening-brace": "\n",
+    "space-after-selector-delimiter": "\n",
+    "space-before-selector-delimiter": "",
+    "space-before-closing-brace": "\n",
+    "strip-spaces": true,
+    "tab-size": 4,
+    "unitless-zero": true,
+    "sort-order": [ [
+        "content",
+        "visibility",
+        "position",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "z-index",
+        "order",
+        "flex",
+        "flex-grow",
+        "flex-shrink",
+        "flex-basis",
+        "align-self",
+        "display",
+        "flex-flow",
+        "flex-direction",
+        "flex-wrap",
+        "justify-content",
+        "align-items",
+        "align-content",
+        "flex-order",
+        "flex-pack",
+        "flex-align",
+        "float",
+        "clear",
+        "overflow",
+        "overflow-x",
+        "overflow-y",
+        "-webkit-overflow-scrolling",
+        "clip",
+        "box-sizing",
+        "margin",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left",
+        "padding",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left",
+        "min-width",
+        "min-height",
+        "max-width",
+        "max-height",
+        "width",
+        "height",
+        "outline",
+        "outline-width",
+        "outline-style",
+        "outline-color",
+        "outline-offset",
+        "border",
+        "border-spacing",
+        "border-collapse",
+        "border-width",
+        "border-style",
+        "border-color",
+        "border-top",
+        "border-top-width",
+        "border-top-style",
+        "border-top-color",
+        "border-right",
+        "border-right-width",
+        "border-right-style",
+        "border-right-color",
+        "border-bottom",
+        "border-bottom-width",
+        "border-bottom-style",
+        "border-bottom-color",
+        "border-left",
+        "border-left-width",
+        "border-left-style",
+        "border-left-color",
+        "border-image",
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat",
+        "border-top-image",
+        "border-right-image",
+        "border-bottom-image",
+        "border-left-image",
+        "border-corner-image",
+        "border-top-left-image",
+        "border-top-right-image",
+        "border-bottom-right-image",
+        "border-bottom-left-image",
+        "background",
+        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+        "background-color",
+        "background-image",
+        "background-attachment",
+        "background-position",
+        "background-position-x",
+        "background-position-y",
+        "background-clip",
+        "background-origin",
+        "background-size",
+        "background-repeat",
+        "border-radius",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-bottom-right-radius",
+        "border-bottom-left-radius",
+        "box-decoration-break",
+        "box-shadow",
+        "color",
+        "table-layout",
+        "caption-side",
+        "empty-cells",
+        "list-style",
+        "list-style-position",
+        "list-style-type",
+        "list-style-image",
+        "quotes",
+        "counter-increment",
+        "counter-reset",
+        "vertical-align",
+        "text-align",
+        "text-align-last",
+        "text-decoration",
+        "text-emphasis",
+        "text-emphasis-position",
+        "text-emphasis-style",
+        "text-emphasis-color",
+        "text-indent",
+        "text-justify",
+        "text-outline",
+        "text-transform",
+        "text-wrap",
+        "text-overflow",
+        "text-overflow-ellipsis",
+        "text-overflow-mode",
+        "text-shadow",
+        "white-space",
+        "word-spacing",
+        "word-wrap",
+        "word-break",
+        "tab-size",
+        "hyphens",
+        "letter-spacing",
+        "font",
+        "font-family",
+        "font-size",
+        "line-height",
+        "font-weight",
+        "font-style",
+        "font-variant",
+        "font-size-adjust",
+        "font-stretch",
+        "text-rendering",
+        "font-feature-settings",
+        "src",
+        "opacity",
+        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+        "filter",
+        "resize",
+        "cursor",
+        "nav-index",
+        "nav-up",
+        "nav-right",
+        "nav-down",
+        "nav-left",
+        "transition",
+        "transition-delay",
+        "transition-timing-function",
+        "transition-duration",
+        "transition-property",
+        "transform",
+        "transform-origin",
+        "animation",
+        "animation-name",
+        "animation-duration",
+        "animation-play-state",
+        "animation-timing-function",
+        "animation-delay",
+        "animation-iteration-count",
+        "animation-direction",
+        "animation-fill-mode",
+        "pointer-events",
+        "unicode-bidi",
+        "direction",
+        "columns",
+        "column-span",
+        "column-width",
+        "column-count",
+        "column-fill",
+        "column-gap",
+        "column-rule",
+        "column-rule-width",
+        "column-rule-style",
+        "column-rule-color",
+        "break-before",
+        "break-inside",
+        "break-after",
+        "page-break-before",
+        "page-break-inside",
+        "page-break-after",
+        "orphans",
+        "widows",
+        "zoom",
+        "max-zoom",
+        "min-zoom",
+        "user-zoom",
+        "orientation"
+    ] ]
+}

app/styles/layouts/about.css

@@ -21,12 +21,12 @@
 }
 
 .about-ghost-intro .version {
-    font-weight: 300;
-    font-size: 1.8rem;
     position: relative;
     top: -3px;
     left: -9px;
     color: var(--blue);
+    font-size: 1.8rem;
+    font-weight: 300;
 }
 
 .about-ghost-intro h1 + p {
@@ -39,17 +39,17 @@
 }
 
 .about-environment dl {
-    color: var(--midgrey);
     margin: 2px 0 0 0;
+    color: var(--midgrey);
     line-height: 1.6;
 }
 
 .about-environment dt,
 .about-environment dd {
-    width: auto;
-    float: left;
     display: inline-block;
+    float: left;
     margin: 0;
+    width: auto;
 }
 
 .about-environment dt {
@@ -71,14 +71,14 @@
 }
 
 .about-help .btn {
-    width: 100%;
     display: block;
-    font-size: 1rem;
     padding-top: 9px;
     padding-bottom: 9px;
     min-height: 32px;
+    width: 100%;
     background: #a1adb3;
     color: #fff;
+    font-size: 1rem;
 }
 
 .about-help .btn:hover {
@@ -114,13 +114,13 @@
 
 .top-contributors li {
     float: left;
-    list-style: none;
     width: 10%;
+    list-style: none;
 }
 
 .top-contributors li a {
-    display: block;
     position: relative;
+    display: block;
 }
 
 @media (min-width: 601px) {
@@ -138,29 +138,29 @@
 }
 
 .top-contributors li a:before {
-    opacity: 0;
     content: attr(title);
     position: absolute;
     top: -27px;
     left: 50%;
-    transform: translateX(-50%);
-    background: var(--darkgrey);
-    color: #fff;
     padding: 2px 6px 3px;
+    background: var(--darkgrey);
     border-radius: var(--border-radius);
-    transition: opacity 0.15s ease-in-out;
+    color: #fff;
     font-size: 1rem;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    transform: translateX(-50%);
     pointer-events: none;
 }
 
 .top-contributors li a:after {
-    opacity: 0;
     content: "";
     position: absolute;
     top: -6px;
     left: 50%;
-    transform: translateX(-50%);
+    opacity: 0;
     transition: opacity 0.15s ease-in-out;
+    transform: translateX(-50%);
 }
 
 .top-contributors li a:hover:before,
@@ -169,8 +169,8 @@
 }
 
 .top-contributors li a img {
-    width: 100%;
     display: block;
+    width: 100%;
     border-radius: 100%;
 }
 
@@ -183,24 +183,24 @@
 }
 
 .about-credits h1 {
-    font-size: 2.4rem;
     margin-bottom: 24px;
+    font-size: 2.4rem;
 }
 
 .about-contributors-info {
     margin-top: -12px;
     margin-bottom: 22px;
-    font-size: 1.6rem;
     max-width: 620px;
+    font-size: 1.6rem;
 }
 
 .about-get-involved {
-    font-size: 1.2rem;
-    width: 100%;
     display: inline-block;
     max-width: 290px;
-    text-transform: uppercase;
+    width: 100%;
     text-align: center;
+    text-transform: uppercase;
+    font-size: 1.2rem;
 }
 
 .about-copyright {
@@ -215,6 +215,6 @@
 .about-copyright a:hover,
 .about-copyright a:focus,
 .about-copyright a:active {
-    text-decoration: none;
     color: var(--blue);
+    text-decoration: none;
 }

app/styles/layouts/auth.css

@@ -5,8 +5,8 @@
 .ghost-signup,
 .ghost-forgotten,
 .ghost-reset {
-    color: var(--midgrey);
     background: var(--darkgrey);
+    color: var(--midgrey);
 }
 
 .ghost-login main,
@@ -20,15 +20,15 @@
 .ghost-signup input,
 .ghost-forgotten input,
 .ghost-reset input {
-    line-height: 1.4em;
+    position: relative;
-    font-size: 1.1em;
+    margin: 0;
-    font-weight: 200;
     border: none;
-    color: #fff;
     background: color(var(--darkgrey) lightness(+10%));
     box-shadow: none;
-    margin: 0;
+    color: #fff;
-    position: relative;
+    font-size: 1.1em;
+    line-height: 1.4em;
+    font-weight: 200;
     transition: background ease 0.25s;
 }
 
@@ -52,10 +52,10 @@
 .forgotten-box,
 .reset-box {
     display: table;
-    max-width: 530px;
-    height: 90%;
     margin: 0 auto;
     padding: 0;
+    max-width: 530px;
+    height: 90%;
 }
 
 @media (max-width: 630px) {
@@ -73,9 +73,9 @@
 /* ---------------------------------------------------------- */
 
 .login-form {
+    display: table-cell;
     max-width: 530px;
     color: color(var(--midgrey) lightness(+15%));
-    display: table-cell;
     vertical-align: middle;
 }
 
@@ -88,8 +88,8 @@
 .login-form .email-wrap,
 .login-form .password-wrap {
     position: relative;
-    margin: 0 0 5px 0;
     float: left;
+    margin: 0 0 5px 0;
 }
 
 @media (max-width: 630px) {
@@ -135,16 +135,16 @@
 }
 
 .login-form button {
+    margin-left: 10px;
     width: 85px;
     height: 37px;
-    margin-left: 10px;
 }
 
 @media (max-width: 630px) {
     .login-form button {
         margin: 0;
-        width: 100%;
         margin-bottom: 1em;
+        width: 100%;
     }
 }
 
@@ -155,14 +155,14 @@
 
 .login-form .forgotten-link {
     display: inline-block;
-    height: auto;
-    width: auto;
     margin: 0;
     padding: 0;
-    font-size: 1.25rem;
+    width: auto;
+    height: auto;
     color: color(var(--midgrey) lightness(-10%));
     text-transform: none;
     letter-spacing: 0;
+    font-size: 1.25rem;
 }
 
 .login-form a {
@@ -181,9 +181,9 @@
 
 .signup-form,
 .reset-form {
+    display: table-cell;
     max-width: 280px;
     color: color(var(--midgrey) lightness(+15%));
-    display: table-cell;
     vertical-align: middle;
 }
 
@@ -197,16 +197,16 @@
 .signup-form .password-wrap,
 .reset-form .password-wrap {
     position: relative;
+    display: table;
+    float: left;
     margin: 0 0 1em 0;
     background: color(var(--darkgrey) lightness(+10%));
-    float: left;
-    display: table;
 }
 
 .signup-form input,
 .reset-form input {
-    width: 280px;
     padding: 8px 10px;
+    width: 280px;
 }
 
 @media (max-width: 630px) {
@@ -251,12 +251,12 @@
 
 .signup-form button,
 .reset-form button {
-    width: 100%;
-    height: 36px;
     margin: 0 0 1em 0;
     padding: 0.5em 1.37em;
-    min-height: 30px;
     min-width: 80px;
+    min-height: 30px;
+    width: 100%;
+    height: 36px;
     box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset;
 }
 
@@ -265,18 +265,18 @@
 /* ---------------------------------------------------------- */
 
 .forgotten-form {
+    display: table-cell;
     max-width: 280px;
     color: color(var(--midgrey) lightness(+15%));
-    display: table-cell;
     vertical-align: middle;
 }
 
 .forgotten-form .email-wrap {
     position: relative;
-    margin: 0 0 1em 0;
     float: left;
-    border-radius: 2px;
+    margin: 0 0 1em 0;
     width: 100%;
+    border-radius: 2px;
 }
 
 .forgotten-form .email {

app/styles/layouts/content.css

@@ -26,21 +26,21 @@
 /* ---------------------------------------------------------- */
 
 .content-list {
-    width: 33%;
-    padding: 15px;
     position: absolute;
-    bottom: 0;
     top: 0;
+    bottom: 0;
     left: 0;
+    padding: 15px;
+    width: 33%;
     border-right: #e1e1e1 1px solid;
     background: #fff;
 }
 
 @media (max-width: 900px) {
     .content-list {
-        width: auto;
         right: 0;
         z-index: 500;
+        width: auto;
         border: none;
     }
 }
@@ -67,14 +67,14 @@
 }
 
 .content-list .avatar {
+    position: relative;
     float: left;
     margin-right: 14px;
     width: 18px;
     height: 18px;
-    border-radius: 18px;
-    background-size: cover;
     background-position: center center;
-    position: relative;
+    background-size: cover;
+    border-radius: 18px;
 }
 
 .content-list .avatar img {
@@ -117,10 +117,10 @@
 }
 
 .content-list ol {
-    list-style: none;
-    padding: 0;
     margin: 0;
+    padding: 0;
     border-top: #e1e1e1 1px solid;
+    list-style: none;
 }
 
 .content-list li {
@@ -169,35 +169,35 @@
 /* ---------------------------------------------------------- */
 
 .content-preview {
-    width: 67%;
-    padding: 15px;
     position: absolute;
-    bottom: 0;
     top: 0;
     right: 0;
+    bottom: 0;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+    padding: 15px;
+    width: 67%;
     background: #fff;
 }
 
 @media (max-width: 900px) {
     .content-preview {
+        overflow: visible;
         width: 100%;
         border: none;
-        overflow: visible;
     }
 }
 
 .content-preview .unfeatured {
-    vertical-align: -6%;
     margin: 0 7px 0 -5px;
     padding: 3px;
+    vertical-align: -6%;
 }
 
 .content-preview .featured {
-    vertical-align: -6%;
     margin: 0 7px 0 -5px;
     padding: 3px;
+    vertical-align: -6%;
 }
 
 .content-preview .post-published-by .status a {
@@ -209,8 +209,8 @@
 }
 
 .content-preview .normal {
-    text-transform: none;
     margin: 0 3px;
+    text-transform: none;
 }
 
 .content-preview .content-preview-content {
@@ -232,14 +232,14 @@
 }
 
 .content-preview .content-preview-content .wrapper {
-    max-width: 700px;
     margin: 0 auto;
+    max-width: 700px;
 }
 
 .content-preview .post-controls {
-    float: right;
     position: relative;
     top: 3px;
+    float: right;
 }
 
 .content-preview .post-settings-menu {
@@ -261,23 +261,23 @@
 @media (max-width: 900px) {
     .post-preview-header {
         position: fixed;
-        left: 0;
-        right: 0;
         top: 0;
+        right: 0;
+        left: 0;
         z-index: 3000;
-        height: 44px;
-        text-align: center;
-        color: #fff;
-        background: #242628;
         overflow: hidden;
+        height: 44px;
+        background: #242628;
+        color: #fff;
+        text-align: center;
     }
     .post-preview-header .btn-back {
-        display: block;
         position: absolute;
         top: 4px;
         left: 4px;
-        color: #fff;
+        display: block;
         background-color: transparent;
+        color: #fff;
     }
     .post-preview-header .page-title {
         display: block;
@@ -288,8 +288,8 @@
         right: 4px;
     }
     .post-preview-header .post-edit {
-        color: #fff;
         background-color: transparent;
+        color: #fff;
     }
     .post-preview-header .featured,
     .post-preview-header .unfeatured,
@@ -316,11 +316,11 @@
 
 .no-posts-box {
     position: relative;
-    height: 90%;
+    z-index: 600;
+    display: table;
     margin: 0 auto;
     padding: 0;
-    display: table;
+    height: 90%;
-    z-index: 600;
 }
 
 @media (max-width: 900px) {
@@ -332,23 +332,23 @@
 }
 
 .no-posts-box .no-posts {
-    vertical-align: middle;
     display: table-cell;
+    vertical-align: middle;
     text-align: center;
 }
 
 @media (max-width: 900px) {
     .no-posts-box .no-posts {
-        display: block;
         position: relative;
         left: -50%;
+        display: block;
     }
 }
 
 .no-posts-box .no-posts h3 {
     color: var(--brown);
-    font-weight: 200;
     font-size: 2em;
+    font-weight: 200;
 }
 
 
@@ -365,8 +365,8 @@
     bottom: 0;
     left: 0;
     z-index: 500;
-    pointer-events: none;
     animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
+    pointer-events: none;
 }
 
 .content-preview.keyboard-focused {

app/styles/layouts/editor.css

@@ -6,22 +6,22 @@
 /* ---------------------------------------------------------- */
 
 .entry-title {
-    height: 60px;
-    padding: 0;
     position: relative;
+    padding: 0;
+    height: 60px;
 }
 
 .entry-title input {
+    margin: 0;
+    padding: 0;
     width: 100%;
     height: 60px;
     border: 0;
-    margin: 0;
+    background: transparent;
-    padding: 0;
+    text-indent: 20px;
+    letter-spacing: -1px;
     font-size: 3.2rem;
     font-weight: bold;
-    letter-spacing: -1px;
-    text-indent: 20px;
-    background: transparent;
 }
 
 .entry-title input:focus {
@@ -54,11 +54,11 @@
 
 .editor .entry-markdown,
 .editor .entry-preview {
-    width: 50%;
-    padding: 15px;
     position: absolute;
-    bottom: 40px;
     top: 60px;
+    bottom: 40px;
+    padding: 15px;
+    width: 50%;
     border-top: #e1e1e1 1px solid;
     background: #fff;
     /* Hide markdown icon + wordcount when we hit mobile */
@@ -81,19 +81,19 @@
     .editor .entry-preview {
         /* Convert all content areas to small boxes */
         top: 100px;
-        left: 0;
         right: 0;
+        left: 0;
+        z-index: 100;
         width: 100%;
         border: none;
-        z-index: 100;
         /* Correctly colour the markdown icon when inactive and hovered */
     }
     .editor .entry-markdown .markdown,
     .editor .entry-markdown .entry-preview-content,
     .editor .entry-preview .markdown,
     .editor .entry-preview .entry-preview-content {
-        height: 50px;
         overflow: hidden;
+        height: 50px;
     }
     .editor .entry-markdown:not(.active) .markdown-help:hover:before,
     .editor .entry-preview:not(.active) .markdown-help:hover:before {
@@ -109,15 +109,15 @@
 @media (max-width: 1000px) {
     .editor .entry-markdown .floatingheader,
     .editor .entry-preview .floatingheader {
-        cursor: pointer;
-        width: 50%;
-        color: #fff;
-        font-weight: normal;
-        background: var(--brown);
         position: absolute;
         top: -40px;
         left: 0;
+        width: 50%;
+        background: var(--brown);
         box-shadow: rgba(0, 0, 0, 0.1) 0 -2px 3px inset;
+        color: #fff;
+        font-weight: normal;
+        cursor: pointer;
     }
     .editor .entry-markdown .floatingheader a,
     .editor .entry-preview .floatingheader a {
@@ -127,9 +127,9 @@
 
 .editor .entry-markdown .floatingheader .entry-word-count,
 .editor .entry-preview .floatingheader .entry-word-count {
-    float: right;
     position: relative;
     top: 2px;
+    float: right;
 }
 
 .editor .entry-markdown.active,
@@ -141,19 +141,19 @@
 .editor .entry-markdown.active .entry-preview-content,
 .editor .entry-preview.active .markdown,
 .editor .entry-preview.active .entry-preview-content {
-    height: auto;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+    height: auto;
 }
 
 @media (max-width: 1000px) {
     .editor .entry-markdown.active header,
     .editor .entry-preview.active header {
         border-top: #e1e1e1 1px solid;
-        cursor: auto;
-        color: var(--brown);
         background: #fff;
         box-shadow: none;
+        color: var(--brown);
+        cursor: auto;
     }
     .editor .entry-markdown.active header a,
     .editor .entry-preview.active header a {
@@ -179,16 +179,16 @@
     right: 0;
     bottom: 0;
     left: 0;
-    height: 100%;
-    max-width: 100%;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    resize: none;
+    max-width: 100%;
+    height: 100%;
     border: 0;
+    color: color(var(--darkgrey) lightness(+10%));
+    font-family: var(--font-family-mono);
     font-size: 1.6rem;
     line-height: 2.5rem;
-    font-family: var(--font-family-mono);
+    resize: none;
-    color: color(var(--darkgrey) lightness(+10%));
 }
 
 .editor .markdown-editor:focus {
@@ -228,9 +228,9 @@
     right: 0;
     bottom: 0;
     left: 0;
-    padding: 40px 20px 37px 20px;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+    padding: 40px 20px 37px 20px;
     word-break: break-word;
     hyphens: auto;
     cursor: default;
@@ -269,9 +269,9 @@
 
 @-moz-document url-prefix() {
     .editor .markdown-editor {
+        top: 40px;
         padding-top: 0;
         padding-bottom: 0;
-        top: 40px;
         height: calc(100% - 40px);
     }
 }
@@ -306,25 +306,25 @@
 
 .entry-preview-content .btn,
 .content-preview-content .btn {
-    text-decoration: none;
     color: var(--grey);
+    text-decoration: none;
 }
 
 .entry-preview-content .img-placeholder,
 .content-preview-content .img-placeholder {
-    border: 5px dashed var(--grey);
-    height: 100px;
     position: relative;
+    height: 100px;
+    border: 5px dashed var(--grey);
 }
 
 .entry-preview-content .img-placeholder span,
 .content-preview-content .img-placeholder span {
-    display: block;
-    height: 30px;
     position: absolute;
-    margin-top: -15px;
     top: 50%;
+    display: block;
+    margin-top: -15px;
     width: 100%;
+    height: 30px;
     text-align: center;
 }
 
@@ -336,21 +336,21 @@
 
 .entry-preview-content img,
 .content-preview-content img {
+    margin: 0 auto;
     max-width: 100%;
     height: auto;
-    margin: 0 auto;
 }
 
 /* Placeholder objects for <script> & <iframe> */
 .js-embed-placeholder,
 .iframe-embed-placeholder {
-    background: #f9f9f9;
-    border: none;
     padding: 100px 20px;
-    font-family: var(--font-family);
+    border: none;
-    font-weight: bold;
+    background: #f9f9f9;
-    font-size: 1.6rem;
     text-align: center;
+    font-family: var(--font-family);
+    font-size: 1.6rem;
+    font-weight: bold;
 }
 
 
@@ -368,9 +368,9 @@ body.zen .usermenu {
 body.zen .global-nav,
 body.zen .page-header,
 body.zen #publish-bar {
-    opacity: 0;
-    height: 0;
     overflow: hidden;
+    height: 0;
+    opacity: 0;
     transition: all 0.5s ease-out;
 }
 
@@ -390,16 +390,16 @@ body.zen .entry-preview {
 /* ---------------------------------------------------------- */
 
 #publish-bar {
-    height: 40px;
-    padding: 0;
-    border-top: #e1e1e1 1px solid;
-    color: var(--midgrey);
-    background: #fff;
     position: absolute;
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
     z-index: 900;
+    padding: 0;
+    height: 40px;
+    border-top: #e1e1e1 1px solid;
+    background: #fff;
+    color: var(--midgrey);
     transform: translateZ(0);
 }
 
@@ -416,8 +416,8 @@ body.zen .entry-preview {
 
 #publish-bar .post-settings-menu {
     position: absolute;
-    bottom: 41px;
     right: -3px;
+    bottom: 41px;
 }
 
 .extended-tags {
@@ -435,10 +435,10 @@ body.zen .entry-preview {
 }
 
 .extended-tags .tag-input {
-    width: 100%;
     margin-top: 5px;
     padding-top: 5px;
     padding-left: 10px;
+    width: 100%;
     border-top: 1px solid var(--darkgrey);
 }
 
@@ -448,14 +448,14 @@ body.zen .entry-preview {
 
 #entry-tags input[type="text"].tag-input {
     display: inline-block;
-    vertical-align: top;
-    color: var(--midgrey);
-    font-weight: 300;
-    background: transparent;
-    border: none;
-    width: 100%;
-    line-height: 1;
     padding: 9px 9px 9px 0;
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: var(--midgrey);
+    vertical-align: top;
+    line-height: 1;
+    font-weight: 300;
 }
 
 #entry-tags input[type="text"].tag-input:focus {
@@ -466,12 +466,12 @@ body.zen .entry-preview {
     display: inline;
     margin-right: 3px;
     padding: 2px 5px;
-    color: var(--lightgrey);
-    font-size: 1.2rem;
-    line-height: 1.2em;
-    white-space: nowrap;
     background: var(--darkgrey);
     border-radius: 3px;
+    color: var(--lightgrey);
+    white-space: nowrap;
+    font-size: 1.2rem;
+    line-height: 1.2em;
 }
 
 #entry-tags .tag:hover {
@@ -489,9 +489,9 @@ body.zen .entry-preview {
 
 .suggestions li.selected,
 .suggestions li.selected a {
-    text-decoration: none;
-    color: #fff;
     background: var(--blue);
+    color: #fff;
+    text-decoration: none;
 }
 
 .suggestions li.selected mark {
@@ -505,25 +505,25 @@ body.zen .entry-preview {
 }
 
 #entry-actions {
+    position: relative;
     display: flex;
     justify-content: flex-end;
-    align-content: center;
     align-items: center;
+    align-content: center;
     margin-right: 6px;
-    position: relative;
 }
 
 #entry-actions .dropdown {
     position: absolute;
-    bottom: 49px;
     right: 0;
+    bottom: 49px;
 }
 
 #entry-actions .dropdown .dropdown-menu {
     top: auto;
-    left: auto;
     right: 100%;
     bottom: 100%;
+    left: auto;
 }
 
 #entry-actions.unsaved {
@@ -536,8 +536,8 @@ body.zen .entry-preview {
 
 #entry-actions-menu {
     position: absolute;
-    bottom: 50px;
     right: -5px;
+    bottom: 50px;
 }
 
 .tags-wrapper {
@@ -550,20 +550,20 @@ body.zen .entry-preview {
 }
 
 .tag-label {
+    position: relative;
     display: block;
     width: 40px;
     height: 40px;
-    position: relative;
 }
 
 .tag-label:before {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    font-size: 1.3rem;
     color: var(--midgrey);
+    font-size: 1.3rem;
     transition: color 0.15s linear;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 .tag-label:hover {
@@ -574,11 +574,11 @@ body.zen .entry-preview {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    align-content: space-between;
-    align-items: center;
     justify-content: center;
-    height: 100%;
+    align-items: center;
+    align-content: space-between;
     width: 100%;
+    height: 100%;
 }
 
 .publish-bar-tags-icon {
@@ -591,39 +591,39 @@ body.zen .entry-preview {
 .publish-bar-tags {
     flex: 0 1 auto;
     align-self: auto;
+    overflow-y: hidden;
     margin-right: 10px;
     height: 40px;
-    overflow-y: hidden;
 }
 
 .publish-bar-tags .tags-wrapper {
-    white-space: nowrap;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     padding-top: 8px;
     padding-bottom: 9px;
     height: 70px;
+    white-space: nowrap;
 }
 
 .publish-bar-tags-input {
+    position: relative;
     flex: 1 1 auto;
     align-self: auto;
-    position: relative;
 }
 
 .publish-bar-actions {
-    display: flex;
     flex: 1 0 auto;
     align-self: auto;
+    display: flex;
     text-align: right;
 }
 
 .post-settings {
+    position: relative;
     display: inline-block;
     padding: 8px 10px;
     color: var(--midgrey);
     transition: all 0.15s ease-out 0s;
-    position: relative;
 }
 
 .post-settings:hover,
@@ -633,9 +633,9 @@ body.zen .entry-preview {
 
 .post-settings-menu .dropdown-menu {
     top: auto;
+    right: 100%;
     bottom: 100%;
     left: auto;
-    right: 100%;
 }
 
 .post-view-link {
@@ -659,27 +659,28 @@ body.zen .entry-preview {
 }
 
 .seo-preview-title {
-    font-size: 1.8rem;
-    line-height: 2.16rem;
     color: #1e0fbe;
     text-overflow: ellipses;
-    -webkit-text-overflow: ellipsis;
     word-wrap: break-word;
+    font-size: 1.8rem;
+    line-height: 2.16rem;
+
+    -webkit-text-overflow: ellipsis;
 }
 
 .seo-preview-link {
     margin: 1px 0 2px 0;
-    font-size: 1.3rem;
-    line-height: 1.6rem;
     color: #006621;
     word-wrap: break-word;
+    font-size: 1.3rem;
+    line-height: 1.6rem;
 }
 
 .seo-preview-description {
-    font-size: 1.3rem;
-    line-height: 1.4;
     color: #545454;
     word-wrap: break-word;
+    font-size: 1.3rem;
+    line-height: 1.4;
 }
 
 

app/styles/layouts/error.css

@@ -2,10 +2,10 @@
 /* ---------------------------------------------------------- */
 
 .error-content {
-    max-width: 530px;
+    display: table;
     margin: 0 auto;
     padding: 0;
-    display: table;
+    max-width: 530px;
     height: 100%;
 }
 
@@ -27,9 +27,9 @@
 
 .error-image {
     display: inline-block;
-    vertical-align: middle;
     width: 96px;
     height: 150px;
+    vertical-align: middle;
 }
 
 @media (max-width: 630px) {
@@ -48,15 +48,15 @@
     position: relative;
     top: -5px;
     display: inline-block;
-    vertical-align: middle;
     margin-left: 10px;
+    vertical-align: middle;
 }
 
 .error-code {
     margin: 0;
+    color: #979797;
     font-size: 7.8em;
     line-height: 0.9em;
-    color: #979797;
 }
 
 @media (max-width: 630px) {
@@ -68,10 +68,10 @@
 .error-description {
     margin: 0;
     padding: 0;
-    font-weight: 300;
-    font-size: 1.9em;
-    color: #979797;
     border: none;
+    color: #979797;
+    font-size: 1.9em;
+    font-weight: 300;
 }
 
 @media (max-width: 630px) {
@@ -92,9 +92,9 @@
 }
 
 .error-stack-list {
-    list-style-type: none;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    list-style-type: none;
 }
 
 .error-stack-list li {
@@ -102,11 +102,11 @@
 }
 
 .error-stack-list li:before {
-    color: #bbb;
     content: "\21AA";
     display: inline-block;
-    font-size: 1.2em;
     margin-right: 0.5em;
+    color: #bbb;
+    font-size: 1.2em;
 }
 
 .error-stack-function {

app/styles/layouts/main.css

@@ -3,8 +3,8 @@
 
 .gh-viewport {
     display: flex;
-    height: 100vh;
     overflow: hidden;
+    height: 100vh;
 }
 
 .gh-nav {
@@ -33,9 +33,9 @@
 }
 
 .gh-nav-menu i {
-    height: 11px;
-    width: 11px;
     margin-right: 8px;
+    width: 11px;
+    height: 11px;
     font-size: 11px;
     line-height: 11px;
 }
@@ -49,8 +49,8 @@
     margin-right: 10px;
     width: 34px;
     height: 34px;
-    background-size: 34px;
     background-color: #222;
+    background-size: 34px;
     border-radius: 4px;
 }
 
@@ -60,22 +60,22 @@
 }
 
 .gh-nav-menu-details-blog {
+    overflow: hidden;
     margin-bottom: 1px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-size: 1.5rem;
     line-height: 1.3em;
     font-weight: 600;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
 }
 
 .gh-nav-menu-details-user {
-    font-size: 1.2rem;
+    overflow: hidden;
-    line-height: 1.2em;
     color: var(--midgrey);
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
+    font-size: 1.2rem;
+    line-height: 1.2em;
 }
 
 .gh-nav-body {
@@ -95,22 +95,22 @@
 }
 
 .gh-nav-search-button {
-    display: flex;
-    align-items: center;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
+    display: flex;
+    align-items: center;
     padding: 0 6px 0 5px;
 }
 
 .gh-nav-search-button i {
     width: 16px;
     height: 16px;
-    font-size: 13px;
     color: var(--midgrey);
-    transform: rotate(90deg);
+    font-size: 13px;
     transition: color 0.2s ease;
+    transform: rotate(90deg);
 }
 
 .gh-nav-search-button:hover i {
@@ -118,51 +118,51 @@
 }
 
 .gh-nav-list {
-    list-style: none;
     margin: 0;
     padding: 0 15px 0 0;
+    list-style: none;
     font-size: 1.3rem;
     line-height: 1.5em;
 }
 
 .gh-nav-list-h {
+    overflow: hidden;
     margin-top: 15px;
     padding: 5px 10px 5px 15px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
     color: #828282;
+    text-transform: uppercase;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: 1px;
     font-size: 1.2rem;
     line-height: 1.1em;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
 }
 
 .gh-nav-list a {
     display: flex;
     align-items: center;
     padding: 5px 10px 5px 15px;
-    color: var(--darkgrey);
     border-radius: 0 4px 4px 0;
+    color: var(--darkgrey);
     transition: none;
 }
 
 .gh-nav-list .active {
-    color: #fff;
     background: color(var(--blue) lightness(+10%));
+    color: #fff;
 }
 
 .gh-nav-list a:not(.active):hover {
-    color: var(--darkgrey);
     background: color(var(--blue) lightness(+30%));
+    color: var(--darkgrey);
 }
 
 .gh-nav-list i {
+    margin-right: 8px;
     width: 15px;
     height: 15px;
-    margin-right: 8px;
-    font-size: 15px;
     text-align: center;
+    font-size: 15px;
 }
 
 .gh-nav-footer {
@@ -177,9 +177,9 @@
     flex-grow: 1;
     display: flex;
     padding: 12px;
+    color: var(--midgrey);
     font-size: 1.3rem;
     line-height: 1.2em;
-    color: var(--midgrey);
 }
 
 .gh-nav-footer-sitelink i {
@@ -199,16 +199,16 @@
     display: flex;
     align-items: center;
     padding: 5px 10px;
-    cursor: pointer;
     border-left: #e1e1e1 1px solid;
+    cursor: pointer;
 }
 
 .gh-help-button {
     padding: 0 5px;
+    color: var(--midgrey);
     text-align: center;
     font-size: 1.4rem;
     line-height: 1.2em;
-    color: var(--midgrey);
     transition: all 0.5s;
 }
 
@@ -247,24 +247,24 @@
 .view-header {
     flex-shrink: 0;
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    height: 65px;
+    align-items: center;
     padding: 0 20px;
+    height: 65px;
     border-bottom: #e1e1e1 1px solid;
 }
 
 .view-title {
     display: flex;
     align-items: baseline;
+    overflow: hidden;
     margin: 0;
     padding: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-size: 2rem;
     line-height: 1.2em;
     font-weight: 400;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
 }
 
 .view-title a {

app/styles/layouts/settings.css

@@ -42,8 +42,8 @@
         position: absolute;
         top: 50%;
         left: 0;
-        margin-top: -9px;
         z-index: 20;
+        margin-top: -9px;
     }
 }
 
@@ -80,19 +80,19 @@
 }
 
 .navigation-item-action {
-    padding-left: 10px;
-    width: 40px;
     position: relative;
     z-index: 10;
+    padding-left: 10px;
+    width: 40px;
 }
 
 .navigation-item-action button {
-    width: 30px;
-    height: 30px;
     position: absolute;
     top: 50%;
-    transform: translateY(-50%);
     margin-top: -2px;
+    width: 30px;
+    height: 30px;
+    transform: translateY(-50%);
 }
 
 .navigation-item-action .icon-trash:before {
@@ -106,11 +106,11 @@
 }
 
 .navigation-item-action .icon-add:before {
+    padding: 3px;
     background: var(--green);
+    border-radius: 2px;
     color: #fff;
     font-size: 12px;
-    padding: 3px;
-    border-radius: 2px;
     transition: background 0.1s linear;
 }
 
@@ -135,21 +135,22 @@
 }
 
 .settings-code-editor {
-    width: 100%;
     min-width: 250px;
+    min-height: 300px;
     max-width: 680px;
+    width: 100%;
     height: auto;
     border: 1px solid #e0dfd7;
     border-radius: var(--border-radius);
-    -webkit-appearance: none;
-    min-height: 300px;
-    transition: border-color 0.15s linear;
     line-height: 22px;
+    transition: border-color 0.15s linear;
+
+    -webkit-appearance: none;
 }
 
 .settings-code-editor.focused {
-    border-color: var(--brown);
     outline: 0;
+    border-color: var(--brown);
 }
 
 .settings-code-editor .CodeMirror {

app/styles/layouts/setup.css

@@ -2,8 +2,8 @@
 /* ---------------------------------------------------------- */
 
 .ghost-setup {
-    color: var(--midgrey);
     background: var(--darkgrey);
+    color: var(--midgrey);
 }
 
 @media (max-width: 550px) {
@@ -13,9 +13,9 @@
 }
 
 .ghost-setup main {
-    padding-top: 15px;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+    padding-top: 15px;
 }
 
 @media (max-width: 550px) {
@@ -26,17 +26,17 @@
 
 .setup-box {
     display: table;
-    max-width: 500px;
-    height: 90%;
     margin: 0 auto;
     padding: 0;
+    max-width: 500px;
+    height: 90%;
 }
 
 .setup-form {
-    max-width: 530px;
     padding: 40px;
-    color: color(var(--midgrey) lightness(+15%));
+    max-width: 530px;
     border-radius: 2px;
+    color: color(var(--midgrey) lightness(+15%));
 }
 
 @media (max-width: 400px) {
@@ -69,8 +69,8 @@
 .setup-form .form-group input {
     padding: 7px;
     border: none;
-    color: #fff;
     background: color(var(--darkgrey) lightness(+10%));
+    color: #fff;
     transition: background 0.25s ease;
 }
 
@@ -86,10 +86,10 @@
 
 .setup-form h1 {
     margin: 0;
-    font-weight: 200;
-    font-size: 26px;
-    letter-spacing: 0;
     color: var(--lightgrey);
+    letter-spacing: 0;
+    font-size: 26px;
+    font-weight: 200;
 }
 
 @media (max-width: 400px) {
@@ -108,10 +108,10 @@
     margin: 6px 0 0 0;
     padding: 0;
     border: none;
-    font-weight: 200;
-    font-size: 16px;
-    letter-spacing: 0;
     color: var(--midgrey);
+    letter-spacing: 0;
+    font-size: 16px;
+    font-weight: 200;
 }
 
 @media (max-width: 400px) {
@@ -127,9 +127,9 @@
 }
 
 .setup-form p {
+    color: var(--midgrey);
     font-size: 12px;
     line-height: 1.4em;
-    color: var(--midgrey);
 }
 
 .setup-form footer {
@@ -137,7 +137,7 @@
 }
 
 .setup-form .btn-green {
-    width: 100%;
     padding: 0.9em 1.8em;
+    width: 100%;
     font-size: 13px;
 }

app/styles/layouts/tags.css

@@ -13,8 +13,8 @@
 
 .tags-search .btn {
     position: relative;
-    padding-left: 10px;
     padding-right: 10px;
+    padding-left: 10px;
     transition: padding 0.3s ease-in-out;
 }
 
@@ -30,14 +30,14 @@
     position: absolute;
     top: 1px;
     left: 1px;
-    width: 0;
     margin: 0;
     padding: 7px 10px;
+    width: 0;
     border: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    transition: all 0.3s ease-in-out;
     opacity: 0;
+    transition: all 0.3s ease-in-out;
     pointer-events: none;
 }
 
@@ -70,14 +70,14 @@
 
 .settings-tag {
     position: relative;
-    padding: 0 45px 0 0;
     display: block;
+    padding: 0 45px 0 0;
     border-bottom: 1px solid #e1e1e1;
 }
 
 .settings-tag .tag-edit-button {
-    width: calc(100% + 45px);
     padding: 20px;
+    width: calc(100% + 45px);
     text-align: left;
 }
 
@@ -92,9 +92,9 @@
 }
 
 .settings-tag .label {
-    margin-left: 2px;
     position: relative;
     top: -2px;
+    margin-left: 2px;
 }
 
 .settings-tag .label-alt {
@@ -102,21 +102,21 @@
 }
 
 .settings-tag .tag-title {
-    font-size: 16px;
     color: var(--darkgrey);
+    font-size: 16px;
     font-weight: normal;
 }
 
 .settings-tag .tag-description {
     margin: 0;
-    font-size: 13px;
     color: var(--midbrown);
+    font-size: 13px;
 }
 
 .settings-tag .tags-count {
     position: absolute;
     top: 20px;
     right: 12px;
-    font-size: 16px;
     color: var(--midbrown);
+    font-size: 16px;
 }

app/styles/layouts/user.css

@@ -6,14 +6,14 @@
 /* ---------------------------------------------------------- */
 
 .user-actions-cog {
-    padding: 9px 11px;
     margin-right: 10px;
+    padding: 9px 11px;
 }
 
 .user-actions-menu {
-    left: auto;
-    right: 0;
     top: calc(100% + 17px);
+    right: 0;
+    left: auto;
 }
 
 .user-actions-menu.fade-out {
@@ -36,12 +36,12 @@
 
 .user-cover {
     position: relative;
+    overflow: hidden;
+    margin: 0;
     width: auto;
     height: 300px;
-    margin: 0;
     background: #fafafa no-repeat center center;
     background-size: cover;
-    overflow: hidden;
 }
 
 @media (max-width: 900px) {
@@ -54,9 +54,9 @@
     /* Gradient overlay */
     content: "";
     position: absolute;
-    left: 0;
     right: 0;
     bottom: 0;
+    left: 0;
     height: 110px;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.18));
 }
@@ -65,13 +65,13 @@
     position: absolute;
     right: 35px;
     bottom: 29px;
+    z-index: 2;
     min-height: 37px;
     height: 37px;
-    background: rgba(0, 0, 0, 0.3);
-    color: rgba(255, 255, 255, 0.8);
-    z-index: 2;
     border-width: 0;
+    background: rgba(0, 0, 0, 0.3);
     border-radius: var(--border-radius);
+    color: rgba(255, 255, 255, 0.8);
     transition: color 0.3s ease, background 0.3s ease;
 }
 
@@ -82,8 +82,8 @@
 }
 
 .user-cover-edit:hover {
-    color: #fff;
     background: rgba(0, 0, 0, 0.5);
+    color: #fff;
 }
 
 
@@ -96,8 +96,8 @@
 
 @media (min-width: 651px) {
     .first-form-group {
-        min-width: 285px;
         left: 40px;
+        min-width: 285px;
     }
 }
 
@@ -179,19 +179,19 @@
 /* ---------------------------------------------------------- */
 
 .user-image {
-    display: block;
     position: absolute;
+    z-index: 2;
+    display: block;
+    float: left;
+    overflow: hidden;
+    margin-right: 20px;
+    margin-left: -6px;
+    padding: 3px;
     width: 126px;
     height: 126px;
-    margin-left: -6px;
-    margin-right: 20px;
-    padding: 3px;
-    float: left;
-    text-align: center;
-    border-radius: 100%;
-    overflow: hidden;
     background: #fff;
-    z-index: 2;
+    border-radius: 100%;
+    text-align: center;
 }
 
 @media (min-width: 651px) {
@@ -212,8 +212,8 @@
     display: block;
     width: 120px;
     height: 120px;
-    background-size: cover;
     background-position: center center;
+    background-size: cover;
     border-radius: 100%;
 }
 
@@ -227,13 +227,13 @@
     right: 3px;
     bottom: 3px;
     left: 3px;
-    border-radius: 100%;
     width: calc(100% - 6px);
     background: rgba(0, 0, 0, 0.5);
-    opacity: 0;
+    border-radius: 100%;
     color: #fff;
-    line-height: 120px;
-    text-transform: uppercase;
     text-decoration: none;
+    text-transform: uppercase;
+    line-height: 120px;
+    opacity: 0;
     transition: opacity 0.3s ease;
 }

app/styles/layouts/users.css

@@ -15,10 +15,10 @@
 }
 
 .user-list-title {
+    margin-bottom: 14px;
+    color: var(--midbrown);
     font-size: 13px;
     font-weight: normal;
-    color: var(--midbrown);
-    margin-bottom: 14px;
 }
 
 .user-list-item {
@@ -57,36 +57,36 @@ a.user-list-item {
 }
 
 .user-list-item-icon {
+    position: relative;
+    display: block;
+    overflow: hidden;
     width: 35px;
     height: 35px;
-    display: block;
-    border-radius: 100%;
     background: #e1e1e1;
-    font-size: 0;
+    border-radius: 100%;
     color: transparent;
-    overflow: hidden;
+    font-size: 0;
-    position: relative;
 }
 
 .user-list-item-icon:before {
     position: absolute;
     top: 50%;
-    left: 0;
     right: 0;
+    left: 0;
     margin-top: -7px;
-    text-align: center;
     color: var(--brown);
+    text-align: center;
     font-size: 14px;
 }
 
 .user-list-item-figure {
+    position: relative;
     display: block;
     width: 35px;
     height: 35px;
-    border-radius: 35px;
-    background-size: cover;
     background-position: center center;
-    position: relative;
+    background-size: cover;
+    border-radius: 35px;
 }
 
 .user-list-item-figure img {
@@ -121,24 +121,24 @@ a.user-list-item {
 
 .user-list-item-body .name {
     display: inline-block;
+    color: var(--darkgrey);
     font-size: 15px;
     font-weight: 400;
-    color: var(--darkgrey);
 }
 
 .user-list-item-body .description {
     display: inline-block;
-    font-size: 12px;
+    margin-top: 3px;
     color: var(--midbrown);
     white-space: nowrap;
-    margin-top: 3px;
+    font-size: 12px;
 }
 
 @media (max-width: 550px) {
     .user-list-item-aside {
         float: left;
-        width: 100%;
         margin: 12px 0 0 50px;
+        width: 100%;
     }
 }
 
@@ -162,9 +162,9 @@ a.user-list-item {
 }
 
 .user-list-action {
-    font-size: 11px;
-    text-transform: uppercase;
     text-decoration: underline;
+    text-transform: uppercase;
+    font-size: 11px;
 }
 
 
@@ -174,28 +174,28 @@ a.user-list-item {
 .role-label {
     display: inline-block;
     padding: 6px 8px;
+    background: #eee;
     color: rgba(0, 0, 0, 0.5);
-    font-size: 9px;
-    line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.1em;
+    font-size: 9px;
+    line-height: 1;
     font-weight: 400;
-    background: #eee;
 }
 
 .role-label.owner {
-    color: rgba(255, 255, 255, 0.8);
     background: var(--darkgrey);
+    color: rgba(255, 255, 255, 0.8);
 }
 
 .role-label.administrator {
-    color: rgba(255, 255, 255, 0.8);
     background: var(--red);
+    color: rgba(255, 255, 255, 0.8);
 }
 
 .role-label.editor {
-    color: rgba(255, 255, 255, 0.8);
     background: var(--blue);
+    color: rgba(255, 255, 255, 0.8);
 }
 
 
@@ -220,8 +220,8 @@ a.user-list-item {
 
 .invite-new-user .form-group:nth-of-type(2) {
     float: left;
-    width: 35%;
     margin-left: 5%;
+    width: 35%;
 }
 
 .invite-new-user .form-group input {

app/styles/patterns/_shame.css

@@ -10,25 +10,25 @@
 .floatingheader {
     position: absolute;
     top: 0;
-    left: 0;
     right: 0;
+    left: 0;
     z-index: 400;
-    height: 40px;
     padding: 10px 20px;
-    font-size: 1.3rem;
+    height: 40px;
-    text-transform: uppercase;
-    color: var(--brown);
     background: linear-gradient(to bottom, white 0%, white 25%, rgba(255, 255, 255, 0.9) 100%);
+    color: var(--brown);
+    text-transform: uppercase;
+    font-size: 1.3rem;
     /*Transparent gradient to make bg fade out as it goes out the top */
 }
 
 .floatingheader .button {
     display: inline-block;
-    font-size: 10px;
+    padding: 3px 4px;
     min-height: 20px;
     height: 20px;
-    padding: 3px 4px;
     vertical-align: top;
+    font-size: 10px;
 }
 
 .floatingheader .button.button-back {
@@ -80,11 +80,11 @@
     position: absolute;
     bottom: -5px;
     left: 50%;
-    height: 5px;
+    z-index: -1;
-    width: 80%;
     margin-left: -40%;
+    width: 80%;
+    height: 5px;
     background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, transparent 75%, transparent 100%);
     background-position: 0 -5px;
     background-size: 100% 200%;
-    z-index: -1;
 }

app/styles/patterns/buttons.css

@@ -7,19 +7,19 @@
     margin-bottom: 0;
     padding: 9px 15px;
     border: #e1e1e1 1px solid;
-    font-size: 1.1rem;
+    background: #fff;
-    line-height: 1.428571429;
+    background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 */
-    font-weight: 300;
+    border-radius: var(--border-radius);
     color: #828282;
     text-align: center;
     text-transform: uppercase;
     text-shadow: none;
-    letter-spacing: 1px;
     white-space: nowrap;
-    border-radius: var(--border-radius);
+    letter-spacing: 1px;
+    font-size: 1.1rem;
+    line-height: 1.428571429;
+    font-weight: 300;
     cursor: pointer;
-    background: #fff;
-    background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 */
     transition: color 0.2s ease,
     background 0.2s ease,
     border-color 0.2s ease;
@@ -28,8 +28,8 @@
 /* When hovered or clicked */
 .btn:hover,
 .btn:focus {
-    color: color(var(--blue) lightness(-10%));
     border-color: var(--blue);
+    color: color(var(--blue) lightness(-10%));
     text-decoration: none;
 }
 
@@ -54,10 +54,10 @@
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn {
+    box-shadow: none;
+    opacity: 0.65;
     cursor: not-allowed;
     pointer-events: none;
-    opacity: 0.65;
-    box-shadow: none;
 }
 
 
@@ -65,17 +65,17 @@ fieldset[disabled] .btn {
 /* ---------------------------------------------------------- */
 
 .btn-blue {
-    color: #fff;
     border-color: color(var(--blue) lightness(-10%));
     background: var(--blue);
+    color: #fff;
 }
 
 .btn-blue:hover,
 .btn-blue:active,
 .btn-blue:focus {
-    color: #fff;
     border-color: color(var(--blue) lightness(-20%));
     background: color(var(--blue) lightness(-10%));
+    color: #fff;
 }
 
 
@@ -83,17 +83,17 @@ fieldset[disabled] .btn {
 /* ---------------------------------------------------------- */
 
 .btn-green {
-    color: #fff;
     border-color: color(var(--green) lightness(-10%));
     background: var(--green);
+    color: #fff;
 }
 
 .btn-green:hover,
 .btn-green:active,
 .btn-green:focus {
-    color: #fff;
     border-color: color(var(--green) lightness(-20%));
     background: color(var(--green) lightness(-10%));
+    color: #fff;
 }
 
 
@@ -101,17 +101,17 @@ fieldset[disabled] .btn {
 /* ---------------------------------------------------------- */
 
 .btn-red {
-    color: #fff;
     border-color: color(var(--red) lightness(-10%));
     background: var(--red);
+    color: #fff;
 }
 
 .btn-red:hover,
 .btn-red:active,
 .btn-red:focus {
-    color: #fff;
     border-color: color(var(--red) lightness(-20%));
     background: color(var(--red) lightness(-10%));
+    color: #fff;
 }
 
 
@@ -120,27 +120,27 @@ fieldset[disabled] .btn {
 
 /* For styling a button like a link */
 .btn-link {
-    color: var(--blue);
     border-color: transparent;
     background: transparent;
+    color: var(--blue);
 }
 
 .btn-link:hover,
 .btn-link:active,
 .btn-link:focus {
-    color: var(--blue);
-    text-decoration: underline;
     border-color: transparent;
     background: transparent;
+    color: var(--blue);
+    text-decoration: underline;
 }
 
 .btn-link.disabled,
 .btn-link[disabled] {
-    cursor: not-allowed;
+    box-shadow: none;
-    pointer-events: none;
     color: #b2b2b2;
     opacity: 0.65;
-    box-shadow: none;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 
 
@@ -150,18 +150,18 @@ fieldset[disabled] .btn {
 /* For buttons with a small/insignificant action for
 // example a "cancel" button. Style is de-emphasised. */
 .btn-minor {
+    padding: 8px 15px;
     text-transform: none;
     letter-spacing: 0;
     font-size: 1.2rem;
-    padding: 8px 15px;
 }
 
 .btn-minor:hover,
 .btn-minor:active,
 .btn-minor:focus {
-    color: #828282;
     border-color: #c1c1c1;
     background: #fff;
+    color: #828282;
 }
 
 
@@ -170,16 +170,16 @@ fieldset[disabled] .btn {
 
 .btn-lg {
     padding: 12px 18px;
+    border-radius: 4px;
     font-size: 1.4rem;
     line-height: 1.33;
-    border-radius: 4px;
 }
 
 .btn-sm {
     padding: 7px 10px;
+    border-radius: 2px;
     font-size: 1rem;
     line-height: 1.5;
-    border-radius: 2px;
 }
 
 .btn-block {

app/styles/patterns/forms.css

@@ -18,19 +18,19 @@ form .word-count {
 }
 
 fieldset {
-    border: none;
     margin: 0 0 3em 0;
     padding: 0;
+    border: none;
 }
 
 legend {
     display: block;
-    width: 100%;
     margin: 2em 0;
+    width: 100%;
     border-bottom: #e1e1e1 1px solid;
+    color: var(--brown);
     font-size: 1.2em;
     line-height: 2.0em;
-    color: var(--brown);
 }
 
 input {
@@ -44,8 +44,8 @@ input {
 .form-group {
     position: relative;
     margin-bottom: 1.6em;
-    width: 100%;
     max-width: 500px;
+    width: 100%;
 }
 
 .form-group p {
@@ -92,9 +92,9 @@ input {
     position: absolute;
     top: 50%;
     left: 1.1rem;
+    z-index: 100;
     font-size: 1.3rem;
     transform: translateY(-52%);
-    z-index: 100;
 }
 
 
@@ -109,11 +109,12 @@ select {
     width: 100%;
     border: 1px solid #e0dfd7;
     border-radius: var(--border-radius);
-    -webkit-appearance: none;
+    color: var(--darkgrey);
     font-size: 1.4rem;
     font-weight: normal;
-    color: var(--darkgrey);
     transition: border-color 0.15s linear;
+
+    -webkit-appearance: none;
     user-select: text;
 }
 
@@ -126,18 +127,19 @@ select.error {
 .gh-input:focus,
 .gh-select:focus,
 select:focus {
-    border-color: var(--brown);
     outline: 0;
+    border-color: var(--brown);
 }
 
 textarea {
-    width: 100%;
-    max-width: 500px;
     min-width: 250px;
-    height: auto;
     min-height: 10rem;
+    max-width: 500px;
+    width: 100%;
+    height: auto;
     line-height: 1.5;
     resize: vertical;
+
     user-select: text;
 }
 
@@ -153,8 +155,8 @@ textarea {
 
 .for-radio label p,
 .for-checkbox label p {
-    font-weight: normal;
     color: #000;
+    font-weight: normal;
 }
 
 .for-radio label:hover input:not(:checked) + .input-toggle-component,
@@ -177,18 +179,18 @@ textarea {
     top: 1px;
     display: inline-block;
     float: left;
+    margin-right: 7px;
     width: 18px;
     height: 18px;
-    margin-right: 7px;
-    background: #f7f7f3;
     border: 1px solid #e1e1e1;
+    background: #f7f7f3;
 }
 
 .for-radio p,
 .for-checkbox p {
-    font-weight: normal;
     color: #b3b2a8;
     white-space: nowrap;
+    font-weight: normal;
 }
 
 .for-checkbox .input-toggle-component {
@@ -200,23 +202,23 @@ textarea {
 }
 
 .for-checkbox label .input-toggle-component:before {
-    transition: opacity 0.15s ease-in-out;
     content: "";
     position: absolute;
-    width: 10px;
-    height: 6px;
     top: 4px;
     left: 3px;
+    width: 10px;
+    height: 6px;
     border: 2px solid #fff;
     border-top: none;
     border-right: none;
-    transform: rotate(-45deg);
     opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    transform: rotate(-45deg);
 }
 
 .for-checkbox label input:checked + .input-toggle-component {
-    background: var(--green);
     border-color: color(var(--green) lightness(-10%));
+    background: var(--green);
 }
 
 .for-checkbox label input:checked + .input-toggle-component:before {
@@ -232,21 +234,21 @@ textarea {
 }
 
 .for-radio label .input-toggle-component:before {
-    transition: opacity 0.15s ease-in-out;
     content: "";
     position: absolute;
-    width: 8px;
-    height: 8px;
     top: 4px;
     left: 4px;
+    width: 8px;
+    height: 8px;
     background: #fff;
     border-radius: 100%;
     opacity: 0;
+    transition: opacity 0.15s ease-in-out;
 }
 
 .for-radio label input:checked + .input-toggle-component {
-    background: var(--green);
     border-color: color(var(--green) lightness(-10%));
+    background: var(--green);
 }
 
 .for-radio label input:checked + .input-toggle-component:before {
@@ -261,40 +263,42 @@ textarea {
     position: relative;
     display: block;
     overflow: hidden;
-    width: 100%;
-    max-width: 100%;
     padding: 0;
+    max-width: 100%;
+    width: 100%;
     border-width: 0;
 }
 
 .gh-select:after {
-    font-family: "ghosticons" !important;
+    content: "\e00f";
-    font-style: normal !important;
-    font-weight: normal !important;
-    font-variant: normal !important;
-    text-transform: none !important;
-    speak: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
     position: absolute;
     top: 50%;
     right: 0.8em;
     margin-top: -0.5em;
+    text-transform: none !important;
+    font-family: "ghosticons" !important;
+    line-height: 1;
+    font-weight: normal !important;
+    font-style: normal !important;
+    font-variant: normal !important;
     pointer-events: none;
-    content: "\e00f";
+
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .gh-select select {
+    padding: 8px 10px;
+    outline: none;
+    background: #fff;
+    text-indent: 0.01px;
+    text-overflow: "";
+    line-height: normal;
+
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: window;
-    text-indent: 0.01px;
-    text-overflow: "";
-    background: #fff;
-    outline: none;
-    padding: 8px 10px;
-    line-height: normal;
 }
 
 .gh-select select::-ms-expand {

app/styles/patterns/global.css

@@ -18,7 +18,6 @@
     --red: #e25440;
     --orange: #f2a925;
     --green: #9fbb58;
-
     /* Style values */
     --border-radius: 4px;
     --box-shadow: rgba(0,0,0,0.05) 0 1px 5px; /* TODO: not used? */
@@ -34,29 +33,29 @@
 *:before,
 *:after {
     box-sizing: border-box;
+
     user-select: none;
 }
 
 html {
-    font: 62.5%/1.65 "Open Sans", sans-serif;
+    overflow: hidden;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    width: 100%;
-
     /* Prevent elastic scrolling on the whole page */
     height: 100%;
-    width: 100%;
+    font: 62.5%/1.65 "Open Sans", sans-serif;
-    overflow: hidden;
+
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 body {
+    overflow: auto;
+    overflow-x: hidden;
+    width: 100%;
+    /* Prevent elastic scrolling on the whole page */
+    height: 100%;
     color: lighten(var(--darkgrey), 10%);
     font-size: 1.4rem;
     font-feature-settings: "kern" 1;
-
-    /* Prevent elastic scrolling on the whole page */
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    overflow-x: hidden;
 }
 
 ::selection {
@@ -74,20 +73,20 @@ h4,
 h5,
 h6 {
     margin: 0 0 0.3em 0;
-    line-height: 1.15em;
     color: var(--darkgrey);
+    line-height: 1.15em;
     text-rendering: optimizeLegibility;
     font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
 }
 
 h1 {
-    font-size: 5rem;
     text-indent: -1px;
+    font-size: 5rem;
 }
 
 h2 {
-    font-size: 4.2rem;
     text-indent: -1px;
+    font-size: 4.2rem;
 }
 
 h3 {
@@ -149,11 +148,11 @@ a.highlight {
 
 hr {
     display: block;
+    margin: 3.2em 0;
+    padding: 0;
     height: 1px;
     border: 0;
     border-top: 1px solid #e1e1e1;
-    margin: 3.2em 0;
-    padding: 0;
 }
 
 dl {
@@ -162,25 +161,25 @@ dl {
 
 dl dt {
     float: left;
-    width: 180px;
-    overflow: hidden;
     clear: left;
+    overflow: hidden;
+    margin-bottom: 1em;
+    width: 180px;
     text-align: right;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-weight: bold;
-    margin-bottom: 1em;
 }
 
 dl dd {
-    margin-left: 200px;
     margin-bottom: 1em;
+    margin-left: 200px;
 }
 
 blockquote {
-    margin: 1.6em 0;;
+    margin: 1.6em 0;
     padding: 0 1.6em 0 1.6em;
-    border-left: #e1e1e1 0.6em solid;
+    border-left: #e1e1e1 0.6em solid;;
 }
 
 blockquote p {
@@ -192,8 +191,8 @@ blockquote p {
 blockquote small {
     display: inline-block;
     margin: 0.8em 0 0.8em 1.5em;
-    font-size: 0.9em;
     color: var(--brown);
+    font-size: 0.9em;
 }
 /* Quotation marks */
 blockquote small:before {
@@ -216,33 +215,33 @@ tt {
 
 code,
 tt {
-    font-size: 0.85em;
+    padding: 0.2em 0.4em;
-    white-space: pre-wrap;
     background: lighten(#e1e1e1, 2%);
     border-radius: 2px;
-    padding: 0.2em 0.4em;
     vertical-align: top;
+    white-space: pre-wrap;
+    font-size: 0.85em;
 }
 
 pre {
-    margin: 1.6em 0;;
-    background: lighten(#e1e1e1, 2%);
-    width: 100%;
-    padding: 10px;
-    font-family: var(--font-family-mono);
-    font-size: 0.9em;
-    white-space: pre;
     overflow: auto;
+    margin: 1.6em 0;
+    padding: 10px;
+    width: 100%;
+    background: lighten(#e1e1e1, 2%);
     border-radius: 3px;
+    white-space: pre;
+    font-family: var(--font-family-mono);
+    font-size: 0.9em;;
 }
 
 pre code,
 pre tt {
-    font-size: inherit;
-    white-space: pre-wrap;
-    background: transparent;
-    border: none;
     padding: 0;
+    border: none;
+    background: transparent;
+    white-space: pre-wrap;
+    font-size: inherit;
 }
 
 kbd {
@@ -250,22 +249,22 @@ kbd {
     margin-bottom: 0.4em;
     padding: 1px 8px;
     border: #ccc 1px solid;
-    color: var(--darkgrey);
-    text-shadow: #fff 0 1px 0;
-    font-size: 0.9em;
-    font-weight: bold;
     background: #f4f4f4;
     border-radius: 4px;
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
     0 1px 0 0 #fff inset;
+    color: var(--darkgrey);
+    text-shadow: #fff 0 1px 0;
+    font-size: 0.9em;
+    font-weight: bold;
 }
 
 button {
-    background: transparent;
-    border: none;
-    outline: none;
-    box-shadow: none;
     padding: 0;
+    outline: none;
+    border: none;
+    background: transparent;
+    box-shadow: none;
 }
 
 img {
@@ -292,8 +291,8 @@ img {
 }
 
 .hidden {
-    display: none !important;
     visibility: hidden !important;
+    display: none !important;
 }
 
 .invisible {
@@ -302,23 +301,23 @@ img {
 
 .sr-only {
     position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
+    margin: -1px;
+    padding: 0;
+    width: 1px;
+    height: 1px;
     border: 0;
 }
 
 .sr-only:active,
 .sr-only:focus {
     position: static;
-    width: auto;
-    height: auto;
-    margin: 0;
     overflow: visible;
     clip: auto;
+    margin: 0;
+    width: auto;
+    height: auto;
 }
 
 .right {
@@ -355,12 +354,12 @@ img {
 
 @keyframes fade-in-scale {
     from {
-        transform: scale(0.95);
         opacity: 0;
+        transform: scale(0.95);
     }
     to {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 }
 

app/styles/patterns/icons.css

@@ -3,37 +3,39 @@
 
 @font-face {
     font-family: "ghosticons";
+    font-weight: normal;
+    font-style: normal;
     src: url("fonts/ghosticons.eot");
     src: url("fonts/ghosticons.eot?#iefix") format("embedded-opentype"),
     url("fonts/ghosticons.woff") format("woff"),
     url("fonts/ghosticons.ttf") format("truetype"),
     url("fonts/ghosticons.svg#ghosticons") format("svg");
-    font-weight: normal;
-    font-style: normal;
 }
 
 [data-icon]:before {
-    font-family: "ghosticons" !important;
     content: attr(data-icon);
-    font-style: normal !important;
-    font-weight: normal !important;
-    font-variant: normal !important;
     text-transform: none !important;
-    speak: none;
+    font-family: "ghosticons" !important;
     line-height: 1;
+    font-weight: normal !important;
+    font-style: normal !important;
+    font-variant: normal !important;
+
+    speak: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 [class^="icon-"]:before,
 [class*=" icon-"]:before {
-    font-family: "ghosticons" !important;
-    font-style: normal !important;
-    font-weight: normal !important;
-    font-variant: normal !important;
     text-transform: none !important;
-    speak: none;
+    font-family: "ghosticons" !important;
     line-height: 1;
+    font-weight: normal !important;
+    font-style: normal !important;
+    font-variant: normal !important;
+
+    speak: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

app/styles/patterns/labels.css

@@ -4,14 +4,14 @@
 .label {
     display: inline;
     padding: 0.2em 0.6em 0.3em;
-    font-size: 75%;
+    border-radius: 0.25em;
-    font-weight: 300;
-    line-height: 1;
     color: #fff;
+    vertical-align: baseline;
     text-align: center;
     white-space: nowrap;
-    vertical-align: baseline;
+    font-size: 75%;
-    border-radius: 0.25em;
+    line-height: 1;
+    font-weight: 300;
 }
 
 .label:empty {
@@ -29,12 +29,12 @@ h3 .label,
 h4 .label,
 h5 .label,
 h6 .label {
+    position: relative;
+    top: -0.18em;
     display: inline-block;
     padding: 0.2em 0.5em 0.25em;
-    top: -0.18em;
-    position: relative;
-    line-height: 70%;
     font-size: 70%;
+    line-height: 70%;
 }
 
 a.label:hover,

app/styles/patterns/navlist.css

@@ -3,10 +3,10 @@
 
 .nav-list {
     padding: 0;
-    border: 1px solid #e0dfd7;
     max-width: 500px;
-    border-radius: var(--border-radius);
+    border: 1px solid #e0dfd7;
     background: #fff;
+    border-radius: var(--border-radius);
 }
 
 .nav-list.nav-list-block {
@@ -30,8 +30,8 @@
 }
 
 .nav-list-item:last-of-type {
-    border-bottom-left-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
 }
 
 .nav-list-item:not(:last-of-type) {
@@ -48,15 +48,15 @@
 
 .nav-list-item b {
     display: block;
-    font-weight: normal;
     font-size: 1.6rem;
     line-height: 1.375;
+    font-weight: normal;
 }
 
 .nav-list-item span {
     display: block;
-    font-size: 1.1rem;
     color: var(--midgrey);
+    font-size: 1.1rem;
     line-height: 1.375;
 }
 

app/styles/patterns/tables.css

@@ -5,8 +5,8 @@
 table,
 .table {
     margin: 1.6em 0;
-    width: 100%;
     max-width: 100%;
+    width: 100%;
     background-color: transparent;
 }
 
@@ -15,9 +15,9 @@ table td,
 .table th,
 .table td {
     padding: 8px;
-    line-height: 20px;
-    text-align: left;
     vertical-align: middle;
+    text-align: left;
+    line-height: 20px;
 }