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; + } +} 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; + } } 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/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; diff --git a/app/assets/stylesheets/helpers/_print-base.scss b/app/assets/stylesheets/helpers/_print-base.scss index 2f4689a1c..dec901ccc 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 { @@ -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 { 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; - } -}