From 1ffa0b9cb3775cb52542f739978a406801269c12 Mon Sep 17 00:00:00 2001 From: Emily Hazlehurst Date: Fri, 22 Nov 2024 11:33:15 +0000 Subject: [PATCH] CDPT-636: Update heading styles in the rich text component (#794) - Rollback so we're not blocking releases until a design decision is made --- .../clarity/src/components/c-polls/style.styl | 10 ++- .../components/c-rich-text-block/style.styl | 25 +++++-- .../clarity/src/globals/css/_mixins.styl | 69 ------------------- .../clarity/src/globals/css/objects.styl | 4 +- .../themes/clarity/src/globals/css/reset.styl | 5 -- 5 files changed, 26 insertions(+), 87 deletions(-) diff --git a/public/app/themes/clarity/src/components/c-polls/style.styl b/public/app/themes/clarity/src/components/c-polls/style.styl index 4d2f1b620..aaae0f320 100644 --- a/public/app/themes/clarity/src/components/c-polls/style.styl +++ b/public/app/themes/clarity/src/components/c-polls/style.styl @@ -7,12 +7,6 @@ // Overriding Totalpoll plugin styles to Clarity theme styles. // Needs to be outside of this specific component's scope so it is global and will affect wherever the shortcode is used on the site. -.totalpoll-wrapper { - h4 { - font-size: $mantle !important; - } -} - .totalpoll-button, .totalpoll-button-primary, .totalpoll-button-vote { cursor: pointer !important; font-size: $outerCore !important; @@ -59,6 +53,10 @@ display: none !important; } +h4 { + font-size: $mantle !important; +} + .totalpoll-question-choices-item-votes-text { font-size: $outerCore !important; } diff --git a/public/app/themes/clarity/src/components/c-rich-text-block/style.styl b/public/app/themes/clarity/src/components/c-rich-text-block/style.styl index cc78bf01a..7be2c637d 100644 --- a/public/app/themes/clarity/src/components/c-rich-text-block/style.styl +++ b/public/app/themes/clarity/src/components/c-rich-text-block/style.styl @@ -150,24 +150,39 @@ img.aligncenter { display: block; margin-left: auto; margin-right: auto; } border: 1px solid $border; } + h2, + h3, + h4, + h5, + h6 { + ff-title(); + margin-bottom: $spacing; + font-weight: 700; + } + h1 { - h1(); + ff-title() + font-size: $crust; } h2 { - h2(); + font-size: $mantle; + margin-top: 50px; } h3 { - h3(); + font-size: 24px; + line-height: 30px; } h4 { - h4(); + font-size: 19px; + line-height: 25px; } h5 { - h5(); + font-size: 16px; + line-height: 20px; } h6 { diff --git a/public/app/themes/clarity/src/globals/css/_mixins.styl b/public/app/themes/clarity/src/globals/css/_mixins.styl index 1613d3a5c..2fe592141 100644 --- a/public/app/themes/clarity/src/globals/css/_mixins.styl +++ b/public/app/themes/clarity/src/globals/css/_mixins.styl @@ -17,75 +17,6 @@ ff-body() { margin-bottom: $bodyCopy; } -// Heading styles for c-rich-text component and the o-page--title object, adapted from https://design-system.service.gov.uk/styles/type-scale/ -h1() { - ff-title(); - font-size: 3.2rem; - line-height: 1.1875; - margin-bottom: 2.5rem; - @media screen and (min-width: 640px) { - font-size: 4.8rem; - line-height: 1.125; - margin-bottom: 3.125rem; - } -} - -h2() { - ff-title(); - font-size: 2.7rem; - line-height: 1.22222; - margin-top: 3rem; - margin-bottom: 1.25rem; - @media screen and (min-width: 640px) { - font-size: 3.6rem; - line-height: 1.16667; - margin-bottom: 1.875rem; - } -} - -h3() { - ff-title(); - font-size: 2.2rem; - line-height: 1.31818; - margin-top: 3rem; - margin-bottom: 1rem; - @media screen and (min-width: 640px) { - font-size: 2.6rem; - line-height: 1.25; - margin-bottom: 1.25rem; - } -} - -h4() { - ff-title(); - font-size: 1.9rem; - line-height: 1.42105; - margin-top: 3rem; - margin-bottom: 1rem; - @media screen and (min-width: 640px) { - font-size: 2.2rem; - line-height: 1.36364; - margin-bottom: 1.25rem; - } -} - -h5() { - ff-title(); - font-size: 1.6rem; - line-height: 1.5; - margin-top: 3rem; - margin-bottom: 1rem; - @media screen and (min-width: 640px) { - font-size: 1.9rem; - line-height: 1.47368; - margin-bottom: 1.25rem; - } -} - -body() { - ff-body(); -} - // For a real content list with bullet points real-list() { ff-body(); diff --git a/public/app/themes/clarity/src/globals/css/objects.styl b/public/app/themes/clarity/src/globals/css/objects.styl index d787aaa11..acd020539 100644 --- a/public/app/themes/clarity/src/globals/css/objects.styl +++ b/public/app/themes/clarity/src/globals/css/objects.styl @@ -8,7 +8,7 @@ margin-bottom: $spacing*2; // Main page title &--page { - h1(); + font-size: $crust; margin-top: $spacing*2; } // Section title @@ -22,7 +22,7 @@ } &--headline { - h1(); + font-size: $crust; } &--byline { diff --git a/public/app/themes/clarity/src/globals/css/reset.styl b/public/app/themes/clarity/src/globals/css/reset.styl index 690dc9a05..4cba2e024 100644 --- a/public/app/themes/clarity/src/globals/css/reset.styl +++ b/public/app/themes/clarity/src/globals/css/reset.styl @@ -89,11 +89,6 @@ select::-ms-expand { display: none; } // Remove default drop down style in IE html { - /* This is an old trick to make rems map to pixel values. - * The browser default is 16px, 62.5% sets it to 10px so 1.6 rem is equivalent to 16px. - * See this article for a better explanation: https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/ - * TODO: remove this in future as it's confusing and doesn't integrate well - */ // Reset font size to 10px font-size: 62.5%; }