⚠️ Add flag design for content warning (#120)

* ⚠️ Add flag design for content warning

* Fix build error

* Lol fix build error

* Added terms

.eleventy.js

@@ -60,6 +60,13 @@ module.exports = function(config) {
           class: 'tool',
           text: ''
         }
+      ],
+      [
+        'warning',
+        {
+          class: 'warning',
+          text: 'Content warning'
+        }
       ]
     ]);
 

11ty/_includes/components/table-of-content-item.njk

@@ -5,6 +5,11 @@
     definition.data.flag.text and
     (definition.data.flag.level == 'avoid') -%}
     <span class="flag__red">{{ definition.data.flag.text }}</span>
+  {%- elseif
+    definition.data.flag and
+    definition.data.flag.text and
+    (definition.data.flag.level == 'warning') -%}
+    <span class="flag__yellow">{{ definition.data.flag.text }}</span>
   {% endif %}
   {%- if definition.data.sub_terms -%}
     <ul class="sub-terms" role="list" aria-label="{{definition.data.title}}">

11ty/definitions/ableism.md

@@ -3,6 +3,14 @@ title: Ableism
 slug: ableism
 defined: true
 speech: noun
+flag:
+  level: warning
+  text: content warning
+reading:
+- text: "Ableism 2020: An Updated Definition"
+  href: https://www.talilalewis.com/blog/ableism-2020-an-updated-definition
+- text: "Longmore Lecture: Context, Clarity & Grounding"
+  href: https://www.talilalewis.com/blog/longmore-lecture-context-clarity-grounding
 ---
 
 a system that places value on people’s bodies and minds based on societally constructed ideas of normalcy, intelligence, excellence, and productivity. These constructed ideas are deeply rooted in anti-Blackness, eugenics, colonialism, and capitalism.
@@ -11,9 +19,4 @@ a system that places value on people’s bodies and minds based on societally co
 
 ## Impact
 
