From 017aef19fc267b81059766fb8c108b045072ebb3 Mon Sep 17 00:00:00 2001 From: Oscar Date: Fri, 15 Nov 2019 23:24:12 +0100 Subject: [PATCH] feat(11ty): render flags in defintions --- .eleventy.js | 28 ++++++++++++++++++++++++ 11ty/_includes/components/definition.njk | 3 ++- 11ty/definitions/minoritised.md | 2 +- _site/css/base.css | 2 +- _site/scss/base.scss | 17 +++++++------- 5 files changed, 41 insertions(+), 11 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index defa7a4d..8e69fdcf 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -21,6 +21,34 @@ module.exports = function (config) { config.addPassthroughCopy({'_site/css/': 'assets/css/'}) + config.addShortcode("definitionFlag", (flag) => { + const cleanText = new Map([ + ['avoid', { + class: 'avoid', + text: 'Avoid' + }], + ['better-alternative', { + class: 'better', + text: 'Better alternate' + }], + ['tool', { + class: 'tool', + text: '' + }] + ]) + + if (flag) { + const info = cleanText.get(flag.level) + + const sep = flag.text && info.text ? '—' : '' + const text = flag.text ? [info.text, flag.text].join(sep) : info.text + + return `

${text}

` + } + + return '

' + }); + // NOTE (ovlb): this will not be remembered as the best code i’ve written. if anyone seeing this has a better solution then the following to achieve sub groups of the definitions: i am happy to get rid of it config.addCollection('definitions', collection => { diff --git a/11ty/_includes/components/definition.njk b/11ty/_includes/components/definition.njk index f1a311a1..e62bb7fb 100644 --- a/11ty/_includes/components/definition.njk +++ b/11ty/_includes/components/definition.njk @@ -1,4 +1,5 @@ -
+
+ {% definitionFlag definition.data.flag %}

{{ definition.data.title}} {{ definition.data.speech}} diff --git a/11ty/definitions/minoritised.md b/11ty/definitions/minoritised.md index 30e68efd..2ff964bf 100644 --- a/11ty/definitions/minoritised.md +++ b/11ty/definitions/minoritised.md @@ -4,7 +4,7 @@ slug: minoritised defined: true speech: adj flag: - level: better-alternate + level: better-alternative alt-for: minorities reading: - text: Minority vs minoritze diff --git a/_site/css/base.css b/_site/css/base.css index 611de423..a1450647 100644 --- a/_site/css/base.css +++ b/_site/css/base.css @@ -1 +1 @@ -@import url("https://use.typekit.net/qlo3dpu.css");:root{--auto-grid-min-size: 17rem}body{border-top:1rem solid red;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:20px;padding:2rem;margin:0}h1{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:700}p{margin:0.75rem 0;font-size:1.25rem;line-height:1.25}a{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif;margin:1rem 0}a:hover{border-bottom:red solid 0.1rem}.subtitle{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:400;letter-spacing:0.1;grid-column:span 2}.summary{grid-column:span 2}.small{font-size:0.75em}.title__thicc{font-size:8vh;line-height:0.75;padding:0;margin:0.5rem 0rem;grid-column:span 2}.help{margin:1rem 0}.help li{margin:0.75rem 0}.grid{display:grid;grid-template-columns:repeat(4, [col] 1fr [col]);grid-template-rows:fit-content, fit-content, auto;grid-row-gap:10rem;grid-column-gap:4rem}.auto-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));grid-gap:1rem}.box{background:black;color:white;padding:1rem;margin:1rem 0.5rem;height:auto}.box a{color:white}.sub-headline{font-weight:bold;font-size:1.25rem}.list ol{padding:0 0 0 1em;margin:0}.list li{list-style:none;padding-bottom:0.5em}.list li.subterm{padding-left:10px}.list li:last-child{padding:0}.list li.subterm:before{content:'\21B3 ';padding-right:5px}.style__italics{font-style:italic}.word__title{font-family:orpheuspro,Palatino,Times,serif;font-weight:900;font-size:2.5rem;line-height:1.25;margin-bottom:1rem;margin-top:0}.word__content{align-items:stretch}@supports (display: grid){.word__content{display:grid;grid-template-columns:1fr 4fr;grid-gap:1rem}.word__content>*{margin:0}}.word__content>p{grid-column:1 / -1;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:1.5rem}.word__content h4{grid-column:1;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;font-weight:normal;flex:0 1 auto;text-transform:uppercase;transform:translateY(0.4em)}@supports (display: grid){.word__content h4{text-align:right}}.word__content h4,.word__content h4+*{margin-top:1rem}.word__content h4 ~ p,.word__content h4 ~ ul{grid-column:2;font-size:inherit}.word__speech{font-size:0.5em;font-family:monotype-grotesque,"Lucida Sans",sans-serif}.word__signal{border-top:1px solid currentcolor;display:inline-block;font-family:monotype-grotesque-extended,Arial Black,sans-serif;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.15rem;padding:0.5rem 0.75rem}.word__signal__avoid{color:red}.word__signal__avoid:before{content:'🚨';margin-left:-2.15rem}.word__signal__better{color:green}.word__signal__better:before{content:'🚨';margin-left:-2.15rem}.word__signal__tool{color:black}.word__signal__tool:before{content:'🧰';margin-left:-2.15rem}.block__dictionary{max-width:50rem;margin-left:auto;margin-right:auto;padding:0 1rem}.block__word{grid-column:span 2;display:flex;flex-direction:column;margin:1rem}.block__type{display:grid;grid-template-columns:1fr 4fr;align-items:flex-start}.word__type{text-align:right;padding-right:1rem;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;text-transform:uppercase}.word__link{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif}.word__breakdown{font-family:monotype-grotesque,"Lucida Sans",sans-serif;border-left:0.1rem solid lightgrey;padding-left:1rem}.flag__red{background-color:pink;font-size:0.9rem;font-weight:bold;border-radius:1rem;padding:0.45rem 0.65rem;margin:0.25rem 0.75rem;text-transform:lowercase}.flag__red:before{content:'🚨';margin-right:0.35rem}.list-semicolon{margin:0;padding:0;list-style:none}.list-semicolon>li{display:inline}.list-semicolon>li:not(:last-child)::after{content:'; '} +@import url("https://use.typekit.net/qlo3dpu.css");:root{--auto-grid-min-size: 17rem}body{border-top:1rem solid red;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:20px;padding:2rem;margin:0}h1{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:700}p{margin:0.75rem 0;font-size:1.25rem;line-height:1.25}a{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif;margin:1rem 0}a:hover{border-bottom:red solid 0.1rem}.subtitle{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:400;letter-spacing:0.1;grid-column:span 2}.summary{grid-column:span 2}.small{font-size:0.75em}.title__thicc{font-size:8vh;line-height:0.75;padding:0;margin:0.5rem 0rem;grid-column:span 2}.help{margin:1rem 0}.help li{margin:0.75rem 0}.grid{display:grid;grid-template-columns:repeat(4, [col] 1fr [col]);grid-template-rows:fit-content, fit-content, auto;grid-row-gap:10rem;grid-column-gap:4rem}.auto-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));grid-gap:1rem}.box{background:black;color:white;padding:1rem;margin:1rem 0.5rem;height:auto}.box a{color:white}.sub-headline{font-weight:bold;font-size:1.25rem}.list ol{padding:0 0 0 1em;margin:0}.list li{list-style:none;padding-bottom:0.5em}.list li.subterm{padding-left:10px}.list li:last-child{padding:0}.list li.subterm:before{content:'\21B3 ';padding-right:5px}.style__italics{font-style:italic}.word{--word-signal-color: currentColor}.word__title{font-family:orpheuspro,Palatino,Times,serif;font-weight:900;font-size:2.5rem;line-height:1.25;margin-bottom:1rem;margin-top:0}.word__content{align-items:stretch}@supports (display: grid){.word__content{display:grid;grid-template-columns:1fr 4fr;grid-gap:1rem}.word__content>*{margin:0}}.word__content>p{grid-column:1 / -1;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:1.5rem}.word__content h4{grid-column:1;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;font-weight:normal;flex:0 1 auto;text-transform:uppercase;transform:translateY(0.4em)}@supports (display: grid){.word__content h4{text-align:right}}.word__content h4,.word__content h4+*{margin-top:1rem}.word__content h4 ~ p,.word__content h4 ~ ul{grid-column:2;font-size:inherit}.word__speech{font-size:0.5em;font-family:monotype-grotesque,"Lucida Sans",sans-serif}.word__signal{border-top:1px solid var(--word-signal-color);color:var(--word-signal-color);display:inline-block;font-family:monotype-grotesque-extended,Arial Black,sans-serif;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.15rem;padding:0.5rem 0.75rem}.word__signal--avoid{--word-signal-color: red}.word__signal--avoid:before{content:'🚨';margin-left:-2.15rem}.word__signal--better{--word-signal-color: green}.word__signal--better:before{content:'🚨';margin-left:-2.15rem}.word__signal--tool:before{content:'🧰';margin-left:-2.15rem}.block__dictionary{max-width:50rem;margin-left:auto;margin-right:auto;padding:0 1rem}.block__word{grid-column:span 2;display:flex;flex-direction:column;margin:1rem}.block__type{display:grid;grid-template-columns:1fr 4fr;align-items:flex-start}.word__type{text-align:right;padding-right:1rem;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;text-transform:uppercase}.word__link{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif}.word__breakdown{font-family:monotype-grotesque,"Lucida Sans",sans-serif;border-left:0.1rem solid lightgrey;padding-left:1rem}.flag__red{background-color:pink;font-size:0.9rem;font-weight:bold;border-radius:1rem;padding:0.45rem 0.65rem;margin:0.25rem 0.75rem;text-transform:lowercase}.flag__red:before{content:'🚨';margin-right:0.35rem}.list-semicolon{margin:0;padding:0;list-style:none}.list-semicolon>li{display:inline}.list-semicolon>li:not(:last-child)::after{content:'; '} diff --git a/_site/scss/base.scss b/_site/scss/base.scss index 50293503..74155252 100644 --- a/_site/scss/base.scss +++ b/_site/scss/base.scss @@ -182,6 +182,8 @@ a { } .word { + --word-signal-color: currentColor; + &__title { font-family: $serif; font-weight: 900; @@ -245,7 +247,8 @@ a { } &__signal { - border-top: 1px solid currentcolor; + border-top: 1px solid var(--word-signal-color); + color: var(--word-signal-color); display: inline-block; font-family: $ext-sans; text-transform: uppercase; @@ -253,8 +256,8 @@ a { letter-spacing: 0.15rem; padding: 0.5rem 0.75rem; - &__avoid { - color: red; + &--avoid { + --word-signal-color: red; &:before { @include icon__avoid(); @@ -262,8 +265,8 @@ a { } } - &__better { - color: green; + &--better { + --word-signal-color: green; &:before { @include icon__avoid(); @@ -271,9 +274,7 @@ a { } } - &__tool { - color: black; - + &--tool { &:before { @include icon__tool(); @include icon__hanging();