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

🔡 Typographic changes

Browse Source
This commit is contained in:
tatianamac 2019-10-21 15:17:24 -04:00
parent f95f04adaa
commit fe09f8e8c3
5 changed files with 129 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
_site/css/base.css
View File

@ -8,7 +8,7 @@ body {
border-top: 1rem solid red; border-top: 1rem solid red;
font-family: monotype-grotesque, "Lucida Sans", sans-serif; font-family: monotype-grotesque, "Lucida Sans", sans-serif;
font-size: 20px; font-size: 20px;
padding: 0; padding: 2rem;
margin: 0; margin: 0;
} }
@ -28,6 +28,25 @@ h1 {
grid-column: span 2; grid-column: span 2;
} }
.small {
font-size: 0.75em;
}
.title__thicc {
font-size: 10vh;
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 { .grid {
display: grid; display: grid;
grid-template-columns: repeat(4, [col] 1fr [col]); grid-template-columns: repeat(4, [col] 1fr [col]);
@ -43,11 +62,11 @@ h1 {
} }
.box { .box {
grid-column: span 2;
background: black; background: black;
color: white; color: white;
padding: 1rem; padding: 1rem;
margin: 2rem; margin: 2rem;
height: auto;
} }
.box a { .box a {
color: white; color: white;
@ -73,96 +92,6 @@ h1 {
padding-right: 5px; padding-right: 5px;
} }
@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;
}
.title__thicc {
font-size: 9vw;
line-height: 0.75;
padding: 0;
margin: 0.5rem 0rem;
}
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 { .block__dictionary {
max-width: 50rem; max-width: 50rem;
margin-left: auto; margin-left: auto;
@ -259,6 +188,7 @@ p {
p { p {
margin: 0.75rem 0; margin: 0.75rem 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.25;
} }
.style__italics { .style__italics {

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":";AACU;AAIV;EACE;;;AA2BF;EACE;EACA,aAba;EAcb;EACA;EAAY;;;AAGd;EACE,aAjBW;EAkBX,aAXO;;;AAcT;EACE,aAtBW;EAuBX,aAlBU;EAmBV;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACA;;AAGA;EACA;;AAGA;EACA;EACA;;;AAON;EAEE;IACA;;;EAGA;IACA;;;EAGA;IACA;;;EAGA;IACE;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;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,aA/MQ;EAgNR;EACA;EACA;;AAGA;EACA,aAvNa;EAwNb;;AAGA;EACA;EACA,aA7Na;;AAgOb;EACA;EAEA;EACA,aAlOW;EAmOX;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA,aAzQS;;;AA8Qb;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIA;EACA,aA9SU;EA+SV;EACA;EACA;;AAGA;EACA,aAtTe;EAuTf;;AAGA;EACA;EACA,aA5Te;;AA+Tf;EACA;EAEA;EACA,aAjUa;EAkUb;EACA;EACA;EACA;;AAEE;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEA;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACA;EACA;EACA,aAnWa;EAoWb;EACA;;;AAGA;EACA;EACA;EACA;EACA,aA7Wa;;;AAgXb;EACA,aAnXe;EAoXf;EACA","file":"base.css"} {"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":";AACU;AAIV;EACE;;;AA2BF;EACE;EACA,aAba;EAcb;EACA;EAAe;;;AAGjB;EACE,aAjBW;EAkBX,aAXO;;;AAcT;EACE,aAtBW;EAuBX,aAlBU;EAmBV;EACA;;;AAGF;EACE;;;AAGF;EACI;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;;AAKA;EACE;;AACF;EACE;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACA;;AAGA;EACA;;AAGA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIE;EACA,aAnIQ;EAoIR;EACA;EACA;;AAGA;EACA,aA3Ia;EA4Ib;;AAGA;EACA;EACA,aAjJa;;AAoJb;EACA;EAEA;EACA,aAtJW;EAuJX;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA,aA7LS;;;AAkMb;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;;;AAGA;EACA;;;AAIA;EACA,aAnOU;EAoOV;EACA;EACA;;AAGA;EACA,aA3Oe;EA4Of;;AAGA;EACA;EACA,aAjPe;;AAoPf;EACA;EAEA;EACA,aAtPa;EAuPb;EACA;EACA;EACA;;AAEE;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEA;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACA;EACA;EACA,aAxRa;EAyRb;EACA;;;AAGA;EACA;EACA;EACA;EACA,aAlSa;;;AAqSb;EACA,aAxSe;EAySf;EACA","file":"base.css"}

46
_site/index.html
View File

@ -10,25 +10,32 @@
</head> </head>
<body> <body>
<main> <main>
<section id="title"> <section id="introduction" class="auto-grid">
<h1 class="title__thicc">Self-Defined</h1> <div id="title" class="title__thicc">
</section> <h1>Self-Defined</h1>
<section class="auto-grid"> </div>
<div>
<p class="summary"> <p class="summary">
<span class="subtitle">A modern dictionary about us. We define our words, but they don't define us.</span><br>Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the modern world.<br> <span class="subtitle">A modern dictionary about us. We define our words, but they don't define us.</span><br><br>
</p> </p>
<p>
Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the the diverse perspectives of the modern world.
</p>
<p>
With the foundation of vocabulary, we can begin to understand lived experiences of people different than us. Words can provide us with a sense of identify and allow us to find kinship through common experiences.
</p>
</div>
<div class="box"> <div class="box">
<span class="subtitle">Ways to help</span> <p class="subtitle">Ways to help</p>
<ol> <ol class="help">
<li> Submit words and definitions through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferral">pull requests</a>.</li> <li> Submit words and definitions through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferral">pull requests</a>.</li>
<li>Sponsor this work through <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li> <li>Sponsor this work through <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li>
<li>Volunteer writing, design, dev help by <a href="http://www.twitter.com/tatianatmac">DMing me @tatianatmac on Twitter</a>.</li> <li>Volunteer writing, design, dev help by <a href="http://www.twitter.com/tatianatmac">DMing me @tatianatmac on Twitter</a>.</li>
</ol> </ol>
</p>
</div> </div>
</section> </section>
</div>
<div class="grid"> <div class="auto-grid">
<section class="list"> <section class="list">
<h3>A-E</h3> <h3>A-E</h3>
<ul> <ul>
@ -455,7 +462,10 @@
<p class="word__type"> <p class="word__type">
Further Reading Further Reading
</p> </p>
<p class="word__breakdown"><a class="word__link" href="https://robindiangelo.com/publications/" rel="noreferrer">White Fragility</a>, Robin DiAngelo; <a class="word__link" href="https://www.theroot.com/tag/white-fragility" rel="noreferrer">White Fragility tag on The Root</a>.</p> <ul class="word__breakdown">
<li><a class="word__link" href="https://robindiangelo.com/publications/" rel="noreferrer">White Fragility</a>, Robin DiAngelo;</li>
<li><a class="word__link" href="https://www.theroot.com/tag/white-fragility" rel="noreferrer">White Fragility tag</a>, <em>The Root</em></a>.</li>
</ul>
</div> </div>
</section> </section>
@ -478,13 +488,21 @@
<p class="word__type"> <p class="word__type">
Issues Issues
</p> </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> <p class="word__breakdown">What happens to women of colour? Women of colour are conceptually split between their identies as both women and as people of colour.</p>
</div> </div>
<div class="block__type"> <div class="block__type">
<p class="word__type"> <p class="word__type">
Impact Impact
</p> </p>
<p class="word__breakdown">As such, it elicits feelings of erasure for women of colour. It also neglects non-binary individuals.</p> <p class="word__breakdown">The term can elicit feelings of erasure for women of colour. It also neglects non-binary individuals.</p>
</div>
<div class="block__type">
<p class="word__type">
Usage Tips
</p>
<p class="word__breakdown">
<span class="word__alt">
Before determining which term to use, consider the purpose of identifying this aggregate group of people. If you mean "women" and are including "non-binary people" without taking actions to truly include them, then you should reconsider your usage.</span></p>
</div> </div>
<div class="block__type"> <div class="block__type">
@ -493,7 +511,7 @@
</p> </p>
<p class="word__breakdown"> <p class="word__breakdown">
<span class="word__alt"> <span class="word__alt">
<a class="word__link" href="#">people of colour and white women </a> or <a class="word__link" href="#">minoritised genders, people of minoritised genders, people of colour, white non-binary people, and white women</a>, find ways to reframe why this dynamic exists, or omit</span></p> minoritised genders; people of minoritised genders; people of colour and white women; people of colour, white non-binary people, and white women</a>; or omit</span></p>
</div> </div>
</section> </section>

123
_site/scss/base.scss
View File

@ -35,7 +35,7 @@ body {
border-top: 1rem solid red; border-top: 1rem solid red;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 20px; font-size: 20px;
padding: 0; margin:0; padding: 2rem; margin:0;
} }
h1 { h1 {
@ -54,6 +54,27 @@ h1 {
grid-column: span 2; grid-column: span 2;
} }
.small {
font-size: .75em;
}
.title__thicc {
font-size: 10vh;
line-height: .75;
padding: 0;
margin: 0.5rem 0rem;
grid-column: span 2;
// transform: rotateZ(90deg);
// margin: 13rem -7rem;
}
.help {
margin: 1rem 0;
li {
margin: .75rem 0;
}
}
// GRID // // GRID //
.grid { .grid {
@ -71,11 +92,11 @@ h1 {
} }
.box { .box {
grid-column: span 2;
background: black; background: black;
color: white; color: white;
padding: 1rem; padding: 1rem;
margin: 2rem; margin: 2rem;
height: auto;
a { a {
color: white; color: white;
@ -107,103 +128,6 @@ h1 {
} }
} }
// MEDIA //
@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;
}
.title__thicc {
font-size: 9vw;
line-height: .75;
padding: 0;
margin: 0.5rem 0rem;
}
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;
}
}
.block__dictionary { .block__dictionary {
max-width: 50rem; max-width: 50rem;
margin-left: auto; margin-left: auto;
@ -315,6 +239,7 @@ margin: 1rem;
p { p {
margin: .75rem 0; margin: .75rem 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.25;
} }
.style__italics { .style__italics {

46
index.html
View File

@ -10,25 +10,32 @@
</head> </head>
<body> <body>
<main> <main>
<section id="title"> <section id="introduction" class="auto-grid">
<h1 class="title__thicc">Self-Defined</h1> <div id="title" class="title__thicc">
</section> <h1>Self-Defined</h1>
<section class="auto-grid"> </div>
<div>
<p class="summary"> <p class="summary">
<span class="subtitle">A modern dictionary about us. We define our words, but they don't define us.</span><br>Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the modern world.<br> <span class="subtitle">A modern dictionary about us. We define our words, but they don't define us.</span><br><br>
</p> </p>
<p>
Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the the diverse perspectives of the modern world.
</p>
<p>
With the foundation of vocabulary, we can begin to understand lived experiences of people different than us. Words can provide us with a sense of identify and allow us to find kinship through common experiences.
</p>
</div>
<div class="box"> <div class="box">
<span class="subtitle">Ways to help</span> <p class="subtitle">Ways to help</p>
<ol> <ol class="help">
<li> Submit words and definitions through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferral">pull requests</a>.</li> <li> Submit words and definitions through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferral">pull requests</a>.</li>
<li>Sponsor this work through <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li> <li>Sponsor this work through <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li>
<li>Volunteer writing, design, dev help by <a href="http://www.twitter.com/tatianatmac">DMing me @tatianatmac on Twitter</a>.</li> <li>Volunteer writing, design, dev help by <a href="http://www.twitter.com/tatianatmac">DMing me @tatianatmac on Twitter</a>.</li>
</ol> </ol>
</p>
</div> </div>
</section> </section>
</div>
<div class="grid"> <div class="auto-grid">
<section class="list"> <section class="list">
<h3>A-E</h3> <h3>A-E</h3>
<ul> <ul>
@ -455,7 +462,10 @@
<p class="word__type"> <p class="word__type">
Further Reading Further Reading
</p> </p>
<p class="word__breakdown"><a class="word__link" href="https://robindiangelo.com/publications/" rel="noreferrer">White Fragility</a>, Robin DiAngelo; <a class="word__link" href="https://www.theroot.com/tag/white-fragility" rel="noreferrer">White Fragility tag on The Root</a>.</p> <ul class="word__breakdown">
<li><a class="word__link" href="https://robindiangelo.com/publications/" rel="noreferrer">White Fragility</a>, Robin DiAngelo;</li>
<li><a class="word__link" href="https://www.theroot.com/tag/white-fragility" rel="noreferrer">White Fragility tag</a>, <em>The Root</em></a>.</li>
</ul>
</div> </div>
</section> </section>
@ -478,13 +488,21 @@
<p class="word__type"> <p class="word__type">
Issues Issues
</p> </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> <p class="word__breakdown">What happens to women of colour? Women of colour are conceptually split between their identies as both women and as people of colour.</p>
</div> </div>
<div class="block__type"> <div class="block__type">
<p class="word__type"> <p class="word__type">
Impact Impact
</p> </p>
<p class="word__breakdown">As such, it elicits feelings of erasure for women of colour. It also neglects non-binary individuals.</p> <p class="word__breakdown">The term can elicit feelings of erasure for women of colour. It also neglects non-binary individuals.</p>
</div>
<div class="block__type">
<p class="word__type">
Usage Tips
</p>
<p class="word__breakdown">
<span class="word__alt">
Before determining which term to use, consider the purpose of identifying this aggregate group of people. If you mean "women" and are including "non-binary people" without taking actions to truly include them, then you should reconsider your usage.</span></p>
</div> </div>
<div class="block__type"> <div class="block__type">
@ -493,7 +511,7 @@
</p> </p>
<p class="word__breakdown"> <p class="word__breakdown">
<span class="word__alt"> <span class="word__alt">
<a class="word__link" href="#">people of colour and white women </a> or <a class="word__link" href="#">minoritised genders, people of minoritised genders, people of colour, white non-binary people, and white women</a>, find ways to reframe why this dynamic exists, or omit</span></p> minoritised genders; people of minoritised genders; people of colour and white women; people of colour, white non-binary people, and white women</a>; or omit</span></p>
</div> </div>
</section> </section>