From e3890616768e7d9aecc51f86dc03a4285fd0b982 Mon Sep 17 00:00:00 2001
From: Ynda Jas <yndajas@gmail.com>
Date: Mon, 16 Oct 2023 21:02:22 +0100
Subject: [PATCH] Refresh menu styling on large screens

- Reduce the font weight
- Add the dxw 'D' as a list item indicator (excluding the back link),
  which is a style adopted from our main site's [impact report][1]
- Remove the second line indent

[1]: https://www.dxw.com/dxw-impact
---
 src/_includes/related_pages.html    |  2 +-
 src/_sass/_related.scss             | 22 +++++++++++++++++++---
 src/_sass/_typography.scss          |  2 +-
 src/assets/images/d-symbol-blue.svg |  3 +++
 4 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/images/d-symbol-blue.svg

diff --git a/src/_includes/related_pages.html b/src/_includes/related_pages.html
index f7a930cee..d9ed7ba32 100644
--- a/src/_includes/related_pages.html
+++ b/src/_includes/related_pages.html
@@ -3,7 +3,7 @@
   {% assign related_pages = related_page_group.items | sort_natural: "title" %}
 
   {% for related_page in related_pages %}
-    {% unless related_page.unrelatable %}
+    {% unless related_page.unrelatable or (related_page.title.size == 0) %}
       <li>
         <a href="{{ related_page.url }}">
           {{ related_page.title }}
diff --git a/src/_sass/_related.scss b/src/_sass/_related.scss
index 3b09aa247..e5419d175 100644
--- a/src/_sass/_related.scss
+++ b/src/_sass/_related.scss
@@ -4,6 +4,7 @@
 
 $large-screen-nav-height: 134.992px;
 $large-screen-contribute-height: 81px;
+$list-d-size: 11px;
 
 .related {
   overflow-y: auto;
@@ -13,7 +14,6 @@ $large-screen-contribute-height: 81px;
 
   font-family: typography.$heading-font-family;
   font-size: 0.9em;
-  font-weight: typography.$heading-font-weight;
 
   background-color: colours.$accent-a;
 
@@ -55,8 +55,6 @@ $large-screen-contribute-height: 81px;
 
     a {
       margin-bottom: 0.5em;
-      padding-left: 2em;
-      text-indent: -2em;
 
       &:hover,
       &:focus,
@@ -66,11 +64,29 @@ $large-screen-contribute-height: 81px;
     }
 
     ul li {
+      position: relative;
       padding-right: 0;
+      padding-left: calc($list-d-size + 10px);
       white-space: unset;
 
       &.related__back-link {
         margin-bottom: 1.5em;
+        padding-left: 0;
+      }
+
+      &:not(.related__back-link)::before {
+        content: "";
+  
+        position: absolute;
+        top: 8px;
+        left: 0;
+  
+        width: $list-d-size;
+        height: $list-d-size;
+  
+        background: url("/assets/images/d-symbol-blue.svg");
+        background-repeat: no-repeat;
+        background-size: contain;
       }
     }
 
diff --git a/src/_sass/_typography.scss b/src/_sass/_typography.scss
index 2e935d05e..0fe0e473b 100644
--- a/src/_sass/_typography.scss
+++ b/src/_sass/_typography.scss
@@ -6,7 +6,7 @@ $body-font-weight-bold: 700;
 $heading-font-family: poppins, sans-serif;
 $heading-font-weight: 600;
 
-@import "https://fonts.googleapis.com/css?family=Poppins:600&display=swap";
+@import "https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap";
 @import "https://fonts.googleapis.com/css?family=Cardo:400,700&display=swap";
 
 body {
diff --git a/src/assets/images/d-symbol-blue.svg b/src/assets/images/d-symbol-blue.svg
new file mode 100644
index 000000000..03cf6ae47
--- /dev/null
+++ b/src/assets/images/d-symbol-blue.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="154" viewBox="0 0 128 154" fill="none"><style xmlns="http://www.w3.org/1999/xhtml">.background{fill:#f3f1e9;}.bt-all{fill:#009abf;}.bt-editable-text{display: none}.bt-textarea{display: none}</style>
+<path d="M51.4286 0.428574H0.571411V153.286H51.4286C93.4677 153.286 127.714 119.18 127.714 76.8571C127.714 34.5338 93.4677 0.428574 51.4286 0.428574Z" class="marque bt-all"/>
+</svg>
\ No newline at end of file