ID-428 ID7.1 removes W cutout in footer, now applied to <body> elements

UniversityofWarwick · Oct 3, 2024 · 1148117 · 1148117
1 parent c6f6364
commit 1148117
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -118,7 +118,7 @@ In your application you will need to do the following:
 
 From version 2.9.7 onwards, you can apply the new "ID7.1" styling to the site masthead in your app. To do so:
 
-* Add the `id7-point-1` class to any `id7-utility-masthead` elements in your templates
+* Add the `id7-point-1` class to the `<body>` element in your templates
 * Replace the logo image `logo.png` with `logo.svg` in your templates
 * Update anything app-specific that needs updating - the whole masthead region should have a white background
 

diff --git a/docs/_includes/templates/base.html b/docs/_includes/templates/base.html
@@ -23,7 +23,7 @@
 
   <script src="js/id7-bundle.min.js"></script>
 </head>
-<body>
+<body class="id7-point-1">
   <div class="id7-left-border"></div>
   <div class="id7-fixed-width-container">
     <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>

diff --git a/docs/_includes/utility-masthead.html b/docs/_includes/utility-masthead.html
@@ -1,4 +1,4 @@
-<div class="id7-utility-masthead id7-point-1">
+<div class="id7-utility-masthead">
   {% include utility-bar.html %}
   {% include masthead.html %}
-</div>
+</div>
diff --git a/docs/_layouts/borderless.html b/docs/_layouts/borderless.html
@@ -3,7 +3,7 @@
 <head>
   {% include header-borderless.html %}
 </head>
-<body>
+<body class="id7-point-1">
 <div class="id7-left-border"></div>
 <div class="id7-fixed-width-container">
   <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -3,7 +3,7 @@
 <head>
   {% include header.html %}
 </head>
-<body>
+<body class="id7-point-1">
 <div class="id7-left-border"></div>
 <div class="id7-fixed-width-container">
   <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>
@@ -49,4 +49,4 @@ <h1>{{ page.title }}</h1>
 <div class="id7-right-border"></div>
 
 </body>
-</html>
+</html>
diff --git a/docs/_layouts/empty.html b/docs/_layouts/empty.html
@@ -3,7 +3,7 @@
 <head>
   {% include header.html %}
 </head>
-<body>
+<body class="id7-point-1">
 
 {{ content }}
 

diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
@@ -3,7 +3,7 @@
 <head>
   {% include header.html %}
 </head>
-<body>
+<body class="id7-point-1">
 <div class="id7-left-border"></div>
 <div class="id7-fixed-width-container">
   <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>
@@ -39,4 +39,4 @@ <h1>{{ page.title }}</h1>
 <div class="id7-right-border"></div>
 
 </body>
-</html>
+</html>
diff --git a/docs/_layouts/hp-2019.html b/docs/_layouts/hp-2019.html
@@ -7,7 +7,7 @@
   <link href="/dist/hp-2019/css/hp.css" rel="stylesheet" type="text/css">
   <script src="/dist/hp-2019/js/hp.js"></script>
 </head>
-<body>
+<body class="id7-point-1">
 <div class="id7-left-border"></div>
 <div class="id7-fixed-width-container">
   <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>

diff --git a/docs/_layouts/many-menus.html b/docs/_layouts/many-menus.html
@@ -3,7 +3,7 @@
 <head>
   {% include header.html %}
 </head>
-<body>
+<body class="id7-point-1">
 <div class="id7-left-border"></div>
 <div class="id7-fixed-width-container">
   <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>

diff --git a/docs/_layouts/wide.html b/docs/_layouts/wide.html
@@ -3,7 +3,7 @@
 <head>
   {% include header-wide.html %}
 </head>
-<body>
+<body class="id7-point-1">
 <div class="id7-left-border"></div>
 <div class="id7-fixed-width-container">
   <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>

diff --git a/less/footer.less b/less/footer.less
@@ -62,6 +62,17 @@ footer {
   }
 }
 
+// ID-428 Remove W cutout in ID7.1
+body.id7-point-1 footer {
+  .id7-site-footer, .id7-app-footer {
+    @media screen {
+      .id7-logo-bleed {
+        display: none;
+      }
+    }
+  }
+}
+
 .id7-non-branded {
   .id7-page-footer {
     .id7-site-footer, .id7-app-footer {

diff --git a/less/header.less b/less/header.less
@@ -43,12 +43,12 @@
       .position-logo-colour-block(@id7-masthead-logo-height-sm, @id7-masthead-logo-width-sm);
     }
   }
+}
 
-  &.id7-point-1 {
-    @media (min-width: @grid-float-breakpoint) {
-      .id7-masthead .id7-logo a {
-        height: @id7-point-1-masthead-logo-height-sm;
-      }
+body.id7-point-1 .id7-utility-masthead {
+  @media (min-width: @grid-float-breakpoint) {
+    .id7-masthead .id7-logo a {
+      height: @id7-point-1-masthead-logo-height-sm;
     }
   }
 }

diff --git a/less/masthead.less b/less/masthead.less
@@ -224,7 +224,7 @@
 }
 
 // Overrides for ID7.1, July 2024, ID-416
-.id7-utility-masthead.id7-point-1 .id7-masthead {
+body.id7-point-1 .id7-utility-masthead .id7-masthead {
   background-image: none;
 
   .id7-logo-column {

diff --git a/less/mixins/branding.less b/less/mixins/branding.less
@@ -14,7 +14,7 @@
     background-image: url(@url);
   }
 
-  .id7-utility-masthead.id7-point-1 {
+  body.id7-point-1 .id7-utility-masthead {
     background-image: none;
     background-color: white;
   }
@@ -310,7 +310,7 @@
     background-color: @colour;
   }
 
-  .id7-utility-masthead.id7-point-1::after {
+  body.id7-point-1 .id7-utility-masthead::after {
     background-color: transparent;
   }
 

diff --git a/less/utility-bar.less b/less/utility-bar.less
@@ -157,7 +157,7 @@
 }
 
 // Overrides for ID7.1, January 2024, ID-416
-.id7-utility-masthead.id7-point-1  .id7-utility-bar {
+body.id7-point-1 .id7-utility-masthead  .id7-utility-bar {
   .link-colour(@text-color);
 
   > ul {
@@ -167,4 +167,4 @@
   a > .fa-stack.id7-notifications-badge {
     > i { color: #dddddd; }
   }
-}
+}
diff --git a/templates/base.html b/templates/base.html
@@ -26,7 +26,7 @@
 
   <script src="js/id7-bundle.js"></script>
 </head>
-<body>
+<body class="id7-point-1">
   <div class="id7-left-border"></div>
   <div class="id7-fixed-width-container">
     <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
     <head>
       {% include header.html %}
     </head>
-    <body>
+    <body class="id7-point-1">
     {{ content }}
@@ Expand Down @@