From dbfbc4576154be5784f3ed01c148d117d6b0c45f Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Thu, 28 Jan 2021 11:50:07 +0200
Subject: [PATCH] Add more improvements [WIP]
---
src/components/hy-hero/hy-hero.scss | 149 +++++++++++++++++++++-------
src/components/hy-hero/hy-hero.tsx | 58 +++++------
2 files changed, 144 insertions(+), 63 deletions(-)
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index 2e482c92..160b44cf 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -3,8 +3,23 @@
}
.hy-hero {
+ overflow: hidden;
+ position: relative;
+
+ @include breakpoint($extrawide) {
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+
+ @include breakpoint($xlarge) {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
&--blue {
- background-color: var(--brand-main-light);
+ .hy-hero__content-container {
+ background-color: var(--brand-main-light);
+ }
.hy-hero__title {
&:not(.hy-hero__title--overlay) {
@@ -28,19 +43,28 @@
@include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--brand-main-light), -48px 0 0 var(--brand-main-light);
}
+
+ @include breakpoint($wide) {
+ box-shadow: 32px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
+ }
+
+ @include breakpoint($extrawide) {
+ box-shadow: 40px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
+ }
}
}
}
- .hy-hero__description,
- .hy-hero__actions {
+ .hy-hero__description {
background-color: var(--brand-main-light);
color: var(--grayscale-white);
}
}
&--black {
- background-color: var(--grayscale-black);
+ .hy-hero__content-container {
+ background-color: var(--grayscale-black);
+ }
.hy-hero__title {
&:not(.hy-hero__title--overlay) {
@@ -64,19 +88,28 @@
@include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--grayscale-black), -48px 0 0 var(--grayscale-black);
}
+
+ @include breakpoint($wide) {
+ box-shadow: 32px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
+ }
+
+ @include breakpoint($extrawide) {
+ box-shadow: 40px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
+ }
}
}
}
- .hy-hero__description,
- .hy-hero__actions {
+ .hy-hero__description {
background-color: var(--grayscale-black);
color: var(--grayscale-white);
}
}
&--white {
- background-color: var(--grayscale-white);
+ .hy-hero__content-container {
+ background-color: var(--grayscale-white);
+ }
.hy-hero__title {
&:not(.hy-hero__title--overlay) {
@@ -100,18 +133,31 @@
@include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--grayscale-white), -48px 0 0 var(--grayscale-white);
}
+
+ @include breakpoint($wide) {
+ box-shadow: 32px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
+ }
+
+ @include breakpoint($extrawide) {
+ box-shadow: 40px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
+ }
}
}
}
- .hy-hero__description,
- .hy-hero__actions {
+ .hy-hero__description {
background-color: var(--grayscale-white);
color: var(--grayscale-black);
}
}
}
+.hy-hero__container {
+ @include breakpoint($wide) {
+ display: flex;
+ }
+}
+
.hy-hero__image-container {
background-position: 50% 50%;
background-size: cover;
@@ -120,13 +166,12 @@
padding: 0;
position: relative;
- // @include breakpoint($wide) {
- // background: white;
- // order: 2;
- // padding: 6px 0;
- // width: 60%;
- // z-index: 1;
- // }
+ @include breakpoint($wide) {
+ background-color: var(--grayscale-white);
+ order: 2;
+ padding: 6px 0;
+ width: 60%;
+ }
}
.hy-image__image {
@@ -137,12 +182,33 @@
width: 100%;
}
-.hy-hero__content {
+.hy-hero__content-container {
padding: 0 1rem 2rem;
@include breakpoint($narrow) {
padding: 0 2rem 40px;
}
+
+ @include breakpoint($wide) {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ order: 1;
+ padding: 52px 0;
+ position: relative;
+ width: 40%;
+ }
+
+ @include breakpoint($extrawide) {
+ padding: 80px 0;
+ }
+}
+
+.hy-hero__content {
+ @include breakpoint($wide) {
+ margin-left: 32px;
+ margin-right: -32px;
+ }
}
.hy-hero__title-container {
@@ -179,12 +245,30 @@
max-width: 87% !important;
}
+ @include breakpoint($wide) {
+ max-width: 120% !important;
+ }
+
+ @include breakpoint($extrawide) {
+ max-width: 115% !important;
+ }
+
span {
padding-top: 16px;
@include breakpoint($narrow) {
padding-top: 32px;
}
+
+ @include breakpoint($wide) {
+ padding-bottom: 28px;
+ padding-top: 24px;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-bottom: 30px;
+ padding-top: 36px;
+ }
}
}
@@ -222,31 +306,26 @@
@include breakpoint($wide) {
@include font-size(18px, 28px);
letter-spacing: -0.1px;
-
+ margin: 0;
+ padding: 16px 40px 20px 0;
max-width: 100%;
- margin: 9px 0 0;
- padding: 0 24px 20px 0;
+ position: relative;
}
@include breakpoint($extrawide) {
- margin: 9px 0 0;
- padding: 0 24px 20px 0;
- }
-
- @include breakpoint($xlarge) {
- padding: 0 40px 32px 0;
+ padding: 28px 40px 32px 0;
}
// No sidebar, large desktop screens
- &__large {
- @include breakpoint($extrawide) {
- padding: 0 40px 32px 0;
- }
-
- @include breakpoint($xlarge) {
- padding: 0 40px 36px 0;
- }
- }
+ // &__large {
+ // @include breakpoint($extrawide) {
+ // padding: 0 40px 32px 0;
+ // }
+
+ // @include breakpoint($xlarge) {
+ // padding: 0 40px 36px 0;
+ // }
+ // }
}
// .hy-hero {
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index 6155f6e8..957f4bb3 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -91,35 +91,37 @@ export class HyHero {
<figure class="hy-hero__image-container" style={aspectRatio}>
<img alt={this.scLabel} class="hy-image__image" src={this.image} />
</figure>
- <div class={classContentContainer}>
- <div class="hy-hero__title-container">
- <hy-heading
- class="hy-hero__title"
- heading={HeadingVarians.default}
- section={HeadingSectionVariants.introduction}
- >
- {this.heading}
- </hy-heading>
- <hy-heading
- class="hy-hero__title hy-hero__title--overlay"
- heading={HeadingVarians.default}
- section={HeadingSectionVariants.introduction}
- >
- {this.heading}
- </hy-heading>
- </div>
- {this.description && <p class={classDescription}>{this.description}</p>}
- {this.url && (
- <div class="hy-hero__actions">
- <hy-cta-button
- link-content={this.urlTitle}
- sc-label={this.scLabel}
- url={this.url}
- is-external={this.isExternal}
- variant={variant}
- />
+ <div class="hy-hero__content-container">
+ <div class={classContentContainer}>
+ <div class="hy-hero__title-container">
+ <hy-heading
+ class="hy-hero__title"
+ heading={HeadingVarians.default}
+ section={HeadingSectionVariants.introduction}
+ >
+ {this.heading}
+ </hy-heading>
+ <hy-heading
+ class="hy-hero__title hy-hero__title--overlay"
+ heading={HeadingVarians.default}
+ section={HeadingSectionVariants.introduction}
+ >
+ {this.heading}
+ </hy-heading>
</div>
- )}
+ {this.description && <p class={classDescription}>{this.description}</p>}
+ {this.url && (
+ <div class="hy-hero__actions">
+ <hy-cta-button
+ link-content={this.urlTitle}
+ sc-label={this.scLabel}
+ url={this.url}
+ is-external={this.isExternal}
+ variant={variant}
+ />
+ </div>
+ )}
+ </div>
</div>
</div>
</div>
--
GitLab