mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-09 04:25:12 +00:00
⚠️ Adds content warning guidelines (#156)
* 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>
This commit is contained in:
Matthew Shields
GitHub
parent
66a3103f26
commit
909c90f776
15
11ty/_includes/components/content-warning-flag.njk
Normal file
15
11ty/_includes/components/content-warning-flag.njk
Normal file
@ -0,0 +1,15 @@
|
||||
{%- if
|
||||
flag and
|
||||
flag.text and
|
||||
(flag.level == 'avoid') -%}
|
||||
<div class="u-margin-bottom-double content-flag content-flag--avoid">
|
||||
<p class="small">We would recommend adding a content warning when speaking about this term. Please<a href="#content-warning-guide">read the guidance</a> on how and when to warn people before using this term in any context.</p>
|
||||
</div>
|
||||
{%- elseif
|
||||
flag and
|
||||
flag.text and
|
||||
(flag.level == 'warning') -%}
|
||||
<div class="u-margin-bottom-double content-flag">
|
||||
<p class="small">There is a content warning against this term, we would recommend <a href="#content-warning-guide">reading the guidance</a> on warning other people before using this term in any context.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
39
11ty/_includes/components/content-warning.njk
Normal file
39
11ty/_includes/components/content-warning.njk
Normal file
@ -0,0 +1,39 @@
|
||||
{%- if
|
||||
flag and
|
||||
flag.text and
|
||||
(flag.level == 'avoid') -%}
|
||||
<div class="u-margin-bottom-double u-margin-top-double content-warning content-warning--avoid" id="content-warning-guide">
|
||||
<p>You may want to add a content warning before discussing or showing imagery involving this topic, as it is a topic that can elicit negative feelings and visceral reactions like a panic attack or trauma.</p>
|
||||
<p><strong>Content warnings usually take the form of "Content warning: {{ title }}" or "CW: {{ title }}. We recommend the former when possible.</strong></p>
|
||||
<p>Content warnings should be given at the earliest possible opportunity. Examples of where you can do this are:</p>
|
||||
<ul class="list-default">
|
||||
<li>Articles under the byline, before content</li>
|
||||
<li>Videos (with proper audio descriptions)</li>
|
||||
<li>Photographs (with proper alt text)</li>
|
||||
<li>Podcasts (before topic, in transcript)</li>
|
||||
<li>Books (introductory page, summary)</li>
|
||||
<li>Conference talks/webinars</li>
|
||||
<li>Start of social media posts including this term</li>
|
||||
<li>Social media posts with a link to content including this term</li>
|
||||
</ul>
|
||||
</div>
|
||||
{%- elseif
|
||||
flag and
|
||||
flag.text and
|
||||
(flag.level == 'warning') -%}
|
||||
<div class="u-margin-bottom-double u-margin-top-double content-warning" id="content-warning-guide">
|
||||
<p>You may want to add a content warning before discussing or showing imagery involving this topic, as it is a topic that can elicit negative feelings and visceral reactions like a panic attack or trauma.</p>
|
||||
<p><strong>Content warnings usually take the form of "Content warning: [{{ title }}]" or "CW: [{{ title }}]. We recommend the former when possible.</strong></p>
|
||||
<p>This content warning should be given at the earliest possible opportunity. Examples of where you can do this are:</p>
|
||||
<ul class="list-default">
|
||||
<li>Articles under the byline, before content</li>
|
||||
<li>Videos (with proper audio descriptions)</li>
|
||||
<li>Photographs (with proper alt text)</li>
|
||||
<li>Podcasts (before topic, in transcript)</li>
|
||||
<li>Books (introductory page, summary)</li>
|
||||
<li>Conference talks/webinars</li>
|
||||
<li>Start of social media posts including this term</li>
|
||||
<li>Social media posts with a link to content including this term</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -1,8 +1,4 @@
|
||||
<section class="definition-content">
|
||||
<section class="u-margin-bottom-double" aria-labelledby="definition-speech">
|
||||
<h2 id="definition-speech" class="visually-hidden">Speech</h2>
|
||||
<p class="definition-content__speech">{{ speech }}</p>
|
||||
</section>
|
||||
<section class="definition-content__content">
|
||||
{{ content | safe }}
|
||||
{# <p>{{ alt_words }}</p> #}
|
||||
|
||||
@ -11,8 +11,14 @@
|
||||
<header class="definition__header">
|
||||
{% definitionFlag flag %}
|
||||
<h1 class="main-headline" >{{ title }}</h1>
|
||||
<section class="u-margin-bottom-double" aria-labelledby="definition-speech">
|
||||
<h2 id="definition-speech" class="visually-hidden">Speech</h2>
|
||||
<p class="definition-content__speech">{{ speech }}</p>
|
||||
</section>
|
||||
</header>
|
||||
{% include 'components/content-warning-flag.njk' %}
|
||||
{% include 'components/definition-content.njk' %}
|
||||
{% include 'components/content-warning.njk' %}
|
||||
{% renderDefinitionContentNextEntries title, slug, collections.definedWords %}
|
||||
</article>
|
||||
</main>
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.u-margin-top-double {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.u-margin-bottom-double {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@ -18,3 +18,39 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,3 +34,13 @@ li {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-default {
|
||||
li {
|
||||
list-style: initial;
|
||||
margin-left: 2rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,6 +62,10 @@
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
&--divider {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
|
||||
@ -70,6 +74,10 @@
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
*::selection {
|
||||
background: white; /* WebKit/Blink Browsers */
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user