From d2af6113466a27ea4227232039552acde33b2f10 Mon Sep 17 00:00:00 2001
From: Hippo <badrihippo@gmail.com>
Date: Tue, 26 Oct 2021 17:30:23 +0530
Subject: [PATCH] Restyle "two different publications" bit to look nicer

Works in both desktop and mobile ;)
---
 src/index.htm | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/index.htm b/src/index.htm
index c52efeb..abba4e1 100644
--- a/src/index.htm
+++ b/src/index.htm
@@ -208,14 +208,18 @@
             <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">6</p>
           </div>
           <p class="text-lg mt-4">
-            When all is done, you will be ready for publication! This happens in two components:
+            When all is done, you will be ready for publication! This happens as two different versions in two publications:
           </p>
-          <ul class="m-4 text-lg flex">
-            <li class="p-4">
-              A more technical overview of your work, along with graphs, stats, and links to raw data. This is aimed at being shared with the data science community, through the <a href="https://medium.com/emergent-phenomena" target="_blank">Emergent Phenomena</a> Medium publication. Emergent Phenomenan is a space for innovative work at the interface of data, storytelling, and society, filling a much-needed niche for in-depth analyses on societal issues backed by data.
+          <ul class="m-4 text-lg flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
+            <li class="p-4 bg-blue-200 border border-blue-800 w-full md:w-1/2">
+              <h3 class="text-center uppercase my-4 font-sans text-blue-800">Emergent Phenomena</h3>
+              <p class="m-2"><a href="https://medium.com/emergent-phenomena" target="_blank" class="text-blue-800 underline">Emergent Phenomena</a> is a space for innovative work at the interface of data, storytelling, and society, filling a much-needed niche for in-depth analyses on societal issues backed by data.</p>
+              <p class="m-2">For this publication, you will write a more technical overview of your work, along with graphs, stats, and links to raw data. This is aimed at being shared with the data science community.</p>
             </li>
-            <li class="p-4">
-              A more general-purpose article which gives a general overview of your chosen topic and provides context for where your work fits in. This is aimed at spreading awareness of the topic and your findings to the general public. You will use literary techniques like suspense and metaphor to get your point across, and the final article will be published in <a href="https://www.snipettemag.com" target="_blank">Snipette</a>—a magazine seeking to explain the world in a fun and accessible way.
+            <li class="p-4 bg-orange-200 border border-orange-800 w-full md:w-1/2">
+              <h3 class="text-center uppercase my-4 font-sans text-orange-800">Snipette</h3>
+              <p class="m-2"><a href="https://www.snipettemag.com" target="_blank" class="text-orange-800 underline">Snipette</a> is a magazine seeking to explain the world in a fun and accessible way. It offers both web and print versions, and uses literary techniques like suspense and metaphor to get the point across.</p>
+              <p class="m-2">For this publication, you will write general-purpose article which gives a broad overview of your chosen topic and provides context for where your work fits in. This is aimed at spreading awareness of the topic and your findings to the general public.</p>
             </li>
           </ul>
         </li>