-To paraphrase Lewis, ableism "leads to people and society determining who is valuable and worthy based on a person’s appearance and/or their ability to [...] produce, excel, and 'behave.'" You do not have to be disabled to experience ableism, and Disabled people can also reinforce ableism internally (manifesting as harm to themselves) and externally (harm to other disabled people).
+To paraphrase Lewis, ableism "leads to people and society determining who is valuable and worthy based on a person’s appearance and/or their ability to [...] produce, excel, and 'behave.'" You do not have to be disabled to experience ableism, and Disabled people can also reinforce ableism internally (manifesting as harm to themselves) and externally (harm to other disabled people).
-
-## Further reading
-
-- [Longmore Lecture: Context, Clarity & Grounding](https://www.talilalewis.com/blog/longmore-lecture-context-clarity-grounding)
-- [Ableism 2020: An Updated Definition](https://www.talilalewis.com/blog/ableism-2020-an-updated-definition)

11ty/definitions/ablelist-language.md

@@ -0,0 +1,8 @@
+---
+title: Ableist language
+slug: ableist-language
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/abuse.md

@@ -0,0 +1,8 @@
+---
+title: Abuse
+slug: abuse
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/alcoholism.md

@@ -0,0 +1,8 @@
+---
+title: alcoholism
+slug: alcoholism
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/bullying.md

@@ -0,0 +1,8 @@
+---
+title: Bullying
+slug: bullying
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/childhood-trauma.md

@@ -0,0 +1,8 @@
+---
+title: chilldhood trauma
+slug: childhood-trauma
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/crazy.md

@@ -2,7 +2,7 @@
 title: crazy
 slug: crazy
 flag:
-  text: 'Ableist Slur'
+  text: 'Ableist language'
   level: avoid
 defined: true
 speech: noun

11ty/definitions/depression.md

@@ -0,0 +1,8 @@
+---
+title: Depression
+slug: depression
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/fatphobia.md

@@ -4,6 +4,9 @@ slug: fatphobia
 defined: true
 speech: noun
 skip_in_table_of_content: true
+flag:
+  level: warning
+  text: content warning
 reading:
   - text: Sizeism and Fatphobia
     href: https://www.srhweek.ca/providers/people-and-communities/sizeism-and-fatphobia/

11ty/definitions/food.md

@@ -0,0 +1,8 @@
+---
+title: Food
+slug: food
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/maniac.md

@@ -4,5 +4,5 @@ slug: maniac
 defined: false
 flag:
   level: avoid
-  text: ableist slur
+  text: ableist language
 ---

11ty/definitions/nudity.md

@@ -0,0 +1,8 @@
+---
+title: Nudity
+slug: nudity
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/pedophilia.md

@@ -0,0 +1,8 @@
+---
+title: pedophilia
+slug: pedophilia
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/police-brutality.md

@@ -0,0 +1,8 @@
+---
+title: police brutality
+slug: police-brutality
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/psych.md

@@ -1,5 +1,8 @@
 ---
-title: Psych ableist slur
+title: Psych
 slug: psych
 defined: false
+flag:
+  level: avoid
+  text: ableist language
 ---

11ty/definitions/racism.md

@@ -2,4 +2,7 @@
 title: Racism
 slug: racism
 defined: false
+flag:
+  level: warning
+  text: content warning
 ---

11ty/definitions/racist-language.md

@@ -0,0 +1,8 @@
+---
+title: Racist language
+slug: racist-language
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/rape.md

@@ -0,0 +1,8 @@
+---
+title: Rape
+slug: rape
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/self-harm.md

@@ -0,0 +1,8 @@
+---
+title: Self-harm
+slug: self-harm
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/sexual-assault.md

@@ -0,0 +1,8 @@
+---
+title: sexual assault
+slug: sexual-assault
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/stupid.md

@@ -4,5 +4,5 @@ slug: stupid
 defined: false
 flag:
   level: avoid
-  text: ableist slur
+  text: ableist language
 ---

11ty/definitions/suicide.md

@@ -0,0 +1,8 @@
+---
+title: Suicide
+slug: suicide
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/transmisia.md

@@ -0,0 +1,8 @@
+---
+title: transmisia
+slug: transmisia
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/transphobia.md

@@ -0,0 +1,8 @@
+---
+title: transphobia
+slug: transphobia
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/trauma.md

@@ -0,0 +1,8 @@
+---
+title: trauma
+slug: trauma
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/weight-gain.md

@@ -0,0 +1,8 @@
+---
+title: weight gain
+slug: weight-gain
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/weight-loss.md

@@ -0,0 +1,8 @@
+---
+title: weight loss
+slug: weight-loss
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/white-feminism.md

@@ -0,0 +1,8 @@
+---
+title: white feminism
+slug: white-feminism
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

11ty/definitions/xenophoba.md

@@ -0,0 +1,8 @@
+---
+title: xenophobia
+slug: xenophobia
+defined: false
+flag:
+  level: warning
+  text: content warning
+---

assets/css/abstracts/_mixins.scss

@@ -2,6 +2,10 @@
   content: '🚨';
 }
 
+@mixin icon__warning() {
+  content: '⚠️';
+}
+
 @mixin icon__alt() {
   content: '👍';
 }

assets/css/abstracts/_variables.scss

@@ -3,6 +3,10 @@ $secondary-color: hsl(120, 100%, 25%);
 
 $dark-red: hsl(0, 100%, 32.2%);
 $pink: hsl(349.5, 100%, 87.6%);
+$dark-green: hsl(120, 100%, 15%);
+$yellow: hsl(50, 100%, 50%);
+$dark-yellow: hsl(50, 100%, 20%);
+$pale-yellow: hsl(50, 100%, 86%);
 $black: hsl(0, 0%, 13%);
 $white: hsl(0, 0%, 100%);
 
@@ -13,4 +17,4 @@ $light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
 $browser-context: 16;
 
 $lt-background-color: $pink;
-
+$lt-background-color-warning: $pale-yellow;

assets/css/components/_flag.scss

@@ -1,5 +1,5 @@
 .flag__red {
-  background-color: rgb(255, 192, 203);
+  background-color:$lt-background-color;
   border-radius: 1rem;
   display: inline-block;
   font-size: 0.9rem;
@@ -13,3 +13,19 @@
     @include icon__embed();
   }
 }
+
+.flag__yellow {
+  background-color: $lt-background-color-warning;
+  border-radius: 1rem;
+  display: inline-block;
+  font-size: 0.9rem;
+  font-weight: bold;
+  margin: 0.5rem 0.75rem 0.25rem 0;
+  padding: 0.45rem 0.65rem;
+  text-transform: lowercase;
+
+  &:before {
+    @include icon__warning();
+    @include icon__embed();
+  }
+}

assets/css/components/_word.scss

@@ -74,7 +74,7 @@
     text-transform: uppercase;
 
     &--avoid {
-      --word-signal-color: #a40000;
+      --word-signal-color: $dark-red;
 
       &:before {
         @include icon__avoid();
@@ -83,7 +83,7 @@
     }
 
     &--better {
-      --word-signal-color: green;
+      --word-signal-color: $dark-green;
 
       &:before {
         @include icon__alt();
@@ -97,5 +97,12 @@
         @include icon__hanging();
       }
     }
+    &--warning {
+      --word-signal-color: $dark-yellow;
+      &:before {
+        @include icon__warning();
+        @include icon__hanging();
+      }
+    }
   }
 }

assets/css/structures/_definition-content.scss

@@ -81,7 +81,7 @@
     text-transform: uppercase;
 
     &--avoid {
-      --word-signal-color: #a40000;
+      --word-signal-color: $dark-red;
 
       &:before {
         @include icon__avoid();
@@ -90,7 +90,7 @@
     }
 
     &--better {
-      --word-signal-color: green;
+      --word-signal-color: $dark-green;
 
       &:before {
         @include icon__alt();
@@ -104,6 +104,15 @@
         @include icon__hanging();
       }
     }
+
+    &--warning {
+      --word-signal-color: $dark-yellow;
+
+      &:before {
+        @include icon__warning();
+        @include icon__hanging();
+      }
+    }
   }
 }