From 909c90f77615b612cf9538f4ec5e28a7862ac427 Mon Sep 17 00:00:00 2001 From: Matthew Shields Date: Fri, 29 May 2020 00:08:35 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=20=20Adds=20content=20warnin?= =?UTF-8?q?g=20guidelines=20(#156)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * Update 11ty/_includes/components/content-warning-flag.njk Co-authored-by: Tatiana Mac * Update 11ty/_includes/components/content-warning.njk Co-authored-by: Tatiana Mac Co-authored-by: Tatiana Mac --- .../components/content-warning-flag.njk | 15 +++++++ 11ty/_includes/components/content-warning.njk | 39 +++++++++++++++++++ .../components/definition-content.njk | 4 -- 11ty/_includes/layouts/definition.njk | 6 +++ assets/css/base/_helpers.scss | 4 ++ assets/css/components/_definitions.scss | 36 +++++++++++++++++ assets/css/components/_lists.scss | 10 +++++ assets/css/structures/_grid.scss | 8 ++++ 8 files changed, 118 insertions(+), 4 deletions(-) create mode 100644 11ty/_includes/components/content-warning-flag.njk create mode 100644 11ty/_includes/components/content-warning.njk diff --git a/11ty/_includes/components/content-warning-flag.njk b/11ty/_includes/components/content-warning-flag.njk new file mode 100644 index 00000000..6839fb19 --- /dev/null +++ b/11ty/_includes/components/content-warning-flag.njk @@ -0,0 +1,15 @@ +{%- if + flag and + flag.text and + (flag.level == 'avoid') -%} +
+

We would recommend adding a content warning when speaking about this term. Pleaseread 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.

+
+{% endif %} diff --git a/11ty/_includes/components/content-warning.njk b/11ty/_includes/components/content-warning.njk new file mode 100644 index 00000000..fff98e78 --- /dev/null +++ b/11ty/_includes/components/content-warning.njk @@ -0,0 +1,39 @@ +{%- 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 negative feelings and visceral reactions like a panic attack 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 negative feelings and visceral reactions like a panic attack 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 %} diff --git a/11ty/_includes/components/definition-content.njk b/11ty/_includes/components/definition-content.njk index 76fe73bb..31cb5b15 100644 --- a/11ty/_includes/components/definition-content.njk +++ b/11ty/_includes/components/definition-content.njk @@ -1,8 +1,4 @@
-
- -

{{ speech }}

-
{{ content | safe }} {#

{{ alt_words }}

#} diff --git a/11ty/_includes/layouts/definition.njk b/11ty/_includes/layouts/definition.njk index 5a7a5b97..5d6f8980 100644 --- a/11ty/_includes/layouts/definition.njk +++ b/11ty/_includes/layouts/definition.njk @@ -11,8 +11,14 @@
{% definitionFlag flag %}

{{ title }}

+
+ +

{{ speech }}

+
+ {% include 'components/content-warning-flag.njk' %} {% include 'components/definition-content.njk' %} + {% include 'components/content-warning.njk' %} {% renderDefinitionContentNextEntries title, slug, collections.definedWords %} diff --git a/assets/css/base/_helpers.scss b/assets/css/base/_helpers.scss index ca6f1116..c6a18862 100644 --- a/assets/css/base/_helpers.scss +++ b/assets/css/base/_helpers.scss @@ -2,6 +2,10 @@ padding-left: 0 !important; } +.u-margin-top-double { + margin-top: 2rem; +} + .u-margin-bottom-double { margin-bottom: 2rem; } diff --git a/assets/css/components/_definitions.scss b/assets/css/components/_definitions.scss index 0656c09e..96a9b1ee 100644 --- a/assets/css/components/_definitions.scss +++ b/assets/css/components/_definitions.scss @@ -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; + } +} diff --git a/assets/css/components/_lists.scss b/assets/css/components/_lists.scss index e6f7b78d..93fcf66d 100644 --- a/assets/css/components/_lists.scss +++ b/assets/css/components/_lists.scss @@ -34,3 +34,13 @@ li { } } } + +.list-default { + li { + list-style: initial; + margin-left: 2rem; + &:last-child { + margin-bottom: 0.5rem; + } + } +} diff --git a/assets/css/structures/_grid.scss b/assets/css/structures/_grid.scss index 7d3cf798..69b190a2 100644 --- a/assets/css/structures/_grid.scss +++ b/assets/css/structures/_grid.scss @@ -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 {