Merge pull request #5273 from JohnONolan/zelda

Zelda

.npmignore

@@ -15,7 +15,6 @@ content/data/**
 node_modules/**
 **/*.db*
 *.db*
-.sass*
 .af*
 .git*
 .groc*

CONTRIBUTING.md

@@ -227,7 +227,7 @@ If you're still stuck, please come join us in [slack](https://ghost.org/slack) a
 
 
 ### Developer Tips
-Whilst developing, you can take advantage of the [Grunt toolkit](https://github.com/TryGhost/Ghost/wiki/Grunt-Toolkit) to automatically compile assets, such as handlebars templates, sass and ember scripts. Some useful commands include:
+Whilst developing, you can take advantage of the [Grunt toolkit](https://github.com/TryGhost/Ghost/wiki/Grunt-Toolkit) to automatically compile assets, such as handlebars templates, styles and ember scripts. Some useful commands include:
 
 - `grunt dev` => Watch for changes and automatically rebuild assets
 - `grunt prod` => Build assets for the production environment

Gruntfile.js

@@ -69,7 +69,8 @@ var _              = require('lodash'),
                         'content/themes/casper/assets/js/*.js',
                         'core/client/dist/*.js',
                         'core/client/dist/*.css',
-                        'core/built/scripts/*.js'
+                        'core/built/scripts/*.js',
+                        'core/client/app/html/*.html'
                     ],
                     options: {
                         livereload: true
@@ -82,6 +83,13 @@ var _              = require('lodash'),
                         // **Note:** Without this option specified express won't be reloaded
                         nospawn: true
                     }
+                },
+                csscomb: {
+                    files: ['core/client/app/styles/**/*.css'],
+                    tasks: ['shell:csscombfix'],
+                    options: {
+                        livereload: true
+                    }
                 }
             },
 
@@ -334,6 +342,14 @@ var _              = require('lodash'),
 
                 shrinkwrap: {
                     command: 'npm shrinkwrap'
+                },
+
+                csscombfix: {
+                    command: path.resolve(cwd + '/node_modules/.bin/csscomb -c core/client/app/styles/csscomb.json -v core/client/app/styles')
+                },
+
+                csscomblint: {
+                    command: path.resolve(cwd + '/node_modules/.bin/csscomb -c core/client/app/styles/csscomb.json -lv core/client/app/styles')
                 }
             },
 
@@ -610,7 +626,7 @@ var _              = require('lodash'),
         //
         // `grunt lint` will run the linter and the code style checker so you can make sure your code is pretty
         grunt.registerTask('lint', 'Run the code style checks and linter',
-            ['jshint', 'jscs']
+            ['jshint', 'jscs', 'shell:csscomblint']
         );
 
         // ### test-setup *(utility)(
@@ -778,7 +794,7 @@ var _              = require('lodash'),
             var done = this.async(),
                 templatePath = 'core/client/app/templates/-contributors.hbs',
                 imagePath = 'core/client/public/assets/img/contributors/',
