diff --git a/src/components.d.ts b/src/components.d.ts
index b0c7ab8ff41bb1f2d3f58ee6a1d2d9f76f21b868..3ebb55af7cf6b5e971b08850ba5cdf30859bdf30 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -318,6 +318,7 @@ export namespace Components {
}
interface HyIngress {}
interface HyIntroduction {
+ headerstyle: string;
imageUrl?: string;
reversed: boolean;
scLabel?: string;
@@ -1247,6 +1248,7 @@ declare namespace LocalJSX {
}
interface HyIngress {}
interface HyIntroduction {
+ headerstyle?: string;
imageUrl?: string;
reversed?: boolean;
scLabel?: string;
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 65f08668dae08f53a45712ae2e9db19cb977472d..f61fcef9d518acc1b1259dc884242535a132006b 100644
--- a/src/components/heading/heading.scss
+++ b/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;
+ }
}
/*
@@ -158,6 +163,16 @@ h1.hy-heading__introduction {
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
@@ -179,6 +194,17 @@ h1.hy-heading__introduction {
}
}
+ 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;
+ }
+ }
+
//Hero h1
h1.hy-heading__introduction {
@include breakpoint($extrawide) {
diff --git a/src/components/hy-introduction/hy-introduction.scss b/src/components/hy-introduction/hy-introduction.scss
index 9178f9e99c3f4dd891fda344f5acc8c4c8f12e2b..de52a23e6607e073f145c3f7ccf0f5e9b5639332 100644
--- a/src/components/hy-introduction/hy-introduction.scss
+++ b/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;
+ }
+ }
+}
diff --git a/src/components/hy-introduction/hy-introduction.tsx b/src/components/hy-introduction/hy-introduction.tsx
index ff40a56e7b830570ca9559954f3d4fdffeef3ebc..6630323e116e1a579ec3793de18543a99c408caf 100644
--- a/src/components/hy-introduction/hy-introduction.tsx
+++ b/src/components/hy-introduction/hy-introduction.tsx
@@ -1,4 +1,4 @@
-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}`
diff --git a/src/components/hy-introduction/readme.md b/src/components/hy-introduction/readme.md
index b454acd970fee7e291c7df21bc1a3e58ac634c68..d84feba7e08fcb8ad484d676b32de723c1d6be8a 100644
--- a/src/components/hy-introduction/readme.md
+++ b/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` |
diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss
index f1b626718ade7b971b45a9101e147d8ea4e53c1f..d8b51533c0dff2dc22ef880b08244071456a4962 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/src/components/hy-main/hy-main.scss
@@ -40,6 +40,7 @@
display: none;
@include breakpoint($extrawide) {
+ display: block;
border-right: 2px dotted var(--grayscale-medium);
display: block;
max-width: 320px;
diff --git a/src/index.html b/src/index.html
index c6a12cb33da5f87cbe4e5456cf91be7252829f1b..cd2a5c5fc1f26c66bceb61fee1d4e4639e2ea03c 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="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>