[#1016] different colour header for past years

Port of mockup changes from okfn/census-mockup@c4778a9. Didn't move across layout.html changes, as this year isn't going to use this feature.
okfn · Apr 20, 2017 · 639600e · 639600e
1 parent bf86cc1
commit 639600e
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 21 deletions.
diff --git a/census/static/css/styles.css b/census/static/css/styles.css
diff --git a/census/static/css/styles.css.map b/census/static/css/styles.css.map
diff --git a/census/static/scss/_header.scss b/census/static/scss/_header.scss
@@ -177,7 +177,7 @@ body {
       $header-bg: $brand-primary;
       $header-fg: $gray-dark;
       background-color: $header-bg;
-      border-bottom: solid 2px darken($header-bg, 10%);
+      border-bottom: solid $brand-primary;
       color: $header-fg;
 
       .container {
@@ -198,9 +198,15 @@ body {
           @media (min-width: $screen-sm-min) {
             background-color: transparent;
             position: absolute;
+            height: 76px;
+
+            img {
+              margin-top: -31px;
+            }
 
             &:before {
               background-color: currentColor;
+              height: 80px;
             }
           }
         }
@@ -210,11 +216,21 @@ body {
         padding-top: 1.3em;
         margin-right: $grid-gutter-width;
         padding-bottom: 12px;
+        position: relative;
 
         svg {
           height: 50px;
           fill: currentColor;
         }
+
+        .year {
+          position: absolute;
+          right: -1em;
+          top: 30px;
+          background-color: $brand-primary;
+          font-size: 0.8em;
+          line-height: 1.2;
+        }
       }
 
       .navbar-toggle {
@@ -227,9 +243,25 @@ body {
         .menu {
           @media (min-width: $screen-md-min) {
             padding-top: 1.7em;
+            text-align: right;
+            margin-right: 150px; //OK tab
           }
         }
       }
     }
+
+    &.last-year {
+      #header {
+        background-color: $brand-last-year;
+        border-bottom-color: $brand-last-year;
+      }
+    }
+
+    &.past-year {
+      #header {
+        background-color: $brand-past-year;
+        border-bottom-color: $brand-past-year;
+      }
+    }
   }
 }
diff --git a/census/static/scss/_home.scss b/census/static/scss/_home.scss
@@ -1,7 +1,7 @@
 .home {
   #home-about {
     $banner-bg-colour: $brand-primary;
-    $banner-text-colour: $gray-base;
+    $banner-text-colour: $gray-dark;
     color: $banner-text-colour;
     background-color: $banner-bg-colour;
     background-image: url("images/icon-tile.png");
@@ -10,6 +10,7 @@
     margin-top: -5px;
     padding: 20px 0 $grid-gutter-width 0;
     text-align: center;
+    position: relative;
 
     @media (min-width: $screen-sm-min) {
       padding-bottom: 40px;
@@ -19,6 +20,20 @@
       margin-top: -20px;
     }
 
+    &:before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      @include gradient-vertical($banner-bg-colour, rgba($banner-bg-colour,0), 0%, 100%);
+    }
+
+    .container {
+      position: relative;
+    }
+
     h1 {
       font-size: 2.8em;
       margin-bottom: 0.3em;
@@ -73,6 +88,7 @@
           font-style: normal;
           background-color: $text-color;
           color: #fff;
+
           &.low {
             background-color: $brand-danger;
           }
@@ -225,4 +241,24 @@
       }
     }
   }
+
+  &.last-year {
+    #home-about {
+      background-color: $brand-last-year;
+
+      &:before {
+        @include gradient-vertical($brand-last-year, rgba($brand-last-year,0), 0%, 100%);
+      }
+    }
+  }
+
+  &.past-year {
+    #home-about {
+      background-color: $brand-past-year;
+
+      &:before {
+        @include gradient-vertical($brand-past-year, rgba($brand-past-year,0), 0%, 100%);
+      }
+    }
+  }
 }
diff --git a/census/static/scss/_variables.scss b/census/static/scss/_variables.scss
@@ -3,20 +3,23 @@ $ui-border-sub: 2px; //Form
 
 $fa-font-path:   "../bower_components/font-awesome/fonts"; //Font Awesome
 
-$brand-primary:         #EAD045; //BS
+$color-okf-green: #7AB800;
+$color-okf-grey: #f0f0f0;
+$color-okf-yellow: #EAD045;
+$color-oki-green: #61BC30;
+$color-okf-black: #181818;
+$color-okf-white: #f5f5f5;
+
+$brand-primary:         $color-okf-yellow; //BS
 $brand-success:         #7AB800; //BS
 $brand-info:            #428bca; //BS
 $brand-warning:         rgb(244, 124, 35); //BS
 $brand-danger:          #ff0000; //BS
 
 $link-color: $brand-info; //BS
 
-$color-okf-green: #7AB800;
-$color-okf-grey: #f0f0f0;
-$color-okf-yellow: #E9D046;
-$color-okf-yellow2: #EAD045;
-$color-okf-black: #181818;
-$color-okf-white: #f5f5f5;
+$brand-last-year: lighten(desaturate($brand-primary,100%),25%);
+$brand-past-year: $brand-last-year;
 
 $color-maybe: #2980b9;
 $color-yes: $brand-success;