Merge pull request #139 from UniversityofHelsinki/liftup_mosaic_visua…

…l_improvements Liftup mosaic visual improvements
UniversityofHelsinki · Apr 27, 2018 · 11432e2 · 11432e2
2 parents 4d699e4 + 918003f
commit 11432e2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 31 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -5634,6 +5634,7 @@ a.liftup-grid__item:hover .liftup-grid__title {
   background-size: cover;
   background-position: center;
   height: 320px;
+  margin: 1px 0;
   padding: 2rem;
   position: relative;
 }
@@ -5643,27 +5644,27 @@ a.liftup-grid__item:hover .liftup-grid__title {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: 0.2;
+  opacity: .4;
   position: absolute;
   right: 0;
   top: 0;
   transform: translate3d(0, 0, 0);
-  transition: opacity 0.2s;
   z-index: 1;
 }
 
-.liftup-mosaic__item:hover:before {
-  opacity: 0.4;
+.liftup-mosaic__item:hover .liftup-mosaic__title {
+  text-decoration: underline;
 }
 
 @media (min-width: 48em) {
   .liftup-mosaic__item {
     height: 36vw;
+    margin: 1px;
     max-height: 480px;
-    width: 33.33%;
+    width: calc(33.33% - 2px);
   }
   .liftup-mosaic__item:nth-of-type(2) {
-    width: 66.66%;
+    width: calc(66.66% - 2px);
   }
   .liftup-mosaic__item:nth-of-type(2) .liftup-mosaic__title {
     font-size: 1.75rem;
@@ -5679,15 +5680,12 @@ a.liftup-grid__item:hover .liftup-grid__title {
   -moz-osx-font-smoothing: grayscale;
   vertical-align: bottom;
   content: "";
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   color: #FFF;
   font-size: 2em;
   line-height: normal;
   position: absolute;
   right: 8px;
   top: 8px;
-  transition-duration: 0.2s;
-  transition-property: color;
   z-index: 1;
 }
 
@@ -5699,12 +5697,12 @@ a.liftup-grid__item:hover .liftup-grid__title {
   }
 }
 
-.liftup-mosaic__item.theme-video:hover:after {
-  color: #D2D2D2;
+.liftup-mosaic__item.theme-plain {
+  background-color: #000;
 }
 
-.liftup-mosaic__item.theme-plain {
-  background-color: #222;
+.liftup-mosaic__item.theme-plain:before {
+  opacity: 0;
 }
 
 .liftup-mosaic__label {
@@ -5715,7 +5713,6 @@ a.liftup-grid__item:hover .liftup-grid__title {
 }
 
 .liftup-mosaic__title {
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   color: #FFF;
   font-size: 1.25rem;
   font-weight: 600;

diff --git a/sass/components/_liftup-mosaic.scss b/sass/components/_liftup-mosaic.scss
@@ -24,6 +24,7 @@
   background-size: cover;
   background-position: center;
   height: 320px;
+  margin: 1px 0;
   padding: 2rem;
   position: relative;
 
@@ -32,26 +33,28 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: 0.2;
+    opacity: .4;
     position: absolute;
     right: 0;
     top: 0;
     transform: translate3d(0,0,0);
-    transition: opacity 0.2s;
     z-index: 1;
   }
 
-  &:hover:before {
-    opacity: 0.4;
+  &:hover {
+    .liftup-mosaic__title {
+      text-decoration: underline;
+    }
   }
 
   @include breakpoint($small) {
     height: 36vw;
+    margin: 1px;
     max-height: 480px;
-    width: 33.33%;
+    width: calc(33.33% - 2px);
 
     &:nth-of-type(2) {
-      width: 66.66%;
+      width: calc(66.66% - 2px);
 
       .liftup-mosaic__title {
         @include font-size(28px);
@@ -62,15 +65,12 @@
   &.theme-video {
     &:after {
       @include icon($icon-video);
-      @include text-shadow-overlay;
       color: $white;
       font-size: 2em;
       line-height: normal;
       position: absolute;
       right: 8px;
       top: 8px;
-      transition-duration: 0.2s;
-      transition-property: color;
       z-index: 1;
 
       @include breakpoint($medium) {
@@ -79,16 +79,14 @@
         top: 16px;
       }
     }
-
-    &:hover {
-      &:after {
-        color: $mediumsilver;
-      }
-    }
   }
 
   &.theme-plain {
-    background-color: $black;
+    background-color: $pitchblack;
+
+    &:before {
+      opacity: 0;
+    }
   }
 }
 
@@ -100,7 +98,6 @@
 }
 
 .liftup-mosaic__title {
-  @include text-shadow-overlay;
   color: $white;
   font-size: 1.25rem;
   font-weight: 600;