-                ninetyDaysAgo = Date.now() - (1000 * 60 * 60 * 24 * 90),
+                timeSpan = Date.now() - (1000 * 60 * 60 * 24 * 180),
                 oauthKey = process.env.GITHUB_OAUTH_KEY;
 
             if (fs.existsSync(templatePath) && !grunt.option('force')) {
@@ -795,15 +811,15 @@ var _              = require('lodash'),
                     user: 'tryghost',
                     repo: 'ghost',
                     oauthKey: oauthKey,
-                    releaseDate: ninetyDaysAgo,
-                    count: 20,
+                    releaseDate: timeSpan,
+                    count: 18,
                     retry: true
                 })
             ).then(function (results) {
                 var contributors = results[1],
-                    contributorTemplate = '<li>\n    <a href="<%githubUrl%>" title="<%name%>">\n' +
-                    '        <img src="{{gh-path "admin" "/img/contributors"}}/<%name%>" alt="<%name%>">\n' +
-                    '    </a>\n</li>',
+                    contributorTemplate = '<article>\n    <a href="<%githubUrl%>" title="<%name%>">\n' +
+                    '        <img src="{{gh-path "admin" "/img/contributors"}}/<%name%>" alt="<%name%>" />\n' +
+                    '    </a>\n</article>',
 
                     downloadImagePromise = function (url, name) {
                         return new Promise(function (resolve, reject) {

core/client/.gitignore

@@ -9,7 +9,6 @@
 /bower_components
 
 # misc
-/.sass-cache
 /connect.lock
 /coverage/*
 /libpeerconnection.log

core/client/Brocfile.js

@@ -17,18 +17,23 @@ app = new EmberApp({
     outputPaths: {
         app: {
             js: assetLocation('ghost.js')
-            // css: see config/environment.js (sassOptions)
         },
         vendor: {
             js:  assetLocation('vendor.js'),
             css: assetLocation('vendor.css')
         }
     },
+    mythOptions: {
+        source: './app/styles/app.css',
+        inputFile: 'app.css',
+        browsers: 'last 2 versions',
+        outputFile: 'ghost.css'
+    },
     hinting: false,
-    fingerprint: disabled,
-    sourcemaps: disabled // see https://github.com/ember-cli/ember-cli/issues/2912
+    fingerprint: disabled
 });
 
+// 'dem Scripts
 app.import('bower_components/loader.js/loader.js');
 app.import('bower_components/jquery/dist/jquery.js');
 app.import('bower_components/ic-ajax/dist/globals/main.js');
@@ -50,11 +55,8 @@ app.import('bower_components/nprogress/nprogress.js');
 app.import('bower_components/ember-simple-auth/simple-auth.js');
 app.import('bower_components/ember-simple-auth/simple-auth-oauth2.js');
 app.import('bower_components/google-caja/html-css-sanitizer-bundle.js');
-app.import('bower_components/nanoscroller/bin/javascripts/jquery.nanoscroller.js');
 app.import('bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.js');
 app.import('bower_components/codemirror/lib/codemirror.js');
-app.import('bower_components/codemirror/lib/codemirror.css');
-app.import('bower_components/codemirror/theme/xq-light.css');
 app.import('bower_components/codemirror/mode/htmlmixed/htmlmixed.js');
 app.import('bower_components/codemirror/mode/xml/xml.js');
 app.import('bower_components/codemirror/mode/css/css.js');
@@ -62,4 +64,9 @@ app.import('bower_components/codemirror/mode/javascript/javascript.js');
 app.import('bower_components/xregexp/xregexp-all.js');
 app.import('bower_components/password-generator/lib/password-generator.js');
 
+// 'dem Styles
+app.import('bower_components/nprogress/nprogress.css');
+app.import('bower_components/codemirror/lib/codemirror.css');
+app.import('bower_components/codemirror/theme/xq-light.css');
+
 module.exports = app.toTree();

core/client/app/README.md

@@ -3,36 +3,17 @@
 Ember.js application used as a client-side admin for the [Ghost](http://ghost.org) blogging platform. This readme is a work in progress guide aimed at explaining the specific nuances of the Ghost Ember app to contributors whose main focus is on this side of things.
 
 
-## Architecture
+## CSS
 
-ToDo: Explain the basic Ember app structure.
-
-```
-client/
-├── assets/
-│   ├── ghost.css
-│   └── ghost.min.css
-├── things/
-│   ├── things.js
-│   └── things.min.js
-└── things/
-    ├── things.js
-    └── things.js
-```
-
-## SASS
-
-All CSS is written in SASS and compiled using grunt. We do not follow any strict CSS framework, however our general style is pretty similar to BEM.
+We use pure CSS, which is pre-processed for backwards compatibility by [Myth](http://myth.io). We do not follow any strict CSS framework, however our general style is pretty similar to BEM.
 
 Styles are primarily broken up into 4 main categories:
 
-* **Helpers** - are pure-sass files. Variables/mixins/things which are generally never compiled to actual CSS, and are simply used to aid development.
 * **Patterns** - are base level visual styles for HTML elements (eg. Buttons)
 * **Components** - are groups of patterns used to create a UI component (eg. Modals)
 * **Layouts** - are groups of components used to create application screens (eg. Settings)
-* **Lib** - is where we store styles for 3rd party components.
 
-All of these separate files are subsequently imported and compiled in `screen.scss`.
+All of these separate files are subsequently imported and compiled in `app.css`.
 
 
 ## Front End Standards
@@ -45,5 +26,5 @@ All of these separate files are subsequently imported and compiled in `screen.sc
 * End all lines with a semi-colon.
 * For multiple, comma-separated selectors, place each selector on its own line.
 * Use js- prefixed classes for JavaScript hooks into the DOM, and never use these in CSS as per [Slightly Obtrusive JavaSript](http://ozmm.org/posts/slightly_obtrusive_javascript.html)
-* Avoid SASS over-nesting. Never nest more than 3 levels deep.
-* Use comments to explain "why" not "what" (Eg. This requires a z-index in order to appear above mobile navigation. Not: This is a thing which is always on top!)
+* Avoid over-nesting CSS. Never nest more than 3 levels deep.
+* Use comments to explain "why" not "what" (Good: This requires a z-index in order to appear above mobile navigation. Bad: This is a thing which is always on top!)

core/client/app/assets/lib/uploader.js

@@ -6,7 +6,7 @@ var UploadUi,
 
 UploadUi = function ($dropzone, settings) {
     var $url = '<div class="js-url"><input class="url js-upload-url" type="url" placeholder="http://"/></div>',
-        $cancel = '<a class="image-cancel js-cancel" title="Delete"><span class="hidden">Delete</span></a>',
+        $cancel = '<a class="image-cancel icon-trash js-cancel" title="Delete"><span class="hidden">Delete</span></a>',
         $progress =  $('<div />', {
             class: 'js-upload-progress progress progress-success active',
             role: 'progressbar',
@@ -131,7 +131,7 @@ UploadUi = function ($dropzone, settings) {
                 $dropzone.append('<button class="js-fail btn btn-green" style="display: none">Try Again</button>');
             }
             if (!$dropzone.find('a.image-url')[0]) {
-                $dropzone.append('<a class="image-url" title="Add image from URL"><span class="hidden">URL</span></a>');
+                $dropzone.append('<a class="image-url" title="Add image from URL"><i class="icon-link"><span class="hidden">URL</span></i></a>');
             }
             // if (!$dropzone.find('a.image-webcam')[0]) {
             //     $dropzone.append('<a class="image-webcam" title="Add image from webcam"><span class="hidden">Webcam</span></a>');

core/client/app/components/gh-alert.js

@@ -0,0 +1,40 @@
+import Ember from 'ember';
+
+var AlertComponent = Ember.Component.extend({
+    tagName: 'article',
+    classNames: ['gh-alert', 'gh-alert-blue'],
+    classNameBindings: ['typeClass'],
+
+    typeClass: Ember.computed(function () {
+        var classes = '',
+            message = this.get('message'),
+            type,
+            dismissible;
+
+        // Check to see if we're working with a DS.Model or a plain JS object
+        if (typeof message.toJSON === 'function') {
+            type = message.get('type');
+            dismissible = message.get('dismissible');
+        } else {
+            type = message.type;
+            dismissible = message.dismissible;
+        }
+
+        classes += 'notification-' + type;
+
+        if (type === 'success' && dismissible !== false) {
+            classes += ' notification-passive';
+        }
+
+        return classes;
+    }),
+
+    actions: {
+        closeNotification: function () {
+            var self = this;
+            self.notifications.closeNotification(self.get('message'));
+        }
+    }
+});
+
+export default AlertComponent;

core/client/app/components/gh-alerts.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+var AlertsComponent = Ember.Component.extend({
+    tagName: 'aside',
+    classNames: 'gh-alerts',
+
+    messages: Ember.computed.filter('notifications', function (notification) {
+        var displayStatus = (typeof notification.toJSON === 'function') ?
+            notification.get('status') : notification.status;
+
+        return displayStatus === 'persistent';
+    }),
+
+    messageCountObserver: Ember.observer('messages.[]', function () {
+        this.sendAction('notify', this.get('messages').length);
+    })
+});
+
+export default AlertsComponent;

core/client/app/components/gh-notification.js

@@ -1,7 +1,9 @@
 import Ember from 'ember';
 
 var NotificationComponent = Ember.Component.extend({
-    classNames: ['js-bb-notification'],
+    tagName: 'article',
+    classNames: ['gh-notification', 'gh-notification-green'],
+    classNameBindings: ['typeClass'],
 
     typeClass: Ember.computed(function () {
         var classes = '',

core/client/app/components/gh-notifications.js

@@ -1,25 +1,14 @@
 import Ember from 'ember';
 var NotificationsComponent = Ember.Component.extend({
     tagName: 'aside',
-    classNames: 'notifications',
-    classNameBindings: ['location'],
+    classNames: 'gh-notifications',
 
     messages: Ember.computed.filter('notifications', function (notification) {
-        // If this instance of the notifications component has no location affinity
-        // then it gets all notifications
-        if (!this.get('location')) {
-            return true;
-        }
+        var displayStatus = (typeof notification.toJSON === 'function') ?
+            notification.get('status') : notification.status;
 
-        var displayLocation = (typeof notification.toJSON === 'function') ?
-            notification.get('location') : notification.location;
-
-        return this.get('location') === displayLocation;
-    }),
-
-    messageCountObserver: function () {
-        this.sendAction('notify', this.get('messages').length);
-    }.observes('messages.[]')
+        return displayStatus === 'passive';
+    })
 });
 
 export default NotificationsComponent;

core/client/app/controllers/application.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
 var ApplicationController = Ember.Controller.extend({
     // jscs: disable
-    hideNav: Ember.computed.match('currentPath', /(error|signin|signup|setup|forgotten|reset)/),
+    signedOut: Ember.computed.match('currentPath', /(signin|signup|setup|reset)/),
     // jscs: enable
 
     topNotificationCount: 0,

core/client/app/controllers/forgotten.js

@@ -1,47 +0,0 @@
-import Ember from 'ember';
-import ajax from 'ghost/utils/ajax';
-import ValidationEngine from 'ghost/mixins/validation-engine';
-
-var ForgottenController = Ember.Controller.extend(ValidationEngine, {
-    email: '',
-    submitting: false,
-
-    // ValidationEngine settings
-    validationType: 'forgotten',
-
-    actions: {
-        submit: function () {
-            var data = this.getProperties('email');
-            this.send('doForgotten', data, true);
-        },
-        doForgotten: function (data, delay) {
-            var self = this;
-            this.set('email', data.email);
-            this.toggleProperty('submitting');
-            this.validate({format: false}).then(function () {
-                ajax({
-                    url: self.get('ghostPaths.url').api('authentication', 'passwordreset'),
-                    type: 'POST',
-                    data: {
-                        passwordreset: [{
-                            email: data.email
-                        }]
-                    }
-                }).then(function () {
-                    self.toggleProperty('submitting');
-                    self.notifications.showSuccess('Please check your email for instructions.', {delayed: delay});
-                    self.set('email', '');
-                    self.transitionToRoute('signin');
-                }).catch(function (resp) {
-                    self.toggleProperty('submitting');
-                    self.notifications.showAPIError(resp, {defaultErrorText: 'There was a problem with the reset, please try again.'});
-                });
-            }).catch(function (errors) {
-                self.toggleProperty('submitting');
-                self.notifications.showErrors(errors);
-            });
-        }
-    }
-});
-
-export default ForgottenController;

core/client/app/controllers/signin.js

@@ -1,12 +1,14 @@
 import Ember from 'ember';
 import ValidationEngine from 'ghost/mixins/validation-engine';
+import ajax from 'ghost/utils/ajax';
 
 var SigninController = Ember.Controller.extend(SimpleAuth.AuthenticationControllerMixin, ValidationEngine, {
     authenticator: 'simple-auth-authenticator:oauth2-password-grant',
-    forgotten: Ember.inject.controller(),
 
     validationType: 'signin',
 
+    submitting: false,
+
     actions: {
         authenticate: function () {
             var model = this.get('model'),
@@ -35,11 +37,30 @@ var SigninController = Ember.Controller.extend(SimpleAuth.AuthenticationControll
         },
 
         forgotten: function () {
-            if (this.get('model.identification')) {
-                return this.get('forgotten').send('doForgotten', {email: this.get('model.identification')}, false);
+            var email = this.get('model.identification'),
+                self = this;
+
+            if (!email) {
+                return this.notifications.showError('Enter email address to reset password.');
             }
 
-            this.transitionToRoute('forgotten');
+            self.set('submitting', true);
+
+            ajax({
+                url: self.get('ghostPaths.url').api('authentication', 'passwordreset'),
+                type: 'POST',
+                data: {
+                    passwordreset: [{
+                        email: email
+                    }]
+                }
+            }).then(function () {
+                self.set('submitting', false);
+                self.notifications.showSuccess('Please check your email for instructions.');
+            }).catch(function (resp) {
+                self.set('submitting', false);
+                self.notifications.showAPIError(resp, {defaultErrorText: 'There was a problem with the reset, please try again.'});
+            });
         }
     }
 });

core/client/app/html/install1.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+<title>Ghost Admin</title>
+<meta name="HandheldFriendly" content="True" />
+<meta name="MobileOptimized" content="320" />
+<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
+<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
+<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
+</head>
+<body>
+
+
+<div class="gh-flow">
+    <header class="gh-flow-head">
+        <nav class="gh-flow-nav">
+            <ol>
+                <li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
+                <li class="divider"></li>
+                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
+                <li class="divider"></li>
+                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">3</span></a></li>
+            </ol>
+        </nav>
+    </header>
+
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
+            <header>
+                <h1>Welcome to <strong>Ghost</strong>!</h1>
+                <p>So far there have been <em>542,952</em> Ghost blogs made by people all over the world. Today we’re making yours.</p>
+            </header>
+
+            <img class="gh-flow-screenshot" src="file:///Users/John/Sites/Ghost/core/shared/img/install-welcome.png" alt="Ghost screenshot" />
+
+            <a class="btn btn-green btn-lg" href="#">Create your account <i class="icon-chevron"></i></a>
+        </section>
+    </div>
+</div>
+
+
+</body>
+</html>

core/client/app/html/install2.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+<title>Ghost Admin</title>
+<meta name="HandheldFriendly" content="True" />
+<meta name="MobileOptimized" content="320" />
+<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
+<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
+<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
+</head>
+<body>
+
+
+<div class="gh-flow">
+    <header class="gh-flow-head">
+        <nav class="gh-flow-nav">
+            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+            <ol>
+                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
+                <li class="divider"></li>
+                <li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
+                <li class="divider"></li>
+                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">3</span></a></li>
+            </ol>
+        </nav>
+    </header>
+
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
+            <header>
+                <h1>Create your account</h1>
+            </header>
+
+            <form class="gh-flow-create">
+                <figure class="account-image">
+                    <div  id="account-image" class="img"  style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
+                        <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
+                        <span class="sr-only">User imge</span>
+                    </div>
+                    <a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
+                </figure>
+                <div class="form-group">
+                    <label for="email-address">Email address</label>
+                    <span class="input-icon icon-mail">
+                        <input id="email-address" class="ember-view ember-text-field gh-input" type="email" placeholder="Eg. john@example.com">
+                    </span>
+                </div>
+                <div class="form-group">
+                    <label for="full-name">Full name</label>
+                    <span class="input-icon icon-user">
+                        <input id="full-name" class="ember-view ember-text-field gh-input" type="text" placeholder="Eg. John Smith">
+                    </span>
+                </div>
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <span class="input-icon icon-lock">
+                        <input id="password" class="ember-view ember-text-field gh-input" type="password" placeholder="At least 7 characters">
+                        <div class="pw-strength">
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot <!--pw-strength-activedot-->"></div>
+                        </div>
+                    </span>
+                </div>
+                <div class="form-group">
+                    <label for="blog-title">Blog title</label>
+                    <span class="input-icon icon-content">
+                        <input id="blog-title" class="ember-view ember-text-field gh-input" type="text" placeholder="Eg. The Daily Awesome">
+                    </span>
+                </div>
+            </form>
+
+            <a class="btn btn-green btn-lg btn-block" href="#">Last step: Invite your team <i class="icon-chevron"></i></a>
+        </section>
+    </div>
+</div>
+
+
+</body>
+</html>

core/client/app/html/install3.html

@@ -0,0 +1,90 @@
+<!doctype html>
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+<title>Ghost Admin</title>
+<meta name="HandheldFriendly" content="True" />
+<meta name="MobileOptimized" content="320" />
+<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
+<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
+<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
+</head>
+<body>
+
+
+<div class="gh-flow">
+    <header class="gh-flow-head">
+        <nav class="gh-flow-nav">
+            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+            <ol>
+                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
+                <li class="divider"></li>
+                <li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
+                <li class="divider"></li>
+                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">3</span></a></li>
+            </ol>
+        </nav>
+    </header>
+
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
+            <header>
+                <h1>Create your account</h1>
+            </header>
+
+            <form class="gh-flow-create">
+                <figure class="account-image">
+                    <div  id="account-image" class="img"  style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
+                        <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
+                        <span class="sr-only">User imge</span>
+                    </div>
+                    <a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
+                </figure>
+                <div class="form-group success">
+                    <label for="email-address">Email address</label>
+                    <span class="input-icon icon-mail">
+                        <input id="email-address" class="ember-view ember-text-field" type="email" placeholder="Eg. john@example.com">
+                    </span>
+                    <p class="response">Lookin' good</p>
+                </div>
+                <div class="form-group success">
+                    <label for="full-name">Full name</label>
+                    <span class="input-icon icon-user">
+                        <input id="full-name" class="ember-view ember-text-field" type="text" placeholder="Eg. John Smith">
+                    </span>
+                    <p class="response">Nice to meet you, John! <a href="#">Upload a photo?</a></p>
+                </div>
+                <div class="form-group error">
+                    <label for="password">Password</label>
+                    <span class="input-icon icon-lock">
+                        <input id="password" class="ember-view ember-text-field" type="password" placeholder="At least 7 characters">
+                        <div class="pw-strength">
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <span class="pw-strength-dot pw-strength-activedot"></span>
+                        </div>
+                    </span>
+                    <p class="response">Too short, dear</p>
+                </div>
+                <div class="form-group">
+                    <label for="blog-title">Blog title</label>
+                    <span class="input-icon icon-content">
+                        <input id="blog-title" class="ember-view ember-text-field" type="text" placeholder="Eg. The Daily Awesome">
+                    </span>
+                </div>
+            </form>
+
+            <a class="btn btn-green btn-lg btn-block" href="#">Last step: Invite your team <i class="icon-chevron"></i></a>
+            <p class="main-error">The password fairy does not approve</p>
+        </section>
+    </div>
+</div>
+
+
+</body>
+</html>

core/client/app/html/install4.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+<title>Ghost Admin</title>
+<meta name="HandheldFriendly" content="True" />
+<meta name="MobileOptimized" content="320" />
+<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
+<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
+<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
+</head>
+<body>
+
+
+<div class="gh-flow">
+    <header class="gh-flow-head">
+        <nav class="gh-flow-nav">
+            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+            <ol>
+                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
+                <li class="divider"></li>
+                <li><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
+                <li class="divider"></li>
+                <li class="current"><span class="step" href="#"><i class="icon-check"></i><span class="num">3</span></span></li>
+            </ol>
+        </nav>
+    </header>
+
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
+            <header>
+                <h1>Invite your team</h1>
+                <p>Ghost works best when shared with others. Collaborate, get feedback on your posts &amp; work together on ideas.</p>
+            </header>
+
+            <img class="gh-flow-faces" src="file:///Users/John/Sites/Ghost/core/shared/img/users.png" alt="" />
+
+            <form class="gh-flow-invite">
+                <label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
+                <textarea placeholder="john@example.com
+sally.sanders@example.com"></textarea>
+            </form>
+
+            <a class="btn btn-default btn-minor btn-lg btn-block" href="#">I'll do this later, take me to my blog!</a>
+        </section>
+    </div>
+</div>
+
+
+</body>
+</html>

core/client/app/html/scrollbars.html

@@ -1,198 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Scrollbars</title>
-    <link rel="stylesheet" href="../assets/css/ghost.min.css">
-</head>
-<body class="manage">
-
-    <div id="container">
-        <a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
-        <nav class="global-nav" role="navigation">
-            <a class="nav-item ghost-logo" href="/" title="/">
-                <div class="nav-label">
-                    <i class="icon-ghost"></i><span>Visit blog</span>
-                </div>
-            </a>
-            <a class=" nav-item nav-content active" href="/ghost/">
-                <div class="nav-label">
-                    <i class="icon-content"></i> Content
-                </div>
-            </a>
-            <a class=" nav-item nav-new" href="/ghost/editor/">
-                <div class="nav-label">
-                    <i class="icon-add"></i> New Post
-                </div>
-            </a>
-            <a class=" nav-item nav-settings" href="/ghost/settings/">
-                <div class="nav-label">
-                    <i class="icon-settings2"></i> Settings
-                </div>
-            </a>
-            <div class="nav-item user-menu" data-href="#">
-                <div class=" nav-label">
-                    <div class="image">
-                        <img src="../../../core/shared/img/user-image.png" alt="<script id='metamorph-30-start' type='text/x-placeholder'></script>
-                        Paul Davis
-                        <script id='metamorph-30-end' type='text/x-placeholder'></script>
-                        's profile picture">
-                    </div>
-                    <div class="name">
-                         aul Davis <i class="icon-chevron-down"></i>
-                        <small>Profile &amp; Settings</small>
-                    </div>
-                </div>
-                <div class=" ghost-popover fade-in dropdown">
-                    <ul class="dropdown-menu dropdown-triangle-top-right" role="menu">
-                        <li role="presentation"><a class=" dropdown-item user-menu-profile" href="/ghost/settings/users/paul-davis/" tabindex="-1">Your Profile</a></li>
-                        <li role="presentation"><a class="dropdown-item user-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/">Help / Support</a></li>
-                        <li class="divider"></li>
-                        <li role="presentation"><a class=" dropdown-item user-menu-signout" href="/ghost/signout/" tabindex="-1">Sign Out</a></li>
-                    </ul>
-                </div>
-            </div>
-        </nav>
-
-        <main id="gh-main" class="viewport" role="main">
-            <aside class=" notifications top"></aside>
-            <aside class=" notifications bottom"></aside>
-            <section class=" content-view-container">
-                <header class="page-header">
-                    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
-                    <h2 class="page-title">Content</h2>
-                </header>
-                <div class="page-content">
-                    <section class="content-list js-content-list">
-                        <header class="floatingheader">
-                            <section class="content-filter">
-                                <small>All Posts</small>
-                            </section>
-                            <a class=" btn btn-green" href="/ghost/editor/" title="New Post"><span class="hidden">New Post</span></a>
-                        </header>
-                        
-
-                        <section class="content-list-content">
-                            <div class="nano">
-                                <div class="nano-content">
-                                    <ol class="posts-list">
-                                        <li>
-                                            <a class="permalink" href="">
-                                                <h3 class="entry-title">Lorem Ipsum</h3>
-                                                <section class="entry-meta">
-                                                    <span class="status">
-                                                        <span class="draft">Draft</span>
-                                                    </span>
-                                                </section>
-                                            </a>
-                                        </li>
-                                    </ol>
-                                </div>
-                            </div>
-                        </section>
-
-
-                    </section>
-                    <section class="content-preview js-content-preview" style="padding: 0;">
-
-                        <div class="nano">
-                            <div class="nano-content">
-
-                                <header class="post-preview-header" style="padding: 15px 15px 0 15px;">
-                                    <button type="button" class="btn btn-default btn-back">Back</button>
-                                    <button type="button" class="unfeatured" title="Feature this post">
-                                        <span class="hidden">Star</span>
-                                    </button>
-                                    <small>
-                                        <span class="status">Published</span>
-                                        <span class="normal">by</span>
-                                        <span class="author">Test User</span>
-                                    </small>
-                                    <section class="post-controls">
-                                        <a class=" btn btn-default post-edit" href="/ghost/editor/34/"> Edit</a>
-                                    </section>
-                                </header>
-                                <section class=" content-preview-content" style="padding: 15px;">
-                                    <div class="wrapper">
-                                        <h1>Lorem Ipsum</h1>
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nesciunt consectetur ipsa sapiente recusandae suscipit excepturi asperiores ex dolores laborum rerum vero nam non amet corrupti dignissimos eum odit ut quae iure, ad ratione neque. Ea minima minus aspernatur ut, nulla quam accusantium laboriosam libero vel quos repellendus repellat eius!</p>
-                                        <p>Totam excepturi necessitatibus porro aperiam commodi quaerat blanditiis numquam sint minus placeat esse quas iste nulla doloremque eum voluptate ipsa enim ab ullam laboriosam dignissimos, quo voluptates soluta laudantium vero. Fuga assumenda quidem officiis eius, unde blanditiis! Quod eum, itaque quis, ea nobis ipsa delectus, sit modi nesciunt, harum cupiditate.</p>
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae veniam, eum, ea provident neque blanditiis omnis quae quidem iusto est pariatur odio inventore magni voluptatem aut facere sint animi nam, maxime ex perferendis reprehenderit. Assumenda ex, vitae totam quia ea obcaecati rem veniam adipisci dolores. Eaque reiciendis, numquam itaque deserunt.</p>
-                                        <p>Nihil ut eaque sit doloribus repellendus accusantium officiis, aliquam error minima fuga, in, consequatur ipsum blanditiis facilis enim quia nostrum numquam dignissimos neque ab magni rerum amet maiores exercitationem! Omnis tenetur, molestias cumque laudantium praesentium suscipit alias maxime tempora facere cum libero tempore architecto blanditiis, ullam nihil, voluptatem voluptatum! Itaque.</p>
-                                        <p>Dolor magnam nobis tenetur impedit fugit cum debitis voluptatem delectus quisquam itaque quis placeat, odit eligendi qui, asperiores consectetur porro maiores sequi atque dolorem. Quam unde odio, aperiam, eius expedita laudantium illo quisquam, eaque rerum quaerat blanditiis facilis delectus. Blanditiis quae illo et similique velit aut fugiat atque harum adipisci.</p>
-                                        <p>Temporibus expedita pariatur laboriosam nesciunt dicta, in eligendi veniam corporis veritatis aliquam esse quia quaerat eius unde sequi earum explicabo doloremque. Cupiditate numquam officia distinctio iure minus, iusto error voluptatum sed, molestiae asperiores reiciendis dolorum eos unde corporis explicabo maiores recusandae atque. Consectetur culpa quo earum laboriosam ratione fugiat assumenda!</p>
-                                        <p>Ducimus sapiente minima ipsa magni aliquid consectetur corrupti ab a quos vel. Nihil optio cum, iure iusto ut sed qui hic odit. Cupiditate quos, explicabo sunt commodi magnam nam debitis pariatur in ratione. Asperiores quaerat impedit officia iusto quae molestias, nam consectetur eum aspernatur quas. Necessitatibus quam est id hic.</p>
-                                        <p>Repudiandae deleniti minima perspiciatis quam cupiditate placeat quibusdam aspernatur, esse, libero, eveniet, fugit eaque nesciunt voluptatum. Illum tempora modi odio officiis odit exercitationem eos quis tenetur vero inventore fugit soluta voluptatibus saepe numquam, nemo, rerum atque quo cumque asperiores cum officia nisi sint animi! Eum est sed eligendi. Iure, aspernatur.</p>
-                                        <p>Cumque deleniti ut esse sit laudantium voluptate totam, fuga consectetur architecto ad eveniet magnam in similique hic dignissimos minus modi temporibus laboriosam sapiente ab dolorum molestias quia. Velit officiis doloremque, vel magnam pariatur possimus beatae eligendi animi molestiae? Laboriosam reprehenderit veniam id fugiat suscipit animi nemo molestias cupiditate, pariatur corporis.</p>
-                                        <p>Iste, nobis inventore, modi, atque harum eius necessitatibus voluptates nam deserunt aspernatur maiores similique vero sapiente vel doloribus quaerat deleniti et magnam sunt quae numquam, mollitia eveniet magni. Sequi rerum sit quaerat obcaecati molestias. Dolores voluptatibus sed quam adipisci ratione, necessitatibus asperiores commodi quasi cupiditate debitis in sit aliquam ex.</p>
-                                        <p>Eum aliquam soluta accusantium amet neque pariatur velit in quaerat esse hic nam quibusdam aspernatur quae, iusto, sapiente, at voluptas harum eos. Quas eaque pariatur beatae accusantium fugit, explicabo nulla inventore ducimus minus facilis, impedit. Sequi vel repellat modi delectus quis sit, at suscipit, impedit ipsa quibusdam itaque ullam. Qui.</p>
-                                        <p>Illo deserunt sunt commodi. Facere nemo quam delectus quo ad molestiae qui corporis dolorem, dignissimos consectetur iste repellendus animi suscipit sunt sequi, debitis reprehenderit illum repudiandae ipsam laborum fuga, quisquam atque aut unde. Culpa accusantium molestias quidem rerum tempore illo, quam a sit fuga molestiae beatae unde asperiores, deserunt sed.</p>
-                                        <p>Accusantium porro nisi nihil corporis, quidem quam nostrum alias debitis distinctio magnam est illo quis veritatis recusandae totam beatae praesentium rem repellat corrupti, commodi minima similique nemo. Quos natus, distinctio culpa eius fugit asperiores corrupti ipsa aperiam, voluptate provident nisi voluptatum eligendi omnis quaerat similique consequuntur ad tempora deserunt unde!</p>
-                                        <p>Tenetur culpa, natus aliquid molestiae odit architecto, velit amet, numquam necessitatibus non aut sunt nesciunt quas, odio cum illum provident quis repudiandae ea maxime rerum quidem autem laudantium sapiente. Molestiae ullam voluptatum facere magni optio tempora quos recusandae. Autem alias corporis saepe sit beatae illo, veniam voluptatem minima, adipisci nobis!</p>
-                                        <p>Veniam ad, accusamus hic, facilis commodi natus eum cupiditate libero ratione perspiciatis tempora consequuntur vitae dignissimos optio error voluptatum totam quis dolores molestiae, animi excepturi debitis explicabo dolor? Dolorem eveniet cum ab facere eum praesentium ipsa quam itaque. Consequuntur distinctio magnam libero eveniet eum ratione itaque. Molestiae debitis dolorum voluptatem?</p>
-                                        <p>Perferendis ut quia iusto illo, consequatur vitae obcaecati assumenda totam in molestiae modi eos rem sunt odio soluta qui at dicta, a aut deserunt voluptates nesciunt! Alias natus et dolores veniam fuga modi quo dolorem numquam! Quisquam inventore esse facere amet qui ducimus repudiandae natus mollitia consequatur ab libero, adipisci.</p>
-                                        <p>Perspiciatis error ad odit earum excepturi, cumque, mollitia molestias blanditiis impedit consectetur commodi autem architecto nihil, cupiditate nobis laborum vero voluptatibus. Sit repellat autem dicta, mollitia, cum aliquid minima provident, officia quidem molestias est. Esse iusto optio saepe, dolores debitis culpa dolor quis praesentium consectetur. Quae iusto, fugiat labore! Placeat?</p>
-                                    </div>
-                                </section>
-    
-                            </div>
-                        </div>
-
-                    </section>
-                </div>
-            </section>
-        </main>
-    </div>
-
-    <script src="../../../bower_components/jquery/dist/jquery.js"></script>
-    <script src="../../../core/shared/lib/nanoscroller/nanoscroller.js"></script>
-    
-    <script>
-
-        function debounce(fn, delay) {
-          var timer = null;
-          return function () {
-            var context = this, args = arguments;
-            clearTimeout(timer);
-            timer = setTimeout(function () {
-              fn.apply(context, args);
-            }, delay);
-          };
-        }
-      
-        $(function(){
-
-            // Duplicate the post 40 times (for brevity of HTML)
-            // Not required in any way
-            var list = $(".posts-list li:first");
-            for (var i = 0; i < 40; i++){list.clone().appendTo('.posts-list');}
-            // Duplicate the post 40 times (for brevity of HTML)
-
-
-
-            $(".nano").nanoScroller({
-                iOSNativeScrolling: true
-            });
-
-            $(".nano").on("mouseenter", function(){
-                var nano = $(this);
-                nano.addClass("nanoShowScrollBar");
-                setTimeout(function(){
-                    nano.removeClass("nanoShowScrollBar");
-                }, 850);
-            });
-
-            $(".nano-content").scroll(function() {
-                var nano = $(this).parent(".nano");
-                nano.addClass("nanoShowScrollBar");
-                clearTimeout($.data(this, 'scrollTimer'));
-                $.data(this, 'scrollTimer', setTimeout(function() {
-                    nano.removeClass("nanoShowScrollBar");
-                }, 850));
-            });
-            
-        });
-    </script>
-    
-</body>
-</html>

core/client/app/index.html

@@ -41,15 +41,16 @@
 
     <link rel="stylesheet" href="{{asset "vendor.css" ghost="true" minifyInProduction="true"}}" />
     <link rel="stylesheet" href="{{asset "ghost.css" ghost="true" minifyInProduction="true"}}" />
+
     {{content-for 'head-footer'}}
 </head>
 <body>
-    {{content-for 'body'}}
+{{content-for 'body'}}
 
-    <script src="{{asset "vendor.js" ghost="true" minifyInProduction="true"}}"></script>
-    <script src="{{asset "ghost.js" ghost="true" minifyInProduction="true"}}"></script>
-
-    {{content-for 'body-footer'}}
+{{content-for 'body-footer'}}
 
+{{! Dem scripts }}
+<script src="{{asset "vendor.js" ghost="true" minifyInProduction="true"}}"></script>
+<script src="{{asset "ghost.js" ghost="true" minifyInProduction="true"}}"></script>
 </body>
 </html>

core/client/app/mixins/validation-engine.js

@@ -7,7 +7,6 @@ import PostValidator from 'ghost/validators/post';
 import SetupValidator from 'ghost/validators/setup';
 import SignupValidator from 'ghost/validators/signup';
 import SigninValidator from 'ghost/validators/signin';
-import ForgotValidator from 'ghost/validators/forgotten';
 import SettingValidator from 'ghost/validators/setting';
 import ResetValidator from 'ghost/validators/reset';
 import UserValidator from 'ghost/validators/user';
@@ -74,7 +73,6 @@ var ValidationEngine = Ember.Mixin.create({
         setup: SetupValidator,
         signup: SignupValidator,
         signin: SigninValidator,
-        forgotten: ForgotValidator,
         setting: SettingValidator,
         reset: ResetValidator,
         user: UserValidator,

core/client/app/router.js

@@ -19,7 +19,6 @@ Router.map(function () {
     this.route('signin');
     this.route('signout');
     this.route('signup', {path: '/signup/:token'});
-    this.route('forgotten');
     this.route('reset', {path: '/reset/:token'});
 
     this.resource('posts', {path: '/'}, function () {

core/client/app/routes/forgotten.js

@@ -1,11 +0,0 @@
-import Ember from 'ember';
-import styleBody from 'ghost/mixins/style-body';
-import loadingIndicator from 'ghost/mixins/loading-indicator';
-
-var ForgottenRoute = Ember.Route.extend(styleBody, loadingIndicator, {
-    titleToken: 'Forgotten Password',
-
-    classNames: ['ghost-forgotten']
-});
-
-export default ForgottenRoute;

core/client/app/routes/settings/about.js

@@ -25,6 +25,10 @@ var SettingsAboutRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator,
                 self.set('cachedConfig', cachedConfig);
                 return cachedConfig;
             });
+    },
+
+    renderTemplate: function () {
+        this.render('settings/about', {into: 'application'});
     }
 });
 

core/client/app/routes/settings/apps.js

@@ -19,6 +19,10 @@ var AppsRoute = AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
 
     model: function () {
         return this.store.find('app');
+    },
+
+    renderTemplate: function () {
+        this.render('settings/apps', {into: 'application'});
     }
 });
 

core/client/app/routes/settings/code-injection.js

@@ -18,6 +18,10 @@ var SettingsCodeInjectionRoute = AuthenticatedRoute.extend(styleBody, loadingInd
         });
     },
 
+    renderTemplate: function () {
+        this.render('settings/code-injection', {into: 'application'});
+    },
+
     actions: {
         save: function () {
             this.get('controller').send('save');

core/client/app/routes/settings/general.js

@@ -20,6 +20,10 @@ var SettingsGeneralRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator
         });
     },
 
+    renderTemplate: function () {
+        this.render('settings/general', {into: 'application'});
+    },
+
     actions: {
         save: function () {
             this.get('controller').send('save');

core/client/app/routes/settings/labs.js

@@ -17,6 +17,10 @@ var LabsRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, CurrentUs
         return this.store.find('setting', {type: 'blog,theme'}).then(function (records) {
             return records.get('firstObject');
         });
+    },
+
+    renderTemplate: function () {
+        this.render('settings/labs', {into: 'application'});
     }
 });
 

core/client/app/routes/settings/navigation.js

@@ -19,6 +19,10 @@ var NavigationRoute = AuthenticatedRoute.extend(styleBody, CurrentUserSettings,
         });
     },
 
+    renderTemplate: function () {
+        this.render('settings/navigation', {into: 'application'});
+    },
+
     actions: {
         save: function () {
             // since shortcuts are run on the route, we have to signal to the components

core/client/app/routes/settings/tags.js

@@ -40,6 +40,7 @@ TagsRoute = AuthenticatedRoute.extend(CurrentUserSettings, PaginationRouteMixin,
 
     renderTemplate: function (controller, model) {
         this._super(controller, model);
+        this.render('settings/tags', {into: 'application'});
         this.render('settings/tags/settings-menu', {
             into: 'application',
             outlet: 'settings-menu',

core/client/app/routes/settings/users.js

@@ -1,5 +0,0 @@
-import AuthenticatedRoute from 'ghost/routes/authenticated';
-
-var UsersRoute = AuthenticatedRoute.extend();
-
-export default UsersRoute;

core/client/app/routes/settings/users/index.js

@@ -47,6 +47,10 @@ UsersIndexRoute = AuthenticatedRoute.extend(styleBody, CurrentUserSettings, Pagi
         });
     },
 
+    renderTemplate: function () {
+        this.render('settings/users/index', {into: 'application'});
+    },
+
     actions: {
         reload: function () {
             this.refresh();

core/client/app/routes/settings/users/user.js

@@ -49,6 +49,10 @@ var SettingsUserRoute = AuthenticatedRoute.extend(styleBody, CurrentUserSettings
         this._super();
     },
 
+    renderTemplate: function () {
+        this.render('settings/users/user', {into: 'application'});
+    },
+
     actions: {
         save: function () {
             this.get('controller').send('save');

core/client/app/styles/app.css

@@ -0,0 +1,43 @@
+/* Stop: Normalize.
+/* ---------------------------------------------------------- */
+@import "../../bower_components/normalize.css/normalize.css";
+
+
+/* Patterns: Groups of Styles
+/* ---------------------------------------------------------- */
+@import "patterns/global.css";
+@import "patterns/_shame.css";
+@import "patterns/icons.css";
+@import "patterns/forms.css";
+@import "patterns/buttons.css";
+@import "patterns/labels.css";
+@import "patterns/tables.css";
+@import "patterns/navlist.css";
+
+
+/* Components: Groups of Patterns
+/* ---------------------------------------------------------- */
+@import "components/modals.css";
+@import "components/notifications.css";
+@import "components/uploader.css";
+@import "components/splitbuttons.css";
+@import "components/dropdowns.css";
+@import "components/pagination.css";
+@import "components/badges.css";
+@import "components/popovers.css";
+@import "components/settings-menu.css";
+
+
+/* Layouts: Groups of Components
+/* ---------------------------------------------------------- */
+@import "layouts/main.css";
+@import "layouts/flow.css";
+@import "layouts/auth.css";
+@import "layouts/content.css";
+@import "layouts/editor.css";
+@import "layouts/settings.css";
+@import "layouts/users.css";
+@import "layouts/user.css";
+@import "layouts/about.css";
+@import "layouts/tags.css";
+@import "layouts/error.css";

core/client/app/styles/app.scss

@@ -1,64 +0,0 @@
-//
-// Modules: Mixins, variables, and utilities
-// --------------------------------------------------
-
-@import "modules/variables";
-@import "modules/mixins";
-@import "modules/icons";
-@import "modules/animations";
-
-
-//
-// Libraries: Code by other Homies
-// --------------------------------------------------
-
-@import "../../../../bower_components/normalize-scss/_normalize"; // via Bower
-@import "vendor/nprogress";
-@import "vendor/nanoscroller";
-
-
-//
-// Patterns: Groups of Styles
-// --------------------------------------------------
-
-@import "patterns/global";
-@import "patterns/_shame"; // TODO: Remove
-@import "patterns/forms";
-@import "patterns/buttons";
-@import "patterns/labels";
-@import "patterns/tables";
-@import "patterns/navlist";
-
-
-//
-// Components: Groups of Patterns
-// --------------------------------------------------
-
-@import "components/navigation";
-@import "components/modals";
-@import "components/notifications";
-@import "components/uploader";
-@import "components/splitbuttons";
-@import "components/dropdowns";
-@import "components/pagination";
-@import "components/badges";
-@import "components/popovers";
-@import "components/settings-menu";
-@import "components/url-preview";
-
-
-//
-// Layouts: Groups of Components
-// --------------------------------------------------
-
-@import "layouts/default";
-@import "layouts/setup";
-@import "layouts/auth";
-@import "layouts/content";
-@import "layouts/editor";
-@import "layouts/settings";
-@import "layouts/users";
-@import "layouts/user";
-@import "layouts/about";
-@import "layouts/tags";
-@import "layouts/error";

core/client/app/styles/components/badges.css

@@ -0,0 +1,74 @@
+/* Badges
+/* ---------------------------------------------------------- */
+
+.badge {
+    display: inline-block;
+    padding: 2px 4px;
+    min-width: 10px;
+    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 {
+    display: none;
+}
+
+.btn .badge {
+    position: relative;
+    top: -1px;
+}
+
+.btn-xs .badge {
+    top: 0;
+    padding: 1px 5px;
+}
+
+p .badge {
+    position: relative;
+    top: -2px;
+    margin-left: -1px;
+    padding: 0 4px 3px;
+}
+
+.nav-pills > li > a > .badge {
+    margin-left: 3px;
+}
+
+.nav-item .badge {
+    margin-top: -5px;
+    margin-left: 3px;
+}
+
+a.badge:hover,
+a.badge:focus {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+
+/* Colour variations
+/* ---------------------------------------------------------- */
+
+.badge.badge-blue {
+    background-color: var(--blue);
+    box-shadow: 0 0 0 1px var(--blue);
+}
+
+.badge.badge-green {
+    background-color: var(--green);
+    box-shadow: 0 0 0 1px var(--green);
+}
+
+.badge.badge-red {
+    background-color: var(--red);
+    box-shadow: 0 0 0 1px var(--red);
+}

core/client/app/styles/components/badges.scss

@@ -1,98 +0,0 @@
-// ------------------------------------------------------------
-// Badges
-//
-// Badges are numbers that sit inside buttons or text, for
-// things like an unread count.
-//
-// * Base Class
-// * Hover state, but only for links
-// * Colours
-// ------------------------------------------------------------
-
-
-//
-// Base Class
-// --------------------------------------------------
-
-.badge {
-    display: inline-block;
-    min-width: 10px;
-    padding: 2px 4px;
-    box-shadow: 0 0 0 1px #777; // Fix due to our smaller than default button sizes
-    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;
-
-    // Empty badges collapse automatically (not available in IE8)
-    &:empty {
-        display: none;
-    }
-
-    // Quick fix for badges in buttons
-    .btn & {
-        position: relative;
-        top: -1px;
-    }
-
-    .btn-xs & {
-        top: 0;
-        padding: 1px 5px;
-    }
-
-    // Account for badges in text tags
-    p & {
-        padding: 0px 4px 3px;
-        position: relative;
-        top: -2px;
-        margin-left: -1px;
-    }
-
-    // Account for badges in navs
-    .nav-pills > li > a > & {
-        margin-left: 3px;
-    }
-
-    .nav-item & {
-        margin-top: -5px;
-        margin-left: 3px;
-    }
-}//.badge
-
-
-//
-// Hover state, but only for links
-// --------------------------------------------------
-
-a.badge {
-    &:hover,
-    &:focus {
-        color: #fff;
-        text-decoration: none;
-        cursor: pointer;
-    }
-}
-
-//
-// Colours
-// --------------------------------------------------
-
-.badge.badge-blue {
-    background-color: $blue;
-    box-shadow: 0 0 0 1px $blue;
-}
-
-.badge.badge-green {
-    background-color: $green;
-    box-shadow: 0 0 0 1px $green;
-}
-
-.badge.badge-red {
-    background-color: $red;
-    box-shadow: 0 0 0 1px $red;
-}

core/client/app/styles/components/dropdowns.css

@@ -0,0 +1,126 @@
+/* Dropdowns
+/* ---------------------------------------------------------- */
+
+.dropdown {
+    position: relative;
+    z-index: 1000;
+}
+
+.dropdown-toggle:focus {
+    outline: 0;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    float: left;
+    margin: 2px 0 0;
+    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;
+    list-style: none;
+    text-align: left;
+    text-transform: none;
+    letter-spacing: 0;
+    font-size: 1.4rem;
+    font-weight: normal;
+}
+
+.dropdown-menu.pull-right {
+    right: 0;
+    left: auto;
+}
+
+.dropdown-menu .divider {
+    overflow: hidden;
+    margin: 4px 0;
+    height: 1px;
+    background: color(var(--lightgrey) lightness(-5%));
+}
+
+.dropdown-menu > li > a,
+.dropdown-menu > li > button {
+    display: block;
+    clear: both;
+    padding: 3px 20px;
+    width: 100%;
+    color: #333;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 1.9em;
+    font-weight: normal;
+    transition: none;
+}
+
+.dropdown-menu i {
+    margin-right: 0.5rem;
+    font-size: 0.9em;
+}
+
+
+/* States
+/* ---------------------------------------------------------- */
+
+/* Hover/Focus */
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-menu > li > button:hover,
+.dropdown-menu > li > button:focus {
+    background: var(--blue);
+    color: #fff;
+    text-decoration: none;
+}
+
+/* Active */
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus,
+.dropdown-menu > .active > button,
+.dropdown-menu > .active > button:hover,
+.dropdown-menu > .active > button:focus {
+    outline: 0;
+    background-color: #428bca;
+    color: #fff;
+    text-decoration: none;
+}
+
+/* Disabled */
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus,
+.dropdown-menu > .disabled > button,
+.dropdown-menu > .disabled > button:hover,
+.dropdown-menu > .disabled > button:focus {
+    color: #777;
+}
+
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus,
+.dropdown-menu > .disabled > button:hover,
+.dropdown-menu > .disabled > button:focus {
+    background-color: transparent;
+    background-image: none;
+    text-decoration: none;
+    cursor: not-allowed;
+}
+
+
+/* Open / Close
+/* ---------------------------------------------------------- */
+
+.open > .dropdown-menu {
+    display: block;
+}
+
+.open > a {
+    outline: 0;
+}
+
+.closed > .dropdown-menu {
+    display: none;
+}

core/client/app/styles/components/dropdowns.scss

@@ -1,272 +0,0 @@
-// ------------------------------------------------------------
-// Dropdown menus
-//
-// Styles for the dropdown component
-//
-// * Base Styles
-// * States
-// * Open & Close
-// * Dropdown triangles placeholder styles
-// * Dropdown triangles classes
-// ------------------------------------------------------------
-
-
-//
-// Base Styles
-// --------------------------------------------------
-
-// The dropdown wrapper <div>
-.dropdown {
-    position: relative;
-}
-
-// Prevent the focus on the dropdown toggle when closing dropdowns
-.dropdown-toggle:focus {
-    outline: 0;
-}
-
-// The dropdown menu <ul>
-.dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 1000;
-
-    float: left;
-    min-width: 220px;
-    padding: 5px 0;
-    margin: 2px 0 0; // override default ul
-
-    background-color: #fff;
-    border: darken($lightgrey, 15%) 1px solid;
-    border-radius: 2px;
-    box-shadow: rgba(0,0,0,0.175) 0 2px 6px;
-    background-clip: padding-box;
-
-    list-style: none;
-    font-size: 1.4rem;
-    font-weight: normal;
-    text-transform: none;
-    letter-spacing: 0;
-    text-align: left;
-
-    // Aligns the dropdown menu to right
-    &.pull-right {
-        right: 0;
-        left: auto;
-    }
-
-    // Dividers (basically an hr) within the dropdown
-    .divider {
-        height: 1px;
-        margin: 4px 0;
-        overflow: hidden;
-        background: darken($lightgrey, 5%);
-    }
-
-    // Links within the dropdown menu
-    > li > a,
-    > li > button {
-        display: block;
-        width: 100%;
-        padding: 3px 20px;
-        clear: both;
-
-        font-weight: normal;
-        line-height: 1.9em;
-        text-align: left;
-        color: #333;
-        white-space: nowrap;
-
-        transition: none;
-    }
-
-    i {
-        font-size: 0.9em;
-        margin-right: 0.5rem;
-    }
-}//.dropdown-menu
-
-
-//
-// States
-// --------------------------------------------------
-
-// Hover/Focus state
-.dropdown-menu > li > a,
-.dropdown-menu > li > button {
-    &:hover,
-    &:focus {
-        text-decoration: none;
-        color: #fff;
-        background: $blue;
-    }
-}
-
-// Active state
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > button {
-    &,
-    &:hover,
-    &:focus {
-        color: #fff;
-        text-decoration: none;
-        outline: 0;
-        background-color: #428bca;
-    }
-}
-
-// Disabled state
-// Gray out text and ensure the hover/focus state remains gray
-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > button {
-
-    &,
-    &:hover,
-    &:focus {
-        color: #777;
-    }
-}
-
-// Nuke hover/focus effects
-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > button {
-
-    &:hover,
-    &:focus {
-        text-decoration: none;
-        background-color: transparent;
-        background-image: none; // Remove CSS gradient
-        cursor: not-allowed;
-    }
-}
-
-
-//
-// Open & Close
-// --------------------------------------------------
-
-// Open state for the dropdown
-.open {
-
-    // Show the menu
-    > .dropdown-menu {
-        display: block;
-    }
-
-    // Remove the outline when :focus is triggered
-    > a {
-        outline: 0;
-    }
-}
-
-// Closed state for the dropdown
-.closed {
-    > .dropdown-menu {
-        display: none;
-    }
-}
-
-
-//
-// Dropdown triangles placeholder styles
-// --------------------------------------------------
-
-%dropdown-triangle {
-    &:before {
-        content: '';
-        position: absolute;
-        display: block;
-    }//&:before
-
-    &:after {
-        content: '';
-        position: absolute;
-        z-index: -1;
-    }//&:after
-}
-
-%dropdown-triangle-top {
-    &:before {
-        @include triangle($dropdown_triangle, #fff, up);
-        top: -$dropdown_triangle;
-    }
-    &:after {
-        @include triangle($dropdown_triangle + 2, darken($lightgrey, 15%), up);
-        top: -($dropdown_triangle + 2);
-    }
-}
-%dropdown-triangle-bottom {
-    &:before {
-        @include triangle($dropdown_triangle, #fff, down);
-        bottom: -$dropdown_triangle;
-    }
-    &:after {
-        @include triangle($dropdown_triangle + 2, darken($lightgrey, 15%), down);
-        bottom: -($dropdown_triangle + 2);
-    }
-}
-%dropdown-triangle-center {
-    &:before {
-        left: 50%;
-        margin-left: -($dropdown_triangle / 2);
-    }
-    &:after {
-        left: 50%;
-        margin-left: -($dropdown_triangle / 2 + 2);
-    }
-}
-
-%dropdown-triangle-left {
-    &:before {
-        left: ($dropdown_triangle / 2 + 2);
-    }
-    &:after {
-        left: ($dropdown_triangle / 2);
-    }
-}
-%dropdown-triangle-right {
-    &:before {
-        left: auto;
-        right: ($dropdown_triangle / 2 + 2);
-    }
-    &:after {
-        left: auto;
-        right: ($dropdown_triangle / 2);
-    }
-}
-
-//
-// Dropdown triangles classes
-// --------------------------------------------------
-
-.dropdown-triangle-top {
-    @extend %dropdown-triangle;
-    @extend %dropdown-triangle-top;
-    @extend %dropdown-triangle-center;
-}
-.dropdown-triangle-top-left {
-    @extend %dropdown-triangle;
-    @extend %dropdown-triangle-top;
-    @extend %dropdown-triangle-left;
-}
-.dropdown-triangle-top-right {
-    @extend %dropdown-triangle;
-    @extend %dropdown-triangle-top;
-    @extend %dropdown-triangle-right;
-}
-.dropdown-triangle-bottom {
-    @extend %dropdown-triangle;
-    @extend %dropdown-triangle-bottom;
-    @extend %dropdown-triangle-center;
-}
-.dropdown-triangle-bottom-left {
-    @extend %dropdown-triangle;
-    @extend %dropdown-triangle-bottom;
-    @extend %dropdown-triangle-left;
-}
-.dropdown-triangle-bottom-right {
-    @extend %dropdown-triangle;
-    @extend %dropdown-triangle-bottom;
-    @extend %dropdown-triangle-right;
-}

core/client/app/styles/components/modals.css

@@ -0,0 +1,224 @@
+/* Modals
+/* ---------------------------------------------------------- */
+
+
+/* Full screen container
+/* ---------------------------------------------------------- */
+
+.modal-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    display: none;
+    overflow-x: auto;
+    overflow-y: scroll;
+    padding-right: 10px;
+    padding-left: 10px;
+    transition: all 0.15s linear 0s;
+    transform: translateZ(0);
+}
+
+.modal-background {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1030;
+    display: none;
+    background: rgba(0, 0, 0, 0.6);
+}
+
+
+/* The modal
+/* ---------------------------------------------------------- */
+
+.modal,
+.modal-action {
+    right: auto;
+    left: 50%;
+    z-index: 1050;
+    margin-right: auto;
+    margin-left: auto;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    max-width: 550px;
+    width: 100%;
+    pointer-events: auto;
+}
+
+@media (max-width: 900px) {
+    .modal,
+    .modal-action {
+        padding: 10px;
+    }
+}
+
+.modal button,
+.modal-action button {
+    min-width: 100px;
+}
+
+.modal .image-uploader,
+.modal .pre-image-uploader,
+.modal-action .image-uploader,
+.modal-action .pre-image-uploader {
+    margin: 0;
+}
+
+.modal-action {
+    padding: 60px 0 30px;
+}
+
+@media (max-width: 900px) {
+    .modal-action {
+        padding: 30px 0;
+    }
+}
+
+
+/* Modal content
+/* ---------------------------------------------------------- */
+
+.modal-content {
+    position: relative;
+    padding: 18px;
+    background-color: #fff;
+    background-clip: padding-box;
+    border-radius: var(--border-radius);
+    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 6px;
+}
+
+.modal-content * {
+    user-select: text;
+}
+
+.modal-content .close {
+    position: absolute;
+    top: 19px;
+    right: 19px;
+    z-index: 9999;
+    margin: 0;
+    padding: 0;
+    width: 16px;
+    border: none;
+}
+
+.modal-header {
+    position: relative;
+    margin-bottom: 18px;
+}
+
+.modal-header h1 {
+    display: inline-block;
+    margin: 0 25px 0 0;
+    font-size: 1.85em;
+    font-weight: 100;
+}
+
+.modal-body {
+    position: relative;
+    overflow-y: auto;
+}
+
+.modal-body .red {
+    color: var(--red);
+}
+
+.modal-body > *:first-child {
+    margin-top: 0;
+}
+
+.modal-body > *:last-child {
+    margin-bottom: 0;
+}
+
+.modal-footer {
+    margin-top: 20px;
+    text-align: right;
+}
+
+.modal-footer button {
+    margin-left: 8px;
+}
+
+
+/* Modifiers
+/* ---------------------------------------------------------- */
+
+.modal-style-wide {
+    width: 550px;
+}
+
+@media (max-width: 900px) {
+    .modal-style-wide {
+        width: 100%;
+    }
+}
+
+.modal-style-centered {
+    text-align: center;
+}
+
+/* Login styles */
+.modal-body .login-form {
+    display: block;
+}
+
+.modal-body .login-form .password-wrap input {
+    width: 100%;
+}
+
+@media (max-width: 900px) {
+    .modal-body .login-form {
+        margin: 0 auto;
+        max-width: 264px;
+    }
+    .modal-body .login-form .password-wrap {
+        margin: 0 auto 1em;
+        width: 100%;
+    }
+    .modal-body .login-form .btn {
+        margin: 0;
+        margin-bottom: 1em;
+        width: 100%;
+    }
+}
+
+@media (min-width: 901px) {
+    .modal-body .login-form {
+        display: flex;
+    }
+    .modal-body .login-form .password-wrap {
+        flex: 1;
+    }
+}
+
+
+/* Open States
+/* ---------------------------------------------------------- */
+
+.modal-container.open,
+.modal-container.open > .modal,
+.modal-container.open > .modal-action {
+    display: block;
+}
+
+.modal-background.open {
+    display: block;
+}
+
+
+/* Animations
+/* ---------------------------------------------------------- */
+
+.modal-container.fade-out {
+    animation-duration: 0.08s;
+}
+
+.modal-background.fade-out {
+    animation-duration: 0.15s;
+}

core/client/app/styles/components/modals.scss

@@ -1,239 +0,0 @@
-// ------------------------------------------------------------
-// Modals
-//
-// Styles for the modal component
-//
-// * Outer Container
-// * Inner Container
-// * Content
-// * Modifiers
-// * Open States
-// * Animations
-// ------------------------------------------------------------
-
-
-//
-// Outer Container
-// --------------------------------------------------
-
-.modal-container {
-    display: none;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1040;
-    padding-left: 10px;
-    padding-right: 10px;
-    overflow-x: auto;
-    overflow-y: scroll;
-    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;
-    background: rgba(0,0,0,0.6);
-}
-
-
-//
-// Inner Container
-// --------------------------------------------------
-
-.modal {
-    left: 50%;
-    right: auto;
-    z-index: 1050;
-    width: 100%;
-    max-width: 550px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 30px;
-    padding-bottom: 30px;
-    pointer-events: auto;
-
-    @media (max-width: 900px) {
-        padding: 10px;
-    };
-
-    button {
-        min-width: 100px;
-    }
-
-    .image-uploader,
-    .pre-image-uploader {
-        margin: 0;
-    }
-}//.modal
-
-.modal-action {
-    @extend .modal;
-    padding: 60px 0 30px;
-
-    @media (max-width: 900px) {
-        padding: 30px 0;
-    }
-}
-
-//
-// Content
-// --------------------------------------------------
-
-.modal-content {
-    position: relative;
-    padding: 18px;
-    background-clip: padding-box;
-    background-color: #FFFFFF;
-    border-radius: $border-radius;
-    box-shadow: rgba(0,0,0,0.2) 0 0 0 6px;
-
-    .close {
-        position: absolute;
-        top: 19px;
-        right: 19px;
-        z-index: 9999;
-        width: 16px;
-        padding: 0;
-        margin: 0;
-        border: none;
-
-        @include icon($i-close, 1.4rem, $midgrey) {
-            transition: color 0.3s linear;
-        };
-
-        &:hover:before {
-            color: $grey;
-        }
-    }
-}//.modal-content
-
-.modal-header {
-    position: relative;
-    margin-bottom: 18px;
-
-    h1 {
-        display: inline-block;
-        margin: 0 25px 0 0;
-        font-size: 1.85em;
-        font-weight: 100;
-    }
-}
-
-.modal-body {
-    position: relative;
-    overflow-y: auto;
-
-    .red {
-        color: $red;
-    }
-
-    // Remove bottom margin from whatever the first/last direct descendent is
-    // Normalizes any global styles
-    > *:first-child {
-        margin-top: 0;
-    }
-    > *:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.modal-footer {
-    margin-top: 20px;
-    text-align: right; // Used instead of floats as they invert the order
-
-    .reject-button-class {
-        @extend .btn;
-    }
-
-    button {
-        margin-left: 8px;
-    }
-}
-
-//
-// Modifiers
-// --------------------------------------------------
-
-.modal-style-wide {
-    width: 550px;
-
-    @media (max-width: 900px) {
-        width: 100%;
-    }
-}
-
-.modal-style-centered {
-    text-align: center;
-}
-
-// Modal login styles
-.modal-body .login-form {
-    display: block; // Override inherited `display: table-cell;`
-
-    .password-wrap {
-        input {
-            width: 100%;
-        }
-    }
-
-    @media (max-width: 900px) {
-        margin: 0 auto;
-        max-width: 264px;
-
-        .password-wrap {
-            width: 100%;
-            margin: 0 auto 1em;
-        }
-
-        .btn {
-            margin: 0;
-            width: 100%;
-            margin-bottom: 1em;
-        }
-    }
-
-    @media (min-width: 901px) {
-        display: flex;
-
-        .password-wrap {
-            flex: 1;
-        }
-    }
-}
-
-
-//
-// Open States
-// --------------------------------------------------
-
-.modal-container.open,
-.modal-container.open > .modal,
-.modal-container.open > .modal-action {
-    display: block;
-}
-
-.modal-background.open {
-    display: block;
-}
-
-
-//
-// Animations
-// --------------------------------------------------
-
-.modal-container.fade-out {
-    animation-duration: 0.08s;
-}
-
-.modal-background.fade-out {
-    // animation-delay: 0.06s;
-    animation-duration: 0.15s;
-}

core/client/app/styles/components/navigation.scss

@@ -1,397 +0,0 @@
-// ------------------------------------------------------------
-// Global Navigation
-//
-// Styles for the main top bar & mobile navigation
-//
-// * Main wrapper
-// * Nav Items
-// * Ghost branding
-// * User Menu
-// * Mobile
-// ------------------------------------------------------------
-
-//
-// Main wrapper
-// --------------------------------------------------
-
-.global-nav {
-    height: 60px;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: auto;
-    left: 0;
-    z-index: 800;
-    background: $darkgrey;
-    transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
-
-    i:before {
-        display: inline-block;
-        width: 16px;
-    }
-
-    // This selector ends up being `body.settings-menu-expanded .global-nav`
-    body.settings-menu-expanded & {
-        transform: translate3d(-350px, 0px, 0px);
-    }
-
-    ::selection {
-        background: none;
-    }
-}
-
-
-//
-// Nav Items
-// --------------------------------------------------
-
-// Wrapper for each item <a>
-.nav-item {
-    position: relative;
-    display: block;
-    float: left;
-    height: 60px;
-    padding-right: 10px;
-    font-size: 1.1rem;
-    letter-spacing: 1px;
-    font-weight: 200;
-    line-height: 1.1em;
-}
-
-// What looks like the actual button <div>
-.nav-label {
-    height: 33px;
-    margin-top: 14px;
-    padding: 10px 12px;
-    color: rgba(255,255,255,0.7);
-    text-transform: uppercase;
-    border-radius: 4px;
-    white-space: nowrap;
-    transition: color 0.5s, background 0.5s;
-}
-.nav-item.active .nav-label,
-.nav-item:focus .nav-label,
-.nav-item:hover .nav-label,
-.nav-item:active .nav-label {
-    color: #fff;
-    background: darken($darkgrey, 9%);
-    transition: color 0.1s, background 0.1s;
-}
-
-
-//
-// Ghost branding
-// --------------------------------------------------
-
-.ghost-logo {
-    width: 60px;
-    padding-right: 0;
-    text-align: center;
-    color: lighten($grey, 20%);
-    font-size: 1.2rem;
-    line-height: 1em;
-    transition: color 0.5s;
-
-    span {
-        display: none;
-    }
-}
-.ghost-logo:hover,
-.ghost-logo:focus {
-    color: $lightgrey;
-    transition: color 0.1s;
-
-    .nav-label {
-        background: transparent;
-    }
-}
-
-//
-// Help Menu
-// --------------------------------------------------
-
-.help-menu {
-    padding-right: 0;
-    float: right;
-    cursor: pointer;
-
-    .nav-label {
-        margin: 0;
-        padding: 0 6px 0 12px;
-        background: none !important;
-    }
-}
-
-.help-button {
-    height: 30px;
-    width: 30px;
-    border: $midgrey 1px solid;
-    margin-top: 15px;
-    text-align: center;
-    font-size: 1.6rem;
-    line-height: 30px;
-    border-radius: 100%;
-    transition: border 0.5s;
-}
-
-.help-menu:hover {
-    .help-button {
-        border: $lightgrey 1px solid;
-        transition: border 0.3s;
-    }
-}
-
-.help-menu .dropdown {
-    right: 77px;
-    left: auto;
-
-    .dropdown-menu {
-        min-width: 200px;
-    }
-
-    &.fade-in-scale {
-        animation-duration: 0.1s;
-    }
-
-    &.fade-out {
-        animation-duration: 0.01s;
-    }
-}
-
-
-//
-// User Menu
-// --------------------------------------------------
-
-// Right hand dropdown
-.user-menu {
-    float: right;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-
-    .nav-label {
-        margin: 0;
-        padding: 0 12px;
-        background: none !important;
-        height: 60px;
-    }
-
-    // Profile picture
-    .image {
-        @include circular-image(30px) {
-            float: left;
-            margin: 15px 10px 0 0;
-        }
-    }
-
-    // Descriptive label for mobile menu
-    .name {
-        float: right;
-        height: 33px;
-        margin-top: 14px;
-        padding: 10px 12px;
-        border-radius: 4px;
-        max-width: 300px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        transition: background 0.5s;
-
-        small {
-            display: none; // hide until mobile
-            font-size: 11px;
-            text-transform: none;
-            letter-spacing: 0;
-            color: rgba(255,255,255,0.4);
-            margin-top: 0;
-            line-height: 11px;
-        }
-    }
-
-    &:hover .name {
-        color: rgba(255,255,255,0.9);
-        background: darken($darkgrey, 7%);
-        transition: background 0.1s;
-    }
-
-    .dropdown {
-        position: fixed;
-        top: 50px;
-        right: 15px;
-        left: auto;
-
-        &.fade-in-scale {
-            animation-duration: 0.1s;
-        }
-
-        &.fade-out {
-            animation-duration: 0.01s;
-        }
-
-        .dropdown-menu {
-            min-width: 180px;
-            position: absolute;
-            top: 0;
-            right: 0;
-            left: auto;
-        }
-    }
-}//.user-menu
-
-
-//
-// Mobile
-// --------------------------------------------------
-
-@media (max-width: 900px) {
-
-    // Fixed width, position left
-    .global-nav {
-        z-index: 20; // below the .viewport when collapsed
-        width: 260px;
-        height: auto;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        background: darken($darkgrey, 7%);
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect
-        transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
-
-        body.global-nav-expanded & {
-            transform: translate3d(0, 0px, 0px);
-        }
-    }
-
-    .nav-item {
-        position: relative;
-        float: none;
-        height: auto;
-        margin: 0;
-        padding: 0;
-        border-bottom: $darkgrey 1px solid;
-    }
-
-    // Convert to full-width mobile-friendly
-    .nav-label {
-        display: block;
-        height: 44px;
-        line-height: 44px;
-        margin: 0;
-        padding: 0 15px;
-        border-radius: 0;
-    }
-    .nav-item.active .nav-label {
-        color: #fff !important;
-        background: darken($darkgrey, 4%);
-
-        i {
-            color: #fff;
-        }
-    }
-    .nav-item:hover .nav-label {
-        color: rgba(255,255,255,0.9);
-        background: $darkgrey;
-    }
-
-    .ghost-logo {
-        display: block;
-        width: 100%;
-        font-size: 1.1rem;
-        line-height: 44px;
-        text-align: left;
-
-        span {
-            display: inline;
-        }
-    }
-
-    .help-menu {
-        display: none;
-    }
-
-    // Drop it to the bottom of the menu
-    .user-menu {
-        position: absolute;
-        top: auto;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: auto;
-        padding: 0;
-        border-bottom: none;
-        border-top: $darkgrey 1px solid;
-        transition: color 0.5s, background 0.5s;
-
-        .nav-label {
-            padding: 15px;
-            height: auto;
-        }
-
-        .image {
-            margin: 2px 10px 0 0;
-        }
-
-        .name {
-            float: left;
-            margin: 0;
-            max-width: 300px;
-            padding: 0 0 5px 0;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            line-height: 19px;
-            overflow: hidden;
-
-            small {
-                display: block;
-            }
-        }
-
-        // Hide the user-menu icons
-        i {
-            display: none;
-        }
-
-        &:hover {
-            color: rgba(255,255,255,0.9);
-            background: $darkgrey;
-            transition: color 0.1s, background 0.1s;
-
-            .name {
-                background: transparent;
-                transition: none;
-            }
-        }
-
-        .dropdown {
-            position: absolute;
-            top: 100%;
-            right: 100%;
-
-            .dropdown-menu {
-                top: auto;
-                right: auto;
-                bottom: calc(100% + 80px);
-                left: 10px;
-            }
-        }
-    }//.user-menu
-
-    body.global-nav-expanded & {
-
-        .nav-cover {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 600;
-            transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
-            transform: translate3d(260px, 0px, 0px); // Not off the screen, to give a parallax effect
-        }//.nav-cover
-    }//body.global-nav-expanded
-
-}//@media (max-width: 900px)

core/client/app/styles/components/notifications.css

@@ -0,0 +1,208 @@
+/* Notifications
+/* ---------------------------------------------------------- */
+
+/* Base notification style */
+.gh-notifications {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    z-index: 7000;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Base notification style */
+.gh-notification {
+    position: relative;
+    display: flex;
+    margin-top: 5px;
+    padding: 4px;
+    width: 220px;
+    border: #e1e1e1 1px solid;
+    background: rgba(255,255,255,0.9);
+    border-radius: 4px;
+    box-shadow: rgba(0,0,0,0.06) 0 1px 7px;
+    color: #828282;
+    font-size: 1.2rem;
+    line-height: 1.4em;
+}
+
+.gh-notification:hover {
+    cursor: pointer;
+}
+
+.gh-notification-content {
+    flex-grow: 1;
+    padding: 10px 15px;
+    border-radius: 3px;
+    transition: background 0.2s ease;
+}
+
+.gh-notification em {
+    color: var(--blue);
+    font-style: normal;
+}
+
+.gh-notification:hover .gh-notification-content {
+    background: color(var(--blue) lightness(+34%));
+}
+
+.gh-notification-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 6px 6px 5px 5px;
+    background: #fff;
+    border-radius: 0 4px 0 4px;
+    font-size: 7px;
+    line-height: 5px;
+}
+
+.gh-notification-close:hover {
+    background: #fff;
+    color: var(--red);
+}
+
+/* Red notification
+/* ---------------------------------------------------------- */
+
+.gh-notification-red {
+    border: color(var(--red) lightness(+28%)) 1px solid;
+}
+
+.gh-notification-red em {
+    color: var(--red);
+}
+
+.gh-notification-red:hover .gh-notification-content {
+    background: color(var(--red) lightness(+40%));
+}
+
+/* Green notification
+/* ---------------------------------------------------------- */
+
+.gh-notification-green {
+    border: color(var(--green) lightness(+28%)) 1px solid;
+}
+
+.gh-notification-green em {
+    color: var(--green);
+}
+
+.gh-notification-green:hover .gh-notification-content {
+    background: color(var(--green) lightness(+40%));
+}
+
+/* Alerts
+/* ---------------------------------------------------------- */
+
+/* Alert wrapper, top of screen */
+.gh-alerts {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Base alert style */
+.gh-alert {
+    flex-grow: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 14px 15px;
+    border-bottom: #e1e1e1 1px solid;
+}
+
+.gh-alert-content {
+    font-size: 1.4rem;
+    line-height: 1.3em;
+    font-weight: 200;
+    user-select: all;
+}
+
+.gh-alert a {
+    text-decoration: underline;
+    font-weight: 400;
+    user-select: all;
+}
+
+.gh-alert-close {
+    flex-shrink: 0;
+    margin-left: 20px;
+    padding: 5px;
+    font-size: 10px;
+    line-height: 10px;
+}
+
+.gh-alert-close:hover {
+    color: var(--red);
+}
+
+
+/* Blue alert
+/* ---------------------------------------------------------- */
+
+.gh-alert-blue {
+    border-bottom: color(var(--blue) lightness(-10%)) 1px solid;
+    background: var(--blue);
+    color: #fff;
+}
+.gh-alert-blue a {
+    color: #fff;
+}
+.gh-alert-blue .gh-alert-close:hover {
+    color: #fff;
+}
+
+/* Red alert
+/* ---------------------------------------------------------- */
+
+.gh-alert-red {
+    border-bottom: color(var(--red) lightness(-10%)) 1px solid;
+    background: var(--red);
+    color: #fff;
+}
+.gh-alert-red a {
+    color: #fff;
+}
+.gh-alert-red .gh-alert-close:hover {
+    color: #fff;
+}
+
+/* Green alert
+/* ---------------------------------------------------------- */
+
+.gh-alert-green {
+    border-bottom: color(var(--green) lightness(-7%)) 1px solid;
+    background: var(--green);
+    color: #fff;
+}
+.gh-alert-green a {
+    color: #fff;
+}
+.gh-alert-green .gh-alert-close:hover {
+    color: #fff;
+}
+
+/* Black alert
+/* ---------------------------------------------------------- */
+
+.gh-alert-black {
+    border-bottom: color(var(--darkgrey) lightness(-10%)) 1px solid;
+    background: var(--darkgrey);
+    color: #fff;
+}
+.gh-alert-black a {
+    color: #fff;
+}
+.gh-alert-black .gh-alert-close:hover {
+    color: #fff;
+}
+
+/* Yellow alert
+/* ---------------------------------------------------------- */
+
+.gh-alert-yellow {
+    border-bottom: #e9ebb6 1px solid;
+    background: #fdffb6;
+}

core/client/app/styles/components/notifications.scss

@@ -1,227 +0,0 @@
-// ------------------------------------------------------------
-// Notifications
-//
-// Styles for notifications
-//
-// * Wrappers
-// * Base Notification
-// * Individual Notifications
-// ------------------------------------------------------------
-
-
-//
-// Wrappers
-// --------------------------------------------------
-
-.notifications.top {
-    // Remove margins from top notifications so there's no space underneath
-    .notification-success,
-    .notification-error,
-    .notification-warn,
-    .notification-info {
-        margin: 0;
-    }
-
-    // Transition position of top notifications when the a settings menu or navigation is open
-    transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
-
-    @media (max-width: 900px) {
-        transition: transform 0.4s cubic-bezier($settings-menu-bezier);
-    }
-
-    body.global-nav-expanded & {
-        transform: translate3d(260px, 0px, 0px);
-    }
-
-    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;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                z-index: 1000;
-                width: 1px;
-                background: #EDECE4;
-            }
-        }
-    }
-}
-
-// Top notifications, usually the update notification
-@media (max-width: 900px) {
-    .notifications.top {
-        position: relative;
-        z-index: 20;
-    }
-
-    .viewport[data-notification-count='1'] {
-        top: 43px;
-
-        .settings-view-header,
-        .settings-subview-header,
-        .post-preview-header {
-            top: 43px;
-        }
-    }
-}
-
-@media (min-width: 901px) {
-    .notifications.top {
-        position: absolute;
-        top: 60px;
-        left: 0;
-        right: 0;
-        z-index: 20;
-    }
-
-    .viewport[data-notification-count='1'] {
-        .page-content {
-            top: 103px;
-        }
-    }
-}
-
-// Bottom notifications, which is 99% of them
-.notifications.bottom {
-    @media (max-width: 400px) {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 9999;
-    }
-
-    @media (min-width: 401px) {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        z-index: 800;
-        width: 300px;
-    }
-}
-
-
-//
-// Base Notification
-// --------------------------------------------------
-
-%notification {
-    @include icon($i-notification) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 44px;
-        padding: 14px 15px;
-        text-align: center;
-        color: rgba(255,255,255,0.8);
-        background: rgba(0,0,0,0.1);
-    };
-
-    width: 100%;
-    min-height: 40px;
-    max-height: 253px;
-    margin: 0 0 15px 0;
-    color: rgba(255,255,255,0.9);
-    background: $blue;
-    position: relative;
-    box-shadow: $box-shadow;
-    transform: translateZ(0);
-
-    @media (max-width: 400px) {
-        margin-bottom: 1px;
-    }
-
-    .notification-message {
-        display: block;
-        padding: 10px 43px 10px 57px;
-        max-height: 253px;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .close {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 34px;
-        color: rgba(255,255,255,0.6);
-        @include icon-after($i-close) {
-            padding: 10px;
-            position: absolute;
-            top: 4px;
-            right: 1px;
-        }
-
-        &:hover {
-            color: #fff;
-        }
-    } // .close
-
-    a {
-        color: inherit;
-        text-decoration: underline;
-    }
-}//%notification
-
-
-//
-// Individual Notifications
-// --------------------------------------------------
-
-.notification-success {
-    @extend %notification;
-    @include icon($i-success);
-    background: $green;
-
-    &.notification-passive {
-        animation: fade-out 1s linear;
-        animation-delay: 3s;
-        animation-iteration-count: 1;
-        animation-fill-mode: forwards;
-    }
-
-    &.notification-passive:hover {
-        animation: fade-in-snap 0.2s linear;
-    }
-}
-
-.notification-error {
-    @extend %notification;
-    @include icon($i-error);
-    background: $red;
-}
-
-.notification-warn {
-    @extend %notification;
-    @include icon($i-info);
-    background: $orange;
-}
-
-.notification-info {
-    @extend %notification;
-    @include icon($i-info);
-    background: $blue;
-}
-
-// Hide extra space taken up by update notification
-.update-available main {
-    bottom: 56px;
-}
-
-.notification-upgrade {
-    color: $red;
-
-    a {
-        color: $red;
-        text-decoration: underline;
-    }
-}

core/client/app/styles/components/pagination.css

@@ -0,0 +1,111 @@
+/* Pagination
+/* ---------------------------------------------------------- */
+
+.pagination {
+    display: inline-block;
+    margin: 20px 0;
+    padding-left: 0;
+    border-radius: var(--border-radius);
+}
+
+.pagination > li {
+    display: inline;
+}
+
+.pagination > li > a,
+.pagination > li > span {
+    position: relative;
+    float: left;
+    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,
+.pagination > li:first-child > span {
+    margin-left: 0;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+}
+
+.pagination > li:last-child > a,
+.pagination > li:last-child > span {
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+}
+
+.pagination > li > a:hover,
+.pagination > li > a:focus,
+.pagination > li > span:hover,
+.pagination > li > span:focus {
+    background-color: #eee;
+    color: #2a6496;
+}
+
+.pagination > .active > a,
+.pagination > .active > a:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span,
+.pagination > .active > span:hover,
+.pagination > .active > span:focus {
+    z-index: 2;
+    background-color: #428bca;
+    color: #fff;
+    cursor: default;
+}
+
+.pagination > .disabled > span,
+.pagination > .disabled > span:hover,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > a,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > a:focus {
+    border-color: #ddd;
+    background-color: #fff;
+    color: #777;
+    cursor: not-allowed;
+}
+
+
+/* Sizing
+/* ---------------------------------------------------------- */
+
+.pagination-lg > li > a,
+.pagination-lg > li > span {
+    padding: 10px 16px;
+    font-size: 18px;
+}
+
+.pagination-lg > li:first-child > a,
+.pagination-lg > li:first-child > span {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+
+.pagination-lg > li:last-child > a,
+.pagination-lg > li:last-child > span {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+.pagination-sm > li > a,
+.pagination-sm > li > span {
+    padding: 5px 10px;
+    font-size: 12px;
+}
+
+.pagination-sm > li:first-child > a,
+.pagination-sm > li:first-child > span {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+.pagination-sm > li:last-child > a,
+.pagination-sm > li:last-child > span {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}

core/client/app/styles/components/pagination.scss

@@ -1,128 +0,0 @@
-// ------------------------------------------------------------
-// Pagination
-//
-// Styles for the main top bar & mobile navigation
-//
-// * Pagination
-// * Sizing
-// ------------------------------------------------------------
-
-//
-// Pagination
-// --------------------------------------------------
-
-.pagination {
-    display: inline-block;
-    padding-left: 0;
-    margin: 20px 0;
-    border-radius: $border-radius;
-
-    > li {
-        display: inline; // Remove list-style and block-level defaults
-
-        > a,
-        > span {
-            position: relative;
-            float: left; // Collapse white-space
-            padding: 6px 12px;
-            line-height: 1.42857143;
-            text-decoration: none;
-            color: $blue;
-            background-color: #fff;
-            border: 1px solid $lightbrown;
-            margin-left: -1px;
-        }
-
-        &:first-child {
-            > a,
-            > span {
-                margin-left: 0;
-                border-top-left-radius: $border-radius;
-                border-bottom-left-radius: $border-radius;
-            }
-        }
-
-        &:last-child {
-            > a,
-            > span {
-                border-top-right-radius: $border-radius;
-                border-bottom-right-radius: $border-radius;
-            }
-        }
-    }
-
-    > li > a,
-    > li > span {
-        &:hover,
-        &:focus {
-            color: #2A6496;
-            background-color: #EEE;
-        }
-    }
-
-    > .active > a,
-    > .active > span {
-        &,
-        &:hover,
-        &:focus {
-            z-index: 2;
-            color: #FFF;
-            background-color: #428BCA;
-            cursor: default;
-        }
-    }
-
-    > .disabled {
-        > span,
-        > span:hover,
-        > span:focus,
-        > a,
-        > a:hover,
-        > a:focus {
-            color: #777;
-            background-color: #FFF;
-            border-color: #DDD;
-            cursor: not-allowed;
-        }
-    }
-}//.pagination
-
-//
-// Sizing
-// --------------------------------------------------
-
-@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
-    > li {
-        > a,
-        > span {
-            padding: $padding-vertical $padding-horizontal;
-            font-size: $font-size;
-        }
-
-        &:first-child {
-            > a,
-            > span {
-                border-top-left-radius: $border-radius;
-                border-bottom-left-radius: $border-radius;
-            }
-        }
-
-        &:last-child {
-            > a,
-            > span {
-                border-top-right-radius: $border-radius;
-                border-bottom-right-radius: $border-radius;
-            }
-        }
-    }
-}
-
-// Large
-.pagination-lg {
-    @include pagination-size(10px, 16px, 18px, 6px);
-}
-
-// Small
-.pagination-sm {
-    @include pagination-size(5px, 10px, 12px, 3px);
-}

core/client/app/styles/components/popovers.css

@@ -0,0 +1,59 @@
+/* Popovers
+/* ---------------------------------------------------------- */
+
+.popover-item {
+    position: relative;
+    display: inline-block;
+    padding: 11px 26px 13px 16px;
+    min-width: 300px;
+    max-width: 400px;
+    background: var(--darkgrey);
+    border-radius: 6px;
+    color: var(--midgrey);
+    font-size: 1.2rem;
+}
+
+.popover-title {
+    color: #fff;
+    font-size: 1.4rem;
+    font-weight: 300;
+}
+
+.popover-desc {
+    margin-top: -4px;
+}
+
+.popover-body {
+    margin-top: 11px;
+    line-height: 1.7;
+}
+
+.popover-body b {
+    color: #fff;
+}
+
+.popover-body > *:last-child {
+    margin: 0;
+}
+
+
+/* Open / Close
+/* ---------------------------------------------------------- */
+
+.popover {
+    position: relative;
+    display: inline-block;
+}
+
+.popover .popover-item {
+    position: absolute;
+    z-index: 20;
+}
+
+.popover .popover-item.open {
+    display: block;
+}
+
+.popover .popover-item.closed {
+    display: none;
+}

core/client/app/styles/components/popovers.scss

@@ -1,320 +0,0 @@
-// ------------------------------------------------------------
-// Popovers
-//
-// Styles for the popover component
-//
-// * Popovers
-// * Triangles placeholder styles
-// * Triangles classes
-// * Open/close
-// * Positioning
-// ------------------------------------------------------------
-
-
-//
-// Popovers
-// --------------------------------------------------
-
-.popover-item {
-    position: relative;
-    display: inline-block;
-    padding: 11px 26px 13px 16px;
-    background: $darkgrey;
-    min-width: 300px;
-    max-width: 400px;
-    border-radius: 6px;
-    font-size: 1.2rem;
-    color: $midgrey;
-}
-.popover-title {
-    font-size: 1.4rem;
-    font-weight: 300;
-    color: #fff;
-}
-.popover-desc {
-    margin-top: -4px;
-}
-.popover-body {
-    margin-top: 11px;
-    line-height: 1.7;
-    b {
-        color: #fff;
-    }
-    > *:last-child {
-        margin: 0;
-    }
-}
-
-//
-// Triangles placeholder styles
-// --------------------------------------------------
-
-%popover-triangle {
-    &:before {
-        content: '';
-        position: absolute;
-        display: block;
-    } // :before
-}
-
-%popover-triangle-vertical-top {
-    &:before {
-        @include triangle($popover_triangle, $darkgrey, up, shallow);
-        top: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
-    }
-}
-
-%popover-triangle-vertical-bottom {
-    &:before {
-        @include triangle($popover_triangle, $darkgrey, down, shallow);
-        bottom: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
-    }
-}
-
-%popover-triangle-horizontal-left {
-    &:before {
-        @include triangle($popover_triangle, $darkgrey, left, shallow);
-        left: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
-    }
-}
-
-%popover-triangle-horizontal-right {
-    &:before {
-        @include triangle($popover_triangle, $darkgrey, right, shallow);
-        right: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
-    }
-}
-
-%popover-triangle-vertical-center {
-    &:before {
-        left: 50%;
-        margin-left: -($popover_triangle / 2);
-    }
-}
-
-%popover-triangle-vertical-left {
-    &:before {
-        left: $popover_triangle;
-    }
-}
-
-%popover-triangle-vertical-right {
-    &:before {
-        left: auto;
-        right: $popover_triangle;
-    }
-}
-
-%popover-triangle-horizontal-center {
-    &:before {
-        top: 50%;
-        margin-top: -$popover_triangle;
-    }
-}
-
-%popover-triangle-horizontal-top {
-    &:before {
-        top: $popover_triangle;
-    }
-}
-
-%popover-triangle-horizontal-bottom {
-    &:before {
-        top: auto;
-        bottom: $popover_triangle;
-    }
-}
-
-
-//
-// Triangles classes
-// --------------------------------------------------
-
-.popover-triangle-top {
-    @extend %popover-triangle;
-    @extend %popover-triangle-vertical-top;
-    @extend %popover-triangle-vertical-center;
-    transform-origin: top center;
-}
-
-.popover-triangle-top-left {
-    @extend %popover-triangle;
-    @extend %popover-triangle-vertical-top;
-    @extend %popover-triangle-vertical-left;
-    transform-origin: top left;
-}
-
-.popover-triangle-top-right {
-    @extend %popover-triangle;
-    @extend %popover-triangle-vertical-top;
-    @extend %popover-triangle-vertical-right;
-    transform-origin: top right;
-}
-
-.popover-triangle-bottom {
-    @extend %popover-triangle;
-    @extend %popover-triangle-vertical-bottom;
-    @extend %popover-triangle-vertical-center;
-    transform-origin: bottom center;
-}
-
-.popover-triangle-bottom-left {
-    @extend %popover-triangle;
-    @extend %popover-triangle-vertical-bottom;
-    @extend %popover-triangle-vertical-left;
-    transform-origin: bottom left;
-}
-
-.popover-triangle-bottom-right {
-    @extend %popover-triangle;
-    @extend %popover-triangle-vertical-bottom;
-    @extend %popover-triangle-vertical-right;
-    transform-origin: bottom right;
-}
-
-.popover-triangle-left {
-    @extend %popover-triangle;
-    @extend %popover-triangle-horizontal-left;
-    @extend %popover-triangle-horizontal-center;
-    transform-origin: left center;
-}
-
-.popover-triangle-left-top {
-    @extend %popover-triangle;
-    @extend %popover-triangle-horizontal-left;
-    @extend %popover-triangle-horizontal-top;
-    transform-origin: left top;
-}
-
-.popover-triangle-left-bottom {
-    @extend %popover-triangle;
-    @extend %popover-triangle-horizontal-left;
-    @extend %popover-triangle-horizontal-bottom;
-    transform-origin: left bottom;
-}
-
-.popover-triangle-right {
-    @extend %popover-triangle;
-    @extend %popover-triangle-horizontal-right;
-    @extend %popover-triangle-horizontal-center;
-    transform-origin: right center;
-}
-
-.popover-triangle-right-top {
-    @extend %popover-triangle;
-    @extend %popover-triangle-horizontal-right;
-    @extend %popover-triangle-horizontal-top;
-    transform-origin: right top;
-}
-
-.popover-triangle-right-bottom {
-    @extend %popover-triangle;
-    @extend %popover-triangle-horizontal-right;
-    @extend %popover-triangle-horizontal-bottom;
-    transform-origin: right bottom;
-}
-
-
-//
-// Open/close
-// --------------------------------------------------
-
-.popover {
-    position: relative;
-    display: inline-block;
-
-    .popover-item {
-        position: absolute;
-        z-index: 20;
-
-        &.open {
-            display: block;
-        }
-
-        &.closed {
-            display: none;
-        }
-    }
-}//.popover
-
-
-//
-// Positioning
-// --------------------------------------------------
-// Position relative to the position of the triangle
-// So... `popover-triangle-left-top` opens on the right
-// of the button because the triangle is on the top left,
-// pointing to the top right of the button
-//
-// |------|  |-----------------|
-// |Button| <  Popover content |
-// |------|  | Lorem ipsum dol |
-//           |-----------------|
-
-.popover-item.popover-triangle-bottom {
-    bottom: calc(100% + 16px);
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.popover-item.popover-triangle-bottom-left {
-    bottom: calc(100% + 16px);
-    left: 0;
-}
-
-.popover-item.popover-triangle-bottom-right {
-    bottom: calc(100% + 16px);
-    right: 0;
-}
-
-.popover-item.popover-triangle-top {
-    top: calc(100% + 16px);
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.popover-item.popover-triangle-top-left {
-    top: calc(100% + 16px);
-    left: 0;
-}
-
-.popover-item.popover-triangle-top-right {
-    top: calc(100% + 16px);
-    right: 0;
-}
-
-.popover-item.popover-triangle-left {
-    left: calc(100% + 16px);
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.popover-item.popover-triangle-left-top {
-    left: calc(100% + 16px);
-    top: 50%;
-    transform: translateY(-($popover_triangle * 2));
-}
-
-.popover-item.popover-triangle-left-bottom {
-    left: calc(100% + 16px);
-    top: 50%;
-    transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
-}
-
-.popover-item.popover-triangle-right {
-    right: calc(100% + 16px);
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.popover-item.popover-triangle-right-top {
-    right: calc(100% + 16px);
-    top: 50%;
-    transform: translateY(-($popover_triangle * 2));
-}
-
-.popover-item.popover-triangle-right-bottom {
-    right: calc(100% + 16px);
-    top: 50%;
-    transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
-}

core/client/app/styles/components/settings-menu.css

@@ -0,0 +1,166 @@
+/* Settings Menu
+/* ---------------------------------------------------------- */
+
+
+/* Container
+/* ---------------------------------------------------------- */
+
+.settings-menu-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 500;
+    overflow: hidden;
+    width: 350px;
+    border-left: #e1e1e1 1px solid;
+    background: #fff;
+    transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+    transform: translate3d(350px, 0px, 0px);
+}
+
+body.settings-menu-expanded .settings-menu-container {
+    transform: translate3d(0, 0px, 0px);
+}
+
+.settings-menu-container .settings-menu-pane {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    opacity: 1;
+    transform: translate3d(0, 0px, 0px);
+}
+
+@media (min-width: 901px) {
+    .settings-menu-container .settings-menu-pane {
+        transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+    }
+}
+
+.settings-menu-container .settings-menu-pane.settings-menu-pane-out-left {
+    transform: translate3d(-100%, 0px, 0px);
+}
+
+.settings-menu-container .settings-menu-pane.settings-menu-pane-out-right {
+    transform: translate3d(100%, 0px, 0px);
+}
+
+.settings-menu-container .settings-menu-pane.settings-menu-pane-in {
+    transform: translate3d(0, 0px, 0px);
+}
+
+
+/* Header
+/* ---------------------------------------------------------- */
+
+.settings-menu-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: 19px 24px;
+}
+
+.settings-menu-header h4 {
+    margin: 0;
+    font-size: 1.6rem;
+    line-height: 1.375;
+    font-weight: normal;
+}
+
+.settings-menu-header .close {
+    right: 22px;
+    font-size: 12px;
+}
+
+.settings-menu-header.subview h4 {
+    text-align: center;
+}
+
+.settings-menu-header.subview .back {
+    left: 0;
+}
+
+.settings-menu-header.subview .back:before {
+    left: 19px;
+}
+
+
+
+
+/* Content
+/* ---------------------------------------------------------- */
+
+.settings-menu-content {
+    padding: 0 24px 24px;
+}
+
+.settings-menu-content .image-uploader {
+    margin: 0 0 1.6rem 0;
+}
+
+.settings-menu-content .image-uploader.image-uploader-url {
+    padding: 35px 45px;
+}
+
+.settings-menu-content textarea {
+    height: 108px;
+}
+
+.settings-menu-content .tag-delete-button {
+    padding-left: 0;
+    color: var(--red);
+}
+
+.settings-menu-content .tag-delete-button:before {
+    position: relative;
+    top: -1px;
+    margin-right: 4px;
+}
+
+.settings-menu-content .tag-delete-button:hover,
+.settings-menu-content .tag-delete-button:hover:before {
+    color: color(var(--red) lightness(-10%));
+}
+
+.settings-menu-content .nav-list {
+    margin-top: 3rem;
+}
+
+.settings-menu-content .pre-image-uploader {
+    margin-top: 0;
+    min-height: 50px;
+    max-height: 250px;
+    width: auto;
+}
+
+.settings-menu-content .word-count {
+    font-weight: bold;
+}
+
+.ghost-url-preview {
+    /* Preview never wider than input */
+    overflow: hidden;
+    width: 98%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+/* Background
+/* ---------------------------------------------------------- */
+
+body.settings-menu-expanded .content-cover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 600;
+    transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+    transform: translate3d(-350px, 0px, 0px);
+    /* Not off the screen, to give a parallax effect */
+}

core/client/app/styles/components/settings-menu.scss

@@ -1,199 +0,0 @@
-// ------------------------------------------------------------
-// Settings Menu
-//
-// Styles for the settings menu component
-//
-// * Wrapper
-// * Header
-// * Content
-// * Content Cover
-// ------------------------------------------------------------
-
-//
-// Wrapper
-// --------------------------------------------------
-
-.settings-menu-container {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background: $lightestgrey;
-    width: 100%;
-    max-width: 350px;
-    overflow: hidden;
-
-    transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
-    transform: translate3d(60px, 0px, 0px);
-
-    // This selector ends up being `body.settings-menu-expanded .settings-menu-container`
-    body.settings-menu-expanded & {
-        transform: translate3d(0, 0px, 0px);
-    }
-
-    .settings-menu-pane {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        transform: translate3d(0, 0px, 0px);
-        opacity: 1;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        @media (min-width: 901px) {
-            transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
-        }
-
-        &.settings-menu-pane-out-left {
-            transform: translate3d(-100%, 0px, 0px);
-        }
-
-        &.settings-menu-pane-out-right {
-            transform: translate3d(100%, 0px, 0px);
-        }
-
-        &.settings-menu-pane-in {
-            transform: translate3d(0, 0px, 0px);
-        }
-    }//.settings-menu-pane
-}//.settings-menu-container
-
-//
-// Header
-// --------------------------------------------------
-
-.settings-menu-header {
-    position: relative;
-    padding: 19px 24px;
-
-    h4 {
-        font-weight: normal;
-        font-size: 1.6rem;
-        line-height: 1.375;
-        margin: 0;
-    }
-
-    .close {
-        right: 0;
-
-        &:before {
-            right: 22px;
-        }
-    }
-}
-
-.settings-menu-header.subview {
-
-    h4 {
-        text-align: center;
-    }
-
-    .back {
-        left: 0;
-
-        &:before {
-            left: 19px;
-        }
-    }
-}
-
-.settings-menu-header-action {
-    position: absolute;
-    top: 0;
-    bottom: 7px;
-    width: 45px;
-    padding: 0;
-
-    &:before {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        color: $midbrown;
-        font-size: 2rem;
-    }
-
-    &:hover {
-
-        &:before {
-            color: $midgrey;
-        }
-    }
-}
-
-//
-// Content
-// --------------------------------------------------
-
-.settings-menu-content {
-    padding: 0 24px 24px;
-
-    .image-uploader {
-        padding-top: 35px;
-        padding-bottom: 35px;
-        margin: 0 0 1.6rem 0;
-
-        &.image-uploader-url {
-            padding: 35px 45px;
-        }
-    }
-
-    textarea {
-        height: 108px;
-    }
-
-    .tag-delete-button {
-        padding-left: 0;
-        color: $red;
-
-        &:before {
-            margin-right: 4px;
-            top: -1px;
-            position: relative;
-        }
-
-        &:hover {
-            &, &:before {
-                color: darken($red, 10%);
-            }
-        }
-    }
-
-    .nav-list {
-        margin-top: 3rem;
-    }
-
-    .pre-image-uploader {
-        width: auto;
-        min-height: 50px;
-        max-height: 250px;
-        margin-top: 0;
-    }
-
-    .word-count {
-        font-weight: bold;
-    }
-}//.settings-menu-content
-
-
-//
-// Content Cover
-// --------------------------------------------------
-// A transparent div that goes over the content, used
-// to listen for clicks to close the settings menu
-
-body.settings-menu-expanded {
-
-    .content-cover {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 600;
-        transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
-        transform: translate3d(-350px, 0px, 0px); // Not off the screen, to give a parallax effect
-    }//.editor-cover
-
-}//body.settings-menu-expanded

core/client/app/styles/components/splitbuttons.css

@@ -0,0 +1,61 @@
+/* Splitbuttons
+/* ---------------------------------------------------------- */
+
+.splitbtn {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    /* Flatten out the right side */
+    /* Flatten out the left side */
+}
+
+.splitbtn .btn {
+    position: relative;
+    float: left;
+    /* Prevent double border between buttons */
+    /* Make sure the hovered element is always on
+    // top so overlap from .btn + btn. invisible */
+}
+
+.splitbtn .btn + .btn {
+    margin-left: -1px;
+}
+
+.splitbtn .btn:hover,
+.splitbtn .btn:focus,
+.splitbtn .btn:active,
+.splitbtn .btn.active {
+    z-index: 2;
+}
+
+.splitbtn .btn:first-child {
+    margin-left: 0;
+}
+
+.splitbtn .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.splitbtn .dropdown-toggle {
+    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-right: 10px;
+    padding-left: 10px;
+}
+
+.splitbtn .dropdown-toggle.btn-lg {
+    padding-right: 16px;
+    padding-left: 16px;
+}
+
+.splitbtn .dropdown-toggle .options {
+    color: #fff;
+    text-align: center;
+}

core/client/app/styles/components/splitbuttons.scss

@@ -1,257 +0,0 @@
-// ------------------------------------------------------------
-// Splitbuttons
-//
-// Styles for splitbuttons (button + toggle for a popover)
-//
-// * Default
-// * Base Placeholder Styles
-// * Variation Classes
-// ------------------------------------------------------------
-
-
-//
-// Default
-// --------------------------------------------------
-
-.splitbtn {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-
-    .btn {
-        position: relative;
-        float: left;
-
-        // Prevent double border between buttons
-        + .btn {
-            margin-left: -1px;
-        }
-
-        // Make sure the hovered element is always on
-        // top so overlap from .btn + btn. invisible
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            z-index: 2;
-        }
-    }
-
-    // Flatten out the right side
-    .btn:first-child {
-        margin-left: 0;
-
-        &:not(:last-child):not(.dropdown-toggle) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-    }
-
-    // Flatten out the left side
-    .dropdown-toggle {
-        padding-left: 12px;
-        padding-right: 12px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-
-        &.btn-sm {
-            padding-left: 10px;
-            padding-right: 10px;
-        }
-
-        &.btn-lg {
-            padding-left: 16px;
-            padding-right: 16px;
-        }
-
-        // This is the additional dropdown arrow, to the right of the button.
-        .options {
-            text-align: center;
-            color: #fff;
-
-            @include icon($i-chevron-down, 9px) {
-                top: 0;
-                display: inline-block;
-                position: relative;
-            }
-        }
-
-        &.up .options:before {
-            transform: rotate(-360deg);
-            transition: transform 0.6s ease, top 0.6s ease;
-        }
-
-        &.up:hover .options:before,
-        &.up.open .options:before {
-            top: -1px;
-            transform: rotate(540deg);
-            transition: transform 0.3s ease, top 0.3s ease;
-        }
-
-    }
-
-}//.splitbtn
-
-
-//
-// Base Placeholder Styles
-// --------------------------------------------------
-
-%splitbtn {
-    display: inline-block;
-    position: relative;
-    font-size: 0; // hack to stop space after button
-    white-space: nowrap;
-
-    button {
-        font-size: 11px; // hack to restore font size
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    // This is the additional dropdown arrow, to the right of the button.
-    .options {
-        display: inline-block;
-        position:relative;
-        width: 35px;
-        height: 35px;
-        margin-left: -1px;
-        vertical-align: top;
-        text-align: center;
-        color: #fff;
-        background: #e5e5e5;
-        border-radius: 0 2px 2px 0;
-        border-left: 0;
-        box-shadow:
-            rgba(0,0,0,0.02) 0 1px 0 inset,
-            rgba(0,0,0,0.02) -1px 0 0 inset,
-            rgba(0,0,0,0.02) 0 -1px 0 inset;
-        transition: background-color 0.3s linear;
-
-        @include icon($i-chevron-down, 9px) {
-            position: absolute;
-            top: 50%;
-            right: 50%;
-            margin-top: -3px;
-            margin-right: -5px;
-            transition: margin-top 0.3s ease;
-            transition-property: transform;
-            transition-duration: 0.3;
-            transition-timing-function: ease;
-        };
-
-        // Keep the arrow spun when the associated menu is open
-        &.active:before {
-            transform: rotate(360deg);
-        }
-
-        &.up.active:before {
-            margin-top:-4px;
-            transform: rotate(540deg);
-        }
-
-        // Spin the arrow on hover and while menu is open
-        &:hover,
-        &:focus {
-            will-change: box-shadow, background;
-            box-shadow: none;
-            background: #f8f8f8;
-            @include icon($i-chevron-down) {
-                will-change: transform;
-                transform: rotate(360deg);
-            };
-        }
-
-        // If it has a class of "up" spin it an extra 180degrees to point up
-        &.up:hover,
-        &.up:focus {
-            @include icon($i-chevron-down) {
-                margin-top:-4px;
-                transform: rotate(540deg);
-                transition-property: transform;
-                transition-duration: 0.6;
-                transition-timing-function: ease;
-            };
-        }
-    }//.options
-}//%splitbtn
-
-
-//
-// Variation Classes
-// --------------------------------------------------
-
-// The default splitbutton
-.splitbutton {
-    @extend %splitbtn;
-
-    .options {
-        color:#777;
-
-        &:hover,
-        &:focus {
-            box-shadow:
-                rgba(0,0,0,0.07) 0 1px 0 inset,
-                rgba(0,0,0,0.07) -1px 0 0 inset,
-                rgba(0,0,0,0.07) 0 -1px 0 inset;
-        }
-    }
-}
-
-// For save/next/continue/confirm actions
-.splitbutton-save {
-    @extend %splitbtn;
-
-    .options {
-        background: darken($blue, 5%);
-
-        &:hover,
-        &.active,
-        &:focus {
-            background: darken($blue, 10%);
-        }
-    }
-}
-
-// For actions which add something
-.splitbutton-add {
-    @extend %splitbtn;
-
-    .options {
-        background: darken($green, 6%);
-
-        &:hover,
-        &:focus {
-            background: darken($green, 8%);
-        }
-    }
-}
-
-// For actions which delete something
-.splitbutton-delete {
-    @extend %splitbtn;
-
-    .options {
-        background: darken($red, 6%);
-
-        &:hover,
-        &:focus {
-            background: darken($red, 10%);
-        }
-    }
-}
-
-// Alternative style with more visual attention,
-// but no extra semantic meaning
-.splitbutton-alt {
-    @extend %splitbtn;
-
-    .options {
-        background: lighten($darkgrey, 4%);
-
-        &:hover,
-        &:focus {
-            background: $darkgrey;
-        }
-    }
-}

core/client/app/styles/components/uploader.css

@@ -0,0 +1,178 @@
+/* Image Uploader
+/* ---------------------------------------------------------- */
+
+.image-uploader {
+    position: relative;
+    overflow: hidden;
+    margin: 1.6em 0;
+    padding: 55px 60px;
+    width: 100%;
+    height: auto;
+    border: #e1e1e1 2px dashed;
+    background: #f6f6f6;
+    border-radius: 4px;
+    color: #828282;
+    text-align: center;
+}
+
+.image-uploader a {
+    color: var(--brown);
+    text-decoration: none;
+}
+
+.image-uploader a:hover {
+    color: var(--darkgrey);
+}
+
+.image-uploader .image-upload,
+.image-uploader .image-url {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
+    padding: 10px;
+    color: var(--brown);
+    text-decoration: none;
+    line-height: 12px;
+}
+
+.image-uploader .image-upload:hover,
+.image-uploader .image-url:hover {
+    cursor: pointer;
+}
+
+.image-uploader .btn-green {
+    position: relative;
+    z-index: 700;
+    display: inline-block;
+    color: #fff;
+}
+
+.image-uploader .btn-blue {
+    margin: 0 0 0 10px;
+}
+
+.image-uploader input.main {
+    position: absolute;
+    right: 0;
+    margin: 0;
+    font-size: 23px;
+    opacity: 0;
+    cursor: pointer;
+    transform: scale(14);
+    transform-origin: right;
+    direction: ltr;
+}
+
+.image-uploader input.main.right {
+    right: 9999px;
+    height: 0;
+}
+
+.image-uploader input.url {
+    margin: 10px 0;
+    padding: 9px 7px;
+    outline: 0;
+    background: #fff;
+    vertical-align: middle;
+    font: -webkit-small-control;
+    font-size: 1.1em;
+}
+
+.image-uploader input.url + .btn.btn-blue {
+    color: #fff;
+}
+
+.image-uploader .progress {
+    position: relative;
+    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 {
+    top: 50%;
+    display: block;
+    margin: -28px auto 0;
+    width: 35px;
+    height: 28px;
+    background-size: contain;
+}
+
+.image-uploader .failed {
+    position: relative;
+    top: -40px;
+    font-size: 16px;
+}
+
+.image-uploader .bar {
+    height: 12px;
+    background: var(--blue);
+}
+
+.image-uploader .bar.fail {
+    background: var(--red);
+}
+
+
+/* Pre-Image-Uploader // TODO: RENAME
+/* ---------------------------------------------------------- */
+
+.pre-image-uploader {
+    position: relative;
+    overflow: hidden;
+    margin: 1.6em 0;
+    min-height: 46px;
+    height: auto;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+    color: var(--brown);
+}
+
+.pre-image-uploader input {
+    position: absolute;
+    left: 9999px;
+    opacity: 0;
+}
+
+.pre-image-uploader a {
+    z-index: 10000;
+    color: var(--brown);
+    text-decoration: none;
+}
+
+.pre-image-uploader a:hover {
+    color: var(--darkgrey);
+}
+
+.pre-image-uploader img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+    line-height: 0;
+}
+
+.pre-image-uploader .image-cancel {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 300;
+    display: block;
+    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;
+    font-size: 13px;
+    line-height: 10px;
+}
+
+.pre-image-uploader .image-cancel:hover {
+    background: var(--red);
+    color: #fff;
+    cursor: pointer;
+}

core/client/app/styles/components/uploader.scss

@@ -1,216 +0,0 @@
-// ------------------------------------------------------------
-// Image Uploader
-//
-// Styles for the image uploader
-//
-// * Image Uploader
-// * Pre Image Uploader
-// ------------------------------------------------------------
-
-
-//
-// Image Uploader
-// --------------------------------------------------
-
-.image-uploader {
-    @include baseline;
-    position: relative;
-    overflow:hidden;
-    padding: 55px 60px;
-    border: $lightbrown 3px dashed;
-    width: 100%;
-    height: auto;
-    text-align: center;
-    color: $brown;
-    background: #F9F8F5;
-
-    a {
-        color: $brown;
-        text-decoration: none;
-
-        &:hover {
-            color: $darkgrey;
-        }
-    }
-
-    .description {
-        margin-top: 10px;
-    }
-
-    .media {
-        @include icon($i-image, 60px, darken($lightbrown, 3%)) {
-            display: inline-block;
-            vertical-align: initial;
-            transition: transform 1s ease;
-        }
-    }
-
-    .image-url,
-    .image-upload {
-        line-height: 12px;
-        padding: 10px;
-        display: block;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        color: $brown;
-        text-decoration: none;
-        user-select: none;
-
-        &:hover {
-            cursor: pointer;
-        }
-    }
-
-    .image-webcam {
-        @include icon($i-camera, 12px);
-    }
-
-    .image-url {
-        @include icon($i-link, 12px);
-    }
-
-    .image-upload {
-        @include icon($i-image, 12px);
-    }
-
-    .btn-green {
-        display: inline-block;
-        position:relative;
-        z-index: 700;
-        color: #fff;
-    }
-
-    .btn-blue {
-        margin: 0 0 0 10px;
-    }
-
-    input {
-
-        &.main {
-            position: absolute;
-            right: 0;
-            margin: 0;
-            opacity: 0;
-            transform-origin: right;
-            transform: scale(14);
-            font-size: 23px;
-            direction: ltr;
-            cursor: pointer;
-
-            &.right {
-                right: 9999px;
-                height: 0;
-            }
-        }
-
-        &.url {
-            font: -webkit-small-control;
-            vertical-align: middle;
-            padding: 9px 7px;
-            margin: 10px 0;
-            outline: 0;
-            font-size: 1.1em;
-            background: #fff;
-
-            + .btn.btn-blue {
-                color: #fff;
-            }
-        }
-    }
-
-    .progress {
-        position: relative;
-        margin: -19px 0 44px 0;
-        display: block;
-        overflow: hidden;
-        background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
-        border-radius: 12px;
-        box-shadow: (rgba(0,0,0,0.1) 0 1px 2px inset);
-    }
-
-    .fileupload-loading {
-        display: block;
-        top: 50%;
-        width: 35px;
-        height: 28px;
-        margin: -28px auto 0;
-        background-size: contain;
-    }
-
-    .failed {
-        position: relative;
-        top: -40px;
-        font-size: 16px;
-    }
-
-    .bar {
-        height: 12px;
-        background: $blue;
-
-        &.fail {
-            background: $red;
-        }
-    }
-}//.image-uploader
-
-
-//
-// Pre Image Uploader
-// --------------------------------------------------
-// TODO: Find a better name for this.
-
-.pre-image-uploader {
-    @include baseline;
-    position: relative;
-    overflow: hidden;
-    height: auto;
-    color: $brown;
-    background: rgba(0,0,0,0.1);
-    border-radius: 2px;
-    min-height: 46px;
-
-    input {
-        position: absolute;
-        left: 9999px;
-        opacity: 0;
-    }
-
-    a {
-        z-index: 10000;
-        color: $brown;
-        text-decoration: none;
-
-        &:hover {
-            color: $darkgrey;
-        }
-    }
-
-    img {
-        display: block;
-        max-width: 100%;
-        margin: 0 auto;
-        line-height: 0;
-    }
-
-    .image-cancel {
-        @include icon($i-trash, 11px);
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        padding: 8px;
-        z-index: 300;
-        color: #fff;
-        text-decoration: none;
-        line-height: 0;
-        border-radius: $border-radius;
-        background: rgba(0,0,0,0.6);
-        box-shadow: rgba(255,255,255,0.2) 0 0 0 1px;
-
-        &:hover {
-            color: #fff;
-            cursor: pointer;
-            background: $red;
-        }
-    }
-}//.pre-image-uploader

core/client/app/styles/components/url-preview.scss

@@ -1,18 +0,0 @@
-// ------------------------------------------------------------
-// URL Preview
-//
-// Styles for the {{url-preview}} component
-//
-// * Overflow Ellipsis
-// ------------------------------------------------------------
-
-//
-// Overflow Ellipsis
-// --------------------------------------------------
-
-.ghost-url-preview {
-    width: 98%; // Makes sure the preview isnt wider than the input
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

core/client/app/styles/csscomb.json

@@ -0,0 +1,235 @@
+{
+    "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",
+        "user-select",
+        "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"
+    ] ]
+}

core/client/app/styles/layouts/about.css

@@ -0,0 +1,119 @@
+/* About /ghost/settings/about/
+/* ---------------------------------------------------------- */
+
+.gh-logo {
+    position: relative;
+    width: 120px;
+    height: auto;
+}
+
+.gh-env-details {
+    display: flex;
+    align-items: center;
+    margin: 1em 0;
+}
+
+.gh-env-list {
+    margin: 0;
+    padding: 0 40px 0 0;
+    list-style: none;
+}
+
+.gh-env-help {
+    max-width: 200px;
+}
+
+.gh-env-help .btn {
+    margin: 5px 0;
+}
+
+@media (max-width: 670px) {
+    .gh-env-details {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .gh-env-help {
+        margin: 1em 0;
+        max-width: none;
+    }
+}
+
+.gh-credits {
+    margin: 2em 0;
+    max-width: 650px;
+    color: var(--midgrey);
+    font-size: 1.8rem;
+    font-weight: 200;
+}
+
+@media (max-width: 890px) {
+    .gh-credits {
+        max-width: 460px;
+    }
+}
+
+.gh-credits h2 {
+    font-size: 2.4rem;
+}
+
+
+/* Contributors
+/* ---------------------------------------------------------- */
+
+.gh-contributors {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 1em 0;
+}
+
+.gh-contributors a {
+    position: relative;
+    display: block;
+    margin: 0 10px 10px 0;
+    width: 60px;
+    height: 60px;
+}
+
+.gh-contributors img {
+    border-radius: 100%;
+}
+
+.gh-contributors a:before {
+    content: attr(title);
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    padding: 2px 6px;
+    background: var(--darkgrey);
+    border-radius: var(--border-radius);
+    color: #fff;
+    font-size: 1rem;
+    line-height: 1.3em;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    transform: translateX(-50%);
+    pointer-events: none;
+}
+
+.gh-contributors a:after {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    transform: translateX(-50%);
+}
+
+.gh-contributors a:hover:before,
+.gh-contributors a:hover:after {
+    opacity: 1;
+}
+
+/* Copyright Info
+/* ---------------------------------------------------------- */
+
+.gh-copyright-info {
+    color: var(--midgrey);
+    font-size: 1.2rem;
+}

core/client/app/styles/layouts/about.scss

@@ -1,271 +0,0 @@
-// ------------------------------------------------------------
-// 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
-// ------------------------------------------------------------
-
-
-//
-// Wrapper
-// --------------------------------------------------
-
-.settings-about {
-    h1 {
-        letter-spacing: 0;
-    }
-}
-
-@media (min-width: 901px) {
-    .settings-content .settings-about {
-        padding: 25px 40px 0;
-    }
-}
-
-
-//
-// Logo & Version
-// --------------------------------------------------
-
-.about-ghost-intro {
-    h1 {
-        margin-top: -6px;
-        margin-bottom: -21px;
-    }
-
-    .ghost_logo {
-        position: relative;
-        left: 3px;
-        @include icon($i-ghost, 1.7rem, $midgrey) {
-            position: relative;
-            top: -6px;
-        };
-        @include icon-after($i-ghost-logo, 3.2rem, $darkgrey) {
-            position: relative;
-            left: -5px;
-        };
-    }
-
-    .version {
-        font-weight: 300;
-        font-size: 1.8rem;
-        position: relative;
-        top: -3px;
-        left: -9px;
-        color: $blue;
-    }
-
-    h1 + p {
-        margin-top: 1px;
-        color: $midgrey;
-    }
-}//.about-ghost-intro
-
-// Special case to hide the desktop page header, because
-// in this instance the Ghost logo replaces it.
-@media (min-width: 901px) {
-    .settings-view-about .settings-view-header {
-        display: none;
-    }
-}
-
-
-//
-// Environment & Get Involved
-// --------------------------------------------------
-
-.about-environment-help {
-    margin-top: 35px;
-}
-
-.about-environment {
-    dl {
-        @include clearfix;
-        color: $midgrey;
-        margin: 2px 0 0 0;
-        line-height: 1.6;
-    }
-
-    dt, dd {
-        width: auto;
-        float: left;
-        display: inline-block;
-        margin: 0;
-    }
-
-    dt {
-        margin-right: 5px;
-    }
-
-    .about-environment-detail {
-        text-transform: capitalize;
-    }
-}
-
-.about-help {
-    padding-top: 8px;
-
-    @media (max-width: 500px) {
-        padding-top: 16px;
-    }
-
-    .btn {
-        width: 100%;
-        display: block;
-        font-size: 1rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        min-height: 32px;
-        background: #A1ADB3;
-        color: #fff;
-
-        &:hover {
-            background: darken(#A1ADB3, 10%);
-        }
-
-        &:nth-child(1) {
-            margin-bottom: 11px;
-        }
-    }
-}//.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;
-    }
-}
-
-
-//
-// Contributors
-// --------------------------------------------------
-
-.top-contributors {
-    padding-left: 0;
-    max-width: 660px;
-
-    li {
-        float: left;
-        list-style: none;
-        width: 10%;
-
-        a {
-            display: block;
-            position: relative;
-
-            @media (min-width: 601px) {
-                margin-right: 9px;
-                margin-bottom: 9px;
-            }
-            @media (max-width: 600px) {
-                margin-right: 6px;
-                margin-bottom: 6px;
-            }
-
-            &:before {
-                opacity: 0;
-                content: attr(title);
-                position: absolute;
-                top: -27px;
-                left: 50%;
-                transform: translateX(-50%);
-                background: $darkgrey;
-                color: #fff;
-                padding: 2px 6px 3px;
-                border-radius: $border-radius;
-                transition: opacity 0.15s ease-in-out;
-                font-size: 1rem;
-                pointer-events: none;
-            }
-
-            &:after {
-                opacity: 0;
-                content: '';
-                position: absolute;
-                top: -6px;
-                left: 50%;
-                transform: translateX(-50%);
-                transition: opacity 0.15s ease-in-out;
-                @include triangle(8px, $darkgrey, "down");
-            }
-
-            &:hover {
-                &:before,
-                &:after {
-                    opacity: 1;
-                }
-            }
-
-            img {
-                width: 100%;
-                display: block;
-                border-radius: 100%;
-            }
-        }//a
-    }//li
-}//.top-contributors
-
-
-//
-// Credits & Copyright
-// --------------------------------------------------
-
-.about-credits {
-    margin-top: 45px;
-
-    h1 {
-        font-size: 2.4rem;
-        margin-bottom: 24px;
-    }
-}
-
-.about-contributors-info {
-    margin-top: -12px;
-    margin-bottom: 22px;
-    font-size: 1.6rem;
-    max-width: 620px;
-}
-
-.about-get-involved {
-    font-size: 1.2rem;
-    width: 100%;
-    display: inline-block;
-    max-width: 290px;
-    text-transform: uppercase;
-    text-align: center;
-}
-
-.about-copyright {
-    margin-top: 62px;
-
-    a {
-        &:link,
-        &:visited {
-            color: inherit;
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-            text-decoration: none;
-            color: $blue;
-        }
-    }
-}//.about-copyright

core/client/app/styles/layouts/auth.css

@@ -0,0 +1,60 @@
+/* Sign in
+/* ---------------------------------------------------------- */
+
+.gh-signin {
+    position: relative;
+    margin: 30px auto;
+    padding: 40px;
+    max-width: 400px;
+    border: #dae1e3 1px solid;
+    background: #f8fbfd;
+    border-radius: 5px;
+    text-align: left;
+}
+
+.gh-signin .form-group {
+    margin-bottom: 1.5rem;
+}
+
+.gh-signin .btn {
+    margin: 0;
+    padding: 12px;
+}
+
+.forgotten-wrap {
+    position: relative;
+}
+
+.forgotten-wrap .forgotten-link {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    bottom: 10px;
+    padding: 0 12px;
+    border-left: #dae1e3 1px solid;
+    border-radius: 0;
+    text-transform: none;
+    letter-spacing: 0;
+}
+
+.forgotten-link:hover {
+    border-left: #dae1e3 1px solid;
+    color: color(var(--blue) lightness(-20%));
+    text-decoration: none;
+}
+
+.private-login h1 {
+    margin-bottom: 2rem;
+    text-indent: 0;
+}
+.private-login .form-group {
+    margin: 0;
+}
+.private-login input[type="password"] {
+    padding: 9px 7px;
+    border-radius: 3px 3px 0 0;
+}
+.private-login-button {
+    padding: 9px 1.8em;
+    border-radius: 0 0 3px 3px;
+}

core/client/app/styles/layouts/auth.scss

@@ -1,292 +0,0 @@
-// ------------------------------------------------------------
-// Authentication
-// Slug: /ghost/[signin/signup/forgotten/reset]
-//
-// Styles for the authentication pages
-//
-// * Auth colours & wrappers
-// * Sign In
-// * Signup & Reset
-// * Forgot Password
-// ------------------------------------------------------------
-
-
-//
-// Auth colours & wrappers
-// --------------------------------------------------
-
-.ghost-login,
-.ghost-signup,
-.ghost-forgotten,
-.ghost-reset {
-    color: $midgrey;
-    background: $darkgrey;
-
-    main {
-        padding-top: 15px;
-    }
-
-    input {
-        line-height: 1.4em;
-        font-size: 1.1em;
-        font-weight: 200;
-        border: none;
-        color: #fff;
-        background: lighten($darkgrey, 10%);
-        box-shadow: none;
-        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;
-
-    @media (max-width: 630px) {
-        max-width: 264px;
-        text-align: center;
-    }
-}
-
-
-//
-// Sign In
-// Slug: /ghost/signin/
-// --------------------------------------------------
-
-.login-form {
-    max-width: 530px;
-    color: lighten($midgrey, 15%);
-    display: table-cell;
-    vertical-align: middle;
-
-    @media (max-width: 630px) {
-        max-width: 264px;
-    }
-
-    .email-wrap,
-    .password-wrap {
-        position: relative;
-        margin: 0 0 5px 0;
-        float: left;
-
-        @media (max-width: 630px) {
-            margin-bottom: 1em;
-        }
-    }
-
-    .email-wrap {
-        margin-right: 3px;
-
-        @media (max-width: 630px) {
-            margin-right: 0;
-        }
-    }
-
-    .email,
-    .password {
-        display: inline-block;
-        clear: both;
-        padding: 8px 0 8px 8px;
-        width: 216px;
-
-        @media (max-width: 630px) {
-            width: 264px;
-            border-radius: 2px;
-        }
-    }
-
-    @media (min-width: 631px) {
-        .email {
-            border-radius: 2px 0 0 2px;
-        }
-        .password {
-            border-radius: 0 2px 2px 0;
-        }
-    }
-
-    button {
-        width: 85px;
-        height: 37px;
-        margin-left: 10px;
-
-        @media (max-width: 630px) {
-            margin: 0;
-            width: 100%;
-            margin-bottom: 1em;
-        }
-    }
-
-    .meta {
-        clear: both;
-        color: $midgrey;
-    }
-
-    .forgotten-link {
-        display: inline-block;
-        height: auto;
-        width: auto;
-        margin: 0;
-        padding: 0;
-        font-size: 1.25rem;
-        color: darken($midgrey, 10%);
-        text-transform: none;
-        letter-spacing: 0;
-    }
-
-    a {
-        color: darken($midgrey, 10%);
-        font-size: 0.9em;
-
-        &:hover {
-            color: lighten($midgrey, 5%);
-            text-decoration: none;
-        }
-    }
-}//.login-form
-
-
-//
-// Signup & Reset
-// Slug: /ghost/signup
-// Slug: /ghost/reset/t0k3n
-// --------------------------------------------------
-
-.signup-form,
-.reset-form {
-    max-width: 280px;
-    color: lighten($midgrey, 15%);
-    display: table-cell;
-    vertical-align: middle;
-
-    @media (max-width: 630px) {
-        width: 264px;
-    }
-
-    .password-wrap {
-        position: relative;
-        margin: 0 0 1em 0;
-        background: lighten($darkgrey, 10%);
-        float: left;
-        display: table;
-    }
-
-    input {
-        width: 280px;
-        padding: 8px 10px;
-
-        @media (max-width: 630px) {
-            width: 264px;
-        }
-    }
-
-    .name-wrap {
-        position: relative;
-        border-radius: 2px;
-    }
-
-    .name {
-        border-radius: 2px;
-    }
-
-    .email-wrap {
-        position: relative;
-        border-radius: 2px;
-    }
-
-    .email {
-        border-radius: 2px;
-    }
-
-    .password-wrap {
-        position: relative;
-        border-radius: 2px;
-    }
-
-    .password {
-        border-radius: 2px;
-    }
-
-    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;
-    }
-}//.signup-form, .reset-form
-
-
-//
-// Forgot Password
-// Slug: /ghost/forgotten
-// --------------------------------------------------
-
-.forgotten-form {
-    max-width: 280px;
-    color: lighten($midgrey, 15%);
-    display: table-cell;
-    vertical-align: middle;
-
-    .email-wrap {
-        position: relative;
-        margin: 0 0 1em 0;
-        float: left;
-        border-radius: 2px;
-        width: 100%;
-    }
-
-    .email {
-        padding: 8px 10px;
-        border-radius: 2px;
-    }
-
-    button {
-        width: 100%;
-        height: 37px;
-    }
-}//.forgotten-form
-
-
-//
-// Private Blog Login
-// Slug: /private/
-// --------------------------------------------------
-
-.private-login {
-    h1 {
-        margin-bottom: 2rem;
-        text-indent: 0;
-    }
-    .form-group {
-        margin: 0;
-    }
-    input[type="password"] {
-        padding: 9px 7px;
-        border-radius: 3px 3px 0 0;
-    }
-    .private-login-button {
-        padding: 9px 1.8em;
-        border-radius: 0 0 3px 3px;
-    }
-}

core/client/app/styles/layouts/content.css

@@ -0,0 +1,320 @@
+/* Content /ghost/
+/* ---------------------------------------------------------- */
+
+
+/* Show/Hide on Mobile // TODO: What the fuck does that mean?
+/* ---------------------------------------------------------- */
+
+.content-list.show-menu {
+    display: block;
+}
+
+.content-list.show-content {
+    display: none;
+}
+
+.content-preview.show-menu {
+    display: none;
+}
+
+.content-preview.show-content {
+    display: block;
+}
+
+
+/* Content List (Left pane)
+/* ---------------------------------------------------------- */
+
+.content-list {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    padding: 15px;
+    width: 33%;
+    border-right: #e1e1e1 1px solid;
+    background: #fff;
+}
+
+@media (max-width: 900px) {
+    .content-list {
+        right: 0;
+        z-index: 500;
+        width: auto;
+        border: none;
+    }
+}
+
+.content-list .content-list-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.content-list .entry-title {
+    font-size: 1.6rem;
+    line-height: 1.4em;
+    font-weight: normal;
+}
+
+.content-list .entry-meta {
+    margin-top: 14px;
+    line-height: 18px;
+}
+
+.content-list .avatar {
+    position: relative;
+    float: left;
+    margin-right: 14px;
+    width: 18px;
+    height: 18px;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 18px;
+}
+
+.content-list .avatar img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
+.content-list .status,
+.content-list .author {
+    font-size: 1.3rem;
+    font-weight: 300;
+    transition: opacity 0.15s linear;
+}
+
+.content-list .avatar:hover + .author + .status {
+    opacity: 0;
+}
+
+.content-list .avatar:hover + .author {
+    opacity: 1;
+}
+
+.content-list .author {
+    position: absolute;
+    bottom: 22px;
+    left: 56px;
+    opacity: 0;
+}
+
+.content-list .status .draft {
+    color: var(--red);
+}
+
+.content-list .status .scheduled {
+    color: var(--orange);
+}
+
+.content-list ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.content-list li {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border-bottom: #e1e1e1 1px solid;
+}
+
+.content-list li a {
+    display: block;
+    padding: 19px 20px 22px 24px;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.content-list li a:hover {
+    text-decoration: none;
+}
+
+@media (max-width: 400px) {
+    .content-list li a {
+        padding: 15px;
+    }
+}
+
+@media (max-width: 900px) {
+    .content-list li a {
+        padding-right: 40px;
+    }
+}
+
+@media (min-width: 901px) {
+    .content-list li a:after {
+        display: none;
+    }
+}
+
+@media (min-width: 901px) {
+    .content-list .active {
+        background: color(#e1e1e1 lightness(+9%));
+    }
+}
+
+
+/* Preview (Right pane)
+/* ---------------------------------------------------------- */
+
+.content-preview {
+    position: absolute;
+    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;
+    }
+}
+
+.content-preview .unfeatured {
+    margin: 0 7px 0 -5px;
+    padding: 3px;
+    vertical-align: -6%;
+}
+
+.content-preview .featured {
+    margin: 0 7px 0 -5px;
+    padding: 3px;
+    vertical-align: -6%;
+}
+
+.content-preview .post-published-by .status a {
+    color: inherit;
+}
+
+.content-preview .post-published-by .status a:hover {
+    text-decoration: underline;
+}
+
+.content-preview .normal {
+    margin: 0 3px;
+    text-transform: none;
+}
+
+.content-preview .content-preview-content {
+    padding: 5%;
+    word-break: break-word;
+    hyphens: auto;
+}
+
+@media (max-width: 900px) {
+    .content-preview .content-preview-content {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+.content-preview .content-preview-content .wrapper {
+    margin: 0 auto;
+    max-width: 700px;
+}
+
+.content-preview .post-controls {
+    position: relative;
+    top: 3px;
+    float: right;
+}
+
+.content-preview .post-settings-menu {
+    position: absolute;
+    top: 35px;
+    right: -3px;
+}
+
+.content-preview img {
+    width: 100%;
+    height: auto;
+}
+
+.post-preview-header {
+    display: block;
+    justify-content: space-between;
+}
+
+/* Empty State
+/* ---------------------------------------------------------- */
+
+.no-posts-box {
+    position: relative;
+    z-index: 600;
+    display: table;
+    margin: 0 auto;
+    padding: 0;
+    height: 90%;
+}
+
+@media (max-width: 900px) {
+    .no-posts-box {
+        position: fixed;
+        top: 45%;
+        left: 50%;
+    }
+}
+
+.no-posts-box .no-posts {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+
+@media (max-width: 900px) {
+    .no-posts-box .no-posts {
+        position: relative;
+        left: -50%;
+        display: block;
+    }
+}
+
+.no-posts-box .no-posts h3 {
+    color: var(--brown);
+    font-size: 2em;
+    font-weight: 200;
+}
+
+
+/* Keyboard Focus Effects
+/* ---------------------------------------------------------- */
+
+
+/* This has to be a pseudo element to sit over the top of everything else in the content list */
+.content-list.keyboard-focused:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 500;
+    animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
+    pointer-events: none;
+}
+
+.content-preview.keyboard-focused {
+    animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
+}

core/client/app/styles/layouts/content.scss

@@ -1,437 +0,0 @@
-// ------------------------------------------------------------
-// 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 {
-    position: relative;
-    height: 100%;
-    width: 100%;
-
-    @media (max-width: 900px) {
-        overflow-x: hidden;
-    }
-}
-
-
-//
-// Show/Hide on mobile
-// --------------------------------------------------
-
-.content-list {
-    &.show-menu {
-        display: block;
-    }
-
-    &.show-content {
-        display: none;
-    }
-}
-
-.content-preview {
-    &.show-menu {
-        display: none;
-    }
-
-    &.show-content {
-        display: block;
-    }
-}
-
-
-//
-// Content List
-// --------------------------------------------------
-
-.content-list {
-    width: 33%;
-    padding: 15px;
-    position: absolute;
-    bottom: 0;
-    top: 0;
-    left: 0;
-    border-right: $lightbrown 1px solid;
-    background: #fff;
-
-    @media (max-width: 900px) {
-        width: auto;
-        right: 0;
-        z-index: 500;
-        border: none;
-    }
-
-    .content-filter {
-        position: relative;
-        z-index: 300;
-
-        > a {
-            padding: 5px;
-            margin-left: -5px;
-        }
-
-        .menu-drop {
-            display: block;
-        }
-    }
-
-    .btn-green {
-        @include icon($i-add);
-        position: absolute;
-        top: 9px;
-        right: 20px;
-        z-index: 700;
-        padding: 2px 4px 3px 5px;
-        color: #fff !important; // getting overridden by floatingheader
-    }
-
-    .content-list-content {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        padding-top: 40px;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .entry-title {
-        font-size: 1.6rem;
-        line-height: 1.4em;
-        font-weight: normal;
-    }
-
-    .entry-meta {
-        margin-top: 14px;
-        line-height: 18px;
-    }
-
-    .avatar {
-        @include circular-image(18px) {
-            float: left; // Used instead of `display: block;` to remove the stupid space under the image.
-            margin-right: 14px;
-        }
-    }
-
-    .status,
-    .author {
-        font-size: 1.3rem;
-        font-weight: 300;
-        transition: opacity 0.15s linear;
-    }
-
-    .avatar:hover + .author + .status {
-        opacity: 0;
-    }
-
-    .avatar:hover + .author {
-        opacity: 1;
-    }
-
-    .author {
-        position: absolute;
-        bottom: 22px;
-        left: 56px;
-        opacity: 0;
-    }
-
-    .status {
-        .draft {
-            color: $red;
-        }
-
-        .scheduled {
-            color: $orange;
-        }
-    }
-
-    .featured {
-        @include icon($i-featured, 11px) {
-            vertical-align: 7%;
-            position: absolute;
-            bottom: 25px;
-            right: 25px;
-        };
-    }
-
-    ol {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        border-top: $lightbrown 1px solid;
-    }
-
-    li {
-        position: relative;
-        margin: 0;
-        padding: 0;
-        border-bottom: $lightbrown 1px solid;
-
-        a {
-            display: block;
-            padding: 19px 20px 22px 24px;
-            color: rgba(0,0,0,0.5);
-
-            @include icon-after($i-chevron) {
-                position: absolute;
-                top: 50%;
-                margin-top: -6px;
-                right: 15px;
-            }
-
-            &:hover {
-                text-decoration: none;
-            }
-
-            @media (max-width: 400px) {
-                padding: 15px;
-            }
-
-            @media (max-width: 900px) {
-                padding-right: 40px;
-            }
-
-            @media (min-width: 901px) {
-                &:after {
-                    display: none;
-                }
-            }
-        }//a
-    }//li
-
-    li.active {
-        @media (min-width: 901px) {
-            border-bottom: lighten($midgrey, 40%) 1px solid;
-            background: lighten($lightbrown, 5%);
-        }
-    }
-}//.content-list
-
-
-//
-// Preview
-// --------------------------------------------------
-
-.content-preview {
-    width: 67%;
-    padding: 15px;
-    position: absolute;
-    bottom: 0;
-    top: 0;
-    right: 0;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    background: #fff;
-
-    @media (max-width: 900px) {
-        width: 100%;
-        border: none;
-        overflow: visible;
-    }
-
-    .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%;
-        margin: 0 7px 0 -5px;
-        padding: 3px;
-    }
-
-    .post-published-by .status a {
-        color: inherit;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    .normal {
-        text-transform: none;
-        margin: 0 3px;
-    }
-
-    .content-preview-content {
-        padding: 5%;
-        word-break: break-word;
-        hyphens: auto;
-
-        @media (max-width: 900px) {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            overflow: auto;
-            -webkit-overflow-scrolling: touch;
-        }
-
-        .wrapper {
-            max-width: 700px;
-            margin:0 auto;
-        }
-    }
-
-    .post-controls {
-        float:right;
-        position: relative;
-        top: 3px;
-    }
-
-    .post-settings-menu {
-        position: absolute;
-        top: 35px;
-        right: -3px;
-    }
-
-    .post-edit {
-        @include icon($i-edit, 14px);
-    }
-
-    img {
-        width:100%;
-        height:auto;
-    }
-}//.content-preview
-
-.post-preview-header {
-    .page-title,
-    .btn-back {
-        display: none;
-    }
-
-    @media (max-width: 900px) {
-        position: fixed;
-        left: 0;
-        right: 0;
-        top: 0;
-        z-index: 3000;
-        height: 44px;
-        text-align: center;
-        color: #fff;
-        background: #242628;
-        overflow: hidden;
-
-        .btn-back {
-            display: block;
-            position: absolute;
-            top: 4px;
-            left: 4px;
-            color: #fff;
-            background-color: transparent;
-        }
-
-        .page-title {
-            display: block;
-        }
-
-        .post-controls {
-            position: absolute;
-            top: 4px;
-            right: 4px;
-        }
-
-        .post-edit {
-            color: #fff;
-            background-color: transparent;
-        }
-
-        .featured, .unfeatured, small {
-            display: none;
-        }//@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
-
-
-//
-// No Posts
-// --------------------------------------------------
-
-.no-posts-box {
-    position: relative;
-    height: 90%;
-    margin: 0px auto;
-    padding: 0px;
-    display: table;
-    z-index: 600;
-
-    @media (max-width: 900px) {
-        position: fixed;
-        top: 45%;
-        left: 50%;
-    }
-
-    .no-posts {
-        vertical-align: middle;
-        display: table-cell;
-        text-align: center;
-
-        @media (max-width: 900px) {
-            display: block;
-            position: relative;
-            left: -50%;
-        }
-
-        h3 {
-            color: $brown;
-            font-weight: 200;
-            font-size: 2em;
-        }
-    }//.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;
-    }
-}
-
-.content-preview.keyboard-focused {
-    animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
-}

core/client/app/styles/layouts/default.scss

@@ -1,158 +0,0 @@
-// ------------------------------------------------------------
-// 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;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-}
-
-
-//
-// Main Layout
-// --------------------------------------------------
-// The <main> content wrapper
-
-.viewport {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    z-index: 500; // Above the .global-nav when collapsed
-    transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
-
-    @media (max-width: 900px) {
-        transition: transform 0.4s cubic-bezier($settings-menu-bezier);
-    }
-
-    // Compiles to `body.settings-menu-expanded .viewport`
-    body.global-nav-expanded & {
-        transform: translate3d(260px, 0px, 0px);
-    }
-
-    // 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;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                z-index: 1000;
-                width: 1px;
-                background: #EDECE4;
-            }
-        }
-    }
-}//.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, as the nav isn't covering this.
-
-.page-header {
-    position: relative;
-    height: 44px;
-    line-height: 44px;
-    text-align: center;
-    color: #fff;
-    background: $darkgrey;
-    overflow: hidden;
-
-    @media (min-width: 900px) {
-        height: 60px;
-        line-height: 60px;
-    }
-
-}
-
-// Centered page heading
-.page-title {
-    display: block;
-    height: 44px;
-    line-height: 44px;
-    margin: 0;
-    padding: 0 15%;
-    color: #fff;
-    font-size: 1.8rem;
-    font-weight: normal;
-    letter-spacing: 0;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-
-    @media (min-width: 900px) {
-        height: 60px;
-        line-height: 60px;
-    }
-}
-
-// The burger to expand .global-nav menu
-.menu-button {
-    @include icon($i-menu, 18px) {
-        position: absolute;
-        top: 50%;
-        left: 12px;
-        transform: translateY(-50%);
-    }
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 44px;
-    height: 44px;
-    color: #fff;
-}

core/client/app/styles/layouts/editor.css

@@ -0,0 +1,697 @@
+/* Editor /ghost/editor/
+/* ---------------------------------------------------------- */
+
+
+/* Title
+/* ---------------------------------------------------------- */
+
+.editor .entry-title {
+    position: relative;
+    padding: 0;
+    height: 60px;
+}
+
+.editor .entry-title input {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 60px;
+    border: 0;
+    background: transparent;
+    text-indent: 20px;
+    letter-spacing: -1px;
+    font-size: 3.2rem;
+    font-weight: bold;
+}
+
+.editor .entry-title input:focus {
+    outline: 0;
+}
+
+
+/* Container & Headers
+/* ---------------------------------------------------------- */
+
+@media (min-width: 401px) {
+    .editor .notifications.bottom {
+        bottom: 40px;
+    }
+}
+
+.editor .entry-markdown {
+    left: 0;
+}
+
+.editor .entry-preview {
+    right: 0;
+    border-left: #e1e1e1 1px solid;
+}
+
+.editor .entry-markdown,
+.editor .entry-preview {
+    position: absolute;
+    top: 60px;
+    bottom: 40px;
+    padding: 15px;
+    width: 50%;
+    border-top: #e1e1e1 1px solid;
+    background: #fff;
+    /* Hide markdown icon + wordcount when we hit mobile */
+    /* Give the tab with the .active class the highest z-index */
+    /* Restore the normal height of the .active tab (inactive tab stays small, hidden behind) */
+    /* Restore the white bg of the currently .active tab, remove hand cursor from currently active tab */
+}
+
+@media (max-width: 400px) {
+    .editor .entry-markdown .markdown-help,
+    .editor .entry-markdown .entry-word-count,
+    .editor .entry-preview .markdown-help,
+    .editor .entry-preview .entry-word-count {
+        display: none;
+    }
+}
+
+@media (max-width: 1000px) {
+    .editor .entry-markdown,
+    .editor .entry-preview {
+        /* Convert all content areas to small boxes */
+        top: 100px;
+        right: 0;
+        left: 0;
+        z-index: 100;
+        width: 100%;
+        border: none;
+        /* 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 {
+        overflow: hidden;
+        height: 50px;
+    }
+    .editor .entry-markdown:not(.active) .markdown-help:hover:before,
+    .editor .entry-preview:not(.active) .markdown-help:hover:before {
+        color: #fff;
+    }
+}
+
+.editor .entry-markdown .floatingheader a,
+.editor .entry-preview .floatingheader a {
+    color: var(--brown);
+}
+
+@media (max-width: 1000px) {
+    .editor .entry-markdown .floatingheader,
+    .editor .entry-preview .floatingheader {
+        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 {
+        color: #fff;
+    }
+}
+
+.editor .entry-markdown .floatingheader .entry-word-count,
+.editor .entry-preview .floatingheader .entry-word-count {
+    position: relative;
+    top: 2px;
+    float: right;
+}
+
+.editor .entry-markdown.active,
+.editor .entry-preview.active {
+    z-index: 200;
+}
+
+.editor .entry-markdown.active .markdown,
+.editor .entry-markdown.active .entry-preview-content,
+.editor .entry-preview.active .markdown,
+.editor .entry-preview.active .entry-preview-content {
+    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;
+        background: #fff;
+        box-shadow: none;
+        color: var(--brown);
+        cursor: auto;
+    }
+    .editor .entry-markdown.active header a,
+    .editor .entry-preview.active header a {
+        color: var(--brown);
+    }
+}
+
+
+/* Editor (Left pane)
+/* ---------------------------------------------------------- */
+
+.editor .entry-markdown-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.editor .markdown-editor {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    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;
+    resize: none;
+}
+
+.editor .markdown-editor:focus {
+    outline: 0;
+}
+
+@media (max-width: 450px) {
+    .editor .markdown-editor {
+        padding: 15px;
+    }
+}
+
+@media (min-width: 451px) and (max-width: 1000px) {
+    .editor .markdown-editor {
+        padding: 20px;
+    }
+}
+
+@media (min-width: 1001px) {
+    .editor .markdown-editor {
+        padding: 42px 20px 36px 20px;
+    }
+}
+
+@media (max-width: 1000px) {
+    .editor .entry-preview .floatingheader {
+        /* Align the tab of entry-preview on the right */
+        right: 0;
+        left: auto;
+        border-right: none;
+    }
+}
+
+.editor .entry-preview-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 40px 20px 37px 20px;
+    word-break: break-word;
+    hyphens: auto;
+    cursor: default;
+}
+
+@media (max-width: 400px) {
+    .editor .entry-preview-content {
+        padding: 15px;
+    }
+}
+
+@media (max-width: 1000px) {
+    .editor .scrolling .floatingheader {
+        box-shadow: none;
+    }
+    .editor .scrolling .floatingheader:before,
+    .editor .scrolling .floatingheader:after {
+        display: none;
+    }
+}
+
+@media (max-width: 1000px) and (max-width: 1000px) {
+    .editor .entry-preview-content {
+        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05) inset;
+    }
+}
+
+.markdown-help {
+    float: right;
+    padding: 5px;
+}
+
+
+/* FFF: Fucking Firefox Fixes
+/* ---------------------------------------------------------- */
+
+@-moz-document url-prefix() {
+    .editor .markdown-editor {
+        top: 40px;
+        padding-top: 0;
+        padding-bottom: 0;
+        height: calc(100% - 40px);
+    }
+}
+
+
+/* Preview (Right pane)
+/* ---------------------------------------------------------- */
+
+/* The styles for the actual content inside the preview */
+.entry-preview-content,
+.content-preview-content {
+    font-size: 1.8rem;
+    line-height: 1.5em;
+    font-weight: 200;
+}
+
+.entry-preview-content *,
+.content-preview-content * {
+    user-select: all;
+}
+
+.entry-preview-content a,
+.content-preview-content a {
+    color: var(--blue);
+    text-decoration: underline;
+}
+
+.entry-preview-content sup a,
+.content-preview-content sup a {
+    text-decoration: none;
+}
+
+.entry-preview-content .btn,
+.content-preview-content .btn {
+    color: var(--grey);
+    text-decoration: none;
+}
+
+.entry-preview-content .img-placeholder,
+.content-preview-content .img-placeholder {
+    position: relative;
+    height: 100px;
+    border: 5px dashed var(--grey);
+}
+
+.entry-preview-content .img-placeholder span,
+.content-preview-content .img-placeholder span {
+    position: absolute;
+    top: 50%;
+    display: block;
+    margin-top: -15px;
+    width: 100%;
+    height: 30px;
+    text-align: center;
+}
+
+.entry-preview-content a.image-edit,
+.content-preview-content a.image-edit {
+    width: 16px;
+    height: 16px;
+}
+
+.entry-preview-content img,
+.content-preview-content img {
+    margin: 0 auto;
+    max-width: 100%;
+    height: auto;
+}
+
+/* Placeholder objects for <script> & <iframe> */
+.js-embed-placeholder,
+.iframe-embed-placeholder {
+    padding: 100px 20px;
+    border: none;
+    background: #f9f9f9;
+    text-align: center;
+    font-family: var(--font-family);
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+
+
+/* Zen Mode
+/* ---------------------------------------------------------- */
+
+body.zen {
+    background: color(#e1e1e1 lightness(+3%));
+}
+
+body.zen .usermenu {
+    display: none;
+}
+
+body.zen .global-nav,
+body.zen .page-header,
+body.zen #publish-bar {
+    overflow: hidden;
+    height: 0;
+    opacity: 0;
+    transition: all 0.5s ease-out;
+}
+
+body.zen .page-content {
+    top: 0;
+    transition: all 0.5s ease-out;
+}
+
+body.zen .entry-markdown,
+body.zen .entry-preview {
+    bottom: 0;
+    transition: all 0.5s ease-out;
+}
+
+
+/* Publish Bar
+/* ---------------------------------------------------------- */
+
+#publish-bar {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 900;
+    padding: 0;
+    height: 40px;
+    border-top: #e1e1e1 1px solid;
+    background: #fff;
+    color: var(--midgrey);
+    transform: translateZ(0);
+}
+
+@media (max-width: 1000px) {
+    #publish-bar {
+        font-weight: normal;
+    }
+}
+
+#publish-bar .post-settings:hover,
+#publish-bar .post-settings.active {
+    color: var(--darkgrey);
+}
+
+#publish-bar .post-settings-menu {
+    position: absolute;
+    right: -3px;
+    bottom: 41px;
+}
+
+.extended-tags {
+    /* When the tag bar is expanded */
+    position: static;
+    min-height: 100%;
+}
+
+.extended-tags #entry-tags:after {
+    right: 10px;
+}
+
+.extended-tags .tags {
+    width: 281px;
+}
+
+.extended-tags .tag-input {
+    margin-top: 5px;
+    padding-top: 5px;
+    padding-left: 10px;
+    width: 100%;
+    border-top: 1px solid var(--darkgrey);
+}
+
+.extended-tags .right {
+    display: none;
+}
+
+#entry-tags input[type="text"].tag-input {
+    display: inline-block;
+    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 {
+    outline: none;
+}
+
+#entry-tags .tag {
+    display: inline;
+    margin-right: 3px;
+    padding: 2px 5px;
+    background: var(--darkgrey);
+    border-radius: 3px;
+    color: var(--lightgrey);
+    white-space: nowrap;
+    font-size: 1.2rem;
+    line-height: 1.2em;
+}
+
+#entry-tags .tag:hover {
+    cursor: pointer;
+}
+
+#entry-tags .tag i {
+    font-size: 0.7rem;
+}
+
+.suggestions {
+    top: auto;
+    bottom: calc(100% + 15px);
+}
+
+.suggestions li.selected,
+.suggestions li.selected a {
+    background: var(--blue);
+    color: #fff;
+    text-decoration: none;
+}
+
+.suggestions li.selected mark {
+    color: #fff;
+}
+
+.suggestions mark {
+    background: none;
+    color: #000;
+    font-weight: bold;
+}
+
+#entry-actions {
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    align-content: center;
+    margin-right: 6px;
+}
+
+#entry-actions .dropdown {
+    position: absolute;
+    right: 0;
+    bottom: 49px;
+}
+
+#entry-actions .dropdown .dropdown-menu {
+    top: auto;
+    right: 100%;
+    bottom: 100%;
+    left: auto;
+}
+
+#entry-actions.unsaved {
+    padding-bottom: 0;
+}
+
+#entry-actions.unsaved .delete {
+    display: none;
+}
+
+#entry-actions-menu {
+    position: absolute;
+    right: -5px;
+    bottom: 50px;
+}
+
+.tags-wrapper {
+    white-space: nowrap;
+}
+
+.tags-wrapper span {
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.tag-label {
+    position: relative;
+    display: block;
+    width: 40px;
+    height: 40px;
+}
+
+.tag-label:before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: var(--midgrey);
+    font-size: 1.3rem;
+    transition: color 0.15s linear;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.tag-label:hover {
+    cursor: pointer;
+}
+
+.publish-bar-inner {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    align-content: space-between;
+    width: 100%;
+    height: 100%;
+}
+
+.publish-bar-tags-icon {
+    flex: 0 1 auto;
+    align-self: auto;
+    min-width: 40px;
+    max-width: 40px;
+}
+
+.publish-bar-tags {
+    flex: 0 1 auto;
+    align-self: auto;
+    overflow-y: hidden;
+    margin-right: 10px;
+    height: 40px;
+}
+
+.publish-bar-tags .tags-wrapper {
+    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;
+}
+
+.publish-bar-actions {
+    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;
+}
+
+.post-settings:hover,
+.post-settings.active {
+    color: var(--darkgrey);
+}
+
+.post-settings-menu .dropdown-menu {
+    top: auto;
+    right: 100%;
+    bottom: 100%;
+    left: auto;
+}
+
+.post-view-link {
+    position: absolute;
+    top: 1px;
+    right: 0;
+    font-size: 1.3rem;
+}
+
+.post-view-link i {
+    font-size: 10px;
+}
+
+
+/* Post settings meta
+/* ---------------------------------------------------------- */
+
+/* Google Imitation */
+.seo-preview {
+    font-family: Arial, sans-serif;
+}
+
+.seo-preview-title {
+    color: #1e0fbe;
+    text-overflow: ellipses;
+    word-wrap: break-word;
+    font-size: 1.8rem;
+    line-height: 2.16rem;
+
+    -webkit-text-overflow: ellipsis;
+}
+
+.seo-preview-link {
+    margin: 1px 0 2px 0;
+    color: #006621;
+    word-wrap: break-word;
+    font-size: 1.3rem;
+    line-height: 1.6rem;
+}
+
+.seo-preview-description {
+    color: #545454;
+    word-wrap: break-word;
+    font-size: 1.3rem;
+    line-height: 1.4;
+}
+
+
+/* Markdown Help Modal
+/* ---------------------------------------------------------- */
+
+.modal-markdown-help-table {
+    margin: 0 0 20px;
+    width: 100%;
+}
+
+.modal-markdown-help-table td,
+.modal-markdown-help-table th {
+    padding: 8px 0;
+}
+
+.modal-markdown-help-table th {
+    text-align: left;
+}

core/client/app/styles/layouts/editor.scss

@@ -1,756 +0,0 @@
-// ------------------------------------------------------------
-// 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
-// --------------------------------------------------
-
-.entry-container .entry-title {
-    height: 60px;
-    padding: 0 20px;
-    position: relative;
-
-    input {
-        width: 100%;
-        height: 60px;
-        border: 0;
-        margin: 0;
-        padding: 0;
-        font-size: 3.6rem;
-        font-weight: bold;
-        letter-spacing: -1px;
-        background: transparent;
-
-        &:focus {
-            outline: 0;
-        }
-    }
-}//.entry-title
-
-
-//
-// Container & Floating Headers
-// --------------------------------------------------
-
-.editor {
-
-    .notifications.bottom {
-        @media (min-width: 401px) {
-            bottom: 40px;
-        }
-    }
-
-    .entry-container {
-        position: relative;
-        height: 100%;
-    }
-
-    // The two content panel wrappers, positioned left/right
-    .entry-markdown {
-        left: 0;
-    }
-    .entry-preview {
-        right: 0;
-        border-left: $lightbrown 1px solid;
-    }
-
-    // The visual styles for both panels
-    .entry-markdown,
-    .entry-preview {
-        width: 50%;
-        padding: 15px;
-        position: absolute;
-        bottom: 40px; // height of the publish bar
-        top: 60px; // height of the post title + margin
-        border-top: $lightbrown 1px solid;
-        background: #fff;
-
-        // 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;
-            width: 100%;
-            border: none;
-            z-index: 100;
-
-            .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
-            @media (max-width: 1000px) {
-                cursor: pointer;
-                width: 50%;
-                color: #fff;
-                font-weight: normal;
-                background: $brown;
-                position: absolute;
-                top: -40px;
-                left: 0;
-                box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset;
-
-                a {
-                    color: #fff;
-                }
-            }
-
-            .entry-word-count {
-                float: right;
-                position: relative;
-                top: 2px;
-            }
-        }//.floatingheader
-
-        // Give the tab with the .active class the highest z-index
-        &.active {
-            z-index: 200;
-        }
-
-        // Restore the normal height of the .active tab (inactive tab stays small, hidden behind)
-        &.active .markdown,
-        &.active .entry-preview-content {
-            height: auto;
-            overflow: auto;
-            -webkit-overflow-scrolling: touch;
-        }
-
-        // Restore the white bg of the currently .active tab, remove hand cursor from currently active tab
-        &.active header {
-            @media (max-width: 1000px) {
-                border-top: $lightbrown 1px solid;
-                cursor: auto;
-                color: $brown;
-                background: #fff;
-                box-shadow: none;
-
-                a {
-                    color: $brown;
-                }
-            }
-        }
-    }//.entry-markdown, .entry-preview
-
-}
-
-
-//
-// Editor
-// --------------------------------------------------
-
-.editor {
-    .entry-markdown-content {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-
-    .markdown-editor {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        height: 100%;
-        max-width: 100%;
-
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        resize: none;
-        border: 0;
-
-        font-size: 1.6rem;
-        line-height: 2.5rem;
-        font-family: $font-family-mono;
-        color: lighten($darkgrey, 10%);
-
-        &:focus {
-            outline: 0;
-        }
-
-        @media (max-width: 450px) {
-            padding: 15px;
-        }
-
-        @media (min-width: 451px) and (max-width: 1000px) {
-            padding: 20px;
-        }
-
-        @media (min-width: 1001px) {
-            padding: 62px 20px 36px 20px;
-        }
-    }
-
-    .entry-preview {
-        // Align the tab of entry-preview on the right
-        .floatingheader {
-            @media (max-width: 1000px) {
-                right: 0;
-                left: auto;
-                border-right: none;
-            }
-        }
-    }
-
-    .entry-preview-content {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        padding: 60px 40px 37px 40px;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-        word-break: break-word;
-        hyphens: auto;
-        user-select: none;
-        cursor: default;
-
-        @media (max-width: 400px) {
-            padding: 15px;
-        }
-
-        @media (max-width: 1000px) {
-            padding-top: 20px;
-        }
-    }
-
-    // Special case, when scrolling, add shadows to content headers.
-    @media (max-width: 1000px) {
-        .scrolling {
-            .floatingheader {
-                box-shadow: none;
-
-                &:before,
-                &:after {
-                    display: none;
-                }
-            }
-        }
-        .entry-preview-content {
-            @media (max-width: 1000px) {
-                box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05) inset;
-
-            }
-        }
-    }
-}//.editor
-
-
-
-//
-// Firefox Editor Hacks
-// --------------------------------------------------
-@-moz-document url-prefix() {
-    .editor .markdown-editor {
-        padding-top: 0;
-        padding-bottom: 0;
-        top: 40px;
-        height: calc(100% - 40px);
-    }
-}
-
-
-
-//
-// Markdown Help Icon
-// --------------------------------------------------
-
-.markdown-help {
-    position: relative;
-    top: -3px;
-    right: -5px;
-    @include icon($i-markdown, '16px', lighten($brown, 15%));
-    float: right;
-    padding: 5px;
-
-    &:hover {
-        @include icon($i-markdown, '', $brown);
-    }
-}
-
-
-//
-// Post Preview
-// --------------------------------------------------
-
-// The styles for the actual content inside the preview
-// TODO: These should just be defaults, overridden by editor.hbs in theme dir
-.entry-preview-content,
-.content-preview-content {
-    font-size: 1.8rem;
-    line-height: 1.5em;
-    font-weight: 200;
-
-    a {
-        color: $blue;
-        text-decoration: underline;
-    }
-
-    sup a {
-        text-decoration: none;
-    }
-
-    .btn {
-        text-decoration: none;
-        color: $grey;
-    }
-
-    .img-placeholder {
-        border: 5px dashed $grey;
-        height: 100px;
-        position: relative;
-
-        span {
-            display: block;
-            height: 30px;
-            position: absolute;
-            margin-top: -15px;
-            top: 50%;
-            width: 100%;
-            text-align: center;
-        }
-    }
-
-    a {
-        &.image-edit {
-            width: 16px;
-            height: 16px;
-        }
-    }
-
-    img {
-        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: $font-family;
-    font-weight: bold;
-    font-size: 1.6rem;
-    text-align: center;
-}//.entry-preview-content, .content-preview-content
-
-
-//
-// Zen Mode
-// --------------------------------------------------
-
-body.zen {
-    background: lighten($lightbrown, 3%);
-
-    .usermenu {
-        display: none;
-    }
-
-    .global-nav,
-    .page-header,
-    #publish-bar {
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
-        transition: all 0.5s ease-out;
-    }
-
-    .page-content {
-        top: 0;
-        transition: all 0.5s ease-out;
-    }
-
-    .entry-markdown,
-    .entry-preview {
-        bottom: 0;
-        transition: all 0.5s ease-out;
-    }
-}//body.zen
-
-
-//
-// Publish Bar
-// --------------------------------------------------
-
-#publish-bar {
-    height: 40px;
-    padding: 0;
-    color: $midgrey;
-    background: darken($darkgrey, 4%);
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 900;
-    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
-    transform: translateZ(0);
-
-    @media (max-width: 1000px) {
-        font-weight: normal;
-    }
-
-    .post-settings {
-        &:hover,
-        &.active {
-            color: $lightgrey;
-        }
-    }
-
-    .post-settings-menu {
-        position: absolute;
-        bottom: 41px;
-        right: -3px;
-    }
-
-    .splitbtn {
-        .btn {
-            border-top: rgba(255,255,255,0.3) 1px solid;
-        }
-    }
-}//#publish-bar
-
-.extended-tags { // When the tag bar is expanded
-    position: static;
-    min-height: 100%;
-
-    #entry-tags {
-        &:after {
-            right: 10px;
-        }
-    }
-
-    .tags {
-        width: 281px;
-    }
-
-    .tag-label,
-    .tag-label.touch {
-        color: #fff;
-    }
-
-    .tag-input {
-        width: 100%;
-        margin-top: 5px;
-        padding-top: 5px;
-        padding-left: 10px;
-        border-top: 1px solid $darkgrey;
-
-    }
-    .right {
-        display: none;
-    }
-}//.extended-tags
-
-#entry-tags {
-    input[type="text"].tag-input {
-        display: inline-block;
-        vertical-align: top;
-        color: $lightgrey;
-        font-weight: 300;
-        background: transparent;
-        border: none;
-        width: 100%;
-        line-height: 1;
-        padding: 9px;
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    .tag {
-        @include icon-after($i-x, 10px, #fff) {
-            margin-left: 1px;
-            vertical-align: 10%;
-            text-shadow: rgba(255,255,255,0.15) 0 1px 0;
-        }
-        display: inline;
-        margin-right: 3px;
-        padding: 0 5px;
-        color: $lightgrey;
-        white-space: nowrap;
-        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 {
-            text-decoration: none;
-            color: #fff;
-            background: $blue;
-        }
-
-        mark {
-            color: #fff;
-        }
-    }
-
-    mark {
-        background: none;
-        color: #000;
-        font-weight: bold;
-    }
-}
-
-#entry-actions {
-    display: flex;
-    justify-content: flex-end;
-    align-content: center;
-    align-items: center;
-    margin-right: 6px;
-    position: relative;
-
-    .dropdown {
-        position: absolute;
-        bottom: 49px;
-        right: 0;
-
-        .dropdown-menu {
-            top: auto;
-            left: auto;
-            right: 100%;
-            bottom: 100%;
-        }
-    }
-
-    &.unsaved {
-        padding-bottom: 0;
-
-        .delete {
-            display: none;
-        }
-    }
-}//#entry-actions
-
-#entry-actions-menu {
-    position: absolute;
-    bottom: 50px;
-    right: -5px;
-}
-
-.tags-wrapper {
-    white-space: nowrap;
-
-    span {
-        display: inline-block;
-        margin-right: 10px;
-    }
-}
-
-.tag-label {
-    display: block;
-    width: 40px;
-    height: 40px;
-    position: relative;
-
-    &:before {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translateX(-50%) translateY(-50%);
-        font-size: 1.3rem;
-        color: #7D878A;
-        transition: color 0.15s linear;
-    }
-
-    &:hover:before {
-        color: #fff;
-    }
-}
-
-#entry-tags.focused {
-    .tag-label:before {
-        color: #fff;
-    }
-}
-
-.publish-bar-inner {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: space-between;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-}
-
-.publish-bar-tags-icon {
-    flex: 0 1 auto;
-    align-self: auto;
-    min-width: 40px;
-    max-width: 40px;
-}
-
-.publish-bar-tags {
-    flex: 0 1 auto;
-    align-self: auto;
-    margin-right: 10px;
-    height: 40px;
-    overflow-y: hidden;
-
-    .tags-wrapper {
-        white-space: nowrap;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-        padding-top: 8px;
-        padding-bottom: 9px;
-        height: 70px;
-    }
-}
-
-.publish-bar-tags-input {
-    flex: 1 1 auto;
-    align-self: auto;
-    position: relative;
-}
-
-.publish-bar-actions {
-    display: flex;
-    flex: 1 0 auto;
-    align-self: auto;
-    text-align: right;
-}
-
-.post-settings {
-    @include icon($i-settings, 14px);
-    display: inline-block;
-    padding: 8px 10px;
-    color: $midgrey;
-    transition: all 0.15s ease-out 0s;
-    position: relative;
-
-    &:hover,
-    &.active {
-        color: $darkgrey;
-    }
-}//.post-settings
-
-.post-settings-menu {
-    .dropdown-menu {
-        top: auto;
-        bottom: 100%;
-        left: auto;
-        right: 100%;
-    }
-}//.post-settings-menu
-
-.post-view-link {
-    position: absolute;
-    top: 1px;
-    right: 0;
-    font-size: 1.3rem;
-
-    i {
-        font-size: 10px;
-    }
-}
-
-
-//
-// Post Settings Menu meta Data
-// --------------------------------------------------
-
-// These styles are copied from Google.com
-.seo-preview {
-    font-family: Arial, sans-serif;
-}
-
-.seo-preview-title {
-    font-size: 1.8rem;
-    line-height: 2.16rem;
-    color: #1E0FBE;
-    text-overflow: ellipses;
-    -webkit-text-overflow: ellipsis;
-    word-wrap: break-word;
-}
-
-.seo-preview-link {
-    margin: 1px 0 2px 0;
-    font-size: 1.3rem;
-    line-height: 1.6rem;
-    color: #006621;
-    word-wrap: break-word;
-}
-
-.seo-preview-description {
-    font-size: 1.3rem;
-    line-height: 1.4;
-    color: #545454;
-    word-wrap: break-word;
-}
-
-
-//
-// Markdown Help Modal
-// --------------------------------------------------
-
-.modal-markdown-help-table {
-    margin: 0 0 20px;
-    width: 100%;
-
-    td, th {
-        padding: 8px 0;
-    }
-
-    th {
-        text-align: left;
-    }
-}

