Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style SDG headers following UN guidelines #4298

Merged
merged 6 commits into from
Dec 28, 2020
Merged

Style SDG headers following UN guidelines #4298

merged 6 commits into from
Dec 28, 2020

Conversation

javierm
Copy link
Member

@javierm javierm commented Dec 27, 2020

References

  • Based on the the banners in the [offcial SDG pages]lhttps://www.un.org/sustainabledevelopment/poverty/) and the guideline in the SDG communication materials

Objectives

  • Add icons next to SDG titles
  • Use the same font as defined in the guidelines
  • Style the titles in two lines, as done in the official SDG icons

Visual Changes

On large screens:

The title of SDG 12 appears in two lines, including its official icon

On small screens:

The title of SDG 8 appears in two lines with a smaller font size, including a small version of its official icon

@javierm javierm added the UX label Dec 27, 2020
@javierm javierm self-assigned this Dec 27, 2020
@javierm javierm added this to Reviewing in Consul Democracy via automation Dec 27, 2020
@javierm javierm added the SDG United Nations Sustainable Development Goals label Dec 27, 2020
@javierm javierm changed the base branch from master to sdg_view December 27, 2020 19:36
The same way it's done in the official SDG icons. We're also using
uppercase with slightly smaller letter spacing for the same reason.

Even though we didn't do so in the past, we're moving the font to its
own folder inside the vendor folder and including the license file as
well in order to make it clear that these files do not follow the same
license CONSUL uses.
The same way it's done in UN official SDG pages.
The same it's done in the UN official SDG pages.

We could try to split the string on a space which is more or less in the
middle. However, this wouldn't work on languages which don't have spaces
between works, like Chinese.

So in the end I've added a new translation key, where the title is
supposed to be split in several lines the same way it's done by the UN.
It didn't fit the screen properly on goals having long words.
Consul Democracy automation moved this from Reviewing to Testing Dec 28, 2020
Base automatically changed from sdg_view to master December 28, 2020 20:01
@javierm javierm merged commit 587dd72 into master Dec 28, 2020
Consul Democracy automation moved this from Testing to Release 1.3.0 Dec 28, 2020
@javierm javierm deleted the sdg_header branch December 28, 2020 20:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
SDG United Nations Sustainable Development Goals UX
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants