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