mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-10-30 21:58:32 +00:00
Code Issues Projects Releases Wiki Activity

🎨 Imported styles from codepen, addef'ns

Browse Source
This commit is contained in:
tatianamac
2019-09-01 03:13:01 +01:00
parent a7fd4a3230
commit dd29657d2d
4 changed files with 525 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
_site/css/base.css
View File

@@ -1,5 +1,9 @@
@charset "UTF-8"; @charset "UTF-8";
@import url("https://use.typekit.net/qlo3dpu.css"); @import url("https://use.typekit.net/qlo3dpu.css");
:root {
--auto-grid-min-size: 32rem;
}
body { body {
font-family: monotype-grotesque, "Lucida Sans", sans-serif; font-family: monotype-grotesque, "Lucida Sans", sans-serif;
font-size: 20px; font-size: 20px;
@@ -10,7 +14,7 @@ h1 {
font-weight: 700; font-weight: 700;
} }
h2, h3 { .subtitle {
font-family: monotype-grotesque-extended, Arial Black, sans-serif; font-family: monotype-grotesque-extended, Arial Black, sans-serif;
font-weight: 400; font-weight: 400;
letter-spacing: 0.1; letter-spacing: 0.1;
@@ -37,6 +41,14 @@ li.subterm:before {
padding-right: 5px; padding-right: 5px;
} }
.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 { .auto-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
@@ -152,6 +164,78 @@ p {
font-style: italic; font-style: italic;
} }
.word__title {
font-family: orpheuspro, Palatino, Times, serif;
font-weight: 900;
font-size: 2.5rem;
line-height: 1.25;
}
.word__definition {
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
font-size: 1.5rem;
}
.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__link {
text-decoration: none;
color: black;
border-bottom: darkgrey solid 0.1em;
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
}
.word__avoid {
color: red;
}
.word__avoid:before {
content: "🚨";
margin-left: -2.15rem;
}
.word__better {
color: green;
}
.word__better:before {
content: "👍";
margin-left: -2.15rem;
}
.block__dictionary {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
.block__word {
display: flex;
flex-direction: column;
margin: 1rem;
}
p {
margin: 0.75rem 0;
font-size: 1.25rem;
}
.style__italics {
font-style: italic;
}
.word__title { .word__title {
font-family: orpheuspro, Palatino, Times, serif; font-family: orpheuspro, Palatino, Times, serif;
font-weight: 900; font-weight: 900;
@@ -190,4 +274,31 @@ p {
margin-left: -2.15rem; margin-left: -2.15rem;
} }
.word__issue {
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;
}
.block__issue {
display: grid;
grid-template-columns: 1fr 4fr;
align-items: baseline;
}
.word__breakdown {
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
border-left: 0.1rem solid lightgrey;
padding-left: 1rem;
}
/*# sourceMappingURL=base.css.map */ /*# sourceMappingURL=base.css.map */

2
_site/css/base.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":";AACU;AA2BV;EACE,aAZa;EAab;;;AAGF;EACE,aAfW;EAgBX,aATO;;;AAYT;EACE,aApBW;EAqBX,aAhBU;EAiBV;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACA;;AAGA;EACA;;AAGA;EACA;EACA;;;AAMF;EACE;EACA;EACA;;;AAKF;EAEE;IACA;;;EAGA;IACA;;;EAGA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;;;AAIJ;EACE;IACA;;;EAGA;IACE;;;EAGF;IACE;IACA;;;EAGF;IACA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACA;;;EAGA;IACE;;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EAEE;IACE;IACA;;;EAGD;IACC;IACA;;;EAGD;IACC;IACA;;;EAGF;IACA;IACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAKF;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIE;EACA,aAjLQ;EAkLR;EACA;EACA;;AAGA;EACA,aAzLa;EA0Lb;;AAGA;EACA;EACA,aA/La;;AAkMb;EACA;EAEA;EACA,aApMW;EAqMX;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA","file":"base.css"} {"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":";AACU;AAIV;EACE;;;AA2BF;EACE,aAZa;EAab;;;AAGF;EACE,aAfW;EAgBX,aATO;;;AAYT;EACE,aApBW;EAqBX,aAhBU;EAiBV;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACA;;AAGA;EACA;;AAGA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKF;EAEE;IACA;;;EAGA;IACA;;;EAGA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;;;AAIJ;EACE;IACA;;;EAGA;IACE;;;EAGF;IACE;IACA;;;EAGF;IACA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACA;;;EAGA;IACE;;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EAEE;IACE;IACA;;;EAGD;IACC;IACA;;;EAGD;IACC;IACA;;;EAGF;IACA;IACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIE;EACA,aAvLQ;EAwLR;EACA;EACA;;AAGA;EACA,aA/La;EAgMb;;AAGA;EACA;EACA,aArMa;;AAwMb;EACA;EAEA;EACA,aA1MW;EA2MX;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA,aArNS;;AAwNX;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIA;EACA,aA1QU;EA2QV;EACA;EACA;;AAGA;EACA,aAlRe;EAmRf;;AAGA;EACA;EACA,aAxRe;;AA2Rf;EACA;EAEA;EACA,aA7Ra;EA8Rb;EACA;EACA;EACA;;AAEE;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEA;EACE;EACA;;;AAMJ;EACA;EACA;EACA,aAzTa;EA0Tb;EACA;;;AAGA;EACA;EACA;EACA;EACA,aAnUa;;;AAsUb;EACE;EACA;EACA;;;AAIF;EACA,aAhVe;EAiVf;EACA","file":"base.css"}

196
_site/index.html
View File

@@ -9,18 +9,19 @@
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head> </head>
<body> <body>
<main class="grid"> <main>
<div class="item" id="title"> <section id="title" class="grid">
<h1>Self-Defined</h1> <h1>Self-Defined</h1>
<h2>A modern dictionary about us. We define our words, but they don't define us.</h2> <p>
<p>For now, this stands as a list only, from which you can self-educate. <span class="subtitle">A modern dictionary about us. We define our words, but they don't define us.</span><br/>For now, this stands as a list only, from which you can self-educate.
Future phases will include definitions and resources.</p> Future phases will include definitions and resources.</p>
<h3>Participate</h3> <p>
<p>Send unlisted words to or chat about volunteering to help: <a href="http://www.twitter.com/tatianatmac" target="_blank">@tatianatmac on Twitter</a>.</p> <span class="subtitle">Participate</span><br/>
</div> Send unlisted words to or chat about volunteering to help: <a href="http://www.twitter.com/tatianatmac" target="_blank">@tatianatmac on Twitter</a>.</p>
</section>
<div class="list"> <div class="grid">
List of Term <section class="list">
<h3>A-E</h3>
<ul> <ul>
<li>Ablelism</li> <li>Ablelism</li>
<li>American</li> <li>American</li>
@@ -80,12 +81,18 @@ Future phases will include definitions and resources.</p>
<li>Egalitarian</li> <li>Egalitarian</li>
<li>Empathy</li> <li>Empathy</li>
<li>enby</li> <li>enby</li>
<li><a href="#esl" class="word__link">English as a Second Language (ESL)</a></li>
<li>Entitlement</li> <li>Entitlement</li>
<li>Equality</li> <li>Equality</li>
<li>Equity</li> <li>Equity</li>
<li>Fem</li> <li>Fem</li>
<li>Femme</li> <li>Femme</li>
<li>Ethnicity</li> <li>Ethnicity</li>
</ul>
</section>
<section class="list">
<h3>F-L</h3>
<ul>
<li>Gender</li> <li>Gender</li>
<li class="subterm">Cis</li> <li class="subterm">Cis</li>
<li class="subterm">-Fluid</li> <li class="subterm">-Fluid</li>
@@ -121,14 +128,17 @@ Future phases will include definitions and resources.</p>
<li>Jihad</li> <li>Jihad</li>
<li>Latinx</li> <li>Latinx</li>
</ul> </ul>
</div> </section>
<div class="list">
<section class="list">
<h3>M-S</h3>
<ul> <ul>
<li>Marginalized</li> <li>Marginalized</li>
<li>Matriarchy</li> <li>Matriarchy</li>
<li>Medication sensitive</li> <li>Medication sensitive</li>
<li>Militarization</li> <li>Militarization</li>
<li>Minority</li> <li><a class="word__link" href=#minorities>Minorities</a></li>
<li><a class="word__link" href="#minoritised">Minoritised</a></li>
<li>Misogynoir</li> <li>Misogynoir</li>
<li>Neurodivergent</li> <li>Neurodivergent</li>
<li>Neurotypical</li> <li>Neurotypical</li>
@@ -198,6 +208,12 @@ Future phases will include definitions and resources.</p>
<li>Spirit animal</li> <li>Spirit animal</li>
<li>Systematic</li> <li>Systematic</li>
<li>Systemic</li> <li>Systemic</li>
</ul>
</section>
<section class="list">
<h3>T-Z</h3>
<ul>
<li>Top-down approach</li> <li>Top-down approach</li>
<li>Totemic animal</li> <li>Totemic animal</li>
<li>Tawhid</li> <li>Tawhid</li>
@@ -230,8 +246,160 @@ Future phases will include definitions and resources.</p>
<li class="subterm"> women (WW)</li> <li class="subterm"> women (WW)</li>
<li>White supremacist capitalist patriarchy</li> <li>White supremacist capitalist patriarchy</li>
<li>womanism</li> <li>womanism</li>
<li><a class="word__link" href="#women-poc">Women and people of colour</a></li>
</ul> </ul>
</div> </section>
</div>
<div class="auto-grid">
<section class="block__word list">
<p class="word__signal word__signal__avoid">
avoid
</p>
<p class="word__title" id="minorities">
minorities
<span class="word__speech">
noun
</span>
</p>
<p class="word__definition">
the smaller in number of two groups constituting a whole
</p>
<div class="block__issue">
<p class="word__issue">
Issues
</p>
<p class="word__breakdown"> Minorities is not always accurate. As it deals with numbers, often the insinuation of racial minorities is inaccurate, as communities of colour often outnumber white communities.</p>
</div>
<div class="block__issue">
<p class="word__issue">
Impact
</p>
<p class="word__breakdown">By repeatedly referring to groups as "minorities," they are being infantised and made to feel minor.</p>
</div>
<div class="block__issue">
<p class="word__issue">
Alt Words
</p>
<p class="word__breakdown">
<span class="word__alt">
<a class="word__link" href="#minoritised">minoritised</a>, or omit
</span></p>
</section>
<section class="block__word list">
<p class="word__signal word__signal__better">
Better Alternate
</p>
<p id="minoritised" class="word__title">
minoritised
<span class="word__speech">
adj
</span>
</p>
<p class="word__definition">
groups resulting from social constructs have grant less power or representation compared to other members or groups in society
</p>
<div class="block__issue">
<p class="word__issue">
Benefits
</p>
<p class="word__breakdown"> Minoritised places the emphasis on the power struggle, and on the systemic issues at play. It's also an adjective, which requires you to add "group" or "people" so it's people-first language</p>
</div>
<div class="block__issue">
<p class="word__issue">
Impact
</p>
<p class="word__breakdown">It removes the pejorative nature of "minorities".</p>
</div>
<div class="block__issue">
<p class="word__issue">
Alt Words
</p>
<p class="word__breakdown">
<span class="word__alt">
<a class="word__link" href="#minorities">minorities</a>, or omit
</span></p>
</section>
<section class="block__word list">
<p class="word__signal word__signal__avoid">
avoid
</p>
<p id="esl" class="word__title">
English as second language (ESL)
<span class="word__speech">
noun
</span>
</p>
<p class="word__definition">
the teaching of English to people who speak a different language and who live in a country where English is the main language spoken
</p>
<div class="block__issue">
<p class="word__issue">
Issues
</p>
<p class="word__breakdown"> Monolinguist, English-only speakers often refer to people who don't speak English natively as "ESL" or say they are learning a "second language". More often than not, this is not true, as many people are multi-lingual with 3 or more languages</p>
</div>
<div class="block__issue">
<p class="word__issue">
Impact
</p>
<p class="word__breakdown">It makes false assumptions about English learners, centres English as the "default" or "expected" first language, ignoring that many people learn multiple (&gt;3), non-English languages first.</p>
</div>
<div class="block__issue">
<p class="word__issue">
Alt Words
</p>
<p class="word__breakdown">
<span class="word__alt">
<a class="word__link" href="#">English as learning-language (ELL)</a>, or <a class="word__link" href="#">non-native</a>, or omit (because do you really know, for sure?)
</span></p>
</section>
<section class="block__word list">
<p class="word__signal word__signal__avoid">
avoid
</p>
<p id="women-poc" class="word__title">
women and people of colour
<span class="word__speech">
noun
</span>
</p>
<p class="word__definition">
often used as a phrase to encompass "non-white, non-men," seeking to provide solidarity for these two groups
</p>
<div class="block__issue">
<p class="word__issue">
Issues
</p>
<p class="word__breakdown">What happens to women of colour? As a woman of colour, I am split between both women and people of colour.</p>
</div>
<div class="block__issue">
<p class="word__issue">
Impact
</p>
<p class="word__breakdown">As such, it elicits feelings of erasure for women of colour. It also neglects non-binary individuals.</p>
</div>
<div class="block__issue">
<p class="word__issue">
Alt Words
</p>
<p class="word__breakdown">
<span class="word__alt">
<a class="word__link" href="#">people of colour and white women </a> or <a class="word__link" href="#">people of colour, white non-binary people, and white women</a>, find ways to reframe why this dynamic exists, or omit</span></p>
</section>
</div>
</main> </main>
</body> </body>
</html> </html>

128
_site/scss/base.scss
View File

@@ -2,6 +2,11 @@
@import url("https://use.typekit.net/qlo3dpu.css"); @import url("https://use.typekit.net/qlo3dpu.css");
// COLORS // // COLORS //
:root {
--auto-grid-min-size: 32rem;
}
$primary-color: #0e4bff; //cobalt blue is so pretty// $primary-color: #0e4bff; //cobalt blue is so pretty//
$secondary-color: #F3F315; // $secondary-color: #F3F315; //
@@ -36,7 +41,7 @@ h1 {
font-weight: $bold; font-weight: $bold;
} }
h2, h3 { .subtitle {
font-family: $ext-sans; font-family: $ext-sans;
font-weight: $regular; font-weight: $regular;
letter-spacing: .1; letter-spacing: .1;
@@ -67,6 +72,14 @@ li {
// GRID // // GRID //
.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 { .auto-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
@@ -174,8 +187,6 @@ li {
padding: 0 1rem; padding: 0 1rem;
} }
.block__word { .block__word {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -218,6 +229,89 @@ font-style: italic;
font-size: .75rem; font-size: .75rem;
letter-spacing: .15rem; letter-spacing: .15rem;
padding: .5rem .75rem; padding: .5rem .75rem;
}
&__link {
text-decoration: none;
color: black;
border-bottom: darkgrey solid .1em;
font-family: $ext-sans;
}
&__avoid {
color: red;
&:before {
content: "🚨";
margin-left: -2.15rem;
}
}
&__better {
color: green;
&:before {
content: "👍";
margin-left: -2.15rem;
}
}
}
.block__dictionary {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
.block__word {
display: flex;
flex-direction: column;
margin: 1rem;
}
p {
margin: .75rem 0;
font-size: 1.25rem;
}
.style__italics {
font-style: italic;
}
.word {
&__title {
font-family: $serif;
font-weight: 900;
font-size: 2.5rem;
line-height: 1.25;
}
&__definition {
font-family: $sans-serif;
font-size: 1.5rem;
}
&__speech {
font-size: .5em;
font-family: $sans-serif;
}
&__signal {
border-top: 1px solid currentcolor;
// border-radius: 100px;
display: inline-block;
font-family: $ext-sans;
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .15rem;
padding: .5rem .75rem;
&__avoid { &__avoid {
color: red; color: red;
@@ -238,3 +332,31 @@ font-style: italic;
} }
} }
} }
.word__issue {
text-align: right;
padding-right: 1rem;
font-family: $con-sans;
font-size: .85rem;
text-transform: uppercase;
}
.word__link {
text-decoration: none;
color: black;
border-bottom: darkgrey solid .1em;
font-family: $ext-sans;
}
.block__issue {
display: grid;
grid-template-columns: 1fr 4fr;
align-items: baseline;
}
.word__breakdown {
font-family: $sans-serif;
border-left: .1rem solid lightgrey;
padding-left: 1rem;
}