From 453989caea62f39f204dfd901d8c5509a9646413 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Thu, 28 Jan 2021 17:16:30 +0200
Subject: [PATCH] styles for components with heading type field
---
.../accordion-container.tsx | 16 ++++++++++
src/components/heading/heading.scss | 30 +++++--------------
2 files changed, 24 insertions(+), 22 deletions(-)
diff --git a/src/components/accordion-container/accordion-container.tsx b/src/components/accordion-container/accordion-container.tsx
index 3a008d94..15b79e04 100644
--- a/src/components/accordion-container/accordion-container.tsx
+++ b/src/components/accordion-container/accordion-container.tsx
@@ -30,3 +30,19 @@ export class AccordionContainer {
);
}
}
+
+/*
+Paragraphs that have an option to include an H2-heading:
+Harmonise the padding under the enabled H2-heading in all paragraphs.
+Where exactly? Under paragraph or under the h2 title?
+
+No sidebar navigation:
+- Mobile 24 px = 1.5rem
+- Tablet: 28 px = 1.75rem
+- Screens 960-1200 px: 32 px = 2rem
+- Screens wider than 1200 px: 40 px = 2.5rem
+
+With sidebar navigation:
+- Screens 1201-1600 px: 32 px = 2rem
+- Screens wider than 1600 px: 40 px = 2.5rem
+* */
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 3b62026b..b459ea92 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -96,21 +96,17 @@
}
// H2 used in landing pages and in Introduction paragraph: caps, bigger font.
+// These styles are applied if there is a Sidebar on the page in Desktop sizes
h2.hy-heading__introduction,
h2.hy-heading__landingsection {
- @include font-size(28px, 32px);
- letter-spacing: -0.88px;
+ @include font-size(28px, 28px);
+ @include font-weight($bold);
+ letter-spacing: -1px;
text-transform: uppercase;
@include breakpoint($narrow) {
- // > 480px
- @include font-size(40px, 40px);
- letter-spacing: -1.25px;
- }
- @include breakpoint($wide) {
- // H2 for front page and landing page, Medium size
@include font-size(40px, 40px);
- letter-spacing: -1.25px;
+ letter-spacing: -1.3px;
}
}
@@ -156,15 +152,10 @@ h1.hy-heading__introduction {
h2.hy-heading__introduction,
h2.hy-heading__landingsection {
@include breakpoint($extrawide) {
- // > 1200px
- // ex. Side menu layout on Mid-sized desktop; Medium font
@include font-size(40px, 40px);
- letter-spacing: -1.25px;
+ letter-spacing: -1.3px;
}
-
@include breakpoint($xlarge) {
- // > 1441px
- // ex. Side menu layout on Large desktop; Large font
@include font-size(48px, 48px);
letter-spacing: -1.6px;
}
@@ -186,17 +177,12 @@ h1.hy-heading__introduction {
h2.hy-heading__introduction,
h2.hy-heading__landingsection {
@include breakpoint($extrawide) {
- // > 1200px
- // ex. Full width layout on Mid-sized desktop; Large font
@include font-size(48px, 48px);
letter-spacing: -1.6px;
}
-
@include breakpoint($xlarge) {
- // > 1400px
- // ex. Full width layout on Large desktop; X-large font
- @include font-size(54px, 54px);
- letter-spacing: -1.8px;
+ @include font-size(48px, 48px);
+ letter-spacing: -1.6px;
}
}
--
GitLab