core/client/app/styles/layouts/error.css

@@ -1,27 +1,20 @@
-// ------------------------------------------------------------
-// Error Pages
-// Slug: /ghost/404
-//
-// Covers styles for all error screens, eg. 404, 500
-//
-// * Wrappers
-// * Image & error info
-// * Stack Trace
-// ------------------------------------------------------------
-
-
-//
-// Wrappers
-// --------------------------------------------------
+/* Error /ghost/404/
+/* ---------------------------------------------------------- */
 
 .error-content {
-    max-width: 530px;
+    display: table;
     margin: 0 auto;
     padding: 0;
-    display: table;
+    max-width: 530px;
     height: 100%;
+}
 
-    @media (max-width: 630px) {
+.error-content {
+    user-select: text;
+}
+
+@media (max-width: 630px) {
+    .error-content {
         max-width: 264px;
         text-align: center;
     }
@@ -32,43 +25,42 @@
     vertical-align: middle;
 }
 
-
-//
-// Image & error info
-// --------------------------------------------------
-
 .error-image {
     display: inline-block;
-    vertical-align: middle;
     width: 96px;
     height: 150px;
+    vertical-align: middle;
+}
 
-    @media (max-width: 630px) {
+@media (max-width: 630px) {
+    .error-image {
         width: 72px;
         height: 112px;
     }
+}
 
-    img {
-        width: 100%;
-        height: 100%;
-    }
+.error-image img {
+    width: 100%;
+    height: 100%;
 }
 
 .error-message {
     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) {
+@media (max-width: 630px) {
+    .error-code {
         font-size: 5.8em;
     }
 }
@@ -76,46 +68,47 @@
 .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) {
+@media (max-width: 630px) {
+    .error-description {
         font-size: 1.4em;
     }
 }
 
 
-//
-// Stack Trace
-// --------------------------------------------------
+/* Stack trace
+/* ---------------------------------------------------------- */
 
 .error-stack {
     margin: 1em auto;
     padding: 2em;
     max-width: 800px;
-    background-color: rgba(255,255,255,0.3);
+    background-color: rgba(255, 255, 255, 0.3);
 }
 
 .error-stack-list {
-    list-style-type: none;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    list-style-type: none;
 }
 
 .error-stack-list li {
     display: block;
+}
 
-    &:before {
-        color: #BBB;
-        content: "\21AA";
-        display: inline-block;
-        font-size: 1.2em;
-        margin-right: 0.5em;
-    }
+.error-stack-list li:before {
+    content: "\21AA";
+    display: inline-block;
+    margin-right: 0.5em;
+    color: #bbb;
+    font-size: 1.2em;
 }
 
 .error-stack-function {
     font-weight: bold;
-}
+}

core/client/app/styles/layouts/flow.css

@@ -0,0 +1,374 @@
+/* Full screen workflow
+/* ---------------------------------------------------------- */
+
+.gh-flow {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.gh-flow-head {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 4vh;
+    padding-bottom: 20px;
+}
+
+.gh-flow-content-wrap {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 5%;
+    padding-bottom: 8vh;
+}
+
+.gh-flow-back {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0 0 0 3%;
+    padding: 2px 9px 2px 5px;
+    border: transparent 1px solid;
+    border-radius: 4px;
+    color: #7d878a;
+    font-weight: 100;
+    transition: all 0.3s ease;
+}
+
+.gh-flow-back:hover {
+    border: #dae1e3 1px solid;
+}
+
+.gh-flow-nav {
+    position: relative;
+    flex: 1;
+}
+
+.gh-flow-nav ol {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    padding: 0;
+    width: 160px;
+    list-style: none;
+}
+
+.gh-flow-nav li {
+    margin: 0;
+}
+
+.gh-flow-nav .divider {
+    align-self: center;
+    width: 22px;
+    height: 2px;
+    background-image: linear-gradient(to right, var(--green) 33%, rgba(255, 255, 255, 0) 0%);
+    background-position: bottom;
+    background-size: 6px 2px;
+    background-repeat: repeat-x;
+}
+
+.gh-flow-nav .current ~ .divider {
+    background-image: linear-gradient(to right, #e3e3e3 33%, rgba(255, 255, 255, 0) 0%);
+}
+
+.gh-flow-nav .step {
+    display: table-cell;
+    width: 30px;
+    height: 30px;
+    border: transparent 2px solid;
+    background: var(--green);
+    border-radius: 100%;
+    color: #fff;
+    vertical-align: middle;
+    text-align: center;
+    text-align: center;
+    font-size: 1.3rem;
+}
+
+.gh-flow-nav .step .num {
+    display: none;
+}
+
+.gh-flow-nav .current ~ li:not(divider) .step {
+    border: #e3e3e3 2px solid;
+    background: transparent;
+    color: #cdcdcd;
+}
+
+.gh-flow-nav .current ~ li:not(divider) .step .num {
+    display: block;
+}
+
+.gh-flow-nav .current ~ li:not(divider) .step i {
+    display: none;
+}
+
+.gh-flow-nav .current .step {
+    border: var(--green) 2px solid;
+    background: transparent;
+    color: var(--green);
+    font-weight: bold;
+    cursor: default;
+}
+
+.gh-flow-nav .current .step .num {
+    display: block;
+}
+
+.gh-flow-nav .current .step i {
+    display: none;
+}
+
+.gh-flow-nav .done {
+    border: none;
+    background: var(--green);
+    color: #fff;
+}
+
+.gh-flow-content {
+    max-width: 700px;
+    width: 100%;
+    color: var(--midgrey);
+    text-align: center;
+    font-size: 1.9rem;
+    line-height: 1.5em;
+    font-weight: 100;
+}
+
+@media (max-width: 500px) {
+    .gh-flow-content {
+        font-size: 4vw;
+    }
+}
+
+.gh-flow-content header {
+    margin: 0 auto;
+    max-width: 520px;
+}
+
+.gh-flow-content h1 {
+    letter-spacing: -1px;
+    font-size: 4.2rem;
+    font-weight: 100;
+}
+
+@media (max-width: 600px) {
+    .gh-flow-content h1 {
+        font-size: 7vw;
+    }
+}
+
+.gh-flow-content strong {
+    font-weight: 400;
+}
+
+.gh-flow-content em {
+    color: var(--blue);
+    font-weight: 400;
+    font-style: normal;
+}
+
+.gh-flow-content img {
+    max-width: 100%;
+}
+
+.gh-flow-content .gh-flow-screenshot {
+    position: relative;
+    left: -38px;
+}
+
+@media (max-width: 860px) {
+    .gh-flow-content .gh-flow-screenshot {
+        left: 0;
+    }
+}
+
+.gh-flow-content .btn {
+    display: block;
+    margin: 20px auto 0;
+    max-width: 400px;
+}
+
+.gh-flow-content .gh-flow-create {
+    position: relative;
+    margin: 70px auto 30px;
+    padding: 50px 40px 25px;
+    max-width: 400px;
+    border: #dae1e3 1px solid;
+    background: #f8fbfd;
+    border-radius: 5px;
+    text-align: left;
+}
+
+.gh-flow-content .account-image {
+    position: absolute;
+    top: -50px;
+    left: 50%;
+    overflow: hidden;
+    margin: 0;
+    margin-left: -50px;
+    padding: 4px;
+    width: 100px;
+    height: 100px;
+    border: #d1d9db 1px solid;
+    background: #fff;
+    border-radius: 100%;
+    text-align: center;
+}
+
+.gh-flow-content .account-image:hover .edit-account-image {
+    opacity: 1;
+}
+
+.gh-flow-content .edit-account-image {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    bottom: 4px;
+    left: 4px;
+    width: calc(100% - 8px);
+    background: rgba(87, 163, 232, 0.7);
+    border-radius: 100%;
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 3rem;
+    line-height: 90px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.gh-flow-content .img {
+    display: block;
+    width: 90px;
+    height: 90px;
+    background-color: #f8fbfd;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 100%;
+    animation: fade-in 1s;
+}
+
+.gh-flow-content .form-group {
+    margin-bottom: 2.5rem;
+}
+
+.gh-flow-content .form-group label {
+    margin: 0;
+    font-size: 1.4rem;
+    font-weight: 400;
+}
+
+.gh-flow-content .form-group a {
+    text-decoration: underline;
+}
+
+.gh-flow-content input {
+    padding: 10px;
+    border: #dae1e3 1px solid;
+    font-size: 1.6rem;
+    line-height: 1.4em;
+    font-weight: 100;
+}
+
+.gh-flow-content .pw-strength {
+    position: absolute;
+    top: 50%;
+    right: 1px;
+    margin-top: -11px;
+    padding: 0 10px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.gh-flow-content .pw-strength-dot {
+    display: block;
+    margin-top: 2px;
+    width: 3px;
+    height: 3px;
+    background-color: #d9e0e3;
+    border-radius: 100%;
+}
+
+.gh-flow-content .pw-strength-dot:first-child {
+    margin-top: 0;
+}
+
+.gh-flow-content .pw-strength-activedot {
+    background-color: var(--red);
+}
+
+.gh-flow-content .input-icon[class*="icon-"]:before {
+    transform: translateY(-49%);
+}
+
+.gh-flow-content .gh-flow-invite {
+    margin: 0 auto;
+    max-width: 400px;
+    width: 100%;
+    text-align: left;
+}
+
+@media (max-width: 460px) {
+    .gh-flow-content .gh-flow-invite label i {
+        display: none;
+    }
+}
+
+.gh-flow-content .gh-flow-faces {
+    margin-bottom: 3vw;
+}
+
+.gh-flow-content textarea {
+    margin-bottom: 40px;
+    width: 100%;
+    height: 160px;
+    font-size: 1.6rem;
+    font-weight: 100;
+}
+
+@media (max-width: 1200px) {
+    .gh-flow-content textarea {
+        margin-bottom: 3vw;
+    }
+}
+
+.gh-flow-content .response {
+    position: absolute;
+    right: 0;
+    bottom: -25px;
+    margin: 0;
+    color: #a6b0b3;
+    text-align: right;
+    font-size: 1.2rem;
+}
+
+.gh-flow-content .success .input-icon:before {
+    color: var(--green);
+}
+
+.error,
+.error-content,
+.main-error {
+    user-select: text;
+}
+
+.gh-flow-content .error input {
+    border-color: var(--red);
+}
+
+.gh-flow-content .error .input-icon:before {
+    color: var(--red);
+}
+
+.gh-flow-content .error .response {
+    color: var(--red);
+}
+
+.gh-flow-content .main-error {
+    margin-top: 5px;
+    color: var(--red);
+    font-size: 1.3rem;
+}

core/client/app/styles/layouts/main.css

@@ -0,0 +1,374 @@
+/* Global Layout
+/* ---------------------------------------------------------- */
+
+/* Main viewport, contains main content, and alerts */
+.gh-app {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100vh;
+}
+
+/* Content viewport, contains everything else */
+.gh-viewport {
+    flex-grow: 1;
+    display: flex;
+}
+
+.gh-main {
+    position: relative;
+    flex-grow: 1;
+    display: flex;
+}
+
+
+/* Global Nav
+/* ---------------------------------------------------------- */
+
+.gh-nav {
+    position: relative;
+    z-index: 1000;
+    flex: 0 0 235px;
+    display: flex;
+    flex-direction: column;
+    border-right: #e1e1e1 1px solid;
+    background: #f6f6f6;
+    transform: translateX(0);
+}
+
+.gh-nav-menu {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding: 15px;
+}
+
+.gh-nav-menu i {
+    margin-right: 8px;
+    width: 11px;
+    height: 11px;
+    font-size: 11px;
+    line-height: 11px;
+}
+
+.gh-nav-menu:hover {
+    cursor: pointer;
+}
+
+.gh-nav-menu-icon {
+    flex-shrink: 0;
+    margin-right: 10px;
+    width: 34px;
+    height: 34px;
+    background-color: #222;
+    background-size: 34px;
+    border-radius: 4px;
+}
+
+.gh-nav-menu-details {
+    flex-grow: 1;
+    padding-right: 10px;
+}
+
+.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;
+}
+
+.gh-nav-menu-details-user {
+    overflow: hidden;
+    color: var(--midgrey);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1.2rem;
+    line-height: 1.2em;
+}
+
+.gh-nav-body {
+    flex-grow: 1;
+    overflow-y: auto;
+}
+
+.gh-nav-search {
+    position: relative;
+    margin: 0 15px 10px;
+}
+
+.gh-nav-search-input {
+    padding: 5px 8px;
+    border-radius: 4px;
+    font-size: 1.3rem;
+}
+
+.gh-nav-search-button {
+    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;
+    color: var(--midgrey);
+    font-size: 13px;
+    transition: color 0.2s ease;
+    transform: rotate(90deg);
+}
+
+.gh-nav-search-button:hover i {
+    color: var(--darkgrey);
+}
+
+.gh-nav-list {
+    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;
+    color: #828282;
+    text-transform: uppercase;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: 1px;
+    font-size: 1.2rem;
+    line-height: 1.1em;
+}
+
+.gh-nav-list a {
+    display: flex;
+    align-items: center;
+    padding: 5px 10px 5px 15px;
+    border-radius: 0 4px 4px 0;
+    color: var(--darkgrey);
+    transition: none;
+}
+
+.gh-nav-list .active {
+    background: color(var(--blue) lightness(+10%));
+    color: #fff;
+}
+
+.gh-nav-list a:not(.active):hover {
+    background: color(var(--blue) alpha(-85%));
+    color: var(--darkgrey);
+}
+
+.gh-nav-list i {
+    margin-right: 8px;
+    width: 15px;
+    height: 15px;
+    text-align: center;
+    font-size: 15px;
+}
+
+.gh-nav-footer {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    border-top: #e1e1e1 1px solid;
+    color: var(--midgrey);
+}
+
+.gh-nav-footer-sitelink {
+    flex-grow: 1;
+    padding: 12px;
+    color: var(--midgrey);
+    text-align: center;
+    font-size: 1.3rem;
+    line-height: 1;
+    font-weight: 200;
+}
+
+.gh-nav-footer-sitelink i {
+    margin-left: 5px;
+    font-size: 1rem;
+}
+
+.gh-nav-footer-sitelink:hover {
+    color: var(--blue);
+}
+
+
+/* Auto Nav - Opens and closes like OSX dock
+/* ---------------------------------------------------------- */
+
+.gh-autonav-toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 10px;
+    width: 45px;
+    height: 27px;
+    border-right: #e1e1e1 1px solid;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.gh-autonav-toggle:hover {
+    cursor: pointer;
+}
+
+.gh-autonav-toggle i {
+    transition: all 0.2s ease;
+}
+
+.gh-autonav-toggle:hover i {
+    color: var(--blue);
+}
+
+/* Hide the nav */
+.gh-autonav .gh-nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 235px;
+    height: 100%;
+    transition: transform 0.20s;
+    /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
+    transform: translate3d(-220px,0,0);
+}
+
+/* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
+@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+    .gh-autonav .gh-nav {
+        background: rgba(246,246,246, 0.7);
+
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+    }
+}
+
+/* Bring it back on hover */
+.gh-autonav .gh-nav.open {
+    transition: transform 0.15s;
+    transform: translate3d(0,0,0);
+}
+
+/* Move main content over for the closed-nav trigger bar */
+.gh-autonav .gh-main {
+    margin-left: 15px;
+}
+
+
+/* Help (?) Menu
+/* ---------------------------------------------------------- */
+
+.gh-help-menu {
+    display: flex;
+    align-items: center;
+    padding: 5px 10px;
+    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;
+    transition: all 0.5s;
+}
+
+.gh-help-menu:hover .gh-help-button {
+    color: var(--blue);
+    transition: all 0.3s;
+}
+
+.gh-help-menu .dropdown {
+    right: 112px;
+    bottom: 215px;
+}
+
+.gh-help-menu .dropdown .dropdown-menu {
+    min-width: 200px;
+}
+
+.gh-help-menu .dropdown.fade-in-scale {
+    animation-duration: 0.1s;
+}
+
+.gh-help-menu .dropdown.fade-out {
+    animation-duration: 0.01s;
+}
+
+
+/* Container for App View
+/* ---------------------------------------------------------- */
+
+.gh-view {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.view-header {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    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;
+}
+
+.view-title a {
+    color: inherit;
+}
+
+.view-title a:hover {
+    color: var(--blue);
+}
+
+.view-title i {
+    margin: 0 10px;
+    color: #818181;
+    font-size: 1.4rem;
+}
+
+.view-container,
+.view-content {
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.view-content {
+    padding: 20px;
+}
+
+.view-content p,
+.view-content p * {
+    user-select: text;
+}

core/client/app/styles/layouts/settings.css

@@ -0,0 +1,178 @@
+/* Settings
+/* ---------------------------------------------------------- */
+
+
+/* Navigation
+/* ---------------------------------------------------------- */
+
+.navigation-item {
+    display: flex;
+}
+
+@media (max-width: 600px) {
+    .navigation-item {
+        position: relative;
+        margin-bottom: 20px;
+    }
+}
+
+@media (min-width: 601px) {
+    .navigation-item {
+        margin-bottom: 10px;
+    }
+}
+
+.navigation-item:last-child {
+    padding-left: 17px;
+    /* simulate .navigation-item-drag-handle width + horizontal padding */
+}
+
+.navigation-item:last-child .navigation-item-drag-handle {
+    display: none;
+}
+
+.navigation-item-drag-handle {
+    padding: 6px 17px 0 0;
+    width: 17px;
+    cursor: move;
+}
+
+@media (max-width: 600px) {
+    .navigation-item-drag-handle:before {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        z-index: 20;
+        margin-top: -9px;
+    }
+}
+
+.navigation-inputs {
+    width: 100%;
+}
+
+.navigation-item-url .fake-placeholder {
+    color: lightgrey;
+}
+
+@media (max-width: 600px) {
+    .navigation-item-label {
+        margin-bottom: 5px;
+    }
+    .navigation-item-label,
+    .navigation-item-url {
+        display: block;
+        width: 100%;
+    }
+}
+
+@media (min-width: 601px) {
+    .navigation-inputs {
+        display: flex;
+    }
+    .navigation-item-label {
+        flex-grow: 1;
+        margin-right: 10px;
+    }
+    .navigation-item-url {
+        flex-grow: 3;
+    }
+}
+
+.navigation-item-action {
+    position: relative;
+    z-index: 10;
+    padding-left: 10px;
+    width: 40px;
+}
+
+.navigation-item-action button {
+    position: absolute;
+    top: 50%;
+    margin-top: -2px;
+    width: 30px;
+    height: 30px;
+    transform: translateY(-50%);
+}
+
+.navigation-item-action .icon-trash:before {
+    color: var(--midbrown);
+    font-size: 16px;
+    transition: color 0.1s linear;
+}
+
+.navigation-item-action .icon-trash:hover:before {
+    color: var(--red);
+}
+
+.navigation-item-action .icon-add:before {
+    padding: 3px;
+    background: var(--green);
+    border-radius: 2px;
+    color: #fff;
+    font-size: 12px;
+    transition: background 0.1s linear;
+}
+
+.navigation-item-action .icon-add:hover:before {
+    background: color(var(--green) lightness(-10%));
+}
+
+
+/* Code Injection
+/* ---------------------------------------------------------- */
+
+.settings-code {
+    max-width: 700px;
+}
+
+.settings-code p {
+    margin: 0 0 4px 0;
+}
+
+.settings-code code {
+    vertical-align: middle;
+}
+
+.settings-code-editor {
+    padding: 0;
+    min-width: 250px;
+    min-height: 300px;
+    max-width: 680px;
+    width: 100%;
+    height: auto;
+    border: 1px solid #e0dfd7;
+    border-radius: var(--border-radius);
+    line-height: 22px;
+    transition: border-color 0.15s linear;
+
+    -webkit-appearance: none;
+}
+
+.settings-code-editor.focused {
+    outline: 0;
+    border-color: var(--brown);
+}
+
+.settings-code-editor .CodeMirror {
+    border-radius: inherit;
+}
+
+.settings-code-editor .cm-s-xq-light span.cm-meta {
+    color: #000;
+}
+
+
+
+/* Labs
+/* ---------------------------------------------------------- */
+
+#startupload {
+    line-height: inherit;
+}
+
+@media (max-width: 400px) {
+    #startupload {
+        margin-top: 5px;
+    }
+}

core/client/app/styles/layouts/settings.scss

@@ -1,568 +0,0 @@
-// ------------------------------------------------------------
-// Settings
-// Slug: /ghost/settings/[many]
-//
-// Styles for the content management page, which is where
-// the posts are listed.
-//
-// * Settings Navigation
-// * Content
-// * Headers
-// * Custom Permalinks
-// * Navigation
-// * Code Injection
-// * Labs
-// ------------------------------------------------------------
-
-
-//
-// Settings Navigation
-// --------------------------------------------------
-
-.settings-nav {
-    width: 25%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 700;
-    background: #fff;
-    box-shadow: $lightbrown 1px 0 0;
-
-    @media (max-width: 900px) {
-        width: 100%;
-        top: 0;
-    }
-
-    ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        border-top: none;
-        @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;
-        }
-
-        // The icon
-        &:before {
-            position: absolute;
-            top: 50%;
-            left: 30px;
-            transform: translateY(-50%);
-            transition: color 0.1s;
-            color: $brown;
-
-            @media (max-width: 900px) {
-                left: 15px;
-            }
-        }
-
-        &:hover:before {
-            color: $darkgrey;
-        }
-
-        a {
-            display: block;
-            border-bottom: $lightbrown 1px solid;
-            padding: 15px 15px 15px 60px;
-            border-bottom: none;
-            color: $brown;
-
-            @media (max-width: 900px) {
-                padding-left: 45px;
-                @include icon-after($i-chevron) {
-                    float: right;
-                    margin-top: 5px;
-                }
-            }
-
-            &:hover,
-            &:focus {
-                color: $darkgrey;
-                background: $lightbrown;
-                text-decoration: none;
-            }
-
-            // Make space for icons
-            &:before {
-                margin-right: 20px;
-
-                @media (max-width: 900px) {
-                    margin-right: 15px;
-                }
-            }
-        }//a
-
-        &.active {
-            @media (min-width: 900px) {
-                margin-right: 0;
-                position: relative;
-                z-index: 300;
-                border-top: #edece4 1px solid;
-                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
-
-        &:first-of-type {
-            border-top: none;
-        }
-    }//li
-}//.settings-nav
-
-// Special cases for nav items
-.settings-nav-labs .icon-labs:before {
-    font-size: 16px;
-}
-
-
-//
-// Content
-// --------------------------------------------------
-// The main content panel on the right
-
-.settings-content {
-    @media (max-width: 900px) {
-        &.fade-in {
-            animation: none;
-        }
-    }
-
-    @media (min-width: 901px) {
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 25%;
-        bottom: 0;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .settings-general img {
-        max-width: 100%;
-        max-height: 400px;
-        display: block;
-    }
-
-    .blog-logo,
-    .blog-cover {
-        cursor: pointer;
-    }
-
-    .content {
-        padding: 0 40px;
-
-        @media (max-width: 900px) {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            padding: 15px;
-            overflow-x: hidden;
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
-        }
-
-
-    }//.content
-
-    .word-count {
-        float: right;
-        font-weight: bold;
-    }
-}//.settings-content
-
-
-//
-// Headers
-// --------------------------------------------------
-// This is the header for /ghost/settings/view/
-// 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;
-    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;
-    }
-
-    @media (min-width: 900px) {
-        position: static;
-        height: auto;
-        padding: 30px 40px;
-        line-height: 1.15em;
-        background: none;
-
-        .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;
-        }
-    }//@media (min-width: 900px)
-}//.settings-view-header, .settings-subview-header
-
-
-.settings-view-header {
-    @media (min-width: 900px) {
-        text-align: left;
-
-        .btn-back {
-            display: none;
-            vertical-align: middle;
-            color: #666;
-        }
-    }
-}
-
-.settings-subview-header {
-    @media (min-width: 900px) {
-        .btn-back {
-            position: static;
-            float:left;
-            color: #666;
-        }
-    }
-}
-
-
-//
-// Custom Permalinks
-// --------------------------------------------------
-
-.permalink-input-wrapper {
-    position: relative;
-    outline: 0; // Kills the blue outline we get by adding tabindex="0"
-    padding: 2px 0 2px 6px;
-
-    &:focus,
-    &.focus {
-        border-color: $brown;
-
-        // The button-looking thing that opens a popover
-        .permalink-help {
-            border-color: $brown;
-        }
-    }
-
-    // A div that _looks_ like an input, but is a div
-    .permalink-fake-input {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        margin-right: 40px;
-    }
-
-    .permalink-domain {
-        margin: 5px -1px 3px 0;
-        color: #7E878B;
-    }
-
-    .permalink-parameter {
-        position: relative;
-        padding: 3px 6px 4px;
-        margin: 4px 0 4px 9px;
-        max-height: 18px;
-
-        // Change default label styles
-        background: #E3EDF2;
-        box-shadow: inset 0px 0px 0px 1px #CDD5D9;
-        color: #7E878B;
-
-        // The slash before each parameter (using :after)
-        // Using `:before` does funky stuff here in Safari
-        &:after {
-            content: "/";
-            position: absolute;
-            top: 2px;
-            left: -7px;
-            font-size: 1.4rem;
-            color: #7E878B;
-        }
-    }
-
-    // The actual input, which resets some styles inherited from the global input style
-    .permalink-input {
-        flex: 1 0;
-        margin: 0;
-        padding: 0 4px;
-        margin-right: -4px;
-        background: transparent;
-        min-width: 60px;
-        border: 0;
-    }
-
-    // Shove the popover button and its container over to the right
-    .popover,
-    .permalink-help {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 36px;
-    }
-
-    // Simple styles for the popover button-looking thing
-    .permalink-help {
-        border-left: 1px solid #E0DFD7;
-        transition: border-color 0.15s linear;
-
-        &:before {
-            color: #E0DFD7;
-            transition: color 0.15s linear;
-        }
-
-        &:hover:before {
-            color: $brown;
-        }
-    }
-
-    // Shift the popover (than opens over the top of everything) to the left a bit
-    .popover-item {
-        margin-left: -5px;
-        min-width: 320px;
-    }
-}//.permalink-input-wrapper
-
-
-//
-// Navigation
-// --------------------------------------------------
-
-.settings-navigation {}
-
-.navigation-item {
-    display: flex;
-
-    @media (max-width: 600px) {
-        position: relative;
-        margin-bottom: 20px;
-    }
-    @media (min-width: 601px) {
-        margin-bottom: 10px;
-    }
-
-    // &.last-navigation-item {
-    &:last-child {
-        padding-left: 17px; // simulate .navigation-item-drag-handle width + horizontal padding
-
-        .navigation-item-drag-handle {
-            display: none;
-        }
-    }
-}
-
-.navigation-item-drag-handle {
-    padding: 6px 17px 0 0;
-    width: 17px;
-    cursor: move;
-
-    @media (max-width: 600px) {
-        &:before {
-            position: absolute;
-            top: 50%;
-            left: 0;
-            margin-top: -9px;
-            z-index: 20;
-        }
-    }
-}
-
-.navigation-inputs {
-    width: 100%;
-}
-
-.navigation-item-url {
-    .fake-placeholder {
-        color: lightgrey
-    }
-}
-
-@media (max-width: 600px) {
-    .navigation-item-label {
-        margin-bottom: 5px;
-    }
-
-    .navigation-item-label,
-    .navigation-item-url {
-        display: block;
-        width: 100%;
-    }
-}
-
-@media (min-width: 601px) {
-    .navigation-inputs {
-        display: flex;
-    }
-
-    .navigation-item-label {
-        flex-grow: 1;
-        margin-right: 10px;
-    }
-
-    .navigation-item-url {
-        flex-grow: 3;
-    }
-}
-
-.navigation-item-action {
-    padding-left: 10px;
-    width: 40px;
-    position: relative;
-    z-index: 10;
-
-    button {
-        width: 30px;
-        height: 30px;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        margin-top: -2px;
-    }
-
-    .icon-trash {
-        &:before {
-            color: $midbrown;
-            font-size: 16px;
-            transition: color 0.1s linear;
-        }
-
-        &:hover:before {
-            color: $red;
-        }
-    }
-
-    .icon-add {
-        &:before {
-            background: $green;
-            color: #fff;
-            font-size: 12px;
-            padding: 3px;
-            border-radius: 2px;
-            transition: background 0.1s linear;
-        }
-
-        &:hover:before {
-            background: darken($green, 10%);
-        }
-    }
-}
-
-//
-// Code Injection
-// --------------------------------------------------
-
-.settings-code {
-    .form-group {
-        max-width: 700px;
-
-        p {
-            margin: 0 0 4px 0;
-        }
-    }
-    code {
-        vertical-align: middle;
-    }
-}
-
-.settings-code-editor {
-    width: 100%;
-    min-width: 250px;
-    max-width: 680px;
-    height: auto;
-    border: 1px solid #E0DFD7;
-    border-radius: $border-radius;
-    -webkit-appearance: none;
-    min-height: 300px;
-    transition: border-color 0.15s linear;
-    line-height: 22px;
-
-    &.focused {
-        border-color: $brown;
-        outline: 0;
-    }
-
-    .CodeMirror {
-        border-radius: inherit; // Inherits from .settings-code-editor
-    }
-
-    // Overwrite bright yellow text
-    .cm-s-xq-light span.cm-meta {
-        color: #000;
-    }
-}
-
-//
-// Labs
-// --------------------------------------------------
-
-#startupload {
-    line-height: inherit;
-    
-    @media (max-width: 400px) {
-        margin-top: 5px;
-    }
-}

