introduction tweaks

src/components.d.ts

@@ -317,6 +317,7 @@ export namespace Components {
   }
   interface HyIngress {}
   interface HyIntroduction {
+    headerstyle: string;
     imageUrl?: string;
     reversed: boolean;
     scLabel?: string;
@@ -1245,6 +1246,7 @@ declare namespace LocalJSX {
   }
   interface HyIngress {}
   interface HyIntroduction {
+    headerstyle?: string;
     imageUrl?: string;
     reversed?: boolean;
     scLabel?: string;

src/components/heading/heading.scss

@@ -101,6 +101,11 @@ h2.hy-heading__landingsection {
     @include font-size(40px, 40px);
     letter-spacing: -1.25px;
   }
+  @include breakpoint($wide) {
+    // H2 for front page and landing page, Medium size
+    @include font-size(40px, 40px);
+    letter-spacing: -1.25px;
+  }
 }
 
 // Applied when there is a sidebar
@@ -121,6 +126,16 @@ h2.hy-heading__landingsection {
       letter-spacing: -1.6px;
     }
   }
+
+  h2.hy-heading__introduction {
+    padding: 24px 0 12px;
+    @include breakpoint($narrow) {
+      padding: 2rem 0 1rem;
+    }
+    @include breakpoint($wide) {
+      padding: 0 0 1rem;
+    }
+  }
 }
 
 // Applied when there is NO sidebar
@@ -141,6 +156,17 @@ h2.hy-heading__landingsection {
       letter-spacing: -1.8px;
     }
   }
+
+  h2.hy-heading__introduction {
+    @include breakpoint($extrawide) {
+      // h2 font large
+      padding: 0 0 1rem;
+    }
+    @include breakpoint($overwide) {
+      // h2 font x-large
+      padding: 0 0 20px;
+    }
+  }
 }
 
 // h3 on landing pages use the same fonts as h2 on content pages; no line; no caps

src/components/hy-introduction/hy-introduction.scss

@@ -75,7 +75,7 @@
     }
 
     @include breakpoint($overwide) {
-      padding: 80px 0 80px 0;
+      padding: 80px 0 80px 32px;
     }
 
     &__blue {
@@ -99,13 +99,10 @@
       }
 
       .hy-introduction__link {
-        //background: var(--grayscale-white);
         background: var(--brand-main-active);
-        //color: var(--brand-main-light);
         color: var(--grayscale-white);
 
         &__icon svg {
-          //fill: var(--brand-main-light);
           fill: var(--grayscale-white);
         }
       }
@@ -226,14 +223,19 @@
     letter-spacing: -0.1px;
     margin-bottom: 28px;
 
-    @include breakpoint($medium) {
+    @include breakpoint($narrow) {
       @include font-size(18px, 28px);
-      margin-bottom: 38px;
     }
 
     @include breakpoint($wide) {
-      @include font-size(20px, 32px);
-      margin-bottom: 48px;
+      @include font-size(18px, 28px);
+      margin-bottom: 32px;
+    }
+    @include breakpoint($extrawide) {
+      margin-bottom: 32px;
+    }
+    @include breakpoint($overwide) {
+      margin-bottom: 40px;
     }
   }
 
@@ -242,7 +244,6 @@
     letter-spacing: -0.5px;
 
     background-color: var(--brand-main-light);
-    border: 2px solid var(--grayscale-white);
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     color: var(--grayscale-white);
@@ -255,10 +256,10 @@
     position: relative;
     text-decoration: none;
 
-    @include breakpoint($narrow) {
+    @include breakpoint($medium) {
       @include font-size(16px, 20px);
       letter-spacing: -0.6px;
-      padding: 14px 62px 14px 16px;
+      padding: 15px 62px 15px 16px;
     }
 
     @include breakpoint($wide) {
@@ -283,3 +284,17 @@
     }
   }
 }
+
+// Desktop screens without side nav bar.
+.hy-introduction.large {
+  .hy-introduction__description {
+    @include breakpoint($extrawide) {
+      //font Ingress Large
+      margin-bottom: 40px;
+    }
+    @include breakpoint($overwide) {
+      //font Ingress Large
+      margin-bottom: 40px;
+    }
+  }
+}

src/components/hy-introduction/hy-introduction.tsx

