From f72d41280a480effe2d15c6c896fc02c5d78efa8 Mon Sep 17 00:00:00 2001 From: Matthew Shields Date: Sat, 20 Jun 2020 19:06:01 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9A=92=EF=B8=8F=20Adds=20content=20warning?= =?UTF-8?q?=20guidelines=20page=20(#200)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * Update 11ty/content-warning-guidelines/index.md Co-authored-by: Tatiana Mac * Update 11ty/content-warning-guidelines/index.md Co-authored-by: Tatiana Mac * Update 11ty/content-warning-guidelines/index.md Co-authored-by: Tatiana Mac * Update 11ty/content-warning-guidelines/index.md Co-authored-by: Tatiana Mac * 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 Co-authored-by: Tatiana Mac --- .../components/content-warning-flag.njk | 4 +- 11ty/_includes/components/content-warning.njk | 47 ------------------ 11ty/_includes/layouts/base.njk | 4 +- 11ty/_includes/layouts/definition.njk | 1 - .../content-warning-guidelines.json | 3 ++ 11ty/content-warning-guidelines/index.md | 49 +++++++++++++++++++ assets/css/components/_definitions.scss | 13 ----- 7 files changed, 57 insertions(+), 64 deletions(-) delete mode 100644 11ty/_includes/components/content-warning.njk create mode 100644 11ty/content-warning-guidelines/content-warning-guidelines.json create mode 100644 11ty/content-warning-guidelines/index.md diff --git a/11ty/_includes/components/content-warning-flag.njk b/11ty/_includes/components/content-warning-flag.njk index 0857ff27..73778b82 100644 --- a/11ty/_includes/components/content-warning-flag.njk +++ b/11ty/_includes/components/content-warning-flag.njk @@ -3,13 +3,13 @@ flag.text and (flag.level == 'avoid') -%}
-

We would recommend adding a content warning when speaking about this term. Please read the guidance on how and when to warn people before using this term in any context.

+

We would recommend adding a content warning when speaking about this term. Please read the guidance on how and when to warn people before using this term in any context.

{%- elseif flag and flag.text and (flag.level == 'warning') -%}
-

There is a content warning against this term, we would recommend reading the guidance on warning other people before using this term in any context.

+

We would recommend adding a content warning when speaking about this term. Please read the guidance on how and when to warn people before using this term in any context.

{% endif %} diff --git a/11ty/_includes/components/content-warning.njk b/11ty/_includes/components/content-warning.njk deleted file mode 100644 index 5187dc15..00000000 --- a/11ty/_includes/components/content-warning.njk +++ /dev/null @@ -1,47 +0,0 @@ -{%- if - flag and - flag.text and - (flag.level == 'avoid') -%} -
-

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.

-

- Content warnings usually take the form of "Content warning: - {{ title }}" or "CW: - {{ title }}. We recommend the former when possible. -

-

Content warnings should be given at the earliest possible opportunity. Examples of where you can do this are:

-
    -
  • Articles under the byline, before content
    • -
  • Videos (with proper audio descriptions)
    • -
  • Photographs (with proper alt text)
    • -
  • Podcasts (before topic, in transcript)
    • -
  • Books (introductory page, summary)
    • -
  • Conference talks/webinars
    • -
  • Start of social media posts including this term
    • -
  • Social media posts with a link to content including this term
    • -
-
-{%- elseif - flag and - flag.text and - (flag.level == 'warning') -%} -
-

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.

-

- Content warnings usually take the form of "Content warning: - {{ title }}" or "CW: - {{ title }}. We recommend the former when possible. -

-

This content warning should be given at the earliest possible opportunity. Examples of where you can do this are:

-
    -
  • Articles under the byline, before content
    • -
  • Videos (with proper audio descriptions)
    • -
  • Photographs (with proper alt text)
    • -
  • Podcasts (before topic, in transcript)
    • -
  • Books (introductory page, summary)
    • -
  • Conference talks/webinars
    • -
  • Start of social media posts including this term
    • -
  • Social media posts with a link to content including this term
    • -
-
-{% endif %} \ No newline at end of file diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk index e62ca0e6..36b1d632 100644 --- a/11ty/_includes/layouts/base.njk +++ b/11ty/_includes/layouts/base.njk @@ -25,7 +25,9 @@
  • Documentation
    • - • +
  • + Content Warning Guidelines +
  • RSS Feed
    • diff --git a/11ty/_includes/layouts/definition.njk b/11ty/_includes/layouts/definition.njk index 5d6f8980..59ec8f51 100644 --- a/11ty/_includes/layouts/definition.njk +++ b/11ty/_includes/layouts/definition.njk @@ -18,7 +18,6 @@ {% include 'components/content-warning-flag.njk' %} {% include 'components/definition-content.njk' %} - {% include 'components/content-warning.njk' %} {% renderDefinitionContentNextEntries title, slug, collections.definedWords %} diff --git a/11ty/content-warning-guidelines/content-warning-guidelines.json b/11ty/content-warning-guidelines/content-warning-guidelines.json new file mode 100644 index 00000000..f25d0a37 --- /dev/null +++ b/11ty/content-warning-guidelines/content-warning-guidelines.json @@ -0,0 +1,3 @@ +{ + "layout": "layouts/documentation.njk" +} diff --git a/11ty/content-warning-guidelines/index.md b/11ty/content-warning-guidelines/index.md new file mode 100644 index 00000000..29dcb406 --- /dev/null +++ b/11ty/content-warning-guidelines/index.md @@ -0,0 +1,49 @@ +--- +title: Content Warning Guidelines +--- + +There are a wide variety of topics that can cause unnecessary harm to people, inducing negative feelings, anxiety, or trauma. The goal of Content Warnings or Trigger Warnings is to allow the audience to prepare themselves, or if they choose to, avoid the topic completely. + +## What is the difference between a Content Warning and a Trigger Warning + +Content warnings and trigger warnings are sometimes used interchangeably to warn the reader/user when a topic that may cause an undesirable feeling or reaction. We opt to use content warning as trigger warning is more specific (and makes the assumption that the reader/user will be triggered). + +## When to give a Content Warning + +Any time that you discuss a topic that you believe may cause a negative reaction for anyone, at any scale, then it would be best to give a content warning. It is best to try and think objectively about this, rather then just through the spectrum of your own personal experience and triggers. + +To help with this, definitions on Self Defined will advise you when we recommend that you give a content warning. If you are ever in doubt though, we would recommend to side on deciding to give a warning rather than not. + +## How to give a Content Warning + +There are two standardised ways of giving a content warning in writing: + +
      +
    • Content Warning: [topic or topics]
      • +
    • CW: [topic or topics]
      • +
    + +We would recommend that wherever possible you choose the first full text example. This will ensure that people who may not be familiar with the acronym of CW will still fully understand. In the case of media such as video, it is vital that it is given in a way that everyone will be able to access it, including through audio and visual cues. + +When describing the topics, you want to ensure that you give someone the opportunity to decide whether to continue, but be careful not to describe in a way that the content warning itself could also be traumatic when read. + +## Where to give a Content Warning + +In order to give someone a chance to decide to engage with a possibly distressing topic or not, a content warning should be given at the earliest possible opportunity. + +**Examples of where you can do this are:** + +
      +
    • Articles under the byline, before content
      • +
    • Videos (with proper audio descriptions)
      • +
    • Photographs (with proper alt text)
      • +
    • Podcasts (before topic, in transcript)
      • +
    • Books (introductory page, summary)
      • +
    • Conference talks/webinars (introduction)
      • +
    • Start of social media posts including this topic
      • +
    • Social media posts with a link to content including this topic
      • +
    + +## Responding to feedback + +Even taking this on board, someone may feed back to you saying that your content caused them a negative reaction. If this happens, please wherever possible amend your content warning as possible. The goal of content warnings is to reduce as much harm as possible, and it's never too late to start. diff --git a/assets/css/components/_definitions.scss b/assets/css/components/_definitions.scss index 96a9b1ee..9ef076f6 100644 --- a/assets/css/components/_definitions.scss +++ b/assets/css/components/_definitions.scss @@ -41,16 +41,3 @@ } } } - -.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; - } -}