From c89bd9d7b61ab531202a914447e7394e716bec1a Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Fri, 20 Jan 2017 10:55:59 +0000 Subject: [PATCH 1/6] Indicate end of content and beginning of footnotes * Matches non-print styles but uses text colour --- app/assets/stylesheets/govuk-component/_govspeak-print.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/govuk-component/_govspeak-print.scss b/app/assets/stylesheets/govuk-component/_govspeak-print.scss index ac4018da9..a4e12c945 100644 --- a/app/assets/stylesheets/govuk-component/_govspeak-print.scss +++ b/app/assets/stylesheets/govuk-component/_govspeak-print.scss @@ -45,4 +45,7 @@ } } + .footnotes { + border-top: 1px solid $text-colour; + } } From bdd3f4b51b7473651031f2b6f38a39c907b88ea2 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Fri, 20 Jan 2017 10:58:17 +0000 Subject: [PATCH 2/6] Ensure headings are bold when printing At the top of the print styles we set the font weight for all headings to be bold. But we were using the `core` mixin which resets those styles to be font-weight: 400. Use `bold-xx` instead of `core-xx` to maintain the bold styles. --- app/assets/stylesheets/helpers/_print-base.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/helpers/_print-base.scss b/app/assets/stylesheets/helpers/_print-base.scss index 2f4689a1c..e9066af11 100644 --- a/app/assets/stylesheets/helpers/_print-base.scss +++ b/app/assets/stylesheets/helpers/_print-base.scss @@ -34,16 +34,16 @@ h4 { } h2 { - @include core-19; + @include bold-19; padding-top: 7pt; } h3 { - @include core-16; + @include bold-16; } h4 { - @include core-14; + @include bold-14; } p { From d2e53a70e7d70ac0ea23c13363c0484e06dd2b87 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Fri, 20 Jan 2017 11:06:49 +0000 Subject: [PATCH 3/6] Hide sticky contents link when printing Al ink back to the top of the page is not useful in print. --- app/assets/stylesheets/govuk-component/_component-print.scss | 1 + .../govuk-component/_govspeak-html-publication-print.scss | 5 +++++ 2 files changed, 6 insertions(+) create mode 100644 app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss diff --git a/app/assets/stylesheets/govuk-component/_component-print.scss b/app/assets/stylesheets/govuk-component/_component-print.scss index efaa0640b..e3c920c11 100644 --- a/app/assets/stylesheets/govuk-component/_component-print.scss +++ b/app/assets/stylesheets/govuk-component/_component-print.scss @@ -2,6 +2,7 @@ // Components styles @import "govspeak-print"; +@import "govspeak-html-publication-print"; @import "metadata-print"; @import "related-items-print"; @import "title-print"; diff --git a/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss b/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss new file mode 100644 index 000000000..77eab6dc6 --- /dev/null +++ b/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss @@ -0,0 +1,5 @@ +.govuk-govspeak-html-publication { + .sticky-element { + display: none; + } +} From f18ee3a4bb15fcaf1f59566cfb20b7dd6669357e Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Fri, 20 Jan 2017 12:08:07 +0000 Subject: [PATCH 4/6] Use decimal list styles for ordered lists MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When printing content, ordered lists were rendered without the correct numbers. This will also render numbers against ordered lists used elsewhere that don’t have a specific reset applied. --- app/assets/stylesheets/helpers/_print-base.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/stylesheets/helpers/_print-base.scss b/app/assets/stylesheets/helpers/_print-base.scss index e9066af11..dec901ccc 100644 --- a/app/assets/stylesheets/helpers/_print-base.scss +++ b/app/assets/stylesheets/helpers/_print-base.scss @@ -54,9 +54,16 @@ ul, ol { @include core-14; padding-left: 13pt; +} + +ul { list-style: disc; } +ol { + list-style: decimal; +} + li { line-height: 1.5; p { From 62f62e12de0622cd4a565b69b067e665b0d496d6 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Fri, 20 Jan 2017 12:38:51 +0000 Subject: [PATCH 5/6] Use toolkit typography when printing mainstream guides MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mainstream guides have their own print view which had outdated typography mixins imported from styleguide/typography. These didn’t include `bold-xx` mixins and so compilation of Sass would fail when running tests. * Switch to the latest mixins * Delete the old mixins, now un-used --- app/assets/stylesheets/guides-print.scss | 7 +- .../stylesheets/styleguide/_typography.scss | 218 ------------------ 2 files changed, 2 insertions(+), 223 deletions(-) delete mode 100644 app/assets/stylesheets/styleguide/_typography.scss diff --git a/app/assets/stylesheets/guides-print.scss b/app/assets/stylesheets/guides-print.scss index a28347c26..2068ef5fc 100644 --- a/app/assets/stylesheets/guides-print.scss +++ b/app/assets/stylesheets/guides-print.scss @@ -8,11 +8,8 @@ $is-print: true; // govuk_frontend_toolkit includes @import "colours"; -@import "measurements.scss"; - -@import "styleguide/print"; -@import "styleguide/font-stacks"; -@import "styleguide/typography"; +@import "measurements"; +@import "typography"; // OUTPUT // The following files and inline CSS will form the output of print.css diff --git a/app/assets/stylesheets/styleguide/_typography.scss b/app/assets/stylesheets/styleguide/_typography.scss deleted file mode 100644 index 33b60f9c1..000000000 --- a/app/assets/stylesheets/styleguide/_typography.scss +++ /dev/null @@ -1,218 +0,0 @@ -@import "_print.scss"; - -// GOV.UK typography palettes - -// ANATOMY OF A TYPE STYLE -// ----------------------- -// These are a collection of graphic styles. They are deliberately -// abstracted from semantic HTML context to enable flexible re-use. -// Although there is a lot of duplication within this file, as long -// as you GZIP your CSS it shouldnt cause any bloat. -// -// -// @mixin brand-45 { -// _ Style name refers to graphic style rather than semantic use -// -// font-size: 45px; -// -// line-height: 1.1555555556; -// _ Unit-less, relative leading value. -// line-height (52px) / font-size (45px) = relative line-height -// -// font-weight: 400; -// letter-spacing: 0.01em; -// text-transform: none; -// _ Again, we cant assume anything about pre-exising CSS on the -// page, so setting these values (even if just resetting them -// to default values) will increase the robustness of the style. -// -// padding-top: 7px; -// padding-bottom: 5px; -// _ Set top and bottom padding values to ensure an appropriate -// vertical measure before & after the text, ideally sitting it -// on the 8px baseline grid. -// } - -// CORE FONTS - NEW TRANSPORT - -@mixin core-48($line-height: (50 / 48), $line-height-640: (30 / 25)) { - font-family: $NTA-Light; - font-size: 48px; - @include print { - font-size: 18pt; - } - line-height: $line-height; - font-weight: 400; - letter-spacing: 0; - text-transform: none; - @media (max-width: 640px) { - font-size: 25px; - line-height: $line-height-640; - } -} - -// Suitable for page headings -@mixin heading-48 { - @include core-48; - padding-top: 12px; - padding-bottom: 8px; - @media (max-width: 640px) { - padding-top: 8px; - padding-bottom: 7px; - } -} - -// This is used on July 4th homepage & browse page -@mixin core-36($line-height: (42 / 36), $line-height-640: (30 / 25)) { - font-family: $NTA-Light; - font-size: 36px; - line-height: $line-height; - font-weight: 400; - letter-spacing: 0; - text-transform: none; - @media (max-width: 640px) { - font-size: 25px; - line-height: $line-height-640; - } -} - -@mixin core-27($line-height: (30 / 27), $line-height-640: (25 / 19)) { - font-family: $NTA-Light; - font-size: 27px; - line-height: $line-height; - font-weight: 400; - letter-spacing: 0; - text-transform: none; - @media (max-width: 640px) { - font-size: 19px; - line-height: $line-height-640; - } -} - -// Suitable for body headings -@mixin heading-27 { - @include core-27; - padding-top: 3px; - padding-bottom: 2px; - @media (max-width: 640px) { - padding-top: 7px; - padding-bottom: 3px; - } -} - -@mixin core-24($line-height: (30 / 24), $line-height-640: (25 / 17)) { - font-family: $NTA-Light; - font-size: 24px; - line-height: $line-height; - font-weight: 400; - letter-spacing: 0; - text-transform: none; - @media (max-width: 640px) { - font-size: 17px; - line-height: $line-height-640; - } -} - -// Suitable for short body copy -@mixin copy-24 { - @include core-24; - padding-top: 3px; - padding-bottom: 2px; - @media (max-width: 640px) { - padding-top: 7px; - padding-bottom: 7px; - } -} - -// Suitable for body headings -@mixin heading-24 { - @include core-24; - padding-top: 0; - padding-bottom: 12px; - @media (max-width: 640px) { - padding-top: 0; - padding-bottom: 8px; - } -} - -@mixin core-19($line-height: (25 / 19), $line-height-640: (20 / 13)) { - font-family: $NTA-Light; - font-size: 19px; - @include print { - font-size:14pt; - } - line-height: $line-height; - font-weight: 400; - letter-spacing: 0; - text-transform: none; - @media (max-width: 640px) { - font-size: 13px; - line-height: $line-height-640; - } -} - -// Suitable for long body copy -@mixin copy-19 { - @include core-19; - padding-top: 7px; - padding-bottom: 3px; - @media (max-width: 640px) { - padding-top: 6px; - padding-bottom: 4px; - } -} - -@mixin core-16($line-height: (20 / 16), $line-height-640: (20 / 13)) { - font-family: $NTA-Light; - font-size: 16px; - @include print { - font-size: 12pt; - } - line-height: $line-height; - font-weight: 400; - letter-spacing: 0; - text-transform: none; - @media (max-width: 640px) { - font-size: 13px; - line-height: $line-height-640; - } -} - -// Suitable for body pullouts and asides -@mixin pullout-aside-16 { - @include core-16; - padding-top: 5px; - padding-bottom: 5px; - @media (max-width: 640px) { - padding-top: 6px; - padding-bottom: 4px; - } -} - -@mixin core-14($line-height: (20 / 14), $line-height-640: (15 / 12)) { - font-family: $NTA-Light; - font-size: 14px; - @include print { - font-size: 11pt; - } - line-height: $line-height; - font-weight: 400; - -webkit-font-smoothing: subpixel-antialiased; - letter-spacing: 0; - text-transform: none; - @media (max-width: 640px) { - font-size: 12px; - line-height: $line-height-640; - } -} - -// Suitable for captions, buttons etc -@mixin caption-button-14 { - @include core-14; - padding-top: 6px; - padding-bottom: 4px; - @media (max-width: 640px) { - padding-top: 4px; - padding-bottom: 1px; - } -} From b2ee803d2406145fe5f0dc62a8ad37d594085bf4 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Fri, 20 Jan 2017 12:56:09 +0000 Subject: [PATCH 6/6] Make h1s bold when printing core layout content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `print-base` sets heading styles for h2, h3 and h4 as bold. For guides, h1s can appear within the page. When they are not also bold, the structure of the content isn’t as clear. * Make h1s bold for older layouts when printing --- app/assets/stylesheets/helpers/_core-print.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/helpers/_core-print.scss b/app/assets/stylesheets/helpers/_core-print.scss index 19f37a91a..e54391438 100644 --- a/app/assets/stylesheets/helpers/_core-print.scss +++ b/app/assets/stylesheets/helpers/_core-print.scss @@ -7,7 +7,7 @@ main > header { position: relative; h1 { - @include core-24; + @include bold-24; border-bottom: solid 1pt black; padding-bottom: 6pt; width: 80%; @@ -36,7 +36,7 @@ article { } header h1 { - @include core-19; + @include bold-19; border-bottom: 1pt solid $border-colour; padding-top: 7pt; padding-bottom: 7pt;