-import {Component, Host, h, Prop} from '@stencil/core';
+import {Component, Element, Host, h, Prop} from '@stencil/core';
 import {IntroductionBgColors, HeadingVarians, HeadingSectionVariants} from '../../utils/utils';
 
 @Component({
@@ -15,10 +15,22 @@ export class HyIntroduction {
   @Prop() scLabel?: string;
   @Prop() urlTitle?: string;
   @Prop() imageUrl?: string;
+  @Prop() headerstyle: string = 'common';
+  @Element() el: HTMLElement;
+
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+  }
 
   render() {
     const classAttributes = [
       'hy-introduction',
+      this.headerstyle,
       this.reversed && this.variant == null ? 'hy-introduction--reversed' : '',
       this.variant
         ? `hy-introduction--with-bg hy-introduction--with-bg__${this.variant}`

src/components/hy-introduction/readme.md

@@ -6,6 +6,7 @@
 
 | Property          | Attribute          | Description | Type                | Default     |
 | ----------------- | ------------------ | ----------- | ------------------- | ----------- |
+| `headerstyle`     | `headerstyle`      |             | `string`            | `'common'`  |
 | `imageUrl`        | `image-url`        |             | `string`            | `undefined` |
 | `reversed`        | `reversed`         |             | `boolean`           | `false`     |
 | `scLabel`         | `sc-label`         |             | `string`            | `undefined` |

src/components/hy-main/hy-main.scss

@@ -37,7 +37,10 @@
     }
 
     .layout-sidebar-first {
+      display: none;
+
       @include breakpoint($extrawide) {
+        display: block;
         border-right: 2px dotted var(--grayscale-medium);
         max-width: 320px;
         order: 1;

src/index.html

@@ -166,7 +166,7 @@
         </hy-menu-level-container>
       </hy-menu>
     </hy-site-header>
-    <hy-main has-sidebar="true">
+    <hy-main has-sidebar="false">
       <div class="layout-content">
         <hy-hero
           color-variant="blue"
@@ -186,78 +186,45 @@
           sc-label="List of conferences"
         >
         </hy-banner>
-        <hy-video
-          video-title="Youtube test embed"
-          video-description="Video description for giving more context to what the user is viewing (eg. if the video is part of a lecture series, or a series of speeches). Can include links and probably needs to have a character limit."
-          context-label="Youtube test"
-          views="123"
-          views-label="Views"
-          duration="1:23"
-          duration-label="Duration"
-          date-added="28.10.2020"
-          date-added-label="Added"
-          play-button-visible
-          context-label-visible
-          play-button-label="Play video"
-          preview-image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
-        >
-          <iframe
-            slot="video"
-            src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque"
-            frameborder="0"
-          ></iframe>
-        </hy-video>
-        <hy-video
-          horizontal
-          video-title="Youtube test embed"
-          video-description="Video description for giving more context to what the user is viewing (eg. if the video is part of a lecture series, or a series of speeches). Can include links and probably needs to have a character limit."
-          context-label="Youtube test"
-          views="123"
-          views-label="Views"
-          duration="1:23"
-          context-label-visible
-          duration-label="Duration"
-          date-added="28.10.2020"
-          date-added-label="Added"
-        >
-          <iframe
-            slot="video"
-            src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque"
-            frameborder="0"
-          ></iframe>
-        </hy-video>
-        <hy-video
-          context-label="Youtube test"
-          play-button-visible
-          context-label-visible
-          play-button-label="Play video"
-          link-to-video="https://www.google.com"
-          preview-image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
-        >
-        </hy-video>
-        <hy-video>
-          <iframe
-            slot="video"
-            src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque"
-            frameborder="0"
-          ></iframe>
-        </hy-video>
-        <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."
+          url="https://www.google.com"
+          url-title="Check this link"
+          sc-label="label for link"
+        ></hy-introduction>
+        <hy-introduction
+          variant="blue"
+          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."
+          url="https://www.google.com"
+          url-title="Check this link"
+          sc-label="label for link"
+          image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+        ></hy-introduction>
+        <hy-introduction
+          variant="black"
+          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."
+          url="https://www.google.com"
+          url-title="Check this link"
+          sc-label="label for link"
+          image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+        ></hy-introduction>
+        <hy-introduction
+          reversed
+          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."
+          url="https://www.google.com"
+          url-title="Check this link"
+          sc-label="label for link"
+          image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+        ></hy-introduction>
       </div>
 
-      <div class="layout-sidebar-first" role="complementary">
+      <!--       <aside class="layout-sidebar-first" role="complementary">
         THIS IS SIDEBAR
-      </div>
+      </aside> -->
     </hy-main>
     <hy-footer>
       <hy-footer-action updated-text="Updated on 14.10.2020" up-button-label="Up"></hy-footer-action>