Skip to content
Snippets Groups Projects
Commit 6b55e13a authored by Tuukka Turu's avatar Tuukka Turu Committed by Ekaterina Kondareva
Browse files

introduction tweaks

parent a3d2fa5a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components.d.ts
+ 2
− 0
View file @ 6b55e13a
......@@ -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
+ 26
− 0
View file @ 6b55e13a
......@@ -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
+ 26
− 11
View file @ 6b55e13a
......@@ -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
+ 13
− 1
View file @ 6b55e13a
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
+ 1
− 0
View file @ 6b55e13a
......@@ -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
+ 3
− 0
View file @ 6b55e13a
......@@ -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
+ 37
− 70
View file @ 6b55e13a
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment