diff --git a/src/components/adjacent-image-text/adjacent-image-text.scss b/src/components/adjacent-image-text/adjacent-image-text.scss
index 2b59022804d5354d58830c7171323633c33b29f8..623ab723282a5e68ce42b3f41457f5f74c69eb6b 100644
--- a/src/components/adjacent-image-text/adjacent-image-text.scss
+++ b/src/components/adjacent-image-text/adjacent-image-text.scss
@@ -19,152 +19,159 @@ $margin-narrow: 32px;
background: var(--grayscale-background-box);
flex-direction: row;
}
+}
- &__image-container {
- display: flex;
- flex: 1;
- justify-content: stretch;
- margin-bottom: 0;
- min-height: 10rem;
- position: relative;
- padding-bottom: $margin-narrow;
+.hy-adjacent-image-text__image-container {
+ display: flex;
+ flex: 1;
+ justify-content: stretch;
+ margin-bottom: 0;
+ min-height: 10rem;
+ position: relative;
+ padding-bottom: $margin-narrow;
+
+ @include breakpoint($narrow) {
+ padding-bottom: 0;
+ }
+
+ @include breakpoint($wide) {
+ flex-basis: 50%;
+ margin: 0 calc(#{var(--gutter-wide)} * -1) 0 0;
+ z-index: 1;
+ }
+
+ @include breakpoint($extrawide) {
+ margin: 0 calc(#{var(--gutter-extrawide)} * -1) 0 0;
+ }
+
+ img {
+ height: 100%;
+ object-fit: cover;
+ width: 100%;
@include breakpoint($narrow) {
- padding-bottom: 0;
+ max-height: 420px;
+ min-height: 160px;
}
@include breakpoint($wide) {
- flex-basis: 50%;
- margin: 0 calc(#{var(--gutter-wide)} * -1) 0 0;
- z-index: 1;
+ max-height: 100%;
}
+ }
+}
- @include breakpoint($extrawide) {
- margin: 0 calc(#{var(--gutter-extrawide)} * -1) 0 0;
- }
-
- img {
- height: 100%;
- object-fit: cover;
- width: 100%;
-
- @include breakpoint($narrow) {
- max-height: 420px;
- min-height: 160px;
- }
+.hy-adjacent-image-text__text-container {
+ background: var(--grayscale-background-box);
+ border-image: none;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ -webkit-border-image: none;
+ -moz-border-image: none;
+ -o-border-image: none;
- @include breakpoint($wide) {
- max-height: 100%;
- }
- }
+ @include breakpoint($narrow) {
+ border-left: 1px solid transparent;
+ border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
+ margin-left: 66px;
+ margin-top: -63px;
+ padding-top: 38px;
+ position: relative;
+ z-index: 98;
+ -webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
+ -moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
+ -o-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
}
- &__text-container {
- background: var(--grayscale-background-box);
+ @include breakpoint($wide) {
border-image: none;
- display: flex;
- flex: 1;
- flex-direction: column;
+ border-left: none;
+ flex-basis: 50%;
+ margin-left: 0;
+ margin-top: 0;
+ padding-top: 0;
+ z-index: 0;
-webkit-border-image: none;
-moz-border-image: none;
-o-border-image: none;
+ }
+}
- @include breakpoint($narrow) {
- border-left: 1px solid transparent;
- border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
- margin-left: 66px;
- margin-top: -63px;
- padding-top: 38px;
- position: relative;
- z-index: 98;
- -webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0
- 100%;
- -moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
- -o-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
- }
+.hy-adjacent-image-text__text-container__links-wrapper {
+ padding-left: 1rem;
+ @include breakpoint($narrow) {
+ padding-left: 50px;
+ }
+ @include breakpoint($wide) {
+ margin: 0 0 0 14%;
+ padding: 0;
+ }
+}
- @include breakpoint($wide) {
- border-image: none;
- border-left: none;
- flex-basis: 50%;
- margin-left: 0;
- margin-top: 0;
- padding-top: 0;
- z-index: 0;
- -webkit-border-image: none;
- -moz-border-image: none;
- -o-border-image: none;
- }
+.hy-adjacent-image-text__text-container__info-wrapper {
+ padding-left: 0;
+ padding-right: 0;
- &__links-wrapper {
- padding-left: 1rem;
- @include breakpoint($narrow) {
- padding-left: 50px;
- }
- @include breakpoint($wide) {
- margin: 0 0 0 14%;
- padding: 0;
- }
- }
+ @include breakpoint($narrow) {
+ padding-left: 50px;
+ }
- &__info-wrapper {
- padding-left: 0;
- padding-right: 0;
+ @include breakpoint($wide) {
+ margin: 0 7% 0 14%;
+ padding: 0;
+ }
+}
- @include breakpoint($narrow) {
- padding-left: 50px;
- }
+.hy-adjacent-image-text__text-container__title {
+ @include font-size(22px, 28px);
+ @include font-weight($bold);
+ color: var(--brand-main-nearly-black);
+ font-family: var(--main-font-family);
+ letter-spacing: -0.69px;
+ margin-top: 32px;
+ padding: 0 1rem;
- @include breakpoint($wide) {
- margin: 0 7% 0 14%;
- padding: 0;
- }
- }
+ @include breakpoint($narrow) {
+ @include font-size(32px, 40px);
+ letter-spacing: -1px;
+ margin-top: 41px;
+ padding: 0;
+ }
+}
- &__title {
- @include font-size(22px, 28px);
- @include font-weight($bold);
- color: var(--brand-main-nearly-black);
- font-family: var(--main-font-family);
- letter-spacing: -0.69px;
- margin-top: 32px;
- padding: 0 1rem;
-
- @include breakpoint($narrow) {
- @include font-size(32px, 40px);
- letter-spacing: -1px;
- margin-top: 41px;
- padding: 0;
- }
- }
+.hy-adjacent-image-text__text-container__description {
+ @include font-size(15px, 22px);
+ @include font-weight($regular);
+ color: var(--grayscale-dark);
+ font-family: var(--main-font-family);
+ margin: 20px 0 32px 0;
+ padding: 0 1rem;
- &__description {
- color: var(--grayscale-dark);
- font-family: var(--main-font-family);
- font-size: 14px;
- letter-spacing: 0;
- line-height: 20px;
- margin: 20px 0 32px 0;
- padding: 0 1rem;
-
- @include breakpoint($narrow) {
- font-size: 20px;
- letter-spacing: -0.1;
- line-height: 32px;
- margin: 20px 0 61px 0;
- padding: 0;
- }
- }
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ margin: 20px 0 61px 0;
+ padding: 0;
+ }
+
+ @include breakpoint($xlarge) {
+ @include font-size(17px, 26px);
+ margin-bottom: 40px;
+ }
- &__link {
- display: flex;
- justify-content: flex-end;
- margin-bottom: 12px;
- margin-right: -6px;
+ &__large {
+ @include breakpoint($extrawide) {
+ @include font-size(17px, 26px);
}
}
}
+.hy-adjacent-image-text__text-container__link {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 12px;
+ margin-right: -6px;
+}
+
.hy-adjacent-image-text::after {
content: '';
clear: both;
diff --git a/src/components/adjacent-image-text/adjacent-image-text.tsx b/src/components/adjacent-image-text/adjacent-image-text.tsx
index 2710d9dd2478c13ef67dbb09e6c034b30a06329c..dc864c8adc160b0729986e597713341061bb7fac 100644
--- a/src/components/adjacent-image-text/adjacent-image-text.tsx
+++ b/src/components/adjacent-image-text/adjacent-image-text.tsx
@@ -57,7 +57,11 @@ export class AdjacentImageText implements ComponentInterface {
<div class={contentClassAttributes}>
<div class="hy-adjacent-image-text__text-container__info-wrapper">
<div class="hy-adjacent-image-text__text-container__title">{this.textTitle}</div>
- <div class="hy-adjacent-image-text__text-container__description">{this.textDescription}</div>
+ <p
+ class={`hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}`}
+ >
+ {this.textDescription}
+ </p>
</div>
<div class="hy-adjacent-image-text__text-container__links-wrapper">
{this.mainUrl && (
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index 1841ea59a475f6aa3a9dbe45e27644a7355e3b78..b7223500f6c921a4f7c0b1ae6b10199175ad01d1 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -379,6 +379,7 @@
color: var(--grayscale-black);
@include breakpoint($extrawide) {
+ @include font-size(17px, 26px);
max-width: 34%;
}
}
@@ -586,20 +587,16 @@
}
}
-// TODO: Update this to use styles straight from DSLIB (Ingress).
.hy-hero__description {
- @include font-size(16px);
+ @include font-size(15px, 22px);
color: var(--grayscale-black);
font-family: var(--main-font-family);
- font-weight: 600;
- letter-spacing: -0.1px;
- line-height: 22px;
margin: 0;
padding: 0;
position: relative;
@include breakpoint($narrow) {
- line-height: 24px;
+ @include font-size(16px, 24px);
}
@include breakpoint($wide) {
@@ -609,12 +606,13 @@
}
@include breakpoint($extrawide) {
- @include font-size(18px);
- letter-spacing: -0.16px;
- line-height: 26px;
max-width: 37%;
padding: 28px 20px 32px 0;
}
+
+ @include breakpoint($xlarge) {
+ @include font-size(17px, 26px);
+ }
}
.hy-hero__actions {
diff --git a/src/components/hy-introduction/hy-introduction.scss b/src/components/hy-introduction/hy-introduction.scss
index 1974b77cd3b65cf1d344f807d0602858150a5e93..2945cf365cc0130895cb56acb55d93dd72c5d9a3 100644
--- a/src/components/hy-introduction/hy-introduction.scss
+++ b/src/components/hy-introduction/hy-introduction.scss
@@ -221,30 +221,30 @@
}
&__description {
- @include font-size(16px, 24px);
- @include font-weight($semibold);
-
+ @include font-size(15px, 22px);
+ @include font-weight($regular);
color: var(--grayscale-black);
font-family: var(--main-font-family);
- letter-spacing: -0.1px;
margin-bottom: 28px;
+ margin-top: 0;
@include breakpoint($narrow) {
- @include font-size(18px, 28px);
+ @include font-size(16px, 24px);
}
@include breakpoint($wide) {
- @include font-size(18px, 28px);
margin-bottom: 32px;
}
@include breakpoint($extrawide) {
margin-bottom: 32px;
}
@include breakpoint($xlarge) {
+ @include font-size(17px, 26px);
margin-bottom: 40px;
}
&__large {
@include breakpoint($extrawide) {
+ @include font-size(17px, 26px);
margin-bottom: 40px;
}
}
diff --git a/src/components/hy-introduction/hy-introduction.tsx b/src/components/hy-introduction/hy-introduction.tsx
index 48154746830dc5ea5d5741fb7adf79a4f7861a2c..5558fbf7a53003c5eee65e9b7a70e6889c715175 100644
--- a/src/components/hy-introduction/hy-introduction.tsx
+++ b/src/components/hy-introduction/hy-introduction.tsx
@@ -66,7 +66,7 @@ export class HyIntroduction {
>
{this.textTitle}
</hy-heading>
- <div class={classDescription}>{this.textDescription}</div>
+ <p class={classDescription}>{this.textDescription}</p>
{this.url && (
<div class="hy-introduction__link__container">
<a class="hy-introduction__link" href={this.url} aria-label={this.scLabel} target={target}>
diff --git a/src/components/ingress/ingress.scss b/src/components/ingress/ingress.scss
index b9653d45c7ab2a225af65c332400fb85dc3a1f4d..2034c8d492752343a2135911b37f6b1e81ce01a5 100644
--- a/src/components/ingress/ingress.scss
+++ b/src/components/ingress/ingress.scss
@@ -3,25 +3,29 @@
}
p.hy-ingress {
- color: var(--grayscale-dark);
+ @include font-size(16px, 24px);
+ color: var(--grayscale-black);
font-family: var(--main-font-family);
- font-size: 20px;
- letter-spacing: -0.1px;
- line-height: 32px;
- margin: 0;
- margin-bottom: 2rem;
+ margin: 0 0 2rem;
+
+ @include breakpoint($narrow) {
+ @include font-size(18px, 28px);
+ }
@include breakpoint($wide) {
- margin-bottom: 2.25rem;
+ margin: 0 0 2.25rem;
}
+
@include breakpoint($xlarge) {
- margin-bottom: 3rem;
+ @include font-size(18px, 32px);
+ margin: 0 0 3rem;
}
// No sidebar, large desktop styles
&__large {
@include breakpoint($extrawide) {
- margin-bottom: 3rem;
+ @include font-size(18px, 32px);
+ margin: 0 0 3rem;
}
}
}