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) %}
{{ 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 @@
+
\ No newline at end of file