mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-10-30 21:58:32 +00:00
Code Issues Projects Releases Wiki Activity

⚠️ Adds content warning guidelines (#156)

Browse Source 
* 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
2020-05-29 00:08:35 +01:00
committed by GitHub
parent 66a3103f26
commit 909c90f776
8 changed files with 118 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
11ty/_includes/components/content-warning-flag.njk Normal file
View 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
View 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 %}

4
11ty/_includes/components/definition-content.njk
View File

@@ -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> #}