mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-04-20 16:39:09 +00:00
Code Issues Projects Releases Wiki Activity

🦝 Install eleventy

Browse Source
This commit is contained in:
tatianamac 2019-09-01 02:38:10 +01:00
parent 9ab111875e
commit a7fd4a3230
10 changed files with 553 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
_site/.DS_Store vendored Normal file
View File

Binary file not shown.

29
_site/README/index.html Normal file
View File

@ -0,0 +1,29 @@
<h1>📕 Self-Defined Dictionary</h1>
<p>A modern dictionary about us. We define our words, but they don't define us.</p>
<p>Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the modern world.
For now, this stands as a list only, from which you can self-educate. Pull requests can be made to include words that are not yet represented.</p>
<h2>Context</h2>
<ul>
<li>Dictionary definitions, which are written by centred and majority people, are often weaponised to refute marginalised and minoritised people. If I had a dollar for every time I got pasted the definition of &quot;racism.&quot;</li>
<li>Marginalised people do an extraordinary burden to define words for people. My hope is to minimise that emotional labour and place it onto a robot.</li>
<li>Words help to materialise concepts, which allow people to be perceived in their identities. Words also create policies, which can define infrastructure.</li>
</ul>
<h2>Components (Build order)</h2>
<ol>
<li><strong>Dictionary site</strong>: Webapp where words can be connected, linking to alternates for bad terms or alternates for definitions with nuance. Create ability to use parameters so someone can connect multiple words they use together, to help clear up how they define themselves. For example, <code>?disabled+pan+Indigenous</code>. Creating such a strand easily would allow people to link in email signatures, Twitter bios, etc.</li>
<li><strong>Twitter bot:</strong> Allows someone to tag <a href="https://www.twitter.com/SelfDefinedBot">@SelfDefinedBot</a> in order to get automated reply. For example '@SelfDefinedBot define racism'.</li>
<li><strong>Slack bot:</strong> Problematic words could be flagged and alternates could be provided. Could also define words.</li>
<li><strong>Custom API:</strong> Allows dictionary to be adapted and included into other large-scale projects.</li>
</ol>
<h2>Design</h2>
<p>Work in progress on <a href="https://codepen.io/tatianamac/pen/zYOqZRp">CodePen</a>. Hoping to connect core words with adjacent words.</p>
<h2>Philosophies</h2>
<ul>
<li>Maintain OSS nature for non-profit and other OSS uses, but charge for corporate uses.</li>
<li>Ensure that dictionary includes nuances and expresses that not everyone ascribes to terms exactly as they are; illustrate and articulate those nuances wherever possible.</li>
<li>Accessibility, inclusion, and performance are at the core of this project.</li>
</ul>
<h2>How to Help</h2>
<p>🐛 Check <a href="https://github.com/tatianamac/selfdefined/issues">Issues</a>, which include code and also definition writing.
💰 Support this OSS project by <a href="https://github.com/users/tatianamac/sponsorship">sponsoring me</a>.
🐦 Follow <a href="https://www.twitter.com/selfdefinedapp">Self-Defined on Twitter</a>.</p>

193
_site/css/base.css Normal file
View File

