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:

+ +
+{%- 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:

+ +
+{% 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 {