⚒️ Adds content warning guidelines page (#200)

* Add empty page content file

* Add link in footer

* Make footer links span two columns when in grid template layout

* wrap footer grid-column in media query to strip triggering 2 columns on mobile

* Add guidelines content

* Capitalise 'Warning'

* Add link to guidance page from guidance definition block

* Change 'term' to 'topic'

* Update 11ty/content-warning-guidelines/index.md

Co-authored-by: Tatiana Mac <github@tatianamac.com>

* Update 11ty/content-warning-guidelines/index.md

Co-authored-by: Tatiana Mac <github@tatianamac.com>

* Update 11ty/content-warning-guidelines/index.md

Co-authored-by: Tatiana Mac <github@tatianamac.com>

* Update 11ty/content-warning-guidelines/index.md

Co-authored-by: Tatiana Mac <github@tatianamac.com>

* Update 11ty/content-warning-guidelines/index.md

Co-authored-by: Tatiana Mac <github@tatianamac.com>

* remove additional line breaks to pass lint tests

* remove my now unneeded media query

* Remove longer content warning from definition page

* Change content warning flag to link to separate content warning guidance page

* remove unneeded content flag styling

Co-authored-by: Tatiana Mac <tatiana.t.mac@gmail.com>
Co-authored-by: Tatiana Mac <github@tatianamac.com>
This commit is contained in:
Matthew Shields
2020-06-20 19:06:01 +01:00
committed by GitHub
parent a33c5fe86e
commit f72d41280a
7 changed files with 57 additions and 64 deletions

View File

@ -3,13 +3,13 @@
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>
<p class="small">We would recommend adding a content warning when speaking about this term. Please <a href="/content-warning-guidelines/">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>
<p class="small">We would recommend adding a content warning when speaking about this term. Please <a href="/content-warning-guidelines/">read the guidance</a> on how and when to warn people before using this term in any context.</p>
</div>
{% endif %}

View File

@ -1,47 +0,0 @@
{%- 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 unnecessary harm through inducing negative feelings, anxiety, 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 unnecessary harm through inducing negative feelings, anxiety, 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 %}