@ -0,0 +1,193 @@
@charset "UTF-8";
@import url("https://use.typekit.net/qlo3dpu.css");
body {
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
font-size: 20px;
}
h1 {
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
font-weight: 700;
}
h2, h3 {
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
font-weight: 400;
letter-spacing: 0.1;
}
ul {
padding: 0 0 0 1em;
margin: 0;
}
li {
list-style: none;
padding-bottom: 0.5em;
text-transform: capitalize;
}
li.subterm {
padding-left: 10px;
}
li:last-child {
padding: 0;
}
li.subterm:before {
content: "↳";
padding-right: 5px;
}
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
@media screen and (min-width: 200px) {
#title, #description, #summary {
grid-column: span 4;
}
body {
padding: 1em;
}
.list, .item {
grid-column: span 4;
}
.list {
padding: 0 auto;
margin: 0;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 1.25em;
}
}
@media screen and (min-width: 600px) {
body {
padding: 2em;
}
.grid {
grid-row-gap: 1em;
}
#title {
grid-column: 1/span 2;
grid-row: 1;
}
#summary {
grid-column: 3/span 2;
grid-row: 1;
}
#description {
grid-column: span 4;
grid-row: 2;
}
.item {
grid-column: span 2;
}
h1 {
font-size: 3.5em;
}
h2 {
font-size: 1.3em;
}
}
.small {
font-size: 0.75em;
}
@media screen and (min-width: 1024px) {
#title {
grid-column: 1/span 1;
grid-row: 1;
}
#description {
grid-column: 2/span 1;
grid-row: 1;
}
#summary {
grid-column: 1/span 1;
grid-row: 2;
}
.list {
grid-row: span 3;
grid-column: span 1;
}
}
.block__dictionary {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding: 0 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 {
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__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;
}
/*# sourceMappingURL=base.css.map */

1
_site/css/base.css.map Normal file
View File

@ -0,0 +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"}

237
_site/index.html Normal file
View File

@ -0,0 +1,237 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self-Defined &middot; A modern dictionary about us. We define our words, but they don't define us.</title>
<link rel="stylesheet" href="css/base.css">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<main class="grid">
<div class="item" id="title">
<h1>Self-Defined</h1>
<h2>A modern dictionary about us. We define our words, but they don't define us.</h2>
<p>For now, this stands as a list only, from which you can self-educate.
Future phases will include definitions and resources.</p>
<h3>Participate</h3>
<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>
</div>
<div class="list">
List of Term
<ul>
<li>Ablelism</li>
<li>American</li>
<li class="subterm">African</li>
<li class="subterm">Asian</li>
<li class="subterm">Black</li>
<li class="subterm">Indigenous</li>
<li>Ambulatory Wheelchair</li>
<li>Ancestors</li>
<li>Anti-blackness</li>
<li>Anxiety disorders</li>
<li>aromantic</li>
<li class="subterm">Asian</li>
<li class="subterm">East</li>
<li class="subterm">South</li>
<li class="subterm">Southeast</li>
<li>asexual</li>
<li>Auto Immune Disorder (AIDS)</li>
<li>assigned at birth</li>
<li>Attraction</li>
<li class="subterm">Aesthetic</li>
<li class="subterm">Platonic</li>
<li class="subterm">Sexual</li>
<li>Autism spectrum</li>
<li>Bias</li>
<li>bierasure</li>
<li>bipolar</li>
<li>Bisexual</li>
<li>Black Asian Minority Ethnic (BAME)</li>
<li>Black Indigenous People of Color (BIPOC)</li>
<li>Black</li>
<li class="subterm">men (BM)</li>
<li class="subterm">people (BP)</li>
<li class="subterm">women (BW)</li>
<li>Brown</li>
<li>Bropropriating</li>
<li>Burka</li>
<li>cisgender</li>
<li>Climate change</li>
<li>Colonial narrative</li>
<li>Colonialism</li>
<li>colorism</li>
<li>Complex Post-Traumatic Stress Disorder (PTSD)</li>
<li>cultural appropriation</li>
<li>Demi</li>
<li class="subterm">-boy</li>
<li class="subterm">-girl</li>
<li class="subterm">-romantic</li>
<li class="subterm">-sexual</li>
<li>Disability</li>
<li>disabled</li>
<li>discordant couples</li>
<li>Discrimination</li>
<li>Dominant culture</li>
<li>Dominant culture habits</li>
<li>Ehlers-Danlos Syndromes (EDS)</li>
<li>Egalitarian</li>
<li>Empathy</li>
<li>enby</li>
<li>Entitlement</li>
<li>Equality</li>
<li>Equity</li>
<li>Fem</li>
<li>Femme</li>
<li>Ethnicity</li>
<li>Gender</li>
<li class="subterm">Cis</li>
<li class="subterm">-Fluid</li>
<li class="subterm">Trans</li>
<li class="subterm">Queer</li>
<li>Gender confirmation surgery (GCS)</li>
<li>genderqueer</li>
<li>Genocide</li>
<li>Governmentality</li>
<li>gray ace</li>
<li>Gray asexuality</li>
<li>hegemonic</li>
<li>Hermaphrodite</li>
<li class="subterm">pseudo, male and female</li>
<li>High-Functioning</li>
<li>Hijab</li>
<li>Hispanic</li>
<li>Human Immunodeficiency Virus (HIV)</li>
<li>Homophobia</li>
<li>hormone Replacement therapy (HRT)</li>
<li>Illness</li>
<li class="subterm">Chronic</li>
<li>Immigrant</li>
<li>Impact</li>
<li>Implicit bias</li>
<li>Indigenous</li>
<li>Inherent</li>
<li>Intent</li>
<li>internalized oppression</li>
<li>Intersectionality</li>
<li>intersex</li>
<li>invisible disabilities</li>
<li>Jihad</li>
<li>Latinx</li>
</ul>
</div>
<div class="list">
<ul>
<li>Marginalized</li>
<li>Matriarchy</li>
<li>Medication sensitive</li>
<li>Militarization</li>
<li>Minority</li>
<li>Misogynoir</li>
<li>Neurodivergent</li>
<li>Neurotypical</li>
<li>non binary</li>
<li>-Normative</li>
<li class="subterm">cis</li>
<li class="subterm">hetero</li>
<li>Oppression</li>
<li class="subterm">Internalized</li>
<li>Other specified feeding or eating disorders (OSFED)</li>
<li>Panic attacks</li>
<li>Pansexual</li>
<li>-passing</li>
<li class="subterm">female-</li>
<li class="subterm">male-</li>
<li class="subterm">white-</li>
<li>Parachuting</li>
<li>Patriarchy</li>
<li>Performative allyship</li>
<li>People of Color (PoC)</li>
<li>People with disabilities</li>
<li>-phile</li>
<li class="subterm">andro</li>
<li class="subterm">gyne</li>
<li>Platonic</li>
<li class="subterm">Queer</li>
<li>Polyamory</li>
<li>Positivism</li>
<li>Post-Traumatic Stress Disorder</li>
<li>power</li>
<li>Poz</li>
<li>Prejudice</li>
<li>Pride</li>
<li>Pride, First (Anti-Police Riots)</li>
<li>Prophylaxis</li>
<li class="subterm">Pre-exposure (PreEP)</li>
<li class="subterm">Post-exposure (PEP)</li>
<li>Privilege</li>
<li class="subterm">Cis</li>
<li class="subterm">Monosexual</li>
<li class="subterm">White</li>
<li>Race</li>
<li class="subterm">Racial</li>
<li class="subterm">Contract</li>
<li class="subterm">Formation</li>
<li class="subterm">State</li>
<li class="subterm">Raciology</li>
<li>Racism</li>
<li>Racist</li>
<li>Savior</li>
<li class="subterm">White</li>
<li>Semitic</li>
<li>Serodiscordant</li>
<li>settler</li>
<li class="subterm">colonial mentality</li>
<li>Sexual</li>
<li class="subterm"> assault of a minor</li>
<li class="subterm"> orientation</li>
<li>Socially constructed</li>
<li>Solidarity</li>
<li>-Splaining</li>
<li class="subterm">cis</li>
<li class="subterm">man</li>
<li class="subterm">white</li>
<li>Spirit animal</li>
<li>Systematic</li>
<li>Systemic</li>
<li>Top-down approach</li>
<li>Totemic animal</li>
<li>Tawhid</li>
<li>Trans Exclusionary Radical Feminist (TERF)</li>
<li>Trans</li>
<li class="subterm">gender</li>
<li class="subterm">man</li>
<li class="subterm">masculine</li>
<li class="subterm">phobia</li>
<li class="subterm">woman</li>
<li>Tribe</li>
<li>Triggers</li>
<li>Two-spirited</li>
<li>Undetectable=Untransmittable (U=U)</li>
<li>Undetectable</li>
<li>Unqueer</li>
<li>Indigenous</li>
<li>Vertigo</li>
<li class="subterm">Visual</li>
<li>Vestibular migraine</li>
<li>Violence against women and girls (VAWG)</li>
<li>Viral Load</li>
<li>White</li>
<li class="subterm">feminism</li>
<li class="subterm"> fragility</li>
<li class="subterm">-ness</li>
<li class="subterm"> supremacy</li>
<li class="subterm"> woman tears</li>
<li class="subterm"> people (WP)</li>
<li class="subterm"> women (WW)</li>
<li>White supremacist capitalist patriarchy</li>
<li>womanism</li>
</ul>
</div>
</main>
</body>
</html>

0
scss/.DS_Store → _site/scss/.DS_Store vendored
View File

109
scss/base.scss → _site/scss/base.scss
View File

@ -1,5 +1,4 @@
@charset 'utf-8'; @charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Noto+Serif+KR');
@import url("https://use.typekit.net/qlo3dpu.css"); @import url("https://use.typekit.net/qlo3dpu.css");
// COLORS // // COLORS //
@ -15,11 +14,11 @@
$mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y $mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
$light-grey: #eeeeee; // for backgrounds only $light-grey: #eeeeee; // for backgrounds only
// TYPOGRAPHY //
// TYPOGRAPHY // $sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif;
$sans-serif: Inconsolata, Helvetica, sans-serif; $serif: orpheuspro, Palatino, Times, serif;
$serif: 'Noto Serif KR', Georgia, serif; $ext-sans: monotype-grotesque-extended, Arial Black, sans-serif;
$mono: Courier, mono; $con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif;
$thin: 200; $thin: 200;
$light: 300; $light: 300;
@ -30,19 +29,19 @@
body { body {
font-family: $sans-serif; font-family: $sans-serif;
font-size: 20px; font-size: 20px;
background: #e5ffe5;
} }
h1 { h1 {
font-family: $serif; font-family: $ext-sans;
font-weight: $thin; font-weight: $bold;
border-bottom: .25em $white solid;
} }
h2, h3 { h2, h3 {
font-family: $serif; font-family: $ext-sans;
font-weight: $bold; font-weight: $regular;
letter-spacing: .1;
} }
ul { ul {
padding: 0 0 0 1em; padding: 0 0 0 1em;
margin: 0; margin: 0;
@ -68,17 +67,11 @@ li {
// GRID // // GRID //
.grid { .auto-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, [col] 1fr [col]); grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-template-rows: fit-content, fit-content, auto; grid-gap: 1rem;
grid-row-gap: 2em; }
grid-column-gap: 1em;
}
.item {
}
// MEDIA // // MEDIA //
@ -173,3 +166,75 @@ li {
grid-column: span 1; grid-column: span 1;
} }
} }
.block__dictionary {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding: 0 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 {
color: red;
&:before {
content: "🚨";
margin-left: -2.15rem;
}
}
&__better {
color: green;
&:before {
content: "👍";
margin-left: -2.15rem;
}
}
}
}