core/client/app/styles/layouts/setup.scss

@@ -1,150 +0,0 @@
-// ------------------------------------------------------------
-// Setup
-//
-// Styles for the Tag Management screen
-// Slug: /ghost/setup/
-//
-// * Page
-// * Wrapper
-// * Form
-// ------------------------------------------------------------
-
-
-//
-// Page
-// --------------------------------------------------
-// Applied to the <body> element
-
-.ghost-setup {
-    color: $midgrey;
-    background: $darkgrey;
-
-    @media (max-width: 550px) {
-        background: darken($darkgrey, 5%);
-    }
-
-    main {
-        padding-top: 15px;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        @media (max-width: 550px) {
-            top: 0;
-        }
-    }
-}
-
-
-//
-// Wrapper
-// --------------------------------------------------
-// Centered in the middle of the screen
-
-.setup-box {
-    display: table;
-    max-width: 500px;
-    height: 90%;
-    margin: 0 auto;
-    padding: 0;
-}
-
-
-//
-// Form
-// --------------------------------------------------
-
-.setup-form {
-    max-width: 530px;
-    padding: 40px;
-    color: lighten($midgrey, 15%);
-    border-radius: 2px;
-
-    @media (max-width: 400px) {
-        padding: 15px;
-    }
-
-    @media (min-width: 551px) {
-        background: darken($darkgrey, 5%);
-    }
-
-    header {
-        margin-bottom: 30px;
-    }
-
-    label {
-        color: $lightgrey;
-        font-weight: 300;
-
-        @media (max-width: 550px) {
-            width: 100%;
-        }
-    }
-
-    .form-group input {
-        padding: 7px;
-        border: none;
-        color: #fff;
-        background: lighten($darkgrey, 10%);
-        transition: background 0.25s ease;
-
-        &:focus {
-            border:none;
-            background: lighten($darkgrey, 15%);
-        }
-    }
-
-    // Chrome auto-fill style
-    input:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important;
-    }
-
-    h1 {
-        margin: 0;
-        font-weight: 200;
-        font-size: 26px;
-        letter-spacing: 0;
-        color: $lightgrey;
-
-        @media (max-width: 400px) {
-            font-size: 18px;
-        }
-
-        @media (max-width: 550px) {
-            font-size: 20px;
-        }
-    }
-
-    h2 {
-        margin: 6px 0 0 0;
-        padding: 0;
-        border: none;
-        font-weight: 200;
-        font-size: 16px;
-        letter-spacing: 0;
-        color: $midgrey;
-
-        @media (max-width: 400px) {
-            font-size: 12px;
-        }
-
-        @media (max-width: 550px) {
-            font-size: 14px;
-        }
-    }
-
-    p {
-        font-size: 12px;
-        line-height: 1.4em;
-        color: $midgrey;
-    }
-
-    footer {
-        margin: 30px 0 5px 0;
-    }
-
-    .btn-green {
-        width: 100%;
-        padding: 0.9em 1.8em;
-        font-size: 13px;
-    }
-}//.setup-form

