Hero title possible fix

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/);
 

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) {

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">

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>