glossary

index.html

@@ -85,9 +85,8 @@
 			</p>
 			<p>
 				Every other Tuesday of each week, somehow estranged from everyones’ work progress,
-				all the members of the group, except the<a href="#caretakers" class="note">
+				all the members of the group, except the
-					care-takers</a
+				<a href="#caretakers" class="note">care-takers</a>
-				>
 				(a few members responsible of the overall outcome of that week’s publication), would
 				walk into a dedicated room unaware of what kind of experience they would step into.
 				Some publications even shifted from edited projects to live performances, presenting
@@ -150,6 +149,7 @@
 			</p>
 		</main>
 		<footer>
+			<h3>Glossary</h3>
 			<dl>
 				<dt id="release">Release</dt>
 				<dd>
@@ -186,7 +186,7 @@
 					interconnected and entangled between each other. Every segment has an influence
 					on the others and viceversa; they are mutually dependent on each other.
 				</dd>
-				<dt id="implicancy">Implicancy</dt>
+				<!-- <dt id="implicancy">Implicancy</dt>
 				<dd>
 					In the case of the fifth release, implicancies are the connections that can be
 					made when reacting to already existing content. By looking at the files proposed
@@ -214,7 +214,7 @@
 					functions as starting and end points and the contributions are then "nested" in
 					between the anchor text. This concept has been further developed in the seventh
 					release, Unfolding Implicancies.
-				</dd>
+				</dd> -->
 			</dl>
 		</footer>
 	</body>

style.css

@@ -6,7 +6,7 @@ html,
 body {
 	background-color: #006dfe;
 	font-family: sans-serif;
-	font-size: 20px;
+	font-size: 24px;
 	line-height: 1.6;
 }
 
@@ -155,7 +155,9 @@ li:hover {
 	visibility: hidden;
 }
 
-main {
+main,
+footer {
+	font-size: 24px;
 	padding: 24px;
 }
 
@@ -167,14 +169,36 @@ main img {
 	display: inline-block;
 }
 
-dt {
+dl {
-	margin-top: 24px;
+	display: grid;
+	grid-template-columns: 1fr 4fr;
+	gap: 32px;
+}
+
+footer h3 {
+	margin: 64px 0;
+	font-size: 1rem;
+	font-weight: normal;
 	font-style: italic;
 }
+
+dt {
+	background-color: white;
+	justify-self: start;
+	align-self: flex-start;
+	padding: 6px 12px;
+
+	border-radius: 24px;
+}
+
 dd {
-	padding: 0;
 	margin: 0;
-	max-width: 80ch;
+	max-width: 60ch;
+}
+
+.note {
+	background-color: white;
+	padding: 2px 4px;
 }
 
 @media (max-width: 767.98px) {
@@ -191,4 +215,13 @@ dd {
 	main img {
 		max-width: 100%;
 	}
+
+	dl {
+		display: flex;
+		flex-direction: column;
+	}
+
+	dd + dt {
+		margin-top: 48px;
+	}
 }