From b8ac728afc3ada2ca0f83bcd984157a6a5847967 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Wed, 10 Mar 2021 14:50:08 +0200
Subject: [PATCH] Update adjacent image text size
---
.../adjacent-image-text.scss | 243 +++++++++---------
.../adjacent-image-text.tsx | 6 +-
2 files changed, 130 insertions(+), 119 deletions(-)
diff --git a/src/components/adjacent-image-text/adjacent-image-text.scss b/src/components/adjacent-image-text/adjacent-image-text.scss
index 2b590228..623ab723 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 2710d9dd..dc864c8a 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 && (
--
GitLab