diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index fada4423e84338eef399d0263bab2fa2630478ab..e915504bb0ab62bb7933545240672edf53797d54 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -35,7 +35,7 @@ export class AccordionItem {
const triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));
let target = event.target as HTMLButtonElement;
const key = event.which.toString();
-
+ console.log('key', event.code);
// 33 = Page Up, 34 = Page Down
const ctrlModifier = event.ctrlKey && key.match(/33|34/);
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index c1cfd09b348a888e0a99aa281259ad75075f0574..e1153ff6d17f6523e784ef4fe7be457c0bf056ea 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -123,7 +123,7 @@
&--blue {
background-color: var(--brand-main-light);
- .hy-hero__title__overlay {
+ .hy-hero__title__overlay h1 {
background-color: var(--brand-main-light);
color: transparent !important;
}
@@ -139,7 +139,7 @@
&--black {
background-color: var(--grayscale-black);
- .hy-hero__title__overlay {
+ .hy-hero__title__overlay h1 {
background-color: var(--grayscale-black);
color: transparent !important;
}
@@ -155,7 +155,7 @@
&--white {
background-color: var(--grayscale-white);
- .hy-hero__title__overlay {
+ .hy-hero__title__overlay h1 {
background-color: var(--grayscale-white);
color: transparent !important;
}
@@ -285,54 +285,41 @@
top: 0;
.hy-hero__title__overlay {
- @include font-size(32px, 32px);
- @include font-weight($bold);
+ .hy-heading__container.hy-heading__container__common,
+ .hy-heading__container.sc-hy-heading-wide {
+ display: block;
+ }
+
+ h1 {
+ display: inline;
+ }
+ }
+ .hy-hero__title__overlay h1 {
box-decoration-break: clone;
- font-family: var(--main-font-family);
display: inline;
- letter-spacing: -1px;
- margin-bottom: 0;
margin-left: -32px;
- padding-left: 32px;
+ padding: 16px 16px 16px 32px !important;
@include breakpoint($narrow) {
- // Medium
- @include font-size(48px, 48px);
- letter-spacing: -1.5px;
margin-left: -32px;
- padding-left: 32px;
+ padding: 16px 16px 16px 32px !important;
}
@include breakpoint($medium) {
margin-left: -32px;
- padding-left: 32px;
+ padding: 16px 16px 16px 32px !important;
}
@include breakpoint($wide) {
- // Medium with sidebar
- @include font-size(48px, 48px);
- letter-spacing: -1.5px;
margin-left: 0;
- padding-left: 0;
- }
-
- @include breakpoint($extrawide) {
- // Medium with sidebar
- @include font-size(48px, 48px);
- letter-spacing: -1.5px;
- }
-
- @include breakpoint($overwide) {
- // Large with sidebar
- @include font-size(56px, 56px);
- letter-spacing: -1.8px;
+ padding: 16px 16px 16px 0 !important;
}
}
}
.hy-hero__title,
-.hy-hero__title__overlay {
+.hy-hero__title__overlay h1 {
@include font-weight($bold);
box-decoration-break: clone;
@@ -367,7 +354,7 @@
}
.hy-hero__title h1,
-.hy-hero__title__overlay {
+.hy-hero__title__overlay > h1 {
padding: 1rem;
@include breakpoint($narrow) {
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index 1018e239b836ddbc7b41b45008c2e842dfdb95c5..3b507604bc1fc15236766b159ca4d9fef421c5dd 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -101,7 +101,13 @@ export class HyHero {
{this.heading}
</hy-heading>
<div class="hy-hero__title__overlay--container">
- <h1 class="hy-hero__title__overlay">{this.heading}</h1>
+ <hy-heading
+ class="hy-hero__title__overlay"
+ heading={HeadingVarians.default}
+ section={HeadingSectionVariants.introduction}
+ >
+ {this.heading}
+ </hy-heading>
</div>
</div>
<div class="hy-hero__content--bottom">
diff --git a/src/index.html b/src/index.html
index cd2a5c5fc1f26c66bceb61fee1d4e4639e2ea03c..3cf677fd2439c164497112bbf33cd6acd2768f54 100644
--- a/src/index.html
+++ b/src/index.html
@@ -166,7 +166,7 @@
</hy-menu-level-container>
</hy-menu>
</hy-site-header>
- <hy-main has-sidebar="false">
+ <hy-main has-sidebar="true">
<div class="layout-content">
<hy-hero
color-variant="blue"
@@ -186,6 +186,17 @@
sc-label="List of conferences"
>
</hy-banner>
+ <hy-accordion-container accordionId="example-accordion">
+ <hy-accordion-item accordiontitle="This is a accordion item 1">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="This is a accordion item 2">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="This is a accordion item 3">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ </hy-accordion-container>
<hy-introduction
text-title="This is an introduction"
text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
@@ -222,9 +233,9 @@
></hy-introduction>
</div>
- <!-- <aside class="layout-sidebar-first" role="complementary">
+ <aside class="layout-sidebar-first" role="complementary">
THIS IS SIDEBAR
- </aside> -->
+ </aside>
</hy-main>
<hy-footer>
<hy-footer-action updated-text="Updated on 14.10.2020" up-button-label="Up"></hy-footer-action>