[SDPA-3072] Hero banner fonts (#495)

* [SDPA-3072] Updated Her Banner text / description font size and margins. * [SDPA-3072] Fix: Move unscoped heading 1 rule into tide-map selector.
dpc-sdp · Aug 16, 2019 · 516add5 · 516add5
1 parent 626bdb1
commit 516add5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/packages/components/Organisms/HeroBanner/HeroBanner.vue b/packages/components/Organisms/HeroBanner/HeroBanner.vue
@@ -114,21 +114,20 @@ export default {
 
   $rpl-hero-banner-border: 1px solid rpl_color('mid_neutral_1') !default;
   $rpl-hero-banner-title-typography-ruleset: (
-    'xs': ('mega', 1.11em, 'bold'),
-    's': ('giga', 1.11em, 'bold'),
+    'xs': ('mega', 1.14em, 'bold'),
     'm': ('xgiga', 1.08em, 'bold'),
-    'l': ('tera', 1.07em, 'bold')
+    'xxl': ('tera', 1em, 'bold')
   ) !default;
   $rpl-hero-banner-title-typography-ruleset-dark: (
-    'xs': ('mega', 1.11em, 'bold', true),
-    's': ('giga', 1.11em, 'bold', true),
+    'xs': ('mega', 1.14em, 'bold', true),
     'm': ('xgiga', 1.08em, 'bold', true),
-    'l': ('tera', 1.07em, 'bold', true)
+    'xxl': ('tera', 1em, 'bold', true)
   ) !default;
   $rpl-hero-banner-title-color: rpl_color('primary') !default;
   $rpl-hero-banner-description-typography-ruleset: (
-    'xs': ('m', 1.22em, 'medium'),
-    'm': ('mega', 1.29em, 'medium')
+    'xs': ('l', 1.2em, 'medium'),
+    'm': ('xl', 1.17em, 'medium'),
+    'xxl': ('mega', 1.14em, 'medium')
   ) !default;
   $rpl-hero-banner-description-text-color: rpl_color('extra_dark_neutral') !default;
   $rpl-hero-banner-description-text-color-dark: rpl_color('white') !default;
@@ -139,7 +138,7 @@ export default {
   ) !default;
   $rpl-hero-banner-link-heading-text-color: rpl_color('extra_dark_neutral') !default;
   $rpl-hero-banner-link-heading-text-color-dark: rpl_color('white') !default;
-  $rpl-hero-banner-link-margin: auto auto rem(16px) !default;
+  $rpl-hero-banner-link-margin: auto auto $rpl-space-3 !default;
   $rpl-hero-banner-link-heading-margin: 0 auto rem(15px) auto !default;
   $rpl-hero-banner-vertical-spacing-logo-offset: (
     'xs': 0rem,
@@ -288,13 +287,9 @@ export default {
       @include rpl_typography_ruleset($rpl-hero-banner-description-typography-ruleset);
       @include rpl_text_color($rpl-hero-banner-description-text-color);
       letter-spacing: $rpl-hero-banner-description-letter-spacing;
-      margin-top: $rpl-space;
+      margin-top: $rpl-space-3;
 
       @include rpl_breakpoint(s) {
-        margin-top: $rpl-space-2;
-      }
-
-      @include rpl_breakpoint(l) {
         margin-top: $rpl-space-4;
       }
 

diff --git a/...-component/components/TideMapPreventionFamilyViolence/TideMapPreventionFamilyViolence.vue b/...-component/components/TideMapPreventionFamilyViolence/TideMapPreventionFamilyViolence.vue
@@ -378,9 +378,13 @@ export default {
 @import '~@dpc-sdp/ripple-global/scss/tools';
 
 .tide-map {
-  &tide-map__title {
+  &__title {
     @include rpl_mobile_padding;
 
+    @include rpl_breakpoint_down(m) {
+      font-size: 1em !important;
+    }
+
     @include rpl_breakpoint(m) {
       padding-left: 0;
       padding-right: 0;
@@ -444,9 +448,6 @@ export default {
 
 /* Do the following when small(narrow) screen */
 @media (max-width: 768px) {
-  h1 {
-    font-size: 1em !important;
-  }
   .tide-map__container {
     .rpl-text-label--emphasis.rpl-text-label--small {
       font-size: 0.75rem;