mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-01-22 17:30:00 +00:00
909c90f776
* Move speech definition into main template * Remove speech definition from definition-content.njk * add margin top helper * add content flag components * Add selection styling to .box class * Change content warning flag styling * Add additional content warning guidance and change styling * Expand examples list * reworded topic[s] after testing in screen reader * Also adjust wording on avoid content guidelines block * Output title into content warning example * Update 11ty/_includes/components/content-warning.njk Co-authored-by: Tatiana Mac <github@tatianamac.com> * Update 11ty/_includes/components/content-warning-flag.njk Co-authored-by: Tatiana Mac <github@tatianamac.com> * Update 11ty/_includes/components/content-warning.njk Co-authored-by: Tatiana Mac <github@tatianamac.com> Co-authored-by: Tatiana Mac <github@tatianamac.com>
57 lines
1003 B
SCSS
57 lines
1003 B
SCSS
.word__type {
|
|
font-family: $con-sans;
|
|
font-size: 0.85rem;
|
|
padding-right: 1rem;
|
|
text-align: right;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.word__link {
|
|
border-bottom: darkgrey solid 0.1em;
|
|
color: black;
|
|
font-family: $ext-sans;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.word__breakdown {
|
|
border-left: 0.1rem solid lightgrey;
|
|
font-family: $sans-serif;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.content-flag {
|
|
background-color: $lt-background-color-warning;
|
|
overflow: hidden;
|
|
padding: 0 1rem 0 3rem;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: "⚠️";
|
|
left: 1rem;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
&--avoid {
|
|
background-color: $pink;
|
|
|
|
&:before {
|
|
content: "🚨";
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-warning {
|
|
background-color: $lt-background-color-warning;
|
|
border-left: 4px $yellow solid;
|
|
overflow: hidden;
|
|
padding: 1rem 1.5rem;
|
|
position: relative;
|
|
|
|
&--avoid {
|
|
background-color: $pink;
|
|
border-left-color: red;
|
|
}
|
|
}
|