91
css/base.css
View File

@ -1,91 +0,0 @@
@import url("https://fonts.googleapis.com/css?family=Inconsolata|Noto+Serif+KR");
@import url("https://use.typekit.net/qlo3dpu.css");
body {
font-family: Inconsolata, Helvetica, sans-serif;
font-size: 20px;
background: #e5ffe5; }
h1 {
font-family: "Noto Serif KR", Georgia, serif;
font-weight: 200;
border-bottom: 0.25em #ffffff solid; }
h2, h3 {
font-family: "Noto Serif KR", Georgia, serif;
font-weight: 700; }
ul {
padding: 0 0 0 1em;
margin: 0; }
li {
list-style: none;
padding-bottom: .5em;
text-transform: capitalize; }
li.subterm {
padding-left: 10px; }
li:last-child {
padding: 0; }
li.subterm:before {
content: "\21B3 ";
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: 2em;
grid-column-gap: 1em; }
@media screen and (min-width: 200px) {
#title, #description, #summary {
grid-column: span 4; }
body {
padding: 1em; }
.list, .item {
grid-column: span 4; }
.list {
padding: 0 auto;
margin: 0; }
h1 {
font-size: 3em; }
h2 {
font-size: 1.25em; } }
@media screen and (min-width: 600px) {
body {
padding: 2em; }
.grid {
grid-row-gap: 1em; }
#title {
grid-column: 1 / span 2;
grid-row: 1; }
#summary {
grid-column: 3 / span 2;
grid-row: 1; }
#description {
grid-column: span 4;
grid-row: 2; }
.item {
grid-column: span 2; }
h1 {
font-size: 3.5em; }
h2 {
font-size: 1.3em; } }
.small {
font-size: .75em; }
@media screen and (min-width: 1024px) {
#title {
grid-column: 1 / span 1;
grid-row: 1; }
#description {
grid-column: 2 / span 1;
grid-row: 1; }
#summary {
grid-column: 1 / span 1;
grid-row: 2; }
.list {
grid-row: span 3;
grid-column: span 1; } }

