redoing banner colour, adding pride flags

static/flags.css

@@ -0,0 +1,23 @@
+:root {
+    --rainbow: linear-gradient(
+      45deg,
+      #e40303 0% 10%,
+      #ff8c00 10% 20%,
+      #ffed00 20% 30%,
+      #008026 30% 40%,
+      #0044ff 40% 50%,
+      #750787 50% 60%,
+      #ffffff 60% 70%,
+      #ffafc8 70% 80%,
+      #74d7ee 80% 90%,
+      #613915 90% 100%
+    );
+    --trans: linear-gradient(
+     90deg,
+      #74d7ee 0% 20%,
+      #ffafc8 20% 40%,
+      #ffffff 40% 60%,
+      #ffafc8 60% 80%,
+      #74d7ee 80% 100%
+    );
+  }

static/style.css

@@ -1,157 +1,172 @@
+@import "flags.css";
+
 /* header bar colour */
 
-.govuk-header__container {
-    border-bottom: 11px solid #0000ff;
+.govuk-header__container::before {
+  pointer-events: none;
+  content: "";
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  display: block;
+  position: absolute;
+  margin-top: 0px;
+  background: #0000ff;
+}
+
+body[data-page="about"] .govuk-header__container::before {
+  background: var(--rainbow);
+}
 
+body[data-page="postsfirst"] .govuk-header__container::before {
+  background: var(--trans);
 }
 
 .bloo-grid-wrap {
-        display: flex;
-        flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 /* MoJ Badge element */
 .moj-badge {
-    font-family: arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: 700;
-    font-size: 0.75rem;
-    line-height: 1.25;
-    padding: 0 5px;
-    display: inline-block;
-    border: 2px solid #1d70b8;
-    color: #1d70b8;
-    text-transform: uppercase;
-    vertical-align: middle;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
+  font-family: arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  font-size: 0.75rem;
+  line-height: 1.25;
+  padding: 0 5px;
+  display: inline-block;
+  border: 2px solid #1d70b8;
+  color: #1d70b8;
+  text-transform: uppercase;
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
 .moj-badge--purple {
-    border-color: #4c2c92;
-    color: #4c2c92;
+  border-color: #4c2c92;
+  color: #4c2c92;
 }
 
 .moj-badge--bright-purple {
-    border-color: #912b88;
-    color: #912b88;
+  border-color: #912b88;
+  color: #912b88;
 }
 
 .moj-badge--red {
-    border-color: #d4351c;
-    color: #d4351c;
+  border-color: #d4351c;
+  color: #d4351c;
 }
 
 .moj-badge--green {
-    border-color: #00703c;
-    color: #00703c;
+  border-color: #00703c;
+  color: #00703c;
 }
 
 .moj-badge--blue {
-    border-color: #1d70b8;
-    color: #1d70b8;
+  border-color: #1d70b8;
+  color: #1d70b8;
 }
 
 .moj-badge--black {
-    border-color: #0b0c0c;
-    color: #0b0c0c;
+  border-color: #0b0c0c;
+  color: #0b0c0c;
 }
 
 .moj-badge--grey {
-    border-color: #505a5f;
-    color: #505a5f;
+  border-color: #505a5f;
+  color: #505a5f;
 }
 
 .moj-badge--large {
-    font-family: "GDS Transport", arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: 700;
-    font-size: 0.875rem;
-    line-height: 1.1428571429;
+  font-family: "GDS Transport", arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  font-size: 0.875rem;
+  line-height: 1.1428571429;
 }
 
-
-
 /* govuk button custom colours */
 
 .govuk-button--bloo {
-    background-color: #bbd4ea;
-    box-shadow: 0 2px 0 #929191;
+  background-color: #bbd4ea;
+  box-shadow: 0 2px 0 #929191;
 }
 
 .govuk-button--bloo:active,
 .govuk-button--bloo:hover,
 .govuk-button--bloo:link,
 .govuk-button--bloo:visited {
-    color: #0c2d4a;
-    text-decoration: none;
+  color: #0c2d4a;
+  text-decoration: none;
 }
 
-
 .govuk-padding-bottom--less-5 {
-    padding-bottom: -25px !important;
+  padding-bottom: -25px !important;
 }
 
 .govuk-padding-top--less-5 {
-    padding-top: -25px !important;
+  padding-top: -25px !important;
 }
 
-.govuk-link:link, .govuk-link--no-visited-state:link, .govuk-link--no-visited-state:visited {
-    color: #B05E58;
+.govuk-link:link,
+.govuk-link--no-visited-state:link,
+.govuk-link--no-visited-state:visited {
+  color: #b05e58;
 }
 
 .govuk-\!-width-smol {
-    width: 10%!important;
+  width: 10% !important;
 }
 
 /* custom colours */
 
 .bloo-gov {
-    color: #1d70b8;
+  color: #1d70b8;
 }
 
 .bloo-100 {
-    color: #0000ff;
+  color: #0000ff;
 }
 
 /* variables for global text elements - change here to change globally */
 
 .col-bloo {
-    color: #1976d2;
+  color: #1976d2;
 }
 
 .col-wren {
-    color: #CD4B0A /* meets WCAG AA */
+  color: #cd4b0a; /* meets WCAG AA */
 }
 
 .col-wren--title {
-    color: #f47738 /* meets WCAG AA for LARGE TEXT ONLY*/
+  color: #f47738; /* meets WCAG AA for LARGE TEXT ONLY*/
 }
 
 .col-services {
-    color: #505a5f
+  color: #505a5f;
 }
 
 /*pronoun colours from tags*/
 
 .col-pronoun-they {
-    background-color: #d4ecea;
-    color: #10403c; 
-
+  background-color: #d4ecea;
+  color: #10403c;
 }
 
 .col-pronoun-she {
-    background-color: #f9e1ec;
-    color: #6b1c40;
+  background-color: #f9e1ec;
+  color: #6b1c40;
 }
 
 /* fonts */
 
 .emoji {
-    font-family: "Noto Color Emoji", sans-serif;
-    font-weight: 400;
-    font-style: normal;
-  }
-
+  font-family: "Noto Color Emoji", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}

templates/base.html

@@ -47,7 +47,8 @@
 
 
 
-<body class="govuk-template__body js-enabled govuk-frontend-supported">
+<body class="govuk-template__body js-enabled govuk-frontend-supported" data-page="{{ current_path | replace(from='/', to="") | urlencode }}">
+
   {% include "bloo-header.html" %}
   <section class="section">
     <div class="container">