terms added, structure updates

css/base.css

@@ -14,10 +14,21 @@ 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;
@@ -33,6 +44,9 @@ li {
     padding: 1em; }
   .list, .item {
     grid-column: span 4; }
+  .list {
+    padding: 0 auto;
+    margin: 0; }
   h1 {
     font-size: 3em; }
   h2 {
@@ -40,9 +54,17 @@ li {
 
 @media screen and (min-width: 600px) {
   body {
-    padding: 3em; }
+    padding: 2em; }
-  #title, #description, #summary {
+  .grid {
-    grid-column: span 2; }
+    grid-row-gap: 1em; }
+  #title {
+    grid-column: 1 / span 2;
+    grid-row: 2; }
+  #summary {
+    grid-column: 3 / span 2;
+    grid-row: 1; }
+  #description {
+    grid-column: span 4; }
   .item {
     grid-column: span 2; }
   h1 {
@@ -50,6 +72,9 @@ li {
   h2 {
     font-size: 1.3em; } }
 
+.small {
+  font-size: .75em; }
+
 @media screen and (min-width: 1024px) {
   #title {
     grid-column: 1 / span 1;

index.html

@@ -4,7 +4,7 @@
     <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 to reflect today's world</title>
+    <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>
@@ -19,9 +19,12 @@
 		<h2>A modern dictionary about us. We define our words, but they don't define us.</h2>
 	</div>
 	<div class="item" id="summary">	
-		<p>For now, this stands as a list only, from which you can self-educate. Future phases will include definitions and resources.</p>
+		<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>	
+		<p class="small">Last updated 1:55am GMT 23/09/2018</p>
+
 	</div>
 
 	<div class="list">
@@ -33,21 +36,23 @@
 			<li>aromantic</li>
 			<li>asexual</li>
 			<li>assigned at birth</li>
-			<li>Autism</li>
+			<li>Autism spectrum</li>
 			<li>Bias</li>
+			<li>bierasure</li>
+			<li>bipolar</li>
 			<li>Black Indigenous People of Color (BIPOC)</li>
 			<li>Black men (BM)</li>
 			<li>Black women (BW)</li>
 			<li>Black people (BP)</li>
-			<li>bipolar</li>
 			<li>cisgender</li>
 			<li>colorism</li>
 			<li>Complex Post-Traumatic Stress Disorder (PTSD)</li>
 			<li>cultural appropriation</li>
-			<li>demiboy</li>
+			<li>Demi</li>
-			<li>demigirl</li>
+			<li class="subterm">-boy</li>
-			<li>demiromantic</li>
+			<li class="subterm">-girl</li>
-			<li>demisexual</li>
+			<li class="subterm">-romantic</li>
+			<li class="subterm">-sexual</li>
 			<li>Disability</li>
 			<li>disabled</li>
 			<li>discordant couples</li>
@@ -61,6 +66,10 @@
 			<li>Entitlement</li>
 			<li>Equality</li>
 			<li>Equity</li>
+			<li>Fem</li>
+			<li>Femme</li>
+			<li class="subterm">Gender</li>
+			<li class="subterm">Racial</li>
 			<li>Ethnicity</li>
 			<li>Gender</li>
 			<li>Gender confirmation surgery (GCS)</li>
@@ -71,10 +80,11 @@
 			<li>Human Immunodeficiency Virus (HIV)</li>
 			<li>Homophobia</li>
 			<li>hormone Replacement therapy (HRT)</li>
+			<li>Impact</li>
 			<li>Implicit bias</li>
 			<li>Indigenous</li>
 			<li>Inherent</li>
-			<li>Intent/impact</li>
+			<li>Intent</li>
 			<li>internalized oppression</li>
 			<li>Intersectionality</li>
 			<li>intersex</li>
@@ -89,21 +99,32 @@
 		<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>-passing</li>
-		<li>PEP</li>
+		<li class="subterm">female-</li>
+		<li class="subterm">male-</li>
+		<li class="subterm">white-</li>
 		<li>Performative allyship</li>
 		<li>People of Color (PoC)</li>
 		<li>Post-Traumatic Stress Disorder</li> 
 		<li>power</li>
 		<li>Poz</li>
 		<li>Prejudice</li>
-		<li>Pre-exposure Prophylaxis (PrEP)</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>racial/gender equity</li>
 		<li>Racism</li>
 		<li>Racist</li>
 		<li>Semitic</li>
@@ -112,7 +133,6 @@
 		<li>Sexual assault of a minor</li>
 		<li>Sexual orientation</li>
 		<li>Socially constructed</li>
-		<li>Spectrum</li>
 		<li>Systematic</li>
 		<li>Systemic</li>
 		<li>Trans Exclusionary Radical Feminist (TERF)</li>
@@ -137,5 +157,6 @@
 		<li>womanism</li>
 	</ul>
 </div>
+</div>
 </body>
 </html>

scss/base.scss

@@ -43,11 +43,27 @@ h2, h3 {
   font-family: $serif;
   font-weight: $bold;
 }
+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;
+  }
 }
 
   // GRID //
@@ -80,6 +96,11 @@ li {
   grid-column: span 4;
   }
 
+  .list {
+    padding: 0 auto;
+    margin: 0;
+  }
+
   h1 {
     font-size: 3em;
   }
@@ -91,11 +112,25 @@ li {
 
 @media screen and (min-width: 600px) {
   body {
-  padding: 3em;
+  padding: 2em;
   }
 
-  #title, #description, #summary {
+  .grid {
-    grid-column: span 2;
+    grid-row-gap: 1em;
+  }
+
+  #title {
+    grid-column: 1 / span 2;
+    grid-row: 2;
+  }
+
+  #summary {
+  grid-column: 3 / span 2;
+  grid-row: 1;
+  }
+
+  #description {
+    grid-column: span 4;
   }
   
   .item {
@@ -111,6 +146,10 @@ li {
   }
 }
 
+.small {
+  font-size: .75em;
+}
+
 @media screen and (min-width: 1024px) {
 
   #title {