10
index.html
View File

@ -35,10 +35,10 @@ Future phases will include definitions and resources.</p>
<li>Anti-blackness</li> <li>Anti-blackness</li>
<li>Anxiety disorders</li> <li>Anxiety disorders</li>
<li>aromantic</li> <li>aromantic</li>
<li>Asian</li> <li class="subterm">Asian</li>
<li>East</li> <li class="subterm">East</li>
<li>South</li> <li class="subterm">South</li>
<li>Southeast</li> <li class="subterm">Southeast</li>
<li>asexual</li> <li>asexual</li>
<li>Auto Immune Disorder (AIDS)</li> <li>Auto Immune Disorder (AIDS)</li>
<li>assigned at birth</li> <li>assigned at birth</li>
@ -151,6 +151,7 @@ Future phases will include definitions and resources.</p>
<li>Patriarchy</li> <li>Patriarchy</li>
<li>Performative allyship</li> <li>Performative allyship</li>
<li>People of Color (PoC)</li> <li>People of Color (PoC)</li>
<li>People with disabilities</li>
<li>-phile</li> <li>-phile</li>
<li class="subterm">andro</li> <li class="subterm">andro</li>
<li class="subterm">gyne</li> <li class="subterm">gyne</li>
@ -229,6 +230,7 @@ Future phases will include definitions and resources.</p>
<li class="subterm"> woman tears</li> <li class="subterm"> woman tears</li>
<li class="subterm"> people (WP)</li> <li class="subterm"> people (WP)</li>
<li class="subterm"> women (WW)</li> <li class="subterm"> women (WW)</li>
<li>White supremacist capitalist patriarchy</li>
<li>womanism</li> <li>womanism</li>
</ul> </ul>
</div> </div>