✏️ Added definition for crazy

_site/css/base.css

@@ -21,27 +21,11 @@ h1 {
   font-family: monotype-grotesque-extended, Arial Black, sans-serif;
   font-weight: 400;
   letter-spacing: 0.1;
+  grid-column: span 2;
 }
 
-ul {
+.summary {
-  padding: 0 0 0 1em;
+  grid-column: span 2;
-  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;
 }
 
 .grid {
@@ -58,6 +42,36 @@ li.subterm:before {
   grid-gap: 1rem;
 }
 
+.box {
+  grid-column: span 2;
+  background: black;
+  color: white;
+  padding: 1rem;
+}
+.box a {
+  color: white;
+}
+
+.list ul {
+  padding: 0 0 0 1em;
+  margin: 0;
+}
+.list li {
+  list-style: none;
+  padding-bottom: 0.5em;
+  text-transform: capitalize;
+}
+.list li.subterm {
+  padding-left: 10px;
+}
+.list li:last-child {
+  padding: 0;
+}
+.list li.subterm:before {
+  content: "↳";
+  padding-right: 5px;
+}
+
 @media screen and (min-width: 200px) {
   #title, #description, #summary {
     grid-column: span 4;
@@ -80,7 +94,7 @@ li.subterm:before {
     font-size: 9vw;
     line-height: 0.75;
     padding: 0;
-    margin: -1.5rem -2rem;
+    margin: 0.5rem 0rem;
   }
 
   h2 {

_site/css/base.css.map

@@ -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;;;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;;;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,aA5LQ;EA6LR;EACA;EACA;;AAGA;EACA,aApMa;EAqMb;;AAGA;EACA;EACA,aA1Ma;;AA6Mb;EACA;EAEA;EACA,aA/MW;EAgNX;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA,aA1NS;;AA6NX;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIA;EACA,aAhRU;EAiRV;EACA;EACA;;AAGA;EACA,aAxRe;EAyRf;;AAGA;EACA;EACA,aA9Re;;AAiSf;EACA;EAEA;EACA,aAnSa;EAoSb;EACA;EACA;EACA;;AAEE;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEA;EACE;EACA;;;AAMJ;EACA;EACA;EACA,aA/Ta;EAgUb;EACA;;;AAGA;EACA;EACA;EACA;EACA,aAzUa;;;AA4Ub;EACE;EACA;EACA;;;AAIF;EACA,aAtVe;EAuVf;EACA","file":"base.css"}
+{"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;;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,aA9MQ;EA+MR;EACA;EACA;;AAGA;EACA,aAtNa;EAuNb;;AAGA;EACA;EACA,aA5Na;;AA+Nb;EACA;EAEA;EACA,aAjOW;EAkOX;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA,aA5OS;;AA+OX;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIA;EACA,aAlSU;EAmSV;EACA;EACA;;AAGA;EACA,aA1Se;EA2Sf;;AAGA;EACA;EACA,aAhTe;;AAmTf;EACA;EAEA;EACA,aArTa;EAsTb;EACA;EACA;EACA;;AAEE;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEA;EACE;EACA;;;AAMJ;EACA;EACA;EACA,aAjVa;EAkVb;EACA;;;AAGA;EACA;EACA;EACA;EACA,aA3Va;;;AA8Vb;EACE;EACA;EACA;;;AAIF;EACA,aAxWe;EAyWf;EACA","file":"base.css"}

_site/index.html

@@ -10,14 +10,24 @@
 </head>
 <body>
 <main>
-	<section id="title" class="grid">
+	<section id="title">
 		<h1 class="title__thicc">Self-Defined</h1>
-		<p>
-		<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.<br><br>
-		<span class="subtitle">Participate</span><br>
-		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>
+	<section class="auto-grid">
+		<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>
+		</p>
+	<div class="box">
+			<span class="subtitle">Ways to help</span>
+			<ol>
+			<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>Volunteer writing, design, dev help by <a href="http://www.twitter.com/tatianatmac">DMing me @tatianatmac on Twitter</a>.</li>
+			</ol>
+		</p>	
+	</div>
+		</section>
+
 <div class="grid">
 	<section class="list">
 		<h3>A-E</h3>
@@ -65,6 +75,7 @@ Future phases will include definitions and resources.<br><br>
 			<li>colorism</li>
 			<li>Complex Post-Traumatic Stress Disorder (PTSD)</li>
 			<li>cultural appropriation</li>
+			<li><a class="word__link" href=#crazy>crazy</a></li>
 			<li>Demi</li>
 			<li class="subterm">-boy</li>
 			<li class="subterm">-girl</li>
@@ -250,6 +261,53 @@ Future phases will include definitions and resources.<br><br>
 	</section>
 	</div>
 <div class="auto-grid">
+	<section class="block__word list">
+			<p class="word__signal word__signal__avoid">
+				avoid—Ableist slur
+			</p>
+	
+			<p class="word__title" id="crazy">
+					crazy
+				<span class="word__speech">
+						noun
+				</span>
+			</p>
+			
+			<p class="word__definition">
+			mentally deranged; demented; insane.
+			</p>
+			<div class="block__issue">
+				<p class="word__issue">
+					Issues
+				</p>
+				<p class="word__breakdown">Crazy is very commonly used as an adjective to embody a vast array of ideas, often not specifically. It is used so frequently that it sometimes is a filler. Crazy can also be used in a derogatory manner for someone with mental or psychiatric disabilities.</p>
+			</div>
+			<div class="block__issue">
+				<p class="word__issue">
+					Impact
+				</p>
+				<p class="word__breakdown">By using ableist language, we are perpetuating violence against people who experience mental or psychological disabilities. Using it perpetuates those systems and language of harm, regardless of our intent.</p>
+			</div>
+			<div class="block__issue">
+				<p class="word__issue">
+					Usage Tip
+				</p>
+				<p class="word__breakdown">
+			Be more specific. Typically we can find an alternate definition by simply reflecting on what emotion we're really feeling.
+			</p>
+			</div>
+
+			<div class="block__issue">
+				<p class="word__issue">
+					Alt Words
+				</p>
+				<p class="word__breakdown">
+			<span class="word__alt">
+					abundant, bizarre, enormous, ludicrous, outlandish, ridiculous, unbelievable, unexpected, unfamiliar, unreal, scary, shocking, strange, wicked
+					</span></p>
+			</div>
+		</section>
+
 	<section class="block__word list">
 			<p class="word__signal word__signal__avoid">
 				avoid
@@ -286,6 +344,7 @@ Future phases will include definitions and resources.<br><br>
 			<span class="word__alt">
 					<a class="word__link" href="#minoritised">minoritised</a>, or omit
 					</span></p>
+			</div>
 		</section>
 			
 				<section class="block__word list">
@@ -324,6 +383,8 @@ Future phases will include definitions and resources.<br><br>
 			<span class="word__alt">
 					<a class="word__link" href="#minorities">minorities</a>, or omit
 					</span></p>
+
+					</div>
 		</section>
 		<section class="block__word list">
 			<p class="word__signal word__signal__avoid">
@@ -397,7 +458,9 @@ Future phases will include definitions and resources.<br><br>
 				<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>
+				</div>
 		</section>
+
 	</div>
 </main>
 </body>

_site/scss/base.scss

@@ -47,29 +47,11 @@ h1 {
   font-family: $ext-sans;
   font-weight: $regular;
   letter-spacing: .1;
+  grid-column: span 2;
 }
 
-ul {
+.summary {
-  padding: 0 0 0 1em;
+  grid-column: span 2;
-  margin: 0;
-}
-
-li {
-  list-style: none;
-  padding-bottom: .5em;
-  text-transform: capitalize;
-  &.subterm {
-  padding-left: 10px;
-  }
-
-  &:last-child {
-  padding: 0;
-  }
-
-  &.subterm:before {
-  content: "\21B3 ";
-  padding-right: 5px;
-  }
 }
 
   // GRID //
@@ -88,6 +70,42 @@ li {
   grid-gap: 1rem; 
   }
 
+  .box {
+    grid-column: span 2;
+    background: black;
+    color: white;
+    padding: 1rem;
+
+    a {
+      color: white;
+    }
+  }
+
+  .list {
+    ul {
+      padding: 0 0 0 1em;
+      margin: 0;
+    }
+    
+    li {
+      list-style: none;
+      padding-bottom: .5em;
+      text-transform: capitalize;
+      &.subterm {
+      padding-left: 10px;
+      }
+    
+      &:last-child {
+      padding: 0;
+      }
+    
+      &.subterm:before {
+      content: "\21B3 ";
+      padding-right: 5px;
+      }
+    }
+  }
+
 // MEDIA // 
 
 @media screen and (min-width: 200px) {
@@ -113,7 +131,7 @@ li {
     font-size: 9vw;
     line-height: .75;
     padding: 0;
-    margin: -1.5rem -2rem;
+    margin: 0.5rem 0rem;
   }
 
   h2 {