core/client/app/styles/layouts/tags.css

@@ -0,0 +1,122 @@
+/* Tag Management /ghost/settings/tags/
+/* ---------------------------------------------------------- */
+
+
+/* Search
+/* ---------------------------------------------------------- */
+
+.tags-search {
+    position: relative;
+    display: inline-block;
+    margin-left: 7px;
+}
+
+.tags-search .btn {
+    position: relative;
+    padding-right: 10px;
+    padding-left: 10px;
+    transition: padding 0.3s ease-in-out;
+}
+
+.tags-search .btn.active {
+    box-shadow: none;
+}
+
+.tags-search .btn .icon-search:before {
+    font-size: 1.3rem;
+}
+
+.tags-search .tags-search-input {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    margin: 0;
+    padding: 7px 10px;
+    width: 0;
+    border: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+    pointer-events: none;
+}
+
+@media (max-width: 400px) {
+    .tags-search.opened .btn {
+        padding-left: 120px;
+    }
+    .tags-search.opened .tags-search-input {
+        width: 110px;
+    }
+}
+
+@media (min-width: 401px) {
+    .tags-search.opened .btn {
+        padding-left: 140px;
+    }
+    .tags-search.opened .tags-search-input {
+        width: 130px;
+    }
+}
+
+.tags-search.opened .tags-search-input {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+
+/* Tag
+/* ---------------------------------------------------------- */
+
+.settings-tag {
+    position: relative;
+    display: block;
+    padding: 0 45px 0 0;
+    border-bottom: 1px solid #e1e1e1;
+}
+
+.settings-tag .tag-edit-button {
+    padding: 20px;
+    width: calc(100% + 45px);
+    text-align: left;
+}
+
+.settings-tag .tag-edit-button:hover,
+.settings-tag .tag-edit-button:focus,
+.settings-tag .tag-edit-button:active {
+    background: color(#e1e1e1 lightness(+10%));
+}
+
+.settings-tag:last-of-type:hover .tag-edit-button {
+    box-shadow: inset 0 -1px 0 #e1e1e1;
+}
+
+.settings-tag .label {
+    position: relative;
+    top: -2px;
+    margin-left: 2px;
+}
+
+.settings-tag .label-alt {
+    text-transform: uppercase;
+}
+
+.settings-tag .tag-title {
+    color: var(--darkgrey);
+    font-size: 16px;
+    font-weight: normal;
+}
+
+.settings-tag .tag-description {
+    margin: 0;
+    color: var(--midbrown);
+    font-size: 13px;
+}
+
+.settings-tag .tags-count {
+    position: absolute;
+    top: 20px;
+    right: 12px;
+    color: var(--midbrown);
+    font-size: 16px;
+}

core/client/app/styles/layouts/tags.scss

@@ -1,136 +0,0 @@
-// ------------------------------------------------------------
-// Tag Management
-//
-// Styles for the Tag Management screen
-// Slug: /ghost/settings/tags/
-//
-// * Tags search
-// * Tag Item
-// ------------------------------------------------------------
-
-
-//
-// Tags search
-// --------------------------------------------------
-
-.tags-search {
-    position: relative;
-    display: inline-block;
-    margin-left: 7px;
-
-    .btn {
-        position: relative;
-        padding-left: 10px;
-        padding-right: 10px;
-        transition: padding 0.3s ease-in-out;
-
-        &.active {
-            box-shadow: none;
-        }
-
-        .icon-search:before {
-            font-size: 1.3rem;
-        }
-    }
-
-    .tags-search-input {
-        position: absolute;
-        top: 1px;
-        left: 1px;
-        width: 0;
-        margin: 0;
-        padding: 7px 10px;
-        border: 0;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        transition: all 0.3s ease-in-out;
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    &.opened {
-        @media (max-width: 400px) {
-            .btn {
-                padding-left: 120px;
-            }
-
-            .tags-search-input {
-                width: 110px;
-            }
-        }
-
-        @media (min-width: 401px) {
-            .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;
-    display: block;
-    border-top: 1px solid $lightbrown;
-
-    .tag-edit-button {
-        width: calc(100% + 45px);
-        padding: 20px 15px;
-        text-align: left;
-
-        &:hover,
-        &:focus,
-        &:active {
-            background: lighten($lightbrown, 5%);
-        }
-    }
-
-    &:last-of-type:hover .tag-edit-button {
-        box-shadow: inset 0px -1px 0px $lightbrown;
-    }
-
-    // Permalink/labels
-    .label {
-        margin-left: 2px;
-        position: relative;
-        top: -2px;
-    }
-
-    .label-alt {
-        text-transform: uppercase;
-    }
-
-    .tag-title {
-        font-size: 16px;
-        color: $darkgrey;
-        font-weight: normal;
-    }
-
-    .tag-description {
-        margin: 0;
-        font-size: 13px;
-        color: $midbrown;
-    }
-
-    .tags-count {
-        position: absolute;
-        top: 20px;
-        right: 12px;
-        font-size: 16px;
-        color: $midbrown;
-    }
-}//.settings-tag

core/client/app/styles/layouts/user.css

@@ -0,0 +1,239 @@
+/* User profile /ghost/settings/users/<user>/
+/* ---------------------------------------------------------- */
+
+
+/* User actions menu
+/* ---------------------------------------------------------- */
+
+.user-actions-cog {
+    margin-right: 10px;
+    padding: 9px 11px;
+}
+
+.user-actions-menu {
+    top: calc(100% + 17px);
+    right: 0;
+    left: auto;
+}
+
+.user-actions-menu.fade-out {
+    animation-duration: 0.01s;
+}
+
+
+/* Layout
+/* ---------------------------------------------------------- */
+
+.content.settings-user {
+    padding: 0;
+}
+
+@media (min-width: 901px) {
+    .content.settings-user {
+        padding: 0 40px;
+    }
+}
+
+.user-cover {
+    position: relative;
+    overflow: hidden;
+    margin: 0;
+    width: auto;
+    height: 300px;
+    background: #fafafa no-repeat center center;
+    background-size: cover;
+}
+
+@media (max-width: 900px) {
+    .user-cover {
+        margin: 0;
+    }
+}
+
+.user-cover:after {
+    /* Gradient overlay */
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 110px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.18));
+}
+
+.user-cover-edit {
+    position: absolute;
+    right: 35px;
+    bottom: 29px;
+    z-index: 2;
+    min-height: 37px;
+    height: 37px;
+    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;
+}
+
+@media (max-width: 1000px) {
+    .user-cover-edit {
+        right: 15px;
+    }
+}
+
+.user-cover-edit:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+}
+
+
+/* Edit user
+/* ---------------------------------------------------------- */
+
+.first-form-group {
+    max-width: 500px;
+}
+
+@media (min-width: 651px) {
+    .first-form-group {
+        left: 40px;
+        min-width: 285px;
+    }
+}
+
+@media (min-width: 651px) and (max-width: 1000px) {
+    .first-form-group {
+        width: calc(100% - 201px);
+    }
+}
+
+@media (min-width: 1001px) {
+    .first-form-group {
+        width: calc(100% - 181px);
+    }
+}
+
+.user-details-top {
+    position: relative;
+}
+
+@media (max-width: 650px) {
+    .user-details-top {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+@media (min-width: 651px) {
+    .user-details-top {
+        margin-top: -91px;
+        margin-bottom: 0;
+        padding: 0;
+    }
+    .user-details-top p {
+        color: #fff;
+    }
+    .user-details-top label[for="user-name"] {
+        color: transparent;
+    }
+    .user-details-top .user-name {
+        border-color: #fff;
+    }
+}
+
+@media (min-width: 901px) {
+    .user-details-top .user-name {
+        width: calc(100% - 20px);
+    }
+}
+
+.user-profile {
+    position: relative;
+    z-index: 1;
+}
+
+@media (min-width: 651px) {
+    .user-profile {
+        padding-left: 143px;
+    }
+}
+
+@media (max-width: 650px) {
+    .user-profile fieldset {
+        padding: 0 40px;
+    }
+}
+
+@media (max-width: 550px) {
+    .user-profile fieldset {
+        padding: 0 15px;
+    }
+}
+
+.user-profile textarea {
+    min-width: 240px;
+}
+
+
+/* Profile picture
+/* ---------------------------------------------------------- */
+
+.user-image {
+    position: absolute;
+    z-index: 2;
+    display: block;
+    float: left;
+    overflow: hidden;
+    margin-right: 20px;
+    margin-left: -6px;
+    padding: 3px;
+    width: 126px;
+    height: 126px;
+    background: #fff;
+    border-radius: 100%;
+    text-align: center;
+}
+
+@media (min-width: 651px) {
+    .user-image {
+        top: -19px;
+        left: -98px;
+    }
+}
+
+@media (max-width: 650px) {
+    .user-image {
+        top: -159px;
+        left: 21px;
+    }
+}
+
+.user-image .img {
+    display: block;
+    width: 120px;
+    height: 120px;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 100%;
+}
+
+.user-image:hover .edit-user-image {
+    opacity: 1;
+}
+
+.edit-user-image {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    bottom: 3px;
+    left: 3px;
+    width: calc(100% - 6px);
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 100%;
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+    line-height: 120px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}

core/client/app/styles/layouts/user.scss

@@ -1,238 +0,0 @@
-// ------------------------------------------------------------
-// User
-//
-// 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
-// --------------------------------------------------
-
-.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 {
-    padding: 0;
-
-    @media (min-width: 901px) {
-        padding: 0 40px;
-    }
-}
-
-
-//
-// Cover Image
-// --------------------------------------------------
-
-.user-cover {
-    position: relative;
-    width: auto;
-    height: 300px;
-    margin: 0;
-    background: #fafafa no-repeat center center;
-    background-size: cover;
-    overflow: hidden;
-
-    @media (max-width: 900px) {
-        margin: 0;
-    }
-
-    // Gradient overlay
-    &:after {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 110px;
-        background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.18));
-    }
-}
-
-.user-cover-edit {
-    position: absolute;
-    right: 35px;
-    bottom: 29px;
-    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;
-    border-radius: $border-radius;
-    transition: color 0.3s ease, background 0.3s ease;
-
-    @media (max-width: 1000px) {
-        right: 15px;
-    }
-
-    &:hover {
-        color: #fff;
-        background: rgba(0,0,0,0.5);
-    }
-}
-
-
-//
-// Edit User Details
-// --------------------------------------------------
-
-.first-form-group {
-    max-width: 500px;
-
-    @media (min-width: 651px) {
-        min-width: 285px;
-        left: 40px;
-    }
-
-    @media (min-width: 651px) and (max-width: 1000px) {
-        width: calc(100% - 201px);
-    }
-
-    @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;
-        margin-bottom: 0;
-        padding: 0;
-
-        p {
-            color: #fff;
-        }
-
-        label[for="user-name"] {
-            color: transparent;
-        }
-
-        .user-name {
-            border-color: #fff;
-        }
-    }
-
-    @media (min-width: 901px) {
-        .user-name {
-            width: calc(100% - 20px);
-        }
-    }
-}//.user-details-top
-
-.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;
-        }
-    }
-
-    textarea {
-        min-width: 240px;
-    }
-}
-
-
-//
-// User Image (Avatar)
-// --------------------------------------------------
-
-.user-image {
-    display: block;
-    position: absolute;
-    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;
-
-    @media (min-width: 651px) {
-        top: -19px;
-        left: -98px;
-    }
-
-    @media (max-width: 650px) {
-        top: -159px;
-        left: 21px;
-    }
-
-    .img {
-        display: block;
-        width: 120px;
-        height: 120px;
-        background-size: cover;
-        background-position: center center;
-        border-radius: 100%;
-    }
-
-    &:hover {
-        .edit-user-image {
-            opacity: 1;
-        }
-    }
-}//.user-image
-
-.edit-user-image {
-    position: absolute;
-    top: 3px;
-    right: 3px;
-    bottom: 3px;
-    left: 3px;
-    border-radius: 100%;
-    width: calc(100% - 6px);
-    background: rgba(0,0,0,0.5);
-    opacity: 0;
-    color: #fff;
-    line-height: 120px;
-    text-transform: uppercase;
-    text-decoration: none;
-    transition: opacity 0.3s ease;
-}

core/client/app/styles/layouts/users.css

@@ -0,0 +1,233 @@
+/* Users /ghost/settings/users/
+/* ---------------------------------------------------------- */
+
+.users-list-wrapper {
+    overflow: auto;
+    height: 100%;
+}
+
+
+/* User list
+/* ---------------------------------------------------------- */
+
+.invited-users {
+    margin-bottom: 34px;
+}
+
+.user-list-title {
+    margin-bottom: 14px;
+    color: var(--midbrown);
+    font-size: 13px;
+    font-weight: normal;
+}
+
+.user-list-item {
+    border-top: 1px solid #e1e1e1;
+}
+
+@media (max-width: 550px) {
+    .user-list-item {
+        display: block;
+        padding: 15px 0;
+    }
+}
+
+@media (min-width: 551px) {
+    .user-list-item {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        padding: 0 15px;
+        height: 68px;
+    }
+}
+
+/* Only apply these styles to anchor tags (pending invited are divs) */
+a.user-list-item {
+    text-decoration: none;
+}
+
+@media (min-width: 601px) {
+    a.user-list-item:hover {
+        background: color(#e1e1e1 lightness(+10%));
+    }
+    a.user-list-item:last-of-type:hover {
+        box-shadow: inset 0 -1px 0 #e1e1e1;
+    }
+}
+
+.user-list-item-icon {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    width: 35px;
+    height: 35px;
+    background: #e1e1e1;
+    border-radius: 100%;
+    color: transparent;
+    font-size: 0;
+}
+
+.user-list-item-icon:before {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    margin-top: -7px;
+    color: var(--brown);
+    text-align: center;
+    font-size: 14px;
+}
+
+.user-list-item-figure {
+    position: relative;
+    display: block;
+    width: 35px;
+    height: 35px;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 35px;
+}
+
+.user-list-item-figure img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
+@media (max-width: 550px) {
+    .user-list-item-icon,
+    .user-list-item-figure {
+        float: left;
+        margin-right: 15px;
+    }
+}
+
+.user-list-item-body {
+    flex: 1 1 auto;
+    align-items: stretch;
+    padding-left: 15px;
+    line-height: 1;
+}
+
+@media (max-width: 550px) {
+    .user-list-item-body {
+        margin-top: 3px;
+    }
+}
+
+.user-list-item-body .name {
+    display: inline-block;
+    color: var(--darkgrey);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.user-list-item-body .description {
+    display: inline-block;
+    margin-top: 3px;
+    color: var(--midbrown);
+    white-space: nowrap;
+    font-size: 12px;
+}
+
+@media (max-width: 550px) {
+    .user-list-item-aside {
+        float: left;
+        margin: 12px 0 0 50px;
+        width: 100%;
+    }
+}
+
+.user-list-item-aside .user-list-action:not(:first-of-type) {
+    margin-left: 20px;
+}
+
+@media (min-width: 551px) {
+    .user-list-item-aside .user-list-action:not(:first-of-type) {
+        margin-left: 50px;
+    }
+}
+
+.user-list-item-aside .role-label {
+    float: left;
+    margin-top: -1px;
+}
+
+.user-list-item-aside .role-label + .role-label {
+    margin-left: 5px;
+}
+
+.user-list-action {
+    text-decoration: underline;
+    text-transform: uppercase;
+    font-size: 11px;
+}
+
+
+/* Role Labels
+/* ---------------------------------------------------------- */
+
+.role-label {
+    display: inline-block;
+    padding: 6px 8px;
+    background: #eee;
+    color: rgba(0, 0, 0, 0.5);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: 9px;
+    line-height: 1;
+    font-weight: 400;
+}
+
+.role-label.owner {
+    background: var(--darkgrey);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.role-label.administrator {
+    background: var(--red);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.role-label.editor {
+    background: var(--blue);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+
+/* User invitation modal
+/* ---------------------------------------------------------- */
+
+.invite-new-user .form-group {
+    margin-bottom: 0;
+    padding: 0;
+}
+
+.invite-new-user .form-group label {
+    position: static;
+    display: block;
+    text-align: left;
+}
+
+.invite-new-user .form-group:nth-of-type(1) {
+    float: left;
+    width: 60%;
+}
+
+.invite-new-user .form-group:nth-of-type(2) {
+    float: left;
+    margin-left: 5%;
+    width: 35%;
+}
+
+.invite-new-user .form-group input {
+    width: 100%;
+}
+
+.invite-new-user .btn-green {
+    width: 100%;
+}

core/client/app/styles/layouts/users.scss

@@ -1,246 +0,0 @@
-// ------------------------------------------------------------
-// Users
-//
-// Styles for the Users list page
-// Slug: /ghost/settings/users/
-//
-// * Container
-// * Users List
-// * Role Labels
-// * User Actions
-// * Invite User Modal
-// ------------------------------------------------------------
-
-
-//
-// Wrapper
-// --------------------------------------------------
-
-.users-list-wrapper {
-    overflow: auto;
-    height: 100%;
-}
-
-
-//
-// Users List
-// --------------------------------------------------
-
-.invited-users {
-    margin-bottom: 34px;
-}
-
-.user-list-title {
-    font-size: 13px;
-    font-weight: normal;
-    color: $midbrown;
-    margin-bottom: 14px;
-}
-
-.user-list-item {
-
-    border-top: 1px solid $lightbrown;
-
-    @media (max-width: 550px) {
-        display: block;
-        padding: 15px 0;
-        @include clearfix;
-    }
-
-    @media (min-width: 551px) {
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        padding: 0 15px;
-        height: 68px;
-    }
-}
-
-// Only apply these styles to anchor tags (pending invited are divs)
-a.user-list-item {
-    text-decoration: none;
-
-    // Hover states only for large viewports
-    @media (min-width: 601px) {
-
-        &:hover {
-            background: lighten($lightbrown, 5%);
-        }
-
-        &:last-of-type:hover {
-            box-shadow: inset 0px -1px 0px $lightbrown;
-        }
-    }
-}
-
-.user-list-item-icon {
-    width: 35px;
-    height: 35px;
-    display: block;
-    border-radius: 100%;
-    background: $lightbrown;
-    font-size: 0px;
-    color: transparent;
-    overflow: hidden;
-    position: relative;
-
-    &:before {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        margin-top: -7px;
-        text-align: center;
-        color: $brown;
-        font-size: 14px;
-    }
-}
-
-.user-list-item-figure {
-    @include circular-image(35px) {
-        display: block;
-    }
-}
-
-.user-list-item-icon,
-.user-list-item-figure {
-
-    @media (max-width: 550px) {
-        float: left;
-        margin-right: 15px;
-    }
-}
-
-.user-list-item-body {
-    flex: 1 1 auto;
-    align-items: stretch;
-    padding-left: 15px;
-    line-height: 1;
-
-    @media (max-width: 550px) {
-        margin-top: 3px;
-    }
-
-    .name {
-        display: inline-block;
-        font-size: 15px;
-        font-weight: 400;
-        color: $darkgrey;
-    }
-
-    .description {
-        display: inline-block;
-        font-size: 12px;
-        color: $midbrown;
-        white-space: nowrap;
-        margin-top: 3px;
-    }
-
-}//.user-list-item-body
-
-.user-list-item-aside {
-
-    @media (max-width: 550px) {
-        float: left;
-        width: 100%;
-        margin: 12px 0 0 50px;
-    }
-
-    .user-list-action:not(:first-of-type) {
-        margin-left: 20px;
-
-        @media (min-width: 551px) {
-            margin-left: 50px;
-        }
-    }
-
-    .role-label {
-        float: left;
-        margin-top: -1px;
-    }
-
-    .role-label + .role-label {
-        margin-left: 5px;
-    }
-}//.user-list-item-aside
-
-.user-list-action {
-    font-size: 11px;
-    text-transform: uppercase;
-    text-decoration: underline;
-}
-
-
-//
-// Role Labels
-// --------------------------------------------------
-
-.role-label {
-    display: inline-block;
-    padding: 6px 8px;
-    color: rgba(0,0,0,0.5);
-    font-size: 9px;
-    line-height: 1;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    font-weight: 400;
-    background: #eee;
-
-    &.owner {
-        color: rgba(255,255,255,0.8);
-        background: $darkgrey;
-    }
-
-    &.administrator {
-        color: rgba(255,255,255,0.8);
-        background: $red;
-    }
-
-    &.editor {
-        color: rgba(255,255,255,0.8);
-        background: $blue;
-    }
-}//.role-label
-
-
-//
-// Invite User Modal
-// --------------------------------------------------
-
-.invite-new-user {
-
-    .modal-body {
-        @include clearfix;
-    }
-
-    .form-group {
-
-        margin-bottom: 0;
-        padding: 0;
-
-        label {
-            position: static;
-            display: block;
-            text-align: left;
-        }
-
-        &:nth-of-type(1) {
-            float: left;
-            width: 60%;
-        }
-
-        &:nth-of-type(2) {
-            float: left;
-            width: 35%;
-            margin-left: 5%;
-        }
-
-        input {
-            width: 100%;
-        }
-    }//.form-group
-
-    .btn-green {
-        width: 100%;
-    }
-}//.invite-new-user

core/client/app/styles/modules/animations.scss

@@ -1,76 +0,0 @@
-// ------------------------------------------------------------
-// Animations
-//
-// Keyframe animations used through Ghost
-//
-// * Define animations
-// * Classed to use these animations
-// ------------------------------------------------------------
-
-//
-// Define animations
-// --------------------------------------------------
-
-@keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fade-in-snap {
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fade-in-scale {
-    from {
-        transform: scale(0.95);
-        opacity: 0;
-    }
-    to {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes fade-out {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes keyboard-focus-style-fade-out {
-    from {
-        box-shadow: inset 0 0 30px 1px lighten($midgrey, 20%);
-    }
-    to {
-        box-shadow: none;
-    }
-}
-
-
-//
-// Classed to use these animations
-// --------------------------------------------------
-
-.fade-in {
-    animation: fade-in 0.2s;
-    animation-fill-mode: forwards;
-}
-
-.fade-in-scale {
-    animation: fade-in-scale 0.2s;
-    animation-fill-mode: forwards;
-}
-
-.fade-out {
-    animation: fade-out 0.5s;
-    animation-fill-mode: forwards;
-}

core/client/app/styles/modules/icons.scss

@@ -1,435 +0,0 @@
-// ------------------------------------------------------------
-// Icons
-//
-// Defined the @font-face rule for the icon font, as well as
-// the base styles for when using icons.
-// Includes the mixins for adding icons directly and the
-// variables for each icon.
-//
-// * Font-face rule
-// * Base styled for icons
-// * Base styled for icons
-// * The Icon (before) Mixin
-// * The Icon (after) Mixin
-// * Icon Variables
-// * Icon Class Styles
-// * Icon Classes
-// * Div-based Icon Classes
-// ------------------------------------------------------------
-
-
-//
-// Font-face rule
-// Icon-font is generated by http://icomoon.co
-// Pictos, by Drew Wilson - http://pictos.cc/
-// --------------------------------------------------
-
-@font-face {
-    font-family: 'GhostIcons';
-    src:url('fonts/icons.woff?v=0.1') format('woff'); // Increment the ?v number every time the font files are regenerated
-    font-weight: normal;
-    font-style: normal;
-}
-
-
-//
-// Base styled for icons
-// --------------------------------------------------
-
-%icon-base {
-    font-family: "GhostIcons";
-    font-weight: normal;
-    font-style: normal;
-    vertical-align: -3%;
-    text-transform:none;
-    speak: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-
-//
-// The Icon (before) Mixin
-// --------------------------------------------------
-
-@mixin icon($char, $size: '', $color: '') {
-    &:before {
-        @extend %icon-base;
-
-        content: '#{$char}';
-        @if $size != '' {
-            font-size: $size;
-        }
-        @if $color != '' {
-            color: $color;
-        }
-        @content;
-    }
-
-    &:hover {
-        text-decoration:none;
-    }
-}
-
-//
-// The Icon (after) Mixin
-// --------------------------------------------------
-
-@mixin icon-after($char, $size: '', $color: '') {
-    &:after {
-        @extend %icon-base;
-
-        content: '#{$char}';
-        @if $size != '' {
-            font-size: $size;
-        }
-        @if $color != '' {
-            color: $color;
-        }
-        @content;
-    }
-
-    &:hover {
-        text-decoration:none;
-    }
-}
-
-
-//
-// Icon Variables
-// --------------------------------------------------
-// For accessibility, icon characters in the icon font are stored in Unicode's
-// Private Use Area characters. This means that screen readers won't attempt to
-// read them out loud.
-//
-
-
-$i-add:                 \f632;
-$i-app:                 \f60b;
-$i-appearance:          \f621;
-$i-archive:             \f61f;
-$i-atom:                \f63e;
-$i-book:                \f642;
-$i-calendar:            \f61e;
-$i-camera:              \f62a;
-$i-check:               \f633;
-$i-chevron-down:        \f601;
-$i-chevron-left:        \f643;
-$i-chevron:             \f61d;
-$i-clock:               \f628;
-$i-close:               \f61c;
-$i-code:                \f63d;
-$i-comments:            \f61b;
-$i-compass:             \f63f;
-$i-content:             \f62d;
-$i-edit:                \f60f;
-$i-error:               \f61a;
-$i-external:            \f619;
-$i-featured:            \f626;
-$i-fullscreen:          \f617;
-$i-ghost-logo:          \f644;
-$i-ghost:               \f600;
-$i-grid:                \f616;
-$i-home:                \f615;
-$i-image:               \f611;
-$i-info:                \f614;
-$i-lightning:           \f63c;
-$i-link:                \f635;
-$i-list:                \f613;
-$i-lock:                \f62c;
-$i-mail:                \f612;
-$i-markdown:            \f640;
-$i-menu:                \f605;
-$i-mobile:              \f610;
-$i-notification:        \f631;
-$i-pacman:              \f60e;
-$i-pc:                  \f60d;
-$i-pin:                 \f60c;
-$i-power:               \f62b;
-$i-preview:             \f60a;
-$i-question:            \f618;
-$i-reply:               \f624;
-$i-repost:              \f636;
-$i-rss:                 \f609;
-$i-search-left:         \f608;
-$i-search:              \f607;
-$i-services:            \f620;
-$i-settings:            \f606;
-$i-settings2:           \f629;
-$i-stats:               \f625;
-$i-success:             \f630;
-$i-support:             \f62f;
-$i-tablet:              \f604;
-$i-tag:                 \f603;
-$i-trash:               \f623;
-$i-twitter:             \f641;
-$i-unfeatured:          \f627;
-$i-user:                \f62e;
-$i-users:               \f602;
-$i-video:               \f622;
-$i-weather-cloudy:      \f63b;
-$i-weather-partial:     \f639;
-$i-weather-rain:        \f637;
-$i-weather-snow:        \f63a;
-$i-weather-sun:         \f638;
-$i-x:                   \f634;
-
-
-//
-// Icon Class Styles
-// --------------------------------------------------
-
-[class*=icon-] {
-    &:before {
-        @extend %icon-base;
-    }
-
-    &:hover {
-        text-decoration: none;
-    }
-}
-
-
-//
-// Icon Classes
-// --------------------------------------------------
-
-.icon-add:before {
-    content: '#{$i-add}';
-}
-.icon-app:before {
-    content: '#{$i-app}';
-}
-.icon-appearance:before {
-    content: '#{$i-appearance}';
-}
-.icon-archive:before {
-    content: '#{$i-archive}';
-}
-.icon-atom:before {
-    content: '#{$i-atom}';
-}
-.icon-book:before {
-    content: '#{$i-book}';
-}
-.icon-calendar:before {
-    content: '#{$i-calendar}';
-}
-.icon-camera:before {
-    content: '#{$i-camera}';
-}
-.icon-check:before {
-    content: '#{$i-check}';
-}
-.icon-chevron-down:before {
-    content: '#{$i-chevron-down}';
-}
-.icon-chevron-left:before {
-    content: '#{$i-chevron-left}';
-}
-.icon-chevron:before {
-    content: '#{$i-chevron}';
-}
-.icon-clock:before {
-    content: '#{$i-clock}';
-}
-.icon-close:before {
-    content: '#{$i-close}';
-}
-.icon-code:before {
-    content: '#{$i-code}';
-}
-.icon-comments:before {
-    content: '#{$i-comments}';
-}
-.icon-compass:before {
-    content: '#{$i-compass}';
-}
-.icon-content:before {
-    content: '#{$i-content}';
-}
-.icon-edit:before {
-    content: '#{$i-edit}';
-}
-.icon-error:before {
-    content: '#{$i-error}';
-}
-.icon-external:before {
-    content: '#{$i-external}';
-}
-.icon-featured:before {
-    content: '#{$i-featured}';
-}
-.icon-fullscreen:before {
-    content: '#{$i-fullscreen}';
-}
-.icon-ghost-logo:before {
-    content: '#{$i-ghost-logo}';
-}
-.icon-ghost:before {
-    content: '#{$i-ghost}';
-}
-.icon-grid:before {
-    content: '#{$i-grid}';
-}
-.icon-home:before {
-    content: '#{$i-home}';
-}
-.icon-image:before {
-    content: '#{$i-image}';
-}
-.icon-info:before {
-    content: '#{$i-info}';
-}
-.icon-lightning:before {
-    content: '#{$i-lightning}';
-}
-.icon-link:before {
-    content: '#{$i-link}';
-}
-.icon-list:before {
-    content: '#{$i-list}';
-}
-.icon-lock:before {
-    content: '#{$i-lock}';
-}
-.icon-mail:before {
-    content: '#{$i-mail}';
-}
-.icon-markdown:before {
-    content: '#{$i-markdown}';
-}
-.icon-menu:before {
-    content: '#{$i-menu}';
-}
-.icon-mobile:before {
-    content: '#{$i-mobile}';
-}
-.icon-notification:before {
-    content: '#{$i-notification}';
-}
-.icon-pacman:before {
-    content: '#{$i-pacman}';
-}
-.icon-pc:before {
-    content: '#{$i-pc}';
-}
-.icon-pin:before {
-    content: '#{$i-pin}';
-}
-.icon-power:before {
-    content: '#{$i-power}';
-}
-.icon-preview:before {
-    content: '#{$i-preview}';
-}
-.icon-question:before {
-    content: '#{$i-question}';
-}
-.icon-reply:before {
-    content: '#{$i-reply}';
-}
-.icon-repost:before {
-    content: '#{$i-repost}';
-}
-.icon-rss:before {
-    content: '#{$i-rss}';
-}
-.icon-search-left:before {
-    content: '#{$i-search-left}';
-}
-.icon-search:before {
-    content: '#{$i-search}';
-}
-.icon-services:before {
-    content: '#{$i-services}';
-}
-.icon-settings:before {
-    content: '#{$i-settings}';
-}
-.icon-settings2:before {
-    content: '#{$i-settings2}';
-}
-.icon-stats:before {
-    content: '#{$i-stats}';
-}
-.icon-success:before {
-    content: '#{$i-success}';
-}
-.icon-support:before {
-    content: '#{$i-support}';
-}
-.icon-tablet:before {
-    content: '#{$i-tablet}';
-}
-.icon-tag:before {
-    content: '#{$i-tag}';
-}
-.icon-trash:before {
-    content: '#{$i-trash}';
-}
-.icon-twitter:before {
-    content: '#{$i-twitter}';
-}
-.icon-unfeatured:before {
-    content: '#{$i-unfeatured}';
-}
-.icon-user:before {
-    content: '#{$i-user}';
-}
-.icon-users:before {
-    content: '#{$i-users}';
-}
-.icon-video:before {
-    content: '#{$i-video}';
-}
-.icon-weather-cloudy:before {
-    content: '#{$i-weather-cloudy}';
-}
-.icon-weather-partial:before {
-    content: '#{$i-weather-partial}';
-}
-.icon-weather-rain:before {
-    content: '#{$i-weather-rain}';
-}
-.icon-weather-snow:before {
-    content: '#{$i-weather-snow}';
-}
-.icon-weather-sun:before {
-    content: '#{$i-weather-sun}';
-}
-.icon-x:before {
-    content: '#{$i-x}';
-}
-
-// Specific icon size adjustments
-.icon-list:before {
-    font-size: 0.9em;
-}
-.icon-markdown:before {
-    font-size: 1.1em;
-    vertical-align: -7%;
-}
-.icon-twitter:before {
-    font-size: 1.1em;
-}
-
-
-//
-// Div-based Icon Classes
-// --------------------------------------------------
-
-.icon-grab:before {
-    content: '';
-    display: inline-block;
-    width: 7px;
-    height: 15px;
-    background-size: 4px 4px;
-    background-color: $midbrown;
-    background-position: -1px -1px;
-    background-image: linear-gradient(#fff 1px, transparent 1px),
-        linear-gradient(90deg, #fff 1px, transparent 1px),
-        linear-gradient(#fff 1px, transparent 1px),
-        linear-gradient(90deg, #fff 1px, transparent 1px);
-}

core/client/app/styles/modules/mixins.scss

@@ -1,128 +0,0 @@
-// ------------------------------------------------------------
-// Mixins
-//
-// Mixins defined here are very general and used in mul
-//
-// * baseline()
-// * clearfix()
-// * tab-focus()
-// * triangle()
-// * set-triangle-color()
-// * circular-image()
-// ------------------------------------------------------------
-
-
-//
-// Baseline margin
-// --------------------------------------------------
-
-@mixin baseline {
-    margin: 1.6em 0;
-}
-
-
-//
-// Fix for clearing float-based overflows
-// --------------------------------------------------
-
-@mixin clearfix {
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-}
-
-
-//
-// WebKit-style focus
-// From Bootstrap
-// --------------------------------------------------
-@mixin tab-focus() {
-    // Default
-    outline: thin dotted;
-    // WebKit
-    outline: 0px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-}
-
-
-//
-// Simple SCSS mixin to create CSS triangles
-// Example: @include css-triangle (10px, #fff, "up");
-// --------------------------------------------------
-
-@mixin triangle($size: 20px, $color: #000, $direction: "down", $type: "normal") {
-    $verticalSize: $size;
-    width: 0;
-    height: 0;
-
-    @if $type == "shallow" {
-      $verticalSize: floor($size * $popover_triangle_shallow_multiplier);
-    }
-
-    @if $direction == "down" {
-        border-left: $size solid #{set-triangle-color($direction, "left", $color)};
-        border-right: $size solid #{set-triangle-color($direction, "right", $color)};
-        border-top: $verticalSize solid #{set-triangle-color($direction, "top", $color)};
-    }
-
-    @if $direction == "up" {
-        border-left: $size solid #{set-triangle-color($direction, "left", $color)};
-        border-right: $size solid #{set-triangle-color($direction, "right", $color)};
-        border-bottom: $verticalSize solid #{set-triangle-color($direction, "bottom", $color)};
-    }
-
-    @if $direction == "left" {
-        border-right: $verticalSize solid #{set-triangle-color($direction, "right", $color)};
-        border-top: $size solid #{set-triangle-color($direction, "top", $color)};
-        border-bottom: $size solid #{set-triangle-color($direction, "bottom", $color)};
-    }
-
-    @if $direction == "right" {
-        border-left: $verticalSize solid #{set-triangle-color($direction, "left", $color)};
-        border-bottom: $size solid #{set-triangle-color($direction, "bottom", $color)};
-        border-top: $size solid #{set-triangle-color($direction, "top", $color)};
-    }
-}
-
-
-//
-// Utility function to return the relevant colour depending on what type of arrow it is
-// --------------------------------------------------
-
-@function set-triangle-color($direction, $side, $color) {
-    @if $direction == "left" and $side == "right"
-    or  $direction == "right" and $side == "left"
-    or $direction == "down" and $side == "top"
-    or $direction == "up" and $side == "bottom" {
-        @return $color
-    } @else {
-        @return "transparent";
-    }
-}
-
-
-//
-// Reusable styles for creating a circular image which is cropped properly, with the image inside it
-// Example: @circular-image(35px);
-// --------------------------------------------------
-
-@mixin circular-image($widthandheight: 20px) {
-    @content;
-    width: $widthandheight;
-    height: $widthandheight;
-    border-radius: $widthandheight;
-    background-size: cover;
-    background-position: center center;
-    position: relative;
-
-    img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-    }
-}

core/client/app/styles/modules/variables.scss

@@ -1,46 +0,0 @@
-// ------------------------------------------------------------
-// Variables
-//
-// * Colours
-// * Default style values
-// * Dropdown & Popover triangles
-// ------------------------------------------------------------
-
-
-//
-// Colours
-// --------------------------------------------------
-
-$darkgrey: #242628;
-$grey: #35393b;
-$midgrey: #7d878a;
-$lightgrey: #e2edf2;
-$lightestgrey: #FCFCFC;
-$brown: #aaa9a2;
-$midbrown: #c0bfb6;
-$lightbrown: #edece4;
-$blue: #5BA4E5;
-$red: #e25440;
-$orange: #F2A925;
-$green: #9FBB58;
-
-
-//
-// Default style values
-// --------------------------------------------------
-
-$border-radius: 3px;
-$box-shadow: rgba(0,0,0,0.05) 0 1px 5px;
-$settings-menu-transition: 0.4s;
-$settings-menu-bezier: 0.1, 0.7, 0.1, 1;
-$font-family: 'Open Sans', sans-serif;
-$font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-
-
-//
-// Dropdown & Popover triangles
-// --------------------------------------------------
-
-$dropdown_triangle: 8px;
-$popover_triangle: 14px;
-$popover_triangle_shallow_multiplier: 0.8; // Adjusts the height of the triangle relative to its width, so it's 0.8x the height of the width

core/client/app/styles/patterns/_shame.css

@@ -0,0 +1,90 @@
+/* Shame
+/* ---------------------------------------------------------- */
+/* TODO: Kill with fire */
+
+
+/* Animations
+/* ---------------------------------------------------------- */
+
+/* Semi-opaque fixed-position headers - used on content/editor */
+.floatingheader {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 400;
+    padding: 10px 20px;
+    height: 40px;
+    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;
+    padding: 3px 4px;
+    min-height: 20px;
+    height: 20px;
+    vertical-align: top;
+    font-size: 10px;
+}
+
+.floatingheader .button.button-back {
+    position: relative;
+    top: -2px;
+    left: 3px;
+    display: none;
+    padding: 0 6px 0 3px;
+}
+
+.floatingheader .button.button-back:active {
+    box-shadow: none;
+}
+
+.floatingheader .button.button-back:before {
+    left: -8px;
+    border-width: 10px 8px 10px 0;
+}
+
+@media (max-width: 900px) {
+    .floatingheader .button.button-back {
+        display: inline-block;
+    }
+}
+
+.floatingheader small {
+    font-size: 0.85em;
+}
+
+.floatingheader a,
+.floatingheader button {
+    color: var(--brown);
+}
+
+.floatingheader a:hover,
+.floatingheader button:hover {
+    color: var(--darkgrey);
+}
+
+
+/* Scroll shadows
+/* ---------------------------------------------------------- */
+.scrolling .floatingheader {
+    box-shadow: rgba(0, 0, 0, 0.03) 0 1px 3px;
+}
+
+.scrolling .floatingheader:before {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    z-index: -1;
+    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%;
+}

core/client/app/styles/patterns/_shame.scss

@@ -1,98 +0,0 @@
-// ------------------------------------------------------------
-// Shame
-//
-// A home for Styles that need to die in a fire, but are used
-// in lots of places.
-//
-// * Floating Header
-// * Scroll Shadows
-// ------------------------------------------------------------
-
-
-//
-// Floating Header
-// --------------------------------------------------
-
-// Semi-opaque fixed-position headers - used on content/editor
-.floatingheader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 400;
-    height: 40px;
-    padding: 10px 20px;
-    font-size: 1.3rem;
-    text-transform: uppercase;
-    color: $brown;
-    background: linear-gradient(to bottom, white 0%, white 25%, rgba(255,255,255,0.9) 100%); //Transparent gradient to make bg fade out as it goes out the top
-
-    .button {
-        display: inline-block;
-        font-size: 10px;
-        min-height: 20px;
-        height: 20px;
-        padding: 3px 4px;
-        vertical-align: top;
-
-        &.button-back {
-            position: relative;
-            top: -2px;
-            left: 3px;
-            display: none;
-            padding: 0 6px 0 3px;
-
-            &:active {
-                box-shadow: none;
-            }
-
-            &:before {
-                left: -8px;
-                border-width: 10px 8px 10px 0;
-            }
-
-            @media (max-width: 900px) {
-                display: inline-block;
-            }
-        }
-    }//.button
-
-    small {
-        font-size: 0.85em;
-    }
-
-    a,
-    button {
-        color: $brown;
-
-        &:hover {
-            color: $darkgrey;
-        }
-    }
-} // .floatingheader
-
-
-//
-// Scroll Shadows
-// --------------------------------------------------
-
-.scrolling {
-
-    .floatingheader {
-        box-shadow: rgba(0, 0, 0, 0.03) 0 1px 3px;
-
-        &:before {
-            content: "";
-            position: absolute;
-            bottom: -5px;
-            left: 50%;
-            height: 5px;
-            width: 80%;
-            margin-left: -40%;
-            background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%,rgba(0, 0, 0, 0) 75%,rgba(0, 0, 0, 0) 100%);
-            background-position: 0px -5px;
-            background-size: 100% 200%;
-            z-index: -1;
-        }
-    }
-}

core/client/app/styles/patterns/buttons.css

@@ -0,0 +1,200 @@
+/* Buttons
+/* ---------------------------------------------------------- */
+
+/* Base button style */
+.btn {
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 9px 15px;
+    border: #e1e1e1 1px solid;
+    background: #fff;
+    background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 */
+    border-radius: var(--border-radius);
+    color: #828282;
+    text-align: center;
+    text-transform: uppercase;
+    text-shadow: none;
+    white-space: nowrap;
+    letter-spacing: 1px;
+    font-size: 1.1rem;
+    line-height: 1.428571429;
+    font-weight: 300;
+    cursor: pointer;
+    transition: color 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+/* When hovered or clicked */
+.btn:hover,
+.btn:focus {
+    border-color: var(--blue);
+    color: color(var(--blue) lightness(-10%));
+    text-decoration: none;
+}
+
+/* When focused with keyboard */
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus {
+    outline: thin dotted;
+    outline: 0 auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+/* When clicked */
+.btn:active,
+.btn.active {
+    outline: 0;
+    background-image: none;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* When disabled */
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+    box-shadow: none;
+    opacity: 0.65;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+
+/* Blue button
+/* ---------------------------------------------------------- */
+
+.btn-blue {
+    border-color: color(var(--blue) lightness(-10%));
+    background: var(--blue);
+    color: #fff;
+}
+
+.btn-blue:hover,
+.btn-blue:active,
+.btn-blue:focus {
+    border-color: color(var(--blue) lightness(-20%));
+    background: color(var(--blue) lightness(-10%));
+    color: #fff;
+}
+
+
+/* Green button
+/* ---------------------------------------------------------- */
+
+.btn-green {
+    border-color: color(var(--green) lightness(-10%));
+    background: var(--green);
+    color: #fff;
+}
+
+.btn-green:hover,
+.btn-green:active,
+.btn-green:focus {
+    border-color: color(var(--green) lightness(-20%));
+    background: color(var(--green) lightness(-10%));
+    color: #fff;
+}
+
+
+/* Red button
+/* ---------------------------------------------------------- */
+
+.btn-red {
+    border-color: color(var(--red) lightness(-10%));
+    background: var(--red);
+    color: #fff;
+}
+
+.btn-red:hover,
+.btn-red:active,
+.btn-red:focus {
+    border-color: color(var(--red) lightness(-20%));
+    background: color(var(--red) lightness(-10%));
+    color: #fff;
+}
+
+
+/* Link button
+/* ---------------------------------------------------------- */
+
+/* For styling a button like a link */
+.btn-link {
+    border-color: transparent;
+    background: transparent;
+    color: var(--blue);
+}
+
+.btn-link:hover,
+.btn-link:active,
+.btn-link:focus {
+    border-color: transparent;
+    background: transparent;
+    color: var(--blue);
+    text-decoration: underline;
+}
+
+.btn-link.disabled,
+.btn-link[disabled] {
+    box-shadow: none;
+    color: #b2b2b2;
+    opacity: 0.65;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+
+/* Minor button
+/* ---------------------------------------------------------- */
+
+/* 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;
+}
+
+.btn-minor:hover,
+.btn-minor:active,
+.btn-minor:focus {
+    border-color: #c1c1c1;
+    background: #fff;
+    color: #828282;
+}
+
+
+/* Button size variations
+/* ---------------------------------------------------------- */
+
+.btn-lg {
+    padding: 12px 18px;
+    border-radius: 4px;
+    font-size: 1.4rem;
+    line-height: 1.33;
+}
+
+.btn-sm {
+    padding: 7px 10px;
+    border-radius: 2px;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+}
+
+/* Vertically space out multiple block buttons */
+.btn-block + .btn-block {
+    margin-top: 5px;
+}
+
+/* Specificity overrides */
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+    width: 100%;
+}

core/client/app/styles/patterns/buttons.scss

@@ -1,241 +0,0 @@
-// ------------------------------------------------------------
-// Buttons
-//
-// Default button Styles, including sizes & colours
-//
-// * Default styles
-// * Coloured buttons
-// * Link buttons
-// * Minor buttons
-// * Button Sizes
-// * Block button
-// ------------------------------------------------------------
-
-
-//
-// Default styles
-// --------------------------------------------------
-
-.btn {
-    display: inline-block;
-    margin-bottom: 0;
-    padding: 9px 14px;
-
-    font-size: 1.1rem;
-    line-height: 1.428571429;
-    font-weight: 300;
-    text-align: center;
-    text-transform: uppercase;
-    text-shadow: none;
-    letter-spacing: 1px;
-    white-space: nowrap;
-
-    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-
-    border: 1px solid transparent;
-    border-radius: $border-radius;
-
-    user-select: none;
-    cursor: pointer;
-
-    &,
-    &:active,
-    &.active {
-        &:focus {
-            @include tab-focus();
-        }
-    }
-
-    &:hover,
-    &:focus {
-        color: $blue;
-        text-decoration: none;
-    }
-
-    &:active,
-    &.active {
-        outline: 0;
-        background-image: none;
-        box-shadow: inset 0 2px 2px rgba(0,0,0,.125);
-    }
-
-    &.disabled,
-    &[disabled],
-    fieldset[disabled] & {
-        cursor: not-allowed;
-        pointer-events: none; // Future-proof disabling of clicks
-        opacity: 0.65;
-        box-shadow: none;
-    }
-}//.btn
-
-
-//
-// Coloured buttons
-// --------------------------------------------------
-
-@mixin button-style($color, $background, $border) {
-    color: $color;
-    background-color: $background;
-    border-color: $border;
-    transition: background 0.2s ease, border-color 0.2s ease;
-
-    &:hover,
-    &:focus,
-    &:active,
-    &.active,
-    .open > &.dropdown-toggle {
-        color: $color;
-        background-color: darken($background, 10%);
-        border-color: darken($border, 12%);
-    }
-
-    &:active,
-    &.active,
-    .open > &.dropdown-toggle {
-        background-image: none;
-    }
-
-    &.disabled,
-    &[disabled],
-    fieldset[disabled] & {
-
-        &,
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            background-color: $background;
-            border-color: $border;
-        }
-    }
-
-    .badge {
-        color: $background;
-        background-color: $color;
-        box-shadow: 0 0 0 1px $color;
-    }
-}//@mixin button-style
-
-.btn-default {
-    font-weight: normal; // Increases the font-weight to make text more legible for white BG button
-    @include button-style(#666, #fff, lighten($midgrey, 40%));
-}
-
-.btn-alt {
-    @include button-style(#fff, #A1ADB3, darken(#A1ADB3, 5%));
-}
-
-.btn-blue {
-    @include button-style(#fff, $blue, darken($blue, 5%));
-}
-
-.btn-green {
-    @include button-style(#fff, $green, darken($green, 5%));
-}
-
-.btn-red {
-    @include button-style(#fff, $red, darken($red, 5%));
-}
-
-
-//
-// Link buttons
-// -------------------------
-
-// Make a button look and behave like a link
-.btn-link {
-    color: $blue;
-    font-weight: normal;
-    cursor: pointer;
-    border-radius: 0;
-
-    &,
-    &:active,
-    &[disabled],
-    fieldset[disabled] & {
-        background-color: transparent;
-        box-shadow: none;
-    }
-
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-        color: $blue;
-        border-color: transparent;
-    }
-
-    &:hover,
-    &:focus {
-        text-decoration: underline;
-        background-color: transparent;
-    }
-
-    &[disabled],
-    fieldset[disabled] & {
-
-        &:hover,
-        &:focus {
-            color: $midgrey;
-            text-decoration: none;
-        }
-    }
-}//.btn-link
-
-
-//
-// Minor buttons
-// -------------------------
-
-// Add this class to buttons with a small/insignificant action
-// for example a "cancel" button. Style is de-emphasised.
-.btn-minor {
-    text-transform: none;
-    letter-spacing: 0;
-    font-size: 1.2rem;
-    padding: 8px 14px;
-}
-
-//
-// Button Sizes
-// --------------------------------------------------
-
-.btn-lg {
-    padding: 12px 18px;
-    font-size: 1.4rem;
-    line-height: 1.33;
-    border-radius: 4px;
-}
-
-.btn-sm {
-    padding: 7px 10px;
-    font-size: 1rem;
-    line-height: 1.5;
-    border-radius: 2px;
-}
-
-
-//
-// Block button
-// --------------------------------------------------
-
-.btn-block {
-    display: block;
-    width: 100%;
-}
-
-// Vertically space out multiple block buttons
-.btn-block + .btn-block {
-    margin-top: 5px;
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-
-    &.btn-block {
-        width: 100%;
-    }
-}

core/client/app/styles/patterns/forms.css

@@ -0,0 +1,326 @@
+/* Forms
+/* ---------------------------------------------------------- */
+
+form * {
+    user-select: text;
+}
+
+form label {
+    display: block;
+    color: var(--darkgrey);
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+form .word-count {
+    float: right;
+    font-weight: bold;
+}
+
+fieldset {
+    margin: 0 0 3em 0;
+    padding: 0;
+    border: none;
+}
+
+legend {
+    display: block;
+    margin: 2em 0;
+    width: 100%;
+    border-bottom: #e1e1e1 1px solid;
+    color: var(--brown);
+    font-size: 1.2em;
+    line-height: 2.0em;
+}
+
+input {
+    user-select: text;
+}
+
+
+/* Form Groups
+/* ---------------------------------------------------------- */
+
+.form-group {
+    position: relative;
+    margin-bottom: 1.6em;
+    max-width: 500px;
+    width: 100%;
+}
+
+.form-group p {
+    margin: 4px 0 0 0;
+    color: #b3b2a8;
+    font-size: 1.3rem;
+}
+
+.form-group label {
+    margin-bottom: 4px;
+}
+
+@media (max-width: 550px) {
+    .form-group {
+        max-width: 100%;
+    }
+}
+
+
+/* Input Icons
+/* ---------------------------------------------------------- */
+
+.input-icon[class*="icon-"] {
+    position: relative;
+    display: block;
+}
+
+.input-icon[class*="icon-"] input[type="email"],
+.input-icon[class*="icon-"] input[type="number"],
+.input-icon[class*="icon-"] input[type="password"],
+.input-icon[class*="icon-"] input[type="search"],
+.input-icon[class*="icon-"] input[type="tel"],
+.input-icon[class*="icon-"] input[type="text"],
+.input-icon[class*="icon-"] input[type="url"],
+.input-icon[class*="icon-"] input[type="date"] {
+    padding-left: 3.2rem;
+}
+
+.input-icon[class*="icon-"] .gh-select select {
+    padding-left: 3.2rem;
+}
+
+.input-icon[class*="icon-"]:before {
+    position: absolute;
+    top: 50%;
+    left: 1.1rem;
+    z-index: 100;
+    font-size: 1.3rem;
+    transform: translateY(-52%);
+}
+
+
+/* Inputs
+/* ---------------------------------------------------------- */
+
+.gh-input,
+.gh-select,
+select {
+    display: block;
+    padding: 8px 10px;
+    width: 100%;
+    border: 1px solid #e0dfd7;
+    border-radius: var(--border-radius);
+    color: var(--darkgrey);
+    font-size: 1.4rem;
+    font-weight: normal;
+    user-select: text;
+    transition: border-color 0.15s linear;
+
+    -webkit-appearance: none;
+}
+
+.gh-input.error,
+.gh-select.error,
+select.error {
+    border-color: var(--red);
+}
+
+.gh-input:focus,
+.gh-select:focus,
+select:focus {
+    outline: 0;
+    border-color: var(--brown);
+}
+
+textarea {
+    min-width: 250px;
+    min-height: 10rem;
+    max-width: 500px;
+    width: 100%;
+    height: auto;
+    line-height: 1.5;
+    user-select: text;
+    resize: vertical;
+}
+
+
+/* Radio / Checkboxes
+/* ---------------------------------------------------------- */
+
+.for-radio label,
+.for-checkbox label {
+    display: block;
+    padding-bottom: 4px;
+}
+
+.for-radio label p,
+.for-checkbox label p {
+    color: #000;
+    font-weight: normal;
+}
+
+.for-radio label:hover input:not(:checked) + .input-toggle-component,
+.for-checkbox label:hover input:not(:checked) + .input-toggle-component {
+    border-color: var(--midbrown);
+}
+
+.for-radio input,
+.for-checkbox input {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: -9999px;
+}
+
+.for-radio .input-toggle-component,
+.for-checkbox .input-toggle-component {
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    float: left;
+    margin-right: 7px;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #e1e1e1;
+    background: #f7f7f3;
+}
+
+.for-radio p,
+.for-checkbox p {
+    color: #b3b2a8;
+    white-space: nowrap;
+    font-weight: normal;
+}
+
+.for-checkbox .input-toggle-component {
+    border-radius: var(--border-radius);
+}
+
+.for-checkbox label .input-toggle-component {
+    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+.for-checkbox label .input-toggle-component:before {
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 3px;
+    width: 10px;
+    height: 6px;
+    border: 2px solid #fff;
+    border-top: none;
+    border-right: none;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    transform: rotate(-45deg);
+}
+
+.for-checkbox label input:checked + .input-toggle-component {
+    border-color: color(var(--green) lightness(-10%));
+    background: var(--green);
+}
+
+.for-checkbox label input:checked + .input-toggle-component:before {
+    opacity: 1;
+}
+
+.for-radio .input-toggle-component {
+    border-radius: 100px;
+}
+
+.for-radio label .input-toggle-component {
+    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+.for-radio label .input-toggle-component:before {
+    content: "";
+    position: absolute;
+    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 {
+    border-color: color(var(--green) lightness(-10%));
+    background: var(--green);
+}
+
+.for-radio label input:checked + .input-toggle-component:before {
+    opacity: 1;
+}
+
+
+/* Select
+/* ---------------------------------------------------------- */
+
+.gh-select {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    padding: 0;
+    max-width: 100%;
+    width: 100%;
+    border-width: 0;
+}
+
+.gh-select:after {
+    content: "\e00f";
+    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;
+
+    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;
+}
+
+.gh-select select::-ms-expand {
+    display: none;
+}
+
+.gh-select select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #000;
+}
+
+
+/* FFF: Fucking Firefox Fixes
+/* ---------------------------------------------------------- */
+
+@-moz-document url-prefix() {
+    .gh-select {
+        border-width: 1px;
+    }
+    .gh-select select {
+        padding: 7px 10px 7px 8px;
+    }
+    .gh-select:focus {
+        border-color: var(--brown);
+    }
+}

core/client/app/styles/patterns/forms.scss

@@ -1,365 +0,0 @@
-// ------------------------------------------------------------
-// Forms
-//
-// All things form, input, textarea, select, radio and checkbox
-//
-// * Form Wrapper
-// * Form Groups
-// * Input Icons
-// * Radio & Checkbox wrappers
-// * Fieldsets & Legends
-// * Inputs, selects, and textareas
-// * Checkboxes
-// * Radio Buttons
-// * Select Component
-// ------------------------------------------------------------
-
-
-//
-// Form Wrapper
-// --------------------------------------------------
-
-form {
-
-    label {
-        display: block;
-        color: $darkgrey;
-        font-size: 1.3rem;
-        font-weight: bold;
-    }
-}
-
-
-//
-// Form Groups
-// --------------------------------------------------
-
-.form-group {
-    position: relative;
-    margin-bottom: 1.6em;
-    width: 100%;
-    max-width: 500px;
-
-    p {
-        margin: 4px 0 0 0;
-        color: #B3B2A8;
-        font-size: 1.3rem;
-    }
-
-    label {
-        margin-bottom: 4px;
-    }
-
-    @media (max-width: 550px) {
-        max-width: 100%;
-    }
-
-}//.form-group
-
-
-//
-// Input Icons
-// --------------------------------------------------
-
-.input-icon[class*='icon-'] {
-    position: relative;
-    display: block;
-
-    input[type="email"],
-    input[type="number"],
-    input[type="password"],
-    input[type="search"],
-    input[type="tel"],
-    input[type="text"],
-    input[type="url"],
-    input[type="date"] {
-        padding-left: 3.2rem;
-    }
-
-    .gh-select {
-        select {
-            padding-left: 3.2rem;
-        }
-    }
-
-    &:before {
-        position: absolute;
-        top: 50%;
-        left: 1.1rem;
-        font-size: 1.3rem;
-        transform: translateY(-52%);
-        z-index: 100;
-    }
-}//.thing[class*='icon-']
-
-
-//
-// Radio & Checkbox wrappers
-// --------------------------------------------------
-
-.for-radio,
-.for-checkbox {
-    @include clearfix;
-
-    label {
-        display: block;
-        padding-bottom: 4px;
-
-        p {
-            font-weight: normal;
-            color: #000;
-        }
-
-        &:hover {
-
-            input:not(:checked) + .input-toggle-component {
-                border-color: $midbrown;
-            }
-        }
-    }
-
-    input {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: -9999px;
-    }
-
-    .input-toggle-component {
-        position: relative;
-        top: 1px;
-        display: inline-block;
-        float: left;
-        width: 18px;
-        height: 18px;
-        margin-right: 7px;
-        background: #F7F7F3;
-        border: 1px solid $lightbrown;
-    }
-
-    p {
-        font-weight: normal;
-        color: #B3B2A8;
-        white-space: nowrap;
-    }
-}//.for-radio, .for-checkbox
-
-//
-// Fieldsets & Legends
-// --------------------------------------------------
-
-fieldset {
-    border: none;
-    margin: 0 0 3em 0;
-    padding: 0;
-}
-
-legend {
-    display: block;
-    width: 100%;
-    margin: 2em 0;
-    border-bottom: $lightbrown 1px solid;
-    font-size: 1.2em;
-    line-height: 2.0em;
-    color: $brown;
-}
-
-
-//
-// Inputs, selects, and textareas
-// --------------------------------------------------
-
-.input,
-input[type="email"],
-input[type="number"],
-input[type="password"],
-input[type="search"],
-input[type="tel"],
-input[type="text"],
-input[type="url"],
-input[type="date"],
-textarea,
-.gh-select,
-select {
-    display: block;
-    padding: 8px 10px;
-    width: 100%;
-    border: 1px solid #E0DFD7;
-    border-radius: $border-radius;
-    -webkit-appearance: none;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-    color: $darkgrey;
-
-    transition: border-color 0.15s linear;
-
-    &.error {
-        border-color: $red;
-    }
-
-    &:focus {
-        border-color: $brown;
-        outline: 0;
-    }
-}
-
-textarea {
-    width: 100%;
-    max-width: 500px;
-    min-width: 250px;
-    height: auto;
-    min-height: 10rem;
-    line-height: 1.5;
-    resize: vertical;
-}
-
-
-//
-// Checkboxes
-// --------------------------------------------------
-
-.for-checkbox {
-
-    .input-toggle-component {
-        border-radius: $border-radius;
-    }
-
-    label {
-
-        .input-toggle-component {
-            transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
-
-            &:before {
-                transition: opacity 0.15s ease-in-out;
-                content: '';
-                position: absolute;
-                width: 10px;
-                height: 6px;
-                top: 4px;
-                left: 3px;
-                border: 2px solid #fff;
-                border-top: none;
-                border-right: none;
-                transform: rotate(-45deg);
-                opacity: 0;
-            }
-        }
-
-        input:checked + .input-toggle-component {
-            background: $green;
-            border-color: darken($green, 10%);
-
-            &:before {
-                opacity: 1;
-            }
-        }
-    }//label
-}//.for-checkbox
-
-
-//
-// Radio Buttons
-// --------------------------------------------------
-
-.for-radio {
-
-    .input-toggle-component {
-        border-radius: 100px; // Use px to prevent ovals
-    }
-
-    label {
-
-        .input-toggle-component {
-            transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
-
-            &:before {
-                transition: opacity 0.15s ease-in-out;
-                content: '';
-                position: absolute;
-                width: 8px;
-                height: 8px;
-                top: 4px;
-                left: 4px;
-                background: #FFF;
-                border-radius: 100%;
-                opacity: 0;
-            }
-        }
-
-        input:checked + .input-toggle-component {
-            background: $green;
-            border-color: darken($green, 10%);
-
-            &:before {
-                opacity: 1;
-            }
-        }
-    }//label
-}//.for-radio
-
-
-//
-// Select Component
-// --------------------------------------------------
-
-.gh-select {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    width: 100%;
-    max-width: 100%;
-    padding: 0;
-    border-width: 0;
-
-    @include icon-after($i-chevron-down, 0.85em, $midbrown) {
-        position: absolute;
-        top: 50%;
-        right: 0.8em;
-        margin-top: -0.5em;
-        pointer-events: none;
-    };
-
-    select {
-        appearance: none;
-        -webkit-appearance: none;
-        -moz-appearance: window;
-        text-indent: 0.01px;
-        text-overflow: "";
-        background: #fff;
-        outline: none;
-        padding: 8px 10px;
-        line-height: normal;
-
-        // This hides native gh-select button arrow in IE
-        &::-ms-expand {
-            display: none;
-        }
-
-        // Hover style - Not used, but works
-        &:hover {}
-
-        // This hides focus around selected option in FF
-        &:-moz-focusring {
-            color: transparent;
-            text-shadow: 0 0 0 #000;
-        }
-    }//select
-}//.gh-select
-
-// Firefox-specific size fixes
-@-moz-document url-prefix() {
-
-    .gh-select {
-        border-width: 1px;
-
-        select {
-            padding: 7px 10px 7px 8px;
-        }
-
-        &:focus {
-            border-color: $brown;
-        }
-    }
-}

core/client/app/styles/patterns/global.css

@@ -0,0 +1,394 @@
+/* Global styles
+/* ---------------------------------------------------------- */
+
+
+/* Variables
+/* ---------------------------------------------------------- */
+
+:root {
+    /* Colours */
+    --darkgrey: #242628;
+    --grey: #242628;
+    --midgrey: #7d878a;
+    --lightgrey: #e2edf2;
+    --lightestgrey: #fcfcfc;
+    --brown: #aaa9a2;
+    --midbrown: #c0bfb6;
+    --blue: #5ba4e5;
+    --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? */
+    --font-family: "Open Sans", sans-serif;
+    --font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+
+/* Layout
+/* ---------------------------------------------------------- */
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+    user-select: none;
+}
+
+html {
+    overflow: hidden;
+    width: 100%;
+    /* Prevent elastic scrolling on the whole page */
+    height: 100%;
+    font: 62.5%/1.65 "Open Sans", sans-serif;
+
+    -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;
+}
+
+::selection {
+    background: lighten(var(--blue), 20%);
+}
+
+
+/* Text
+/* ---------------------------------------------------------- */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0 0 0.3em 0;
+    color: var(--darkgrey);
+    line-height: 1.15em;
+    text-rendering: optimizeLegibility;
+}
+
+h1 {
+    text-indent: -1px;
+    font-size: 5rem;
+}
+
+h2 {
+    text-indent: -1px;
+    font-size: 4.2rem;
+}
+
+h3 {
+    font-size: 3.8rem;
+}
+
+h4 {
+    font-size: 3.1rem;
+}
+
+h5 {
+    font-size: 2.8rem;
+}
+
+h6 {
+    font-size: 2.2rem;
+}
+
+p,
+ul,
+ol,
+dl {
+    margin: 0 0 1.7em 0;
+}
+
+ol,
+ul {
+    padding-left: 2.5em;
+}
+
+ol ol,
+ul ul,
+ul ol,
+ol ul {
+    margin: 0 0 0.4em 0;
+    padding-left: 2em;
+    font-size: 0.9em;
+}
+
+mark {
+    background-color: #fdffb6;
+}
+
+a {
+    color: var(--blue);
+    text-decoration: none;
+    transition: background 0.3s, color 0.3s;
+}
+
+a:hover {
+    text-decoration: none;
+    transition: background 0.1s, color 0.1s;
+}
+
+a.highlight {
+    color: var(--orange);
+    font-weight: bold;
+}
+
+hr {
+    display: block;
+    margin: 3.2em 0;
+    padding: 0;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #e1e1e1;
+}
+
+dl {
+    margin: 1.6em 0;
+}
+
+dl dt {
+    float: left;
+    clear: left;
+    overflow: hidden;
+    margin-bottom: 1em;
+    width: 180px;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: bold;
+}
+
+dl dd {
+    margin-bottom: 1em;
+    margin-left: 200px;
+}
+
+blockquote {
+    margin: 1.6em 0;
+    padding: 0 1.6em 0 1.6em;
+    border-left: #e1e1e1 0.6em solid;;
+}
+
+blockquote p {
+    margin: 0.8em 0;
+    font-size: 1.2em;
+    font-weight: 300;
+}
+
+blockquote small {
+    display: inline-block;
+    margin: 0.8em 0 0.8em 1.5em;
+    color: var(--brown);
+    font-size: 0.9em;
+}
+/* Quotation marks */
+blockquote small:before {
+    content: "\2014 \00A0";
+}
+
+blockquote cite {
+    font-weight: bold;
+}
+blockquote cite a {
+    font-weight: normal;
+}
+
+.markdown,
+pre,
+code,
+tt {
+    font-family: var(--font-family-mono);
+}
+
+code,
+tt {
+    padding: 0.2em 0.4em;
+    background: lighten(#e1e1e1, 2%);
+    border-radius: 2px;
+    vertical-align: top;
+    white-space: pre-wrap;
+    font-size: 0.85em;
+}
+
+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 {
+    padding: 0;
+    border: none;
+    background: transparent;
+    white-space: pre-wrap;
+    font-size: inherit;
+}
+
+kbd {
+    display: inline-block;
+    margin-bottom: 0.4em;
+    padding: 1px 8px;
+    border: #ccc 1px solid;
+    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 {
+    padding: 0;
+    outline: none;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+}
+
+img {
+    max-width: 100%;
+}
+
+
+/* Utilities
+/* ---------------------------------------------------------- */
+
+.clearfix,
+.clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.wrapper {
+    position: relative;
+}
+
+.show {
+    display: block !important;
+}
+
+.hidden {
+    visibility: hidden !important;
+    display: none !important;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.sr-only {
+    position: absolute;
+    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;
+    overflow: visible;
+    clip: auto;
+    margin: 0;
+    width: auto;
+    height: auto;
+}
+
+.right {
+    float: right;
+}
+
+.left {
+    float: left;
+}
+
+.vertical {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+
+/* Animations
+/* ---------------------------------------------------------- */
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-in-snap {
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-in-scale {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes keyboard-focus-style-fade-out {
+    from {
+        box-shadow: inset 0 0 30px 1px lighten(var(--midgrey), 20%);
+    }
+    to {
+        box-shadow: none;
+    }
+}
+
+.fade-in {
+    animation: fade-in 0.2s;
+    animation-fill-mode: forwards;
+}
+
+.fade-in-scale {
+    animation: fade-in-scale 0.2s;
+    animation-fill-mode: forwards;
+}
+
+.fade-out {
+    animation: fade-out 0.5s;
+    animation-fill-mode: forwards;
+}

core/client/app/styles/patterns/global.scss

@@ -1,298 +0,0 @@
-// ------------------------------------------------------------
-// Globals
-//
-// Where most of the element-selector styling goes, which other
-// elements can inherit from. Sensible defaults.
-//
-// * Global Layout
-// * Text & Type
-// * Utility Classes
-// ------------------------------------------------------------
-
-//
-// Global Layout
-// --------------------------------------------------
-
-*, *:before, *:after {
-    box-sizing: border-box;
-}
-
-html {
-    font: 62.5%/1.65 "Open Sans", sans-serif;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-    // Prevent elastic scrolling on the whole page
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
-
-body {
-    color: lighten($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; // Never allow horizontal scrollbars
-}
-
-::selection {
-    background: lighten($blue, 20%);
-}
-
-
-//
-// Text & Type
-// --------------------------------------------------
-
-h1, h2, h3,
-h4, h5, h6 {
-    margin: 0 0 0.3em 0;
-    line-height: 1.15em;
-    color: $darkgrey;
-    text-rendering: optimizeLegibility;
-    font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
-}
-
-h1 {
-    font-size: 5rem;
-    letter-spacing: -2px;
-    text-indent: -3px;
-}
-
-h2 {
-    font-size: 4.2rem;
-    letter-spacing: -1px;
-}
-
-h3 {
-    font-size: 3.8rem;
-}
-
-h4 {
-    font-size: 3.1rem;
-}
-
-h5 {
-    font-size: 2.8rem;
-}
-
-h6 {
-    font-size: 2.2rem;
-}
-
-p, ul, ol, dl {
-    margin: 0 0 1.7em 0;
-}
-
-ol, ul {
-    padding-left: 2.5em;
-}
-
-ol ol, ul ul,
-ul ol, ol ul {
-    margin: 0 0 0.4em 0;
-    padding-left: 2em;
-    font-size: 0.9em;
-}
-
-mark {
-    background-color: #fdffb6;
-}
-
-a {
-    color: $blue;
-    text-decoration: none;
-    transition: background 0.3s, color 0.3s;
-
-    &:hover {
-        text-decoration: none;
-        transition: background 0.1s, color 0.1s;
-    }
-
-    &.highlight {
-        color: $orange;
-        font-weight: bold;
-    }
-}
-
-hr {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid $lightbrown;
-    margin: 3.2em 0;
-    padding: 0;
-}
-
-dl {
-    @include baseline;
-
-    dt {
-        float: left;
-        width: 180px;
-        overflow: hidden;
-        clear: left;
-        text-align: right;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-weight: bold;
-        margin-bottom: 1em
-    }
-
-    dd {
-        margin-left: 200px;
-        margin-bottom: 1em
-    }
-}
-
-blockquote {
-    @include baseline;
-    padding: 0 1.6em 0 1.6em;
-    border-left: $lightbrown 0.6em solid;
-
-    p {
-        margin:0.8em 0;
-        font-size:1.2em;
-        font-weight: 300;
-    }
-
-    small {
-        display: inline-block;
-        margin: 0.8em 0 0.8em 1.5em;
-        font-size:0.9em;
-        color: $brown;
-        &:before {
-            content: '\2014 \00A0';
-        }
-    }
-
-    cite {
-        font-weight:bold;
-        a { font-weight: normal; }
-    }
-}
-
-.markdown,
-pre,
-code,
-tt {
-    font-family: $font-family-mono;
-}
-
-code, tt {
-    font-size: 0.85em;
-    white-space: pre-wrap;
-    background: lighten($lightbrown, 2%);
-    border-radius: 2px;
-    padding: 0.2em 0.4em;
-    vertical-align: top;
-}
-
-pre {
-    @include baseline;
-    background: lighten($lightbrown, 2%);
-    width: 100%;
-    padding: 10px;
-    font-family: $font-family-mono;
-    font-size: 0.9em;
-    white-space: pre;
-    overflow: auto;
-    border-radius: 3px;
-
-    code, tt {
-        font-size: inherit;
-        white-space: -moz-pre-wrap;
-        white-space: pre-wrap;
-        background: transparent;
-        border: none;
-        padding: 0;
-    }
-}
-
-kbd {
-    display: inline-block;
-    margin-bottom: 0.4em;
-    padding: 1px 8px;
-    border: #ccc 1px solid;
-    color: $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;
-}
-
-button {
-    background: transparent;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    padding: 0;
-}
-
-
-//
-// Utility Classes
-// --------------------------------------------------
-
-.clearfix {
-    @include clearfix;
-}
-
-.wrapper {
-    position: relative;
-}
-
-.show {
-    display: block !important;
-}
-
-.hidden {
-    display: none !important;
-    visibility: hidden !important;
-}
-
-.invisible {
-    visibility: hidden;
-}
-
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-
-    &:active,
-    &:focus {
-        position: static;
-        width: auto;
-        height: auto;
-        margin: 0;
-        overflow: visible;
-        clip: auto;
-    }
-}
-
-.right {
-    float: right;
-}
-
-.left {
-    float: left;
-}
-
-.vertical {
-  display: table-cell;
-  vertical-align: middle;
-}

core/client/app/styles/patterns/icons.css

@@ -0,0 +1,246 @@
+/* Icons
+/* ---------------------------------------------------------- */
+
+@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");
+}
+
+[data-icon]:before {
+    content: attr(data-icon);
+    text-transform: none !important;
+    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 {
+    text-transform: none !important;
+    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;
+}
+
+.icon-user:before {
+    content: "\e000";
+}
+.icon-search:before {
+    content: "\e001";
+}
+.icon-design:before {
+    content: "\e003";
+}
+.icon-content:before {
+    content: "\e004";
+}
+.icon-x:before {
+    content: "\e005";
+}
+.icon-add:before {
+    content: "\e006";
+}
+.icon-apps:before {
+    content: "\e007";
+}
+.icon-settings:before {
+    content: "\e008";
+}
+.icon-front-end:before {
+    content: "\e00a";
+}
+.icon-dash:before {
+    content: "\e00b";
+}
+.icon-tag:before {
+    content: "\e009";
+}
+.icon-compass:before {
+    content: "\e002";
+}
+.icon-code:before {
+    content: "\e00c";
+}
+.icon-team:before {
+    content: "\e00d";
+}
+.icon-idea:before {
+    content: "\e00e";
+}
+.icon-arrow:before {
+    content: "\e00f";
+}
+.icon-pen:before {
+    content: "\e010";
+}
+.icon-clip:before {
+    content: "\e011";
+}
+.icon-trash:before {
+    content: "\e012";
+}
+.icon-edit:before {
+    content: "\e013";
+}
+.icon-new:before {
+    content: "\e014";
+}
+.icon-lock:before {
+    content: "\e015";
+}
+.icon-link:before {
+    content: "\e016";
+}
+.icon-chat:before {
+    content: "\e017";
+}
+.icon-smiley:before {
+    content: "\e018";
+}
+.icon-star:before {
+    content: "\e019";
+}
+.icon-rss:before {
+    content: "\e01b";
+}
+.icon-hotspot:before {
+    content: "\e01d";
+}
+.icon-mail:before {
+    content: "\e01e";
+}
+.icon-sound-on:before {
+    content: "\e01f";
+}
+.icon-sound-off:before {
+    content: "\e020";
+}
+.icon-download:before {
+    content: "\e021";
+}
+.icon-upload:before {
+    content: "\e022";
+}
+.icon-bell:before {
+    content: "\e023";
+}
+.icon-shop:before {
+    content: "\e01c";
+}
+.icon-box:before {
+    content: "\e024";
+}
+.icon-connections:before {
+    content: "\e025";
+}
+.icon-arrow-right:before {
+    content: "\e01a";
+}
+.icon-arrow-left:before {
+    content: "\e026";
+}
+.icon-arrow-up:before {
+    content: "\e027";
+}
+.icon-ghost:before {
+    content: "\e028";
+}
+.icon-dice:before {
+    content: "\e029";
+}
+.icon-ambulance:before {
+    content: "\e02a";
+}
+.icon-calendar:before {
+    content: "\e02b";
+}
+.icon-folder:before {
+    content: "\e02c";
+}
+.icon-pulse:before {
+    content: "\e02d";
+}
+.icon-photos:before {
+    content: "\e02e";
+}
+.icon-legal:before {
+    content: "\e02f";
+}
+.icon-letter:before {
+    content: "\e030";
+}
+.icon-grid:before {
+    content: "\e031";
+}
+.icon-list:before {
+    content: "\e032";
+}
+.icon-blog:before {
+    content: "\e033";
+}
+.icon-question:before {
+    content: "\e034";
+}
+.icon-error:before {
+    content: "\e035";
+}
+.icon-power:before {
+    content: "\e036";
+}
+.icon-markdown:before {
+    content: "\e037";
+}
+.icon-external:before {
+    content: "\e038";
+}
+.icon-arrow2:before {
+    content: "\e039";
+}
+.icon-arrow2-up:before {
+    content: "\e03a";
+}
+.icon-arrow2-left:before {
+    content: "\e03b";
+}
+.icon-arrow2-right:before {
+    content: "\e03c";
+}
+.icon-x2:before {
+    content: "\e03d";
+}
+.icon-gh:before {
+    content: "\e03e";
+}
+.icon-signout:before {
+    content: "\e036";
+}
+.icon-minimise:before {
+    content: "\e03f";
+}
+.icon-maximise:before {
+    content: "\e040";
+}
+.icon-book:before {
+    content: "\e041";
+}
+.icon-twitter:before {
+    content: "\e042";
+}

core/client/app/styles/patterns/labels.css

@@ -0,0 +1,119 @@
+/* Labels
+/* ---------------------------------------------------------- */
+
+.label {
+    display: inline;
+    padding: 0.2em 0.6em 0.3em;
+    border-radius: 0.25em;
+    color: #fff;
+    vertical-align: baseline;
+    text-align: center;
+    white-space: nowrap;
+    font-size: 75%;
+    line-height: 1;
+    font-weight: 300;
+}
+
+.label:empty {
+    display: none;
+}
+
+.btn .label {
+    position: relative;
+    top: -1px;
+}
+
+h1 .label,
+h2 .label,
+h3 .label,
+h4 .label,
+h5 .label,
+h6 .label {
+    position: relative;
+    top: -0.18em;
+    display: inline-block;
+    padding: 0.2em 0.5em 0.25em;
+    font-size: 70%;
+    line-height: 70%;
+}
+
+a.label:hover,
+a.label:focus {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+
+/* Label Colours
+/* ---------------------------------------------------------- */
+
+.label-default {
+    background-color: #a1adb3;
+    color: #fff;
+}
+
+.label-default[href] {
+    color: #fff;
+}
+
+.label-default[href]:hover,
+.label-default[href]:focus {
+    background-color: color(#a1adb3 lightness(-10%));
+}
+
+.label-alt {
+    background-color: #666;
+    color: #fff;
+}
+
+.label-alt[href] {
+    color: #fff;
+}
+
+.label-alt[href]:hover,
+.label-alt[href]:focus {
+    background-color: color(#666 lightness(-10%));
+}
+
+.label-blue {
+    background-color: var(--blue);
+    color: #fff;
+}
+
+.label-blue[href] {
+    color: #fff;
+}
+
+.label-blue[href]:hover,
+.label-blue[href]:focus {
+    background-color: color(var(--blue) lightness(-10%));
+}
+
+.label-green {
+    background-color: var(--green);
+    color: #fff;
+}
+
+.label-green[href] {
+    color: #fff;
+}
+
+.label-green[href]:hover,
+.label-green[href]:focus {
+    background-color: color(var(--green) lightness(-10%));
+}
+
+.label-red {
+    background-color: var(--red);
+    color: #fff;
+}
+
+.label-red[href] {
+    color: #fff;
+}
+
+.label-red[href]:hover,
+.label-red[href]:focus {
+    background-color: color(var(--red) lightness(-10%));
+}

core/client/app/styles/patterns/labels.scss

@@ -1,97 +0,0 @@
-// ------------------------------------------------------------
-// Labels
-//
-// Labels are little bubbles of info.
-// Imagine an unread email counter.
-//
-// * Labels
-// * Colours
-// ------------------------------------------------------------
-
-
-//
-// Labels
-// --------------------------------------------------
-
-.label {
-    display: inline;
-    padding: .2em .6em .3em;
-    font-size: 75%;
-    font-weight: 300;
-    line-height: 1;
-    color: #FFF;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: .25em;
-
-    // Empty labels collapse automatically (not available in IE8)
-    &:empty {
-        display: none;
-    }
-
-    // Quick fix for labels in buttons
-    .btn & {
-        position: relative;
-        top: -1px;
-    }
-}
-
-h1, h2, h3, h4, h5, h6 {
-    .label {
-        display: inline-block;
-        padding: 0.2em 0.5em 0.25em;
-        top: -0.18em;
-        position: relative;
-        line-height: 70%;
-        font-size: 70%;
-    }
-}
-
-// Add hover effects, but only for links
-a.label {
-    &:hover,
-    &:focus {
-        color: #FFF;
-        text-decoration: none;
-        cursor: pointer;
-    }
-}
-
-
-//
-// Colours
-// --------------------------------------------------
-
-@mixin label-variant($text-color, $bg-color) {
-    background-color: $bg-color;
-    color: $text-color;
-
-    &[href] {
-        color: $text-color;
-        &:hover,
-        &:focus {
-            background-color: darken($bg-color, 10%);
-        }
-    }
-}
-
-.label-default {
-    @include label-variant(#fff, #A1ADB3);
-}
-
-.label-alt {
-    @include label-variant(#fff, #666);
-}
-
-.label-blue {
-    @include label-variant(#fff, $blue);
-}
-
-.label-green {
-    @include label-variant(#fff, $green);
-}
-
-.label-red {
-    @include label-variant(#fff, $red);
-}

core/client/app/styles/patterns/navlist.css

@@ -0,0 +1,69 @@
+/* Nav Lists
+/* ---------------------------------------------------------- */
+
+.nav-list {
+    padding: 0;
+    max-width: 500px;
+    border: 1px solid #e0dfd7;
+    background: #fff;
+    border-radius: var(--border-radius);
+}
+
+.nav-list.nav-list-block {
+    max-width: none;
+}
+
+.nav-list-item {
+    position: relative;
+    display: block;
+    padding: 8px 40px 8px 12px;
+    color: var(--darkgrey);
+}
+
+.nav-list-item:hover {
+    background: color(#e1e1e1 lightness(+10%));
+}
+
+.nav-list-item:first-of-type {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+}
+
+.nav-list-item:last-of-type {
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+}
+
+.nav-list-item:not(:last-of-type) {
+    border-bottom: 1px solid #e0dfd7;
+}
+
+.nav-list-item button {
+    text-align: left;
+}
+
+.nav-list-item a {
+    color: var(--darkgrey);
+}
+
+.nav-list-item b {
+    display: block;
+    font-size: 1.6rem;
+    line-height: 1.375;
+    font-weight: normal;
+}
+
+.nav-list-item span {
+    display: block;
+    color: var(--midgrey);
+    font-size: 1.1rem;
+    line-height: 1.375;
+}
+
+.nav-list-item i {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin-top: -0.9rem;
+    font-size: 1.4rem;
+}

core/client/app/styles/patterns/navlist.scss

@@ -1,83 +0,0 @@
-// ------------------------------------------------------------
-// Navigation Lists
-//
-// Navigation component used in places like the settings menu
-//
-// * Wrapper
-// * Nav Item
-// ------------------------------------------------------------
-
-
-//
-// Wrapper
-// --------------------------------------------------
-
-.nav-list {
-    padding: 0;
-    border: 1px solid #E0DFD7;
-    max-width: 500px;
-    border-radius: $border-radius;
-    background: #FFF;
-
-    &.nav-list-block {
-        max-width: none;
-    }
-}
-
-
-//
-// Nav Item
-// --------------------------------------------------
-
-.nav-list-item {
-    @include icon($i-chevron, 1.4rem, $midbrown) {
-        position: absolute;
-        top: 50%;
-        right: 10px;
-        transform: translateY(-50%);
-    }
-
-    position: relative;
-    display: block;
-    padding: 8px 40px 8px 12px;
-    color: $darkgrey;
-
-    &:hover {
-        background: lighten($lightbrown, 5%);
-    }
-
-    &:first-of-type {
-        border-top-left-radius: $border-radius;
-        border-top-right-radius: $border-radius;
-    }
-    &:last-of-type {
-        border-bottom-left-radius: $border-radius;
-        border-bottom-right-radius: $border-radius;
-    }
-
-    &:not(:last-of-type) {
-        border-bottom: 1px solid #E0DFD7;
-    }
-
-    button {
-        text-align: left;
-    }
-
-    a {
-        color: $darkgrey;
-    }
-
-    b {
-        display: block;
-        font-weight: normal;
-        font-size: 1.6rem;
-        line-height: 1.375;
-    }
-
-    span {
-        display: block;
-        font-size: 1.1rem;
-        color: $midgrey;
-        line-height: 1.375;
-    }
-}//.nav-list-item

core/client/app/styles/patterns/tables.css

@@ -0,0 +1,61 @@
+/* Tables
+/* ---------------------------------------------------------- */
+
+/* Base */
+table,
+.table {
+    margin: 1.6em 0;
+    max-width: 100%;
+    width: 100%;
+    background-color: transparent;
+}
+
+table th,
+table td,
+.table th,
+.table td {
+    padding: 8px;
+    vertical-align: middle;
+    text-align: left;
+    line-height: 20px;
+}
+
+
+/* Default Table
+/* ---------------------------------------------------------- */
+
+.table th,
+.table td {
+    border-top: 1px solid #e1e1e1;
+}
+
+.table th {
+    color: var(--brown);
+}
+
+.table caption + thead tr:first-child th,
+.table caption + thead tr:first-child td,
+.table colgroup + thead tr:first-child th,
+.table colgroup + thead tr:first-child td,
+.table thead:first-child tr:first-child th,
+.table thead:first-child tr:first-child td {
+    border-top: 0;
+}
+
+.table tbody + tbody {
+    border-top: 2px solid #e1e1e1;
+}
+
+.table table table {
+    background-color: #fff;
+}
+
+.table tbody > tr:nth-child(odd) > td,
+.table tbody > tr:nth-child(odd) > th {
+    background-color: color(#e1e1e1 lightness(+10%));
+}
+
+.table.plain tbody > tr:nth-child(odd) > td,
+.table.plain tbody > tr:nth-child(odd) > th {
+    background: transparent;
+}

core/client/app/styles/patterns/tables.scss

@@ -1,79 +0,0 @@
-// ------------------------------------------------------------
-// Tables
-//
-// Default Styles for HTML tables
-//
-// * Base Table
-// * Default Table
-// ------------------------------------------------------------
-
-//
-// Base Table
-// --------------------------------------------------
-// Minimal styling
-
-table,
-%table {
-    @include baseline;
-    width: 100%;
-    max-width: 100%;
-    background-color: transparent;
-
-    th,
-    td {
-        padding: 8px;
-        line-height: 20px;
-        text-align: left;
-        vertical-align: middle;
-    }
-
-}
-
-
-//
-// Default Table
-// --------------------------------------------------
-// Properly styled with colour, spacing, and borders
-
-.table {
-
-    @extend %table;
-
-    th,
-    td {
-        border-top: 1px solid $lightbrown;
-    }
-
-    th {
-        color: $brown;
-    }
-
-    caption + thead tr:first-child th,
-    caption + thead tr:first-child td,
-    colgroup + thead tr:first-child th,
-    colgroup + thead tr:first-child td,
-    thead:first-child tr:first-child th,
-    thead:first-child tr:first-child td {
-        border-top: 0;
-    }
-
-    tbody + tbody {
-        border-top: 2px solid $lightbrown;
-    }
-
-    table table {
-        background-color: #fff;
-    }
-
-    tbody > tr:nth-child(odd) > td,
-    tbody > tr:nth-child(odd) > th {
-        background-color: lighten($lightbrown, 5%);
-    }
-
-    &.plain {
-        tbody > tr:nth-child(odd) > td,
-        tbody > tr:nth-child(odd) > th {
-            background: transparent;
-        }
-    }
-}//.table

core/client/app/styles/vendor/nanoscroller.scss

@@ -1,53 +0,0 @@
-.nano {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-.nano > .nano-content {
-    position: absolute;
-    overflow: scroll;
-    overflow-x: hidden;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-.nano > .nano-content:focus {
-    outline: thin dotted;
-}
-.nano > .nano-content::-webkit-scrollbar {
-    display: none;
-}
-.has-scrollbar > .nano-content::-webkit-scrollbar {
-    display: block;
-}
-.nano > .nano-pane {
-    background: transparent;
-    position: absolute;
-    width: 7px;
-    right: 2px;
-    top: 2px;
-    bottom: 2px;
-    opacity: 0;
-    transition: 0.45s;
-    border-radius: 10px;
-}
-.nano > .nano-pane > .nano-slider {
-    background: #444;
-    background: rgba(0,0,0,0.35);
-    position: relative;
-    border-radius: 10px;
-}
-.nano.nanoShowScrollBar > .nano-pane,
-.nano-pane.active,
-.nano-pane.flashed {
-    opacity: 1;
-}
-.nano > .nano-pane:hover,
-.nano > .nano-pane.active {
-    width: 10px;
-    background: rgba(0, 0, 0, .15);
-    opacity: 1;
-    transition: 0.15s;
-}

core/client/app/styles/vendor/nprogress.scss

@@ -1,93 +0,0 @@
-//
-// NProgress
-// --------------------------------------------------
-
-/* Make clicks pass-through */
-#nprogress {
-    pointer-events: none;
-    -webkit-pointer-events: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 800;
-}
-
-#nprogress .bar {
-    background: $blue;
-
-    position: fixed;
-    z-index: 100;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 2px;
-}
-
-/* Fancy blur effect */
-#nprogress .peg {
-    display: block;
-    position: absolute;
-    right: 0px;
-    width: 100px;
-    height: 100%;
-    box-shadow: 0 0 10px $blue, 0 0 5px $blue;
-    opacity: 1.0;
-
-    -webkit-transform: rotate(3deg) translate(0px, -4px);
-    -moz-transform: rotate(3deg) translate(0px, -4px);
-    -ms-transform: rotate(3deg) translate(0px, -4px);
-    -o-transform: rotate(3deg) translate(0px, -4px);
-    transform: rotate(3deg) translate(0px, -4px);
-}
-
-/* Remove these to get rid of the spinner */
-#nprogress .spinner {
-    display: block;
-    position: fixed;
-    z-index: 100;
-    top: 15px;
-    right: 15px;
-}
-
-#nprogress .spinner-icon {
-    width: 14px;
-    height: 14px;
-
-    border:  solid 2px transparent;
-    border-top-color:  $blue;
-    border-left-color: $blue;
-    border-radius: 10px;
-
-    -webkit-animation: nprogress-spinner 400ms linear infinite;
-    -moz-animation:    nprogress-spinner 400ms linear infinite;
-    -ms-animation:     nprogress-spinner 400ms linear infinite;
-    -o-animation:      nprogress-spinner 400ms linear infinite;
-    animation:         nprogress-spinner 400ms linear infinite;
-}
-
-
-//
-// Keyframes
-// --------------------------------------------------
-
-@-webkit-keyframes nprogress-spinner {
-    0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
-    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-moz-keyframes nprogress-spinner {
-    0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
-    100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-o-keyframes nprogress-spinner {
-    0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
-    100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-ms-keyframes nprogress-spinner {
-    0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
-    100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@keyframes nprogress-spinner {
-    0%   { transform: rotate(0deg);   transform: rotate(0deg); }
-    100% { transform: rotate(360deg); transform: rotate(360deg); }
-}

core/client/app/templates/-nav-menu.hbs

@@ -0,0 +1,66 @@
+<nav class="gh-nav">
+    {{#gh-dropdown-button tagName="header" class="gh-nav-menu" dropdownName="user-menu"}}
+        <div class="gh-nav-menu-icon" style="background-image: url(https://s3.amazonaws.com/f.cl.ly/items/3I0g431b2b3q00253K1V/d16dc430c9c4f5c09d6ca09be3e5c72fdb21c1ac.png)"></div>
+        <div class="gh-nav-menu-details">
+            <div class="gh-nav-menu-details-blog">{{config.blogTitle}}</div>
+            <div class="gh-nav-menu-details-user">{{session.user.name}}</div>
+        </div>
+        <i class="icon-arrow"></i>
+    {{/gh-dropdown-button}}
+    {{#gh-dropdown tagName="div" classNames="dropdown" name="user-menu" closeOnClick="true"}}
+        <ul class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu" role="menu" style="right:-50%;left:auto;margin-right:40px">
+            <li role="presentation">{{#link-to "settings.about" classNames="gh-nav-menu-about dropdown-item js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-gh"></i> About Ghost{{/link-to}}</li>
+            <li class="divider"></li>
+            <li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-user"></i> Your Profile{{/link-to}}</li>
+            <li class="divider"></li>
+            <li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}<i class="icon-signout"></i> Sign Out{{/link-to}}</li>
+        </ul>
+    {{/gh-dropdown}}
+    <section class="gh-nav-body">
+        <section class="gh-nav-search">
+            <input class="gh-nav-search-input gh-input" type="text" placeholder="Search">
+            <button class="gh-nav-search-button"><i class="icon-search"></i><span class="sr-only">Search</span></button>
+        </section>
+        <ul class="gh-nav-list gh-nav-main">
+            {{!<li><i class="icon-dash"></i>Dashboard</li>}}
+            <li>{{#link-to "editor.new" classNames="gh-nav-main-editor"}}<i class="icon-pen"></i>New Post{{/link-to}}</li>
+            <li>{{#link-to "posts" classNames="gh-nav-main-content"}}<i class="icon-content"></i>Content{{/link-to}}</li>
+            {{!<li><a href="#"><i class="icon-user"></i>My Posts</a></li>}}
+            <li>{{#link-to "settings.users" classNames="gh-nav-main-users"}}<i class="icon-team"></i>Team{{/link-to}}</li>
+            {{!<li><a href="#"><i class="icon-idea"></i>Ideas</a></li>}}
+        </ul>
+        <ul class="gh-nav-list gh-nav-settings">
+            <li class="gh-nav-list-h">Settings</li>
+            <li>{{#link-to "settings.general" classNames="gh-nav-settings-general"}}<i class="icon-settings"></i>General{{/link-to}}</li>
+            {{!<li><i class="icon-design"></i>Themes</li>}}
+            <li>{{#link-to "settings.navigation" classNames="gh-nav-settings-navigation"}}<i class="icon-compass"></i>Navigation{{/link-to}}</li>
+            <li>{{#link-to "settings.tags" classNames="gh-nav-settings-tags"}}<i class="icon-tag"></i>Tags{{/link-to}}</li>
+            <li>{{#link-to "settings.code-injection" classNames="gh-nav-settings-code-injection"}}<i class="icon-code"></i>Code Injection{{/link-to}}</li>
+            <li>{{#link-to "settings.labs" classNames="gh-nav-settings-labs"}}<i class="icon-apps"></i>Labs{{/link-to}}</li>
+        </ul>
+    </section>
+    <footer class="gh-nav-footer">
+        <div class="gh-autonav-toggle">
+            <i class="icon-minimise"></i>
+        </div>
+        <a class="gh-nav-footer-sitelink" href="{{config.blogUrl}}/" target="_blank">View blog <i class="icon-external"></i></a>
+        <div class="gh-help-menu">
+            {{#gh-dropdown-button dropdownName="help-menu" tagName="div"}}
+                <div class="gh-help-button">
+                    <i class="icon-question"><span class="hidden">Help</span></i>
+                </div>
+            {{/gh-dropdown-button}}
+            {{#gh-dropdown tagName="div" classNames="dropdown" name="help-menu" closeOnClick="true"}}
+                <ul class="dropdown-menu dropdown-triangle-bottom" role="menu">
+                    <li role="presentation"><a class="dropdown-item help-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/" target="_blank"><i class="icon-ambulance"></i> Support Center</a></li>
+                    <li role="presentation"><a class="dropdown-item help-menu-tweet" role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"><i class="icon-twitter"></i> Tweet @TryGhost!</a></li>
+                    <li class="divider"></li>
+                    <li role="presentation"><a class="dropdown-item help-menu-how-to" role="menuitem" tabindex="-1" href="http://support.ghost.org/how-to-use-ghost/" target="_blank"><i class="icon-book"></i> How to Use Ghost</a></li>
+                    <li role="presentation"><a class="dropdown-item help-menu-markdown" role="menuitem" tabindex="-1" href="" {{action "openModal" "markdown"}}><i class="icon-markdown"></i> Markdown Help</a></li>
+                    <li class="divider"></li>
+                    <li role="presentation"><a class="dropdown-item help-menu-wishlist" role="menuitem" tabindex="-1" href="http://ideas.ghost.org/" target="_blank"><i class="icon-idea"></i> Wishlist</a></li>
+                </ul>
+            {{/gh-dropdown}}
+        </div>{{! .help-menu }}
+    </footer>
+</nav>

core/client/app/templates/-navbar.hbs

@@ -1,72 +0,0 @@
-<nav class="global-nav" role="navigation">
-
-    <a class="nav-item ghost-logo" href="{{config.blogUrl}}/" title="Visit blog">
-        <div class="nav-label"><i class="icon-ghost"></i> <span>Visit blog</span> </div>
-    </a>
-
-    {{#link-to "posts" classNames="nav-item nav-content js-nav-item"}}
-        <div class="nav-label"><i class="icon-content"></i> Content</div>
-    {{/link-to}}
-
-    {{#link-to "editor.new" classNames="nav-item nav-new js-nav-item"}}
-        <div class="nav-label"><i class="icon-add"></i> New Post</div>
-    {{/link-to}}
-
-    {{#unless session.user.isAuthor}}
-    {{#link-to "settings" classNames="nav-item nav-settings js-nav-item"}}
-        <div class="nav-label"><i class="icon-settings2"></i> Settings</div>
-    {{/link-to}}
-    {{/unless}}
-
-    {{! TODO: Mobile-only menu items
-
-    <a class="nav-item thing" href="#">
-        <div class="nav-label">Thing</div>
-    </a>
-    <a class="nav-item thing2" href="#">
-        <div class="nav-label">Thing2</div>
-    </a>
-
-    }}
-
-    <div class="nav-item user-menu">
-        {{#gh-dropdown-button dropdownName="user-menu" tagName="div" classNames="nav-label clearfix"}}
-            <span class="image" style={{userImageBackground}}>
-                <img src={{userImage}} title={{userImageAlt}}>
-            </span>
-            <div class="name">
-                {{session.user.name}} <i class="icon-chevron-down"></i>
-                <small>Profile &amp; Settings</small>
-            </div>
-        {{/gh-dropdown-button}}
-        {{#gh-dropdown tagName="div" classNames="dropdown" name="user-menu" closeOnClick="true"}}
-            <ul class="dropdown-menu dropdown-triangle-top-right js-user-menu-dropdown-menu" role="menu">
-                <li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-user"></i> Your Profile{{/link-to}}</li>
-                <li class="divider"></li>
-                <li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}<i class="icon-power"></i> Sign Out{{/link-to}}</li>
-            </ul>
-        {{/gh-dropdown}}
-    </div>{{! .user-menu }}
-
-    <div class="nav-item help-menu">
-        {{#gh-dropdown-button dropdownName="help-menu" tagName="div" classNames="nav-label clearfix"}}
-            <div class="help-button">
-                <i class="icon-question"><span class="hidden">Help</span></i>
-            </div>
-        {{/gh-dropdown-button}}
-        {{#gh-dropdown tagName="div" classNames="dropdown" name="help-menu" closeOnClick="true"}}
-            <ul class="dropdown-menu dropdown-triangle-top" role="menu">
-                <li role="presentation"><a class="dropdown-item help-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/" target="_blank"><i class="icon-support"></i> Support Center</a></li>
-                <li role="presentation"><a class="dropdown-item help-menu-tweet" role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"><i class="icon-twitter"></i> Tweet @TryGhost!</a></li>
-                <li class="divider"></li>
-                <li role="presentation"><a class="dropdown-item help-menu-how-to" role="menuitem" tabindex="-1" href="http://support.ghost.org/how-to-use-ghost/" target="_blank"><i class="icon-book"></i> How to Use Ghost</a></li>
-                <li role="presentation"><a class="dropdown-item help-menu-markdown" role="menuitem" tabindex="-1" href="" {{action "openModal" "markdown"}}><i class="icon-markdown"></i> Markdown Help</a></li>
-                <li class="divider"></li>
-                <li role="presentation"><a class="dropdown-item help-menu-wishlist" role="menuitem" tabindex="-1" href="http://ideas.ghost.org/" target="_blank"><i class="icon-list"></i> Wishlist</a></li>
-            </ul>
-        {{/gh-dropdown}}
-    </div>{{! .help-menu }}
-
-</nav>{{! .global-nav }}
-
-<div class="nav-cover js-nav-cover"></div>