styling changes

guardian · Apr 20, 2016 · 03e47d0 · 03e47d0
1 parent fa60873
commit 03e47d0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/applications/app/views/fragments/galleryHeader.scala.html b/applications/app/views/fragments/galleryHeader.scala.html
@@ -9,24 +9,24 @@
         @defining(
             item.content.elements.elements.head
         ) { picture =>
-            .content__header--background-image {
+            .content__header__background-image {
                 background-image: url('http:@Html(ImgSrc.findNearestSrc(picture.images, Profile(width = Some(1000))).getOrElse(""))');
             }
             @@media (min-width: @{layout.Phablet.minWidth}px) {
-                .content__header--background-image {
+                .content__header__background-image {
                     background-image: url('http:@Html(ImgSrc.findNearestSrc(picture.images, Profile(width = Some(1300))).getOrElse(""))');
                 }
             }
             @@media (min-width: @{layout.Wide.minWidth}px) {
-                .content__header--background-image {
+                .content__header__background-image {
                     background-image: url('http:@Html(ImgSrc.findNearestSrc(picture.images, Profile(width = Some(2200))).getOrElse(""))');
                 }
             }
         }
     </style>
 
     <div class="content__header tonal__header">
-        <div class="content__header--background-image">
+        <div class="content__header__background-image">
             <div class="content__wrapper content__wrapper--headline">
                 <div class="gs-container">
 

diff --git a/static/src/stylesheets/module/content/_gallery.scss b/static/src/stylesheets/module/content/_gallery.scss
@@ -248,9 +248,6 @@
 
 // New gallery stuff
 
-// TODO: put in pasteup
-$multimedia-support-5: #161616;
-
 // The main image needs to take up 100vh and the slim header needs to sit just on top of it.
 .l-header--new-gallery {
     position: absolute;
@@ -496,7 +493,7 @@ $multimedia-support-5: #161616;
             width: gs-span(3);
             top: 0;
             right: auto;
-            margin-left: -(gs-span(3));
+            margin-left: 0 - gs-span(3);
         }
     }
 
@@ -510,7 +507,7 @@ $multimedia-support-5: #161616;
 
         a {
             color: $neutral-4;
-            border-bottom: 1px solid #767676;
+            border-bottom: 1px solid $neutral-2;
 
             &:hover {
                 border-bottom: 1px solid $neutral-7;
@@ -548,13 +545,20 @@ $multimedia-support-5: #161616;
         }
     }
 
+    // All images should fit within the viewport height
+    .gallery__img-container,
+    .gallery__img {
+        max-height: 100vh;
+    }
+
     // landscape gallery images now are wider than they were before.
     .gallery__img-container--landscape,
     .gallery__img--landscape {
         width: 100%;
         height: auto;
     }
 
+    // Portrait gallery images now are wider than they were before only on mobile
     .gallery__img-container--portrait,
     .gallery__img--portrait {
         @include mq($until: mobileLandscape) {
@@ -563,18 +567,18 @@ $multimedia-support-5: #161616;
         }
     }
 
-    .content__header--background-image {
+    .content__header__background-image {
         height: 100vh;
+        // The headline wrapper is position absolute within this div
         position: relative;
         background-position: center center;
         background-size: cover;
-        display: block;
     }
 
     // immersive Overwrites
     .content__head--immersive.is-fixed-height {
         .content__header {
-            position: relative;
+            position: static;
         }
     }
 }

diff --git a/static/src/stylesheets/pasteup/palette/_src.scss b/static/src/stylesheets/pasteup/palette/_src.scss
@@ -49,6 +49,7 @@ $multimedia-support-1:   #c5d4ea;
 $multimedia-support-2:   #507892;
 $multimedia-support-3:   #002c59;
 $multimedia-support-4:   #484848;
+$multimedia-support-5:   #161616;
 
 // Live palette
 $live-main-1:            #b51800;