Skip to content

Commit

Permalink
Merge pull request #164 from UniversityofHelsinki/develop
Browse files Browse the repository at this point in the history
Dev to Master
  • Loading branch information
tuukkaturu authored Jul 3, 2019
2 parents 524cd54 + fdff95c commit 71318a3
Show file tree
Hide file tree
Showing 17 changed files with 419 additions and 27 deletions.
217 changes: 203 additions & 14 deletions css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -3227,25 +3242,25 @@ 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;
text-transform: uppercase;
}

@media (max-width: 48em) {
h1 {
h1, .hero-big__title__container .hero-big__overlay {
font-size: 2.85714rem;
}
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
Binary file modified fonts/hy-icons.eot
Binary file not shown.
Binary file modified fonts/hy-icons.ttf
Binary file not shown.
Binary file modified fonts/hy-icons.woff
Binary file not shown.
2 changes: 1 addition & 1 deletion icons/dest/uEA89-pause.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions icons/dest/uEA8C-euro-currency.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions icons/src/euro-currency.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion icons/src/pause.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion icons/unicodes.json
Original file line number Diff line number Diff line change
@@ -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"}
{"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"}
Loading

0 comments on commit 71318a3

Please sign in to comment.