From de0ea094160847025b9b5d9e55b478305ffb994d Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Thu, 31 Oct 2019 14:21:18 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Refreshed=20Koenig=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit no issue. - updated basic typographic style of Koenig to match better with Casper 3.0 - fixed vertical spacings of paragraphs and lists - changed color of code text to make it more theme agnostic - refined Koenig mobile typography --- ghost/admin/app/styles/layouts/editor.css | 15 ++-- ghost/admin/app/styles/spirit/_koenig.css | 90 ++++++++++++++++------- 2 files changed, 72 insertions(+), 33 deletions(-) diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css index 4d116d0093..3ef992610b 100644 --- a/ghost/admin/app/styles/layouts/editor.css +++ b/ghost/admin/app/styles/layouts/editor.css @@ -358,11 +358,10 @@ min-height: auto; margin-bottom: 2vw; border: none; - color: var(--darkgrey); - font-size: 3.8rem; - line-height: 1.333em; - font-weight: 700; - letter-spacing: 0.04rem; + color: var(--darkgrey-d1); + font-size: 4.8rem; + line-height: 1.15em; + font-weight: 600; overflow: hidden; box-shadow: none; } @@ -384,6 +383,12 @@ } } +@media (max-width: 500px) { + .gh-editor-title { + font-size: 3.4rem; + } +} + /* SimpleMDE editor /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/styles/spirit/_koenig.css b/ghost/admin/app/styles/spirit/_koenig.css index a97eb7cb4e..10d52e3b08 100644 --- a/ghost/admin/app/styles/spirit/_koenig.css +++ b/ghost/admin/app/styles/spirit/_koenig.css @@ -57,43 +57,42 @@ .koenig-editor__editor h5, .koenig-editor__editor h6 { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; - font-weight: 700; + font-weight: 600; + color: var(--darkgrey-d1); } +/* H1 should be almost the same size as the post title to suggest avoid using it */ .koenig-editor__editor h1 { - font-size: 3.2rem; - line-height: 1.4em; - letter-spacing: .04rem; + font-size: 4.4rem; + line-height: 1.15em; } .koenig-editor__editor h2 { - font-size: 2.7rem; - line-height: 1.4em; - letter-spacing: .04rem; + font-size: 3.2rem; + line-height: 1.32em; } .koenig-editor__editor h3 { - font-size: 2.2rem; - line-height: 1.6em; - letter-spacing: .04rem; + font-size: 2.5rem; + line-height: 1.35em; } +/* H4 is almost the same size as H3 to discourage using it */ .koenig-editor__editor h4 { - font-size: 1.92rem; + font-size: 2.2rem; line-height: 1.4em; - letter-spacing: .04rem; } .koenig-editor__editor h5 { - font-size: 1.8rem; + font-size: 2.0rem; line-height: 1.4em; - letter-spacing: .06rem; + font-weight: 700; } .koenig-editor__editor h6 { - font-size: 1.65rem; + font-size: 1.85rem; line-height: 1.6em; - letter-spacing: .04rem; + font-weight: 700; } @@ -226,7 +225,33 @@ .koenig-editor__editor div + h4, .koenig-editor__editor div + h5, .koenig-editor__editor div + h6 { - margin: 2.8rem 0 0; + margin: 4.8rem 0 0; +} + +@media (max-width: 500px) { + .koenig-editor__editor h1 { + font-size: 3.2rem; + } + + .koenig-editor__editor h2 { + font-size: 2.8rem; + } + + .koenig-editor__editor h3 { + font-size: 2.4rem; + } + + .koenig-editor__editor h4 { + font-size: 2.3rem; + } + + .koenig-editor__editor h5 { + font-size: 2.0rem; + } + + .koenig-editor__editor h6 { + font-size: 1.9rem; + } } @@ -240,9 +265,8 @@ { font-family: georgia,serif; font-weight: 400; - letter-spacing: .02rem; line-height: 1.6em; - font-size: 1.92rem; + font-size: 2.0rem; } .koenig-editor__editor h1 + p { @@ -250,14 +274,14 @@ } .koenig-editor__editor h2 + p { - margin: 0.52rem 0 0; + margin: 0.8rem 0 0; } .koenig-editor__editor h3 + p, .koenig-editor__editor h4 + p, .koenig-editor__editor h5 + p, .koenig-editor__editor h6 + p { - margin: 0.52rem 0 0; + margin: 0.8rem 0 0; } .koenig-editor__editor p + p, @@ -265,13 +289,23 @@ .koenig-editor__editor ul + p, .koenig-editor__editor ol + p { - margin: 3.6rem 0 0; + margin: 3.2rem 0 0; } .koenig-editor__editor div + p { /* Mobiledoc cards can be addressed by their wrapper div element */ margin: 2.8rem 0 0; } +@media (max-width: 500px) { + .koenig-editor__editor p, + .koenig-editor__editor blockquote, + .koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar), + .koenig-editor__editor ol + { + font-size: 1.8rem; + } +} + /* Lists /* -------------------------------------------------------------------- */ @@ -306,7 +340,7 @@ .koenig-editor__editor p + ul:not(.kg-action-bar):not(.kg-link-toolbar), .koenig-editor__editor p + ol { - margin: 1.0rem 0 0; + margin: 3.0rem 0 0; } .koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) + ul:not(.kg-action-bar):not(.kg-link-toolbar), @@ -315,7 +349,7 @@ .koenig-editor__editor ol + ol, .koenig-editor__editor blockquote + ul:not(.kg-action-bar):not(.kg-link-toolbar), .koenig-editor__editor blockquote + ol { - margin: 3.2rem 0 0; + margin: 3.0rem 0 0; } .koenig-editor__editor h1 + ul:not(.kg-action-bar):not(.kg-link-toolbar), @@ -388,7 +422,7 @@ /* -------------------------------------------------------------------- */ .koenig-editor__editor a { - color: var(--darkgrey); + color: var(--darkgrey-d2); text-decoration: none; box-shadow: 0 1px 0 var(--white), 0 2px 0 var(--blue); } @@ -443,7 +477,7 @@ .koenig-editor__editor code { border-radius: 2px; - color: var(--pink); + color: var(--darkgrey-d2); font-size: 1.65rem; line-height: 1em; padding: .4rem .4rem .2rem; @@ -454,7 +488,7 @@ .koenig-editor__editor pre code { border: none; font-size: 1.6rem; - color: var(--pink); + color: var(--darkgrey-d2); padding: 0; } @@ -466,7 +500,7 @@ overflow: auto; white-space: pre; width: 100%; - color: var(--darkgrey); + color: var(--darkgrey-d2); } .koenig-editor__editor pre.js-embed-placeholder,