From ffa21943d01c2ea1ea537f13b0b9a5f0c505732b Mon Sep 17 00:00:00 2001 From: Stein Strindhaug Date: Wed, 7 Sep 2016 09:41:49 +0200 Subject: [PATCH] Increase legibility by increasing contrast Raise contrast by slightly adjusting font-weight, color and font size (from 12.2px to 12.8px in the menu) --- CHANGELOG.txt | 1 + CONTRIBUTORS.rst | 1 + docs/releases/1.7.rst | 1 + .../wagtailadmin/scss/_variables.scss | 5 ++--- .../wagtailadmin/scss/components/_forms.scss | 2 +- .../scss/components/_listing.scss | 2 +- .../scss/components/_main-nav.scss | 19 +++++++++++-------- .../scss/components/_typography.scss | 2 +- .../scss/layouts/page-editor.scss | 1 + 9 files changed, 20 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 6fc77631fa..b983ec61ef 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -11,6 +11,7 @@ Changelog * The Wagtail version number can now be obtained as a tuple using `from wagtail import VERSION` (Tim Heap) * `send_mail` logic has been moved from `AbstractEmailForm.process_form_submission` into `AbstractEmailForm.send_mail`. Now it's easier to override this logic (Tim Leguijt) * Added `before_create_page`, `before_edit_page`, `before_delete_page` hooks (Karl Hobley) + * Updated font sizes and colours to improve legibility of admin menu and buttons (Stein Strindhaug) * Fix: Migrations for wagtailcore and project template are now reversible (Benjamin Bach) * Fix: The default image format label text ('Full width', 'Left-aligned', 'Right-aligned') is now localised (Mikalai Radchuk) * Fix: Text on the front-end 'password required' form is now marked for translation (Janneke Janssen) diff --git a/CONTRIBUTORS.rst b/CONTRIBUTORS.rst index e08ad3c3ad..6c312bfa7d 100644 --- a/CONTRIBUTORS.rst +++ b/CONTRIBUTORS.rst @@ -167,6 +167,7 @@ Contributors * Kees Hink * Jayden Smith * emg36 +* Stein Strindhaug Translators =========== diff --git a/docs/releases/1.7.rst b/docs/releases/1.7.rst index a5dd13b94a..d93fa32ce8 100644 --- a/docs/releases/1.7.rst +++ b/docs/releases/1.7.rst @@ -41,6 +41,7 @@ Minor features * The Wagtail version number can now be obtained as a tuple using ``from wagtail import VERSION`` (Tim Heap) * ``send_mail`` logic has been moved from ``AbstractEmailForm.process_form_submission`` into ``AbstractEmailForm.send_mail``. Now it's easier to override this logic (Tim Leguijt) * Added ``before_create_page``, ``before_edit_page``, ``before_delete_page`` hooks (Karl Hobley) + * Updated font sizes and colours to improve legibility of admin menu and buttons (Stein Strindhaug) Bug fixes diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss index 11b923a78b..d2f41107d7 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss @@ -45,6 +45,8 @@ $color-grey-3: #d9d9d9; $color-grey-4: #e6e6e6; $color-grey-5: #fafafa; +$color-menu-text: #cacaca; // was #aaa wich was too low contrast + $color-thead-bg: $color-grey-5; $color-header-bg: $color-teal; // #ff6a58; $color-fieldset-hover: $color-grey-5; @@ -78,6 +80,3 @@ $font-serif: Roboto Slab, Georgia, serif; // misc sizing $thumbnail-width: 130px; $menu-width: 180px; - - - diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss index 01b2674dd5..2c355f6a21 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss @@ -485,7 +485,7 @@ input[type=checkbox]:checked:before { .button-small { padding: 0 0.8em; height: 2em; - font-size: 0.85em; + font-size: 0.95em; } .button-secondary { diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss index d7230e2200..79d13886ac 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss @@ -6,7 +6,7 @@ ul.listing { .listing { margin-bottom: 2em; - color: lighten($color-text-base, 20%); + color: lighten($color-text-base, 10%); font-size: 0.95em; ul { diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss index 19c8cae87c..3038494013 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss @@ -51,11 +51,14 @@ $submenu-color: darken($color-grey-1, 5%); -webkit-font-smoothing: auto; text-decoration: none; display: block; - color: #aaa; + color: $color-menu-text; padding: 0.8em 1.7em; - font-size: 0.95em; - font-weight: 300; - + font-size: 1em; + font-weight: normal; + // Note, font-weights lower than normal, + // and font-size smaller than 1em (80% ~= 12.8px), + // makes the strokes thinner than 1px on non-retina screens + // making the text semi-transparent &:hover, &:focus { outline: none; @@ -83,7 +86,7 @@ $submenu-color: darken($color-grey-1, 5%); position: absolute; right: 0.5em; top: 0.5em; - margin-top: 0.15em; + margin-top: 0; } } @@ -146,7 +149,7 @@ $submenu-color: darken($color-grey-1, 5%); .explorer { // position: absolute; // margin-top: 70px; - font-size: 0.95em; + font-size: 1em; } .nav-search { @@ -169,7 +172,7 @@ $submenu-color: darken($color-grey-1, 5%); cursor: pointer; border: 1px solid darken($color-grey-2, 10%); background-color: darken($color-grey-2, 15%); - color: #aaa; + color: $color-menu-text; padding: 0.8em 2.5em 0.8em 1em; &:hover { @@ -352,7 +355,7 @@ body.explorer-open { font-weight: 500; text-transform: none; text-align: center; - color: #aaa; + color: $color-menu-text; &:before { font-size: 4em; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss index c92207eb39..2222a6520c 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss @@ -81,7 +81,7 @@ dl { } dt { - color: darken($color-grey-3, 5%); + color: darken($color-grey-3, 15%); text-transform: uppercase; font-size: 0.9em; } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss index 9a5d75c0c9..2525a94202 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss @@ -85,6 +85,7 @@ > h2 { -webkit-font-smoothing: auto; background: $color-salmon-light; + color: #200200; text-transform: uppercase; padding: 0.9em 0 0.9em 4.1em; font-size: 0.95em;