diff --git a/css/styles.css b/css/styles.css index a1bd26c..1fe1f7c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -128,7 +128,7 @@ dfn { * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ -h1 { +h1, .hero-big__title__container .hero-big__overlay { font-size: 2em; margin: 0.67em 0; } @@ -464,6 +464,10 @@ th { /** * Mixin for subtitle thin */ +/** + * Mixin for fluid type. + * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px); + */ /* section: 2 title: Icons @@ -1972,6 +1976,17 @@ th { content: ""; } +.icon--euro-currency:after { + display: inline-block; + font-family: "hy-icons"; + font-style: normal; + font-weight: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: bottom; + content: ""; +} + .bar, .tube { display: block; padding-bottom: 1em; @@ -3217,7 +3232,7 @@ img { title: Headings template: 3_1_headings */ -h1, h2, h3, h4, legend, .logo-block__content .logo-block__sitename, h5, h6 { +h1, .hero-big__title__container .hero-big__overlay, h2, h3, h4, legend, .logo-block__content .logo-block__sitename, h5, h6 { font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #222; letter-spacing: -0.05em; @@ -3227,17 +3242,17 @@ h1, h2, h3, h4, legend, .logo-block__content .logo-block__sitename, h5, h6 { word-wrap: break-word; } -h1 a, h2 a, h3 a, h4 a, legend a, .logo-block__content .logo-block__sitename a, h5 a, h6 a { +h1 a, .hero-big__title__container .hero-big__overlay a, h2 a, h3 a, h4 a, legend a, .logo-block__content .logo-block__sitename a, h5 a, h6 a { color: inherit; text-decoration: none; } -h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, legend a:hover, .logo-block__content .logo-block__sitename a:hover, h5 a:hover, h6 a:hover { +h1 a:hover, .hero-big__title__container .hero-big__overlay a:hover, h2 a:hover, h3 a:hover, h4 a:hover, legend a:hover, .logo-block__content .logo-block__sitename a:hover, h5 a:hover, h6 a:hover { color: inherit; cursor: pointer; } -h1 { +h1, .hero-big__title__container .hero-big__overlay { font-size: 3.125rem; letter-spacing: -2px; line-height: 1.15em; @@ -3245,7 +3260,7 @@ h1 { } @media (max-width: 48em) { - h1 { + h1, .hero-big__title__container .hero-big__overlay { font-size: 2.85714rem; } } @@ -4590,6 +4605,154 @@ dl, ol, ul { z-index: 1; } +.hero-big:not(.hero-big--centered) { + -ms-flex-align: end; + align-items: flex-end; + display: -ms-flexbox; + display: flex; + height: 75vh; + max-height: 800px; + /* .hero-big__play { + background-color: rgba($black, 0.61); + box-decoration-break: clone; + padding: 0 1rem; + } */ +} + +@media (min-width: 48em) { + .hero-big:not(.hero-big--centered) { + min-height: 400px; + } +} + +.hero-big:not(.hero-big--centered):after { + background: linear-gradient(rgba(34, 34, 34, 0.9), rgba(34, 34, 34, 0)); + opacity: unset; + margin-bottom: 40px; +} + +.hero-big:not(.hero-big--centered) .hero-big__top { + padding: 1rem 1rem 2.5rem; +} + +.hero-big:not(.hero-big--centered) .hero-big__content { + -ms-flex-align: start; + align-items: flex-start; + display: -ms-flexbox; + display: flex; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.hero-big:not(.hero-big--centered) .hero-big__title__container { + position: relative; + margin-bottom: 2rem; + width: 100%; +} + +.hero-big:not(.hero-big--centered) .hero-big__ingress__container { + position: relative; + margin-bottom: 1rem; + width: 100%; +} + +.hero-big:not(.hero-big--centered) .hero-big__title, .hero-big:not(.hero-big--centered) .hero-big__title__container .hero-big__overlay, .hero-big__title__container .hero-big:not(.hero-big--centered) .hero-big__overlay { + font-size: 32px; + display: inline-block; + line-height: 1; + max-width: 100%; + margin-bottom: 1rem; + padding: 1rem; + position: relative; + z-index: 1; +} + +@media (min-width: 360px) { + .hero-big:not(.hero-big--centered) .hero-big__title, .hero-big:not(.hero-big--centered) .hero-big__title__container .hero-big__overlay, .hero-big__title__container .hero-big:not(.hero-big--centered) .hero-big__overlay { + font-size: calc(32px + 36 * (100vw - 360px) / 1240); + } +} + +@media (min-width: 1600px) { + .hero-big:not(.hero-big--centered) .hero-big__title, .hero-big:not(.hero-big--centered) .hero-big__title__container .hero-big__overlay, .hero-big__title__container .hero-big:not(.hero-big--centered) .hero-big__overlay { + font-size: 68px; + } +} + +@supports ((-webkit-box-decoration-break: clone) or (box-decoration-break: clone)) { + .hero-big:not(.hero-big--centered) .hero-big__title, .hero-big:not(.hero-big--centered) .hero-big__title__container .hero-big__overlay, .hero-big__title__container .hero-big:not(.hero-big--centered) .hero-big__overlay { + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + display: inline; + padding: 0 1rem; + } +} + +@media (min-width: 48em) { + .hero-big:not(.hero-big--centered) .hero-big__title, .hero-big:not(.hero-big--centered) .hero-big__title__container .hero-big__overlay, .hero-big__title__container .hero-big:not(.hero-big--centered) .hero-big__overlay { + margin-bottom: 0; + } +} + +.hero-big:not(.hero-big--centered) .hero-big__ingress, .hero-big:not(.hero-big--centered) .hero-big__ingress__container .hero-big__overlay, .hero-big__ingress__container .hero-big:not(.hero-big--centered) .hero-big__overlay { + font-size: 1.125rem; + display: inline-block; + line-height: 2rem; + padding: .25rem 1rem; + position: relative; + z-index: 1; +} + +@supports ((-webkit-box-decoration-break: clone) or (box-decoration-break: clone)) { + .hero-big:not(.hero-big--centered) .hero-big__ingress, .hero-big:not(.hero-big--centered) .hero-big__ingress__container .hero-big__overlay, .hero-big__ingress__container .hero-big:not(.hero-big--centered) .hero-big__overlay { + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + display: inline; + padding: .25rem 1rem; + } +} + +@media (min-width: 48em) { + .hero-big:not(.hero-big--centered) .hero-big__ingress, .hero-big:not(.hero-big--centered) .hero-big__ingress__container .hero-big__overlay, .hero-big__ingress__container .hero-big:not(.hero-big--centered) .hero-big__overlay { + margin-bottom: 0; + } +} + +.hero-big__video__controls { + bottom: 0; + position: absolute; + right: 0; +} + +.hero-big__video-button { + -ms-flex-align: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.6); + border: none; + color: #FFF; + cursor: pointer; + display: -ms-flexbox; + display: flex; + -ms-flex: 1; + flex: 1; + font-size: 1.2rem; + height: 2.5rem; + -ms-flex-pack: center; + justify-content: center; + padding: 0; + transition-duration: .3s; + transition-property: all; + width: 3rem; +} + +.hero-big__video-button:hover { + background-color: black; +} + .hero-big__top { margin: 0 auto; max-width: 75em; @@ -4603,7 +4766,7 @@ dl, ol, ul { max-width: 50em; } -.hero-big__title { +.hero-big__title, .hero-big__title__container .hero-big__overlay { font-size: 2.625rem; color: #FFF; font-weight: 700; @@ -4613,13 +4776,13 @@ dl, ol, ul { } @media (min-width: 48em) { - .hero-big__title { + .hero-big__title, .hero-big__title__container .hero-big__overlay { font-size: 5rem; margin-bottom: 30px; } } -.hero-big__ingress { +.hero-big__ingress, .hero-big__ingress__container .hero-big__overlay { font-size: 1.125rem; font-weight: 600; font-style: normal; @@ -4628,7 +4791,7 @@ dl, ol, ul { } @media (min-width: 48em) { - .hero-big__ingress { + .hero-big__ingress, .hero-big__ingress__container .hero-big__overlay { margin-bottom: 30px; } } @@ -4750,14 +4913,14 @@ dl, ol, ul { } } -.hero-big--centered .hero-big__title { +.hero-big--centered .hero-big__title, .hero-big--centered .hero-big__title__container .hero-big__overlay, .hero-big__title__container .hero-big--centered .hero-big__overlay { font-size: 2.25rem; margin: 0; padding: 0; } @media (min-width: 48em) { - .hero-big--centered .hero-big__title { + .hero-big--centered .hero-big__title, .hero-big--centered .hero-big__title__container .hero-big__overlay, .hero-big__title__container .hero-big--centered .hero-big__overlay { font-size: 4.375rem; } } @@ -4932,6 +5095,28 @@ dl, ol, ul { } } +/* +* Hero-big overlay wizardry. +*/ +.hero-big__overlay--container { + left: 0; + opacity: 0.7; + position: absolute; + top: 0; +} + +.hero-big__title__container .hero-big__overlay { + background: #222; + color: transparent !important; + line-height: 1; +} + +.hero-big__ingress__container .hero-big__overlay { + background: #222; + color: transparent !important; + line-height: 1; +} + /* section: 19.1 title: Highlight @@ -8038,8 +8223,10 @@ input[type="text"].search-form-large__input { position: absolute; } -.textarea h1, .textarea h2, .textarea h3, .textarea h4, .textarea legend, .textarea .logo-block__content .logo-block__sitename, .logo-block__content .textarea .logo-block__sitename, .textarea h5, .textarea h6, +.textarea h1, .textarea .hero-big__title__container .hero-big__overlay, .hero-big__title__container .textarea .hero-big__overlay, .textarea h2, .textarea h3, .textarea h4, .textarea legend, .textarea .logo-block__content .logo-block__sitename, .logo-block__content .textarea .logo-block__sitename, .textarea h5, .textarea h6, .textarea-ingress h1, +.textarea-ingress .hero-big__title__container .hero-big__overlay, +.hero-big__title__container .textarea-ingress .hero-big__overlay, .textarea-ingress h2, .textarea-ingress h3, .textarea-ingress h4, @@ -8051,8 +8238,10 @@ input[type="text"].search-form-large__input { margin-top: 32px; } -.textarea h1:first-child, .textarea h2:first-child, .textarea h3:first-child, .textarea h4:first-child, .textarea legend:first-child, .textarea .logo-block__content .logo-block__sitename:first-child, .logo-block__content .textarea .logo-block__sitename:first-child, .textarea h5:first-child, .textarea h6:first-child, +.textarea h1:first-child, .textarea .hero-big__title__container .hero-big__overlay:first-child, .hero-big__title__container .textarea .hero-big__overlay:first-child, .textarea h2:first-child, .textarea h3:first-child, .textarea h4:first-child, .textarea legend:first-child, .textarea .logo-block__content .logo-block__sitename:first-child, .logo-block__content .textarea .logo-block__sitename:first-child, .textarea h5:first-child, .textarea h6:first-child, .textarea-ingress h1:first-child, +.textarea-ingress .hero-big__title__container .hero-big__overlay:first-child, +.hero-big__title__container .textarea-ingress .hero-big__overlay:first-child, .textarea-ingress h2:first-child, .textarea-ingress h3:first-child, .textarea-ingress h4:first-child, diff --git a/fonts/hy-icons.eot b/fonts/hy-icons.eot index d4fa93b..fb6818e 100644 Binary files a/fonts/hy-icons.eot and b/fonts/hy-icons.eot differ diff --git a/fonts/hy-icons.ttf b/fonts/hy-icons.ttf index f9bb4e1..fc5b26c 100644 Binary files a/fonts/hy-icons.ttf and b/fonts/hy-icons.ttf differ diff --git a/fonts/hy-icons.woff b/fonts/hy-icons.woff index 3a49d31..fbfd60a 100644 Binary files a/fonts/hy-icons.woff and b/fonts/hy-icons.woff differ diff --git a/icons/dest/uEA89-pause.svg b/icons/dest/uEA89-pause.svg index 794ddcc..8292ea5 100644 --- a/icons/dest/uEA89-pause.svg +++ b/icons/dest/uEA89-pause.svg @@ -1 +1 @@ -icon-pause \ No newline at end of file +icon-pause diff --git a/icons/dest/uEA8C-euro-currency.svg b/icons/dest/uEA8C-euro-currency.svg new file mode 100644 index 0000000..d2279f4 --- /dev/null +++ b/icons/dest/uEA8C-euro-currency.svg @@ -0,0 +1 @@ +Asset 7 \ No newline at end of file diff --git a/icons/src/euro-currency.svg b/icons/src/euro-currency.svg new file mode 100644 index 0000000..d2279f4 --- /dev/null +++ b/icons/src/euro-currency.svg @@ -0,0 +1 @@ +Asset 7 \ No newline at end of file diff --git a/icons/src/pause.svg b/icons/src/pause.svg index 794ddcc..8292ea5 100644 --- a/icons/src/pause.svg +++ b/icons/src/pause.svg @@ -1 +1 @@ -icon-pause \ No newline at end of file +icon-pause diff --git a/icons/unicodes.json b/icons/unicodes.json index 5ee6643..26d86da 100644 --- a/icons/unicodes.json +++ b/icons/unicodes.json @@ -1 +1 @@ -{"add-to-todo-list.svg":"uEA01","arrow.svg":"uEA03","avatar-group.svg":"uEA04","avatar.svg":"uEA05","bachelor.svg":"uEA06","camera.svg":"uEA07","chat.svg":"uEA08","date.svg":"uEA09","discover.svg":"uEA0A","done.svg":"uEA0B","download.svg":"uEA0C","drag.svg":"uEA0D","drop-down.svg":"uEA0E","edit-event.svg":"uEA0F","edit.svg":"uEA10","events.svg":"uEA11","facebook.svg":"uEA12","favorites.svg":"uEA13","grid.svg":"uEA14","hamburger.svg":"uEA15","home.svg":"uEA16","hy-logo.svg":"uEA17","info-stroke.svg":"uEA18","info.svg":"uEA19","link-arrow-offsite.svg":"uEA1A","link-arrow.svg":"uEA1B","linkedin.svg":"uEA1C","list.svg":"uEA1D","location.svg":"uEA1E","log.svg":"uEA1F","logout.svg":"uEA20","magnify-minus.svg":"uEA21","magnify-plus.svg":"uEA22","master.svg":"uEA23","minus.svg":"uEA24","modify.svg":"uEA25","navi-triangle.svg":"uEA26","new-group.svg":"uEA27","new-person.svg":"uEA28","notification.svg":"uEA29","opinder-logo-new.svg":"uEA2A","pdf.svg":"uEA2B","people.svg":"uEA2C","person-outline.svg":"uEA2D","person.svg":"uEA2E","plus.svg":"uEA2F","profile.svg":"uEA30","question.svg":"uEA31","remove.svg":"uEA32","rotate-left.svg":"uEA33","rotate-right.svg":"uEA34","search.svg":"uEA35","time.svg":"uEA36","todo-list.svg":"uEA37","tour.svg":"uEA38","twitter.svg":"uEA39","units-and-faculties.svg":"uEA3A","video.svg":"uEA3B","warning.svg":"uEA3C","you-tube.svg":"uEA3D","id-number.svg":"uEA3E","mail.svg":"uEA3F","mobile.svg":"uEA40","opinder-logo.svg":"uEA41","permission-all.svg":"uEA42","permission-group.svg":"uEA43","permission-private.svg":"uEA44","phone.svg":"uEA45","preview.svg":"uEA46","url.svg":"uEA47","instagram.svg":"uEA48","login.svg":"uEA49","spinner.svg":"uEA4A","you-tuubi.svg":"uEA4B","bullet-list.svg":"uEA4C","contentlink.svg":"uEA4D","customlink.svg":"uEA4E","dragbutton.svg":"uEA4F","embed-new (1).svg":"uEA50","embed.svg":"uEA51","feed.svg":"uEA52","file-text.svg":"uEA53","helsinginyliopisto.svg":"uEA54","horizontal-resize.svg":"uEA55","image-gallery.svg":"uEA56","images.svg":"uEA57","leiki-list.svg":"uEA58","listoflinks.svg":"uEA59","play.svg":"uEA5A","wrench.svg":"uEA5B","youtube.svg":"uEA5D","link-arrow-down.svg":"uEA5E","link-arrow-left.svg":"uEA5F","link-arrow-up.svg":"uEA60","code-fork.svg":"uEA61","cogs.svg":"uEA62","external-link.svg":"uEA63","globe.svg":"uEA64","image.svg":"uEA65","arrow-down.svg":"uEA66","arrow-left.svg":"uEA67","arrow-right.svg":"uEA68","arrow-up.svg":"uEA69","arrow-offsite.svg":"uEA6C","caret-down.svg":"uEA6D","caret-left.svg":"uEA6E","caret-right.svg":"uEA71","caret-up.svg":"uEA70","list-as-blocks.svg":"uEA72","social-media.svg":"uEA73","dot.svg":"uEA74","google-plus.svg":"uEA75","share.svg":"uEA76","heart.svg":"uEA77","retweet.svg":"uEA78","square-checked.svg":"uEA79","square.svg":"uEA7A","eye-slash.svg":"uEA7B","full-screen.svg":"uEA7C","alert.svg":"uEA7D","archive.svg":"uEA7E","copy.svg":"uEA7F","file-chart.svg":"uEA80","item-close.svg":"uEA81","item-edit.svg":"uEA82","item-set.svg":"uEA83","item-single.svg":"uEA84","new-version.svg":"uEA85","trash.svg":"uEA86","version-history.svg":"uEA87","whatsapp.svg":"uEA88","pause.svg":"uEA89","play-arrow.svg":"uEA8A","headphones.svg":"uEA8B"} \ No newline at end of file +{"add-to-todo-list.svg":"uEA01","arrow.svg":"uEA03","avatar-group.svg":"uEA04","avatar.svg":"uEA05","bachelor.svg":"uEA06","camera.svg":"uEA07","chat.svg":"uEA08","date.svg":"uEA09","discover.svg":"uEA0A","done.svg":"uEA0B","download.svg":"uEA0C","drag.svg":"uEA0D","drop-down.svg":"uEA0E","edit-event.svg":"uEA0F","edit.svg":"uEA10","events.svg":"uEA11","facebook.svg":"uEA12","favorites.svg":"uEA13","grid.svg":"uEA14","hamburger.svg":"uEA15","home.svg":"uEA16","hy-logo.svg":"uEA17","info-stroke.svg":"uEA18","info.svg":"uEA19","link-arrow-offsite.svg":"uEA1A","link-arrow.svg":"uEA1B","linkedin.svg":"uEA1C","list.svg":"uEA1D","location.svg":"uEA1E","log.svg":"uEA1F","logout.svg":"uEA20","magnify-minus.svg":"uEA21","magnify-plus.svg":"uEA22","master.svg":"uEA23","minus.svg":"uEA24","modify.svg":"uEA25","navi-triangle.svg":"uEA26","new-group.svg":"uEA27","new-person.svg":"uEA28","notification.svg":"uEA29","opinder-logo-new.svg":"uEA2A","pdf.svg":"uEA2B","people.svg":"uEA2C","person-outline.svg":"uEA2D","person.svg":"uEA2E","plus.svg":"uEA2F","profile.svg":"uEA30","question.svg":"uEA31","remove.svg":"uEA32","rotate-left.svg":"uEA33","rotate-right.svg":"uEA34","search.svg":"uEA35","time.svg":"uEA36","todo-list.svg":"uEA37","tour.svg":"uEA38","twitter.svg":"uEA39","units-and-faculties.svg":"uEA3A","video.svg":"uEA3B","warning.svg":"uEA3C","you-tube.svg":"uEA3D","id-number.svg":"uEA3E","mail.svg":"uEA3F","mobile.svg":"uEA40","opinder-logo.svg":"uEA41","permission-all.svg":"uEA42","permission-group.svg":"uEA43","permission-private.svg":"uEA44","phone.svg":"uEA45","preview.svg":"uEA46","url.svg":"uEA47","instagram.svg":"uEA48","login.svg":"uEA49","spinner.svg":"uEA4A","you-tuubi.svg":"uEA4B","bullet-list.svg":"uEA4C","contentlink.svg":"uEA4D","customlink.svg":"uEA4E","dragbutton.svg":"uEA4F","embed-new (1).svg":"uEA50","embed.svg":"uEA51","feed.svg":"uEA52","file-text.svg":"uEA53","helsinginyliopisto.svg":"uEA54","horizontal-resize.svg":"uEA55","image-gallery.svg":"uEA56","images.svg":"uEA57","leiki-list.svg":"uEA58","listoflinks.svg":"uEA59","play.svg":"uEA5A","wrench.svg":"uEA5B","youtube.svg":"uEA5D","link-arrow-down.svg":"uEA5E","link-arrow-left.svg":"uEA5F","link-arrow-up.svg":"uEA60","code-fork.svg":"uEA61","cogs.svg":"uEA62","external-link.svg":"uEA63","globe.svg":"uEA64","image.svg":"uEA65","arrow-down.svg":"uEA66","arrow-left.svg":"uEA67","arrow-right.svg":"uEA68","arrow-up.svg":"uEA69","arrow-offsite.svg":"uEA6C","caret-down.svg":"uEA6D","caret-left.svg":"uEA6E","caret-right.svg":"uEA71","caret-up.svg":"uEA70","list-as-blocks.svg":"uEA72","social-media.svg":"uEA73","dot.svg":"uEA74","google-plus.svg":"uEA75","share.svg":"uEA76","heart.svg":"uEA77","retweet.svg":"uEA78","square-checked.svg":"uEA79","square.svg":"uEA7A","eye-slash.svg":"uEA7B","full-screen.svg":"uEA7C","alert.svg":"uEA7D","archive.svg":"uEA7E","copy.svg":"uEA7F","file-chart.svg":"uEA80","item-close.svg":"uEA81","item-edit.svg":"uEA82","item-set.svg":"uEA83","item-single.svg":"uEA84","new-version.svg":"uEA85","trash.svg":"uEA86","version-history.svg":"uEA87","whatsapp.svg":"uEA88","pause.svg":"uEA89","play-arrow.svg":"uEA8A","headphones.svg":"uEA8B","euro-currency.svg":"uEA8C"} \ No newline at end of file diff --git a/sass/components/_hero.scss b/sass/components/_hero.scss index b13449f..7de5a7a 100644 --- a/sass/components/_hero.scss +++ b/sass/components/_hero.scss @@ -62,6 +62,121 @@ top: 0; z-index: 1; } + + &:not(.hero-big--centered) { + align-items: flex-end; + display: flex; + height: 75vh; + max-height: 800px; + + @include breakpoint($small) { + min-height: 400px; + } + + &:after { + background: linear-gradient(rgba($black, .9), rgba($black, 0)); + opacity: unset; + // Overlay will block video pause button, prevent it by giving margin to bottom. + margin-bottom: 40px; + } + + .hero-big__top { + padding: 1rem 1rem 2.5rem; + } + + .hero-big__content { + align-items: flex-start; + display: flex; + flex-basis: auto; + flex-direction: column; + flex-wrap: wrap; + } + + .hero-big__title__container { + position: relative; + margin-bottom: 2rem; + width: 100%; + } + + .hero-big__ingress__container { + position: relative; + margin-bottom: 1rem; + width: 100%; + } + + .hero-big__title { + @include fluid-type(font-size, 360px, 1600px, 32px, 68px); + display: inline-block; + line-height: 1; + max-width: 100%; + margin-bottom: 1rem; + padding: 1rem; + position: relative; + z-index: 1; + + @supports (box-decoration-break: clone) { + box-decoration-break: clone; + display: inline; + padding: 0 1rem; + } + + @include breakpoint($small) { + margin-bottom: 0; + } + } + + .hero-big__ingress { + @include font-size(18px); + display: inline-block; + line-height: 2rem; + padding: .25rem 1rem; + position: relative; + z-index: 1; + + @supports (box-decoration-break: clone) { + box-decoration-break: clone; + display: inline; + padding: .25rem 1rem; + } + + @include breakpoint($small) { + margin-bottom: 0; + } + } + +/* .hero-big__play { + background-color: rgba($black, 0.61); + box-decoration-break: clone; + padding: 0 1rem; + } */ + } +} + +.hero-big__video__controls { + bottom: 0; + position: absolute; + right: 0; +} + +.hero-big__video-button { + align-items: center; + background-color: rgba(0, 0, 0, 0.6); + border: none; + color: $white; + cursor: pointer; + display: flex; + flex: 1; + font-size: 1.2rem; + height: 2.5rem; + justify-content: center; + padding: 0; + transition-duration: .3s; + transition-property: all; + width: 3rem; + + &:hover { + background-color: rgba(0, 0, 0, 1); + } } .hero-big__top { @@ -349,3 +464,31 @@ margin-bottom: 10px; text-transform: uppercase; } + +/* +* Hero-big overlay wizardry. +*/ +.hero-big__overlay--container { + left: 0; + opacity: 0.7; + position: absolute; + top: 0; +} + +.hero-big__title__container { + .hero-big__overlay { + @extend h1; + @extend .hero-big__title; + background: $black; + color: transparent !important; + line-height: 1; + } +} +.hero-big__ingress__container { + .hero-big__overlay { + @extend .hero-big__ingress; + background: $black; + color: transparent !important; + line-height: 1; + } +} diff --git a/sass/icons/__icon_font.scss b/sass/icons/__icon_font.scss index b34e93a..a2713c3 100644 --- a/sass/icons/__icon_font.scss +++ b/sass/icons/__icon_font.scss @@ -204,3 +204,4 @@ .icon--pause:after { @include icon("\EA89"); } .icon--play-arrow:after { @include icon("\EA8A"); } .icon--headphones:after { @include icon("\EA8B"); } +.icon--euro-currency:after { @include icon("\EA8C"); } diff --git a/sass/icons/__variables.scss b/sass/icons/__variables.scss index a6b6053..d92ab56 100644 --- a/sass/icons/__variables.scss +++ b/sass/icons/__variables.scss @@ -260,3 +260,5 @@ $icon-pause: "\EA89"; $icon-play-arrow: "\EA8A"; $icon-headphones: "\EA8B"; + +$icon-euro-currency: "\EA8C"; diff --git a/sass/mixins/_typography.scss b/sass/mixins/_typography.scss index 3fdf391..422a10c 100644 --- a/sass/mixins/_typography.scss +++ b/sass/mixins/_typography.scss @@ -116,3 +116,34 @@ padding: 0; margin: 0; } + + +/** + * Mixin for fluid type. + * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px); + */ +@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) { + @each $property in $properties { + #{$property}: $min-value; + } + + @media (min-width: $min-vw) { + @each $property in $properties { + #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}); + } + } + + @media (min-width: $max-vw) { + @each $property in $properties { + #{$property}: $max-value; + } + } +} + +@function strip-unit($number) { + @if type-of($number) == "number" and not unitless($number) { + @return $number / ($number * 0 + 1); + } + + @return $number; +} diff --git a/sass/variables/_breakpoints.scss b/sass/variables/_breakpoints.scss index d56a569..bb51e46 100644 --- a/sass/variables/_breakpoints.scss +++ b/sass/variables/_breakpoints.scss @@ -2,10 +2,10 @@ $vert-spacing-unit: 30px; $horz-spacing-unit: 30px; -$bp-small: 48em; -$bp-medium: 62.5em; -$bp-large: 75em; -$bp-xlarge: 100em; +$bp-small: 48em; // 768px +$bp-medium: 62.5em; // 1000px +$bp-large: 75em; // 1200px +$bp-xlarge: 100em; // 1600px $mobile-only: max-width $bp-small; $small: $bp-small, "no-query" ".lt-ie9"; diff --git a/templates/15_2_footer.html b/templates/15_2_footer.html index ea1e3bf..8ba6b7c 100644 --- a/templates/15_2_footer.html +++ b/templates/15_2_footer.html @@ -6,7 +6,7 @@
-

Hel­sin­gin yli­opis­to

+
Hel­sin­gin yli­opis­to

PL 3 (Fabianinkatu 33)
00014 Helsingin yliopisto

Puhelinvaihde: 02941 911

diff --git a/templates/16_1_2-hero-big.html b/templates/16_1_2-hero-big.html index 2ccac99..4e1f848 100644 --- a/templates/16_1_2-hero-big.html +++ b/templates/16_1_2-hero-big.html @@ -1,11 +1,25 @@
-

- Ole yksi* parhaista -

-
- * Kuulumme maailman tutkimusyliopistojen parhaan 1% joukkoon +
+

+ Ole yksi* parhaista +

+
+
+ Ole yksi* parhaista +
+
+
+
+
+ * Kuulumme maailman tutkimusyliopistojen parhaan 1% joukkoon +
+
+
+ * Kuulumme maailman tutkimusyliopistojen parhaan 1% joukkoon +
+
@@ -21,5 +35,9 @@

+
+ + +

diff --git a/templates/2_1_icons.html b/templates/2_1_icons.html index 7e6ec69..b7bd3ad 100644 --- a/templates/2_1_icons.html +++ b/templates/2_1_icons.html @@ -122,6 +122,9 @@ + + +


@@ -245,7 +248,10 @@ + + +