Add styles for the ethical design pyramid SVG
Pyramid is centred.
The design violations are left-aligned underneath and the list itself is centred under the pyramid.
Values currently used for the red gradients (these are not necessarily final):
Top: #990000 – #990000
Middle: #CC0000 - #CC0000
Bottom: #FF0000 - #FF0000
(we’ll have to change the end value of this to match the slight gradient in the greys)
The original grey values, for reference are:
Top: #676767 - #676767
Middle: #B3B3B3 - #B3B3B3
Bottom: #CCCCCC - #E5E5E5
Find the SVG code at: builder#54 (closed).
CC @laura
PS. Currently looks like the following. Laura, you might want to clean it up after I’ve implemented it.
/*
Center the list of violations, while left-aligning
the individual list items.
*/
#ethical-design-violations {
margin-top: 24px;
text-align: center;
}
#ethical-design-violations ul {
list-style: none;
display:inline-block;
margin-bottom: 0;
}
#ethical-design-violations li {
text-align: left;
}
#ethical-design-violations li:before {
content: "✗ ";
display: inline;
color: #ff0000;
}
#ethical-design-pyramid {
display: block;
margin-top: 36px;
margin-left: auto;
margin-right: auto;
}