From 838e16a1d3e9787e4c88044e98b6871e7cd3cb96 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Mon, 14 Nov 2016 16:55:08 +0700 Subject: [PATCH] Editor and 1.0 style updates --- .../admin/app/styles/components/dropdowns.css | 4 +- ghost/admin/app/styles/layouts/about.css | 5 ++ ghost/admin/app/styles/layouts/content.css | 39 +++++++-------- ghost/admin/app/styles/layouts/editor.css | 7 ++- ghost/admin/app/styles/layouts/main.css | 6 ++- ghost/admin/app/styles/patterns/forms.css | 5 -- ghost/admin/app/styles/patterns/global.css | 47 ++++++++++++++----- ghost/admin/app/templates/about.hbs | 4 +- ghost/admin/app/templates/posts.hbs | 5 -- 9 files changed, 71 insertions(+), 51 deletions(-) diff --git a/ghost/admin/app/styles/components/dropdowns.css b/ghost/admin/app/styles/components/dropdowns.css index e3342af445..79ea0151f2 100644 --- a/ghost/admin/app/styles/components/dropdowns.css +++ b/ghost/admin/app/styles/components/dropdowns.css @@ -98,7 +98,7 @@ .dropdown-menu > .active > button:hover, .dropdown-menu > .active > button:focus { outline: 0; - background-color: #428bca; + background-color: var(--blue); color: #fff; text-decoration: none; } @@ -110,7 +110,7 @@ .dropdown-menu > .disabled > button, .dropdown-menu > .disabled > button:hover, .dropdown-menu > .disabled > button:focus { - color: #777; + color: var(--midgrey); } .dropdown-menu > .disabled > a:hover, diff --git a/ghost/admin/app/styles/layouts/about.css b/ghost/admin/app/styles/layouts/about.css index 95b806d71b..503afc1b58 100644 --- a/ghost/admin/app/styles/layouts/about.css +++ b/ghost/admin/app/styles/layouts/about.css @@ -19,6 +19,11 @@ list-style: none; } +.gh-env-list li { + margin: 0; + font-size: 1.4rem; +} + .gh-env-help { max-width: 200px; } diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css index 2d18af0c45..93e3e3d364 100644 --- a/ghost/admin/app/styles/layouts/content.css +++ b/ghost/admin/app/styles/layouts/content.css @@ -28,8 +28,7 @@ top: 0; bottom: 0; left: 0; - padding: 15px; - width: 33%; + width: 30%; border-right: #dfe1e3 1px solid; background: #fff; } @@ -54,25 +53,22 @@ } .content-list .entry-title { - font-size: 1.6rem; - line-height: 1.4em; + margin: 0; + font-size: 1.5rem; + line-height: 1.3em; font-weight: normal; } .content-list .entry-meta { - margin-top: 14px; + position: relative; + margin-top: 7px; line-height: 18px; } -.content-list .entry-meta .internal-tags-list { - margin-top: 5px; - line-height: 22px; -} - .content-list .avatar { position: relative; float: left; - margin-right: 14px; + margin: 1px 10px 0px 0; width: 18px; height: 18px; background-position: center center; @@ -106,8 +102,8 @@ .content-list .author { position: absolute; - bottom: 22px; - left: 56px; + bottom: 0; + left: 28px; opacity: 0; } @@ -134,7 +130,7 @@ .content-list li a { display: block; - padding: 19px 20px 22px 24px; + padding: 19px 25px 22px 20px; color: rgba(0, 0, 0, 0.5); } @@ -162,7 +158,7 @@ @media (min-width: 901px) { .content-list .active a { - border-left: var(--blue) 3px solid; + box-shadow: var(--blue) 3px 0 0 inset; } } @@ -170,7 +166,7 @@ /* Preview (Right pane) /* ---------------------------------------------------------- */ -.content-preview-content .content-preview-title a { +.content-preview-title a { position: relative; color: var(--darkgrey); text-decoration: none; @@ -183,8 +179,7 @@ bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; - padding: 15px; - width: 67%; + width: 70%; background: #fff; } @@ -197,14 +192,14 @@ } } -.content-preview .content-preview-content { - padding: 5%; +.content-preview-content { + padding: 5vw 6vw; word-break: break-word; hyphens: auto; } @media (max-width: 900px) { - .content-preview .content-preview-content { + .content-preview-content { position: absolute; top: 0; right: 0; @@ -215,7 +210,7 @@ } } -.content-preview .content-preview-content .wrapper { +.content-preview-content .wrapper { margin: 0 auto; max-width: 700px; } diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css index 3d45001e76..8164b855f2 100644 --- a/ghost/admin/app/styles/layouts/editor.css +++ b/ghost/admin/app/styles/layouts/editor.css @@ -170,10 +170,15 @@ height: 65px; } +.gh-editor-status { + color: var(--midgrey); + font-weight: 300; +} + .gh-editor-container { position: relative; overflow-y: auto; - padding: 100px 4vw 40px; + padding: 10vw 4vw; width: 100%; } diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index 0fdcb7b4b3..88b5383251 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -154,7 +154,11 @@ body > .ember-view:not(.liquid-target-container) { line-height: 1.5em; } -.gh-nav-list-h { +.gh-nav-list li { + margin: 0; +} + +.gh-nav-list .gh-nav-list-h { overflow: hidden; margin-top: 15px; padding: 5px 10px 5px 15px; diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index ea414a136d..dac067b714 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -176,11 +176,6 @@ textarea { font-weight: normal; } -.for-radio label:hover p, -.for-checkbox label:hover p { - color: var(--midgrey); -} - .for-radio input, .for-checkbox input { position: absolute; diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css index 403aed78e4..2b182ef1cb 100644 --- a/ghost/admin/app/styles/patterns/global.css +++ b/ghost/admin/app/styles/patterns/global.css @@ -7,13 +7,13 @@ :root { /* Colours */ - --darkgrey: #242628; - --midgrey: #7d878a; + --darkgrey: #343f44; + --midgrey: #738a94; --lightgrey: #e2edf2; - --blue: #5ba4e5; - --red: #e25440; - --orange: #f2a925; - --green: #9fbb58; + --blue: #3eb0ef; + --red: #f05230; + --orange: #fecd35; + --green: #a4d037; /* Style values */ --border-radius: 4px; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; @@ -103,28 +103,43 @@ h6 { h1 { text-indent: -1px; - font-size: 5rem; + font-size: 2.9rem; +} +@media (max-width: 500px) { + h1 { + font-size: 2.4rem; + } } h2 { text-indent: -1px; - font-size: 4.2rem; + font-size: 2.2rem; +} +@media (max-width: 500px) { + h2 { + font-size: 1.9rem; + } } h3 { - font-size: 3.8rem; + font-size: 1.9rem; +} +@media (max-width: 500px) { + h3 { + font-size: 1.7rem; + } } h4 { - font-size: 3.1rem; + font-size: 1.7rem; } h5 { - font-size: 2.8rem; + font-size: 1.5rem; } h6 { - font-size: 2.2rem; + font-size: 1.5rem; } p, @@ -132,11 +147,17 @@ ul, ol, dl { margin: 0 0 1.7em 0; + font-size: 1.6rem; } ol, ul { - padding-left: 2.5em; + padding-left: 1.2em; +} + +li { + margin-bottom: 10px; + line-height: 1.4em; } ol ol, diff --git a/ghost/admin/app/templates/about.hbs b/ghost/admin/app/templates/about.hbs index e00482f967..07f8f6d5da 100644 --- a/ghost/admin/app/templates/about.hbs +++ b/ghost/admin/app/templates/about.hbs @@ -36,9 +36,9 @@ diff --git a/ghost/admin/app/templates/posts.hbs b/ghost/admin/app/templates/posts.hbs index 9621c30c77..c7b2f83bf8 100644 --- a/ghost/admin/app/templates/posts.hbs +++ b/ghost/admin/app/templates/posts.hbs @@ -41,11 +41,6 @@ {{/if}} {{/if}} -
- {{#each post.internalTags as |tag|}} - {{tag.name}} - {{/each}} -
{{/link-to}} {{/gh-posts-list-item}}