diff --git a/src/components.d.ts b/src/components.d.ts
index 8fc0c614712ce6ad824e996948622bc6a8f52b26..ea84cdd5c818190f70568fe92e427874e14a8527 100644
--- a/src/components.d.ts
+++ b/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;
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index f3f579a7495062596c26bf8f03519e9c2ae0f6a1..45de7be5ca933e416446fab7b6cdd36ff7372a60 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;
+ }
}
// 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
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 525785d3e8c170eb0db5e9a01ba658102e7013fe..e5f8502432699567d01912c680f4be8492e390a3 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/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;
diff --git a/src/index.html b/src/index.html
index 3967c93eacfb5129b108d7396c5cb294d86f013e..59857cdf2c0117fdf64acc7c355f052856c31b11 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>