From df28fe95102945eb0b36f58dde6415224e5e251a Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:42:43 -0400
Subject: [PATCH] style: add some styline to readable to account for markdown

---
 src/styles/global.css | 293 ++++++++++++++++++++++--------------------
 1 file changed, 152 insertions(+), 141 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index f106a42..2d6f988 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,154 +5,165 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    @apply font-body;
-    @apply text-base;
-    @apply text-neutral-700;
-  }
-
-  html,
-  body {
-    @apply h-full;
-  }
-
-  body {
-    @apply grid;
-    @apply bg-neutral-50;
-    grid-template-columns:
+    :root {
+        @apply font-body;
+        @apply text-base;
+        @apply text-neutral-700;
+    }
+
+    html,
+    body {
+        @apply h-full;
+    }
+
+    body {
+        @apply grid;
+        @apply bg-neutral-50;
+        grid-template-columns:
       1fr
       min(1000px, 100%)
       1fr;
-  }
-
-  body > * {
-    grid-column: 2;
-    @apply px-3;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4 {
-    @apply font-header;
-    @apply text-neutral-900;
-  }
-
-  h1,
-  h2 {
-    @apply font-bold;
-  }
-
-  h1 {
-    @apply text-5xl;
-  }
-
-  h2 {
-    @apply text-3xl;
-  }
-
-  h3 {
-    @apply text-2xl;
-  }
-
-  a {
-    @apply underline;
-  }
-
-  p.small {
-    @apply text-base;
-    @apply text-neutral-500;
-  }
-
-  input,
-  select {
-    @apply bg-white;
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    @apply text-neutral-300;
-  }
-
-  input:focus {
-    @apply outline-none;
-  }
-
-  textarea:focus {
-    @apply outline-none;
-    @apply shadow-inner-focus;
-  }
-
-  input.disabled,
-  select.disabled {
-    @apply bg-gray;
-  }
-
-  textarea {
-    @apply bg-white;
-    @apply shadow-inner;
-    @apply border-none;
-    @apply rounded-lg;
-    @apply p-3;
-    @apply w-full;
-  }
-
-  button {
-    @apply flex gap-2 items-center;
-    @apply py-2 px-3;
-    @apply w-max;
-    @apply rounded-full;
-    @apply text-neutral-50;
-    @apply transition-all;
-  }
-
-  button:hover {
-    @apply bg-primary-700;
-    @apply shadow-md;
-  }
-
-  button[role="checkbox"] {
-    @apply justify-center;
-    @apply rounded-none;
-    @apply bg-neutral-50 text-neutral-900;
-  }
-
-  button[role="checkbox"]:hover {
-    @apply shadow-none;
-  }
-
-  th {
-    @apply font-bold;
-    @apply px-4 py-3;
-    @apply text-left;
-    @apply gap-4;
-  }
-
-  td {
-    @apply text-neutral-700;
-    @apply px-4 py-3;
-  }
+    }
+
+    body > * {
+        grid-column: 2;
+        @apply px-3;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+        @apply font-header;
+        @apply text-neutral-900;
+    }
+
+    h1,
+    h2 {
+        @apply font-bold;
+    }
+
+    h1 {
+        @apply text-5xl;
+    }
+
+    h2 {
+        @apply text-3xl;
+    }
+
+    h3 {
+        @apply text-2xl;
+    }
+
+    a {
+        @apply underline;
+    }
+
+    p.small {
+        @apply text-base;
+        @apply text-neutral-500;
+    }
+
+    input,
+    select {
+        @apply bg-white;
+    }
+
+    input::placeholder,
+    textarea::placeholder {
+        @apply text-neutral-300;
+    }
+
+    input:focus {
+        @apply outline-none;
+    }
+
+    textarea:focus {
+        @apply outline-none;
+        @apply shadow-inner-focus;
+    }
+
+    input.disabled,
+    select.disabled {
+        @apply bg-gray;
+    }
+
+    textarea {
+        @apply bg-white;
+        @apply shadow-inner;
+        @apply border-none;
+        @apply rounded-lg;
+        @apply p-3;
+        @apply w-full;
+    }
+
+    button {
+        @apply flex gap-2 items-center;
+        @apply py-2 px-3;
+        @apply w-max;
+        @apply rounded-full;
+        @apply text-neutral-50;
+        @apply transition-all;
+    }
+
+    button:hover {
+        @apply bg-primary-700;
+        @apply shadow-md;
+    }
+
+    button[role="checkbox"] {
+        @apply justify-center;
+        @apply rounded-none;
+        @apply bg-neutral-50 text-neutral-900;
+    }
+
+    button[role="checkbox"]:hover {
+        @apply shadow-none;
+    }
+
+    th {
+        @apply font-bold;
+        @apply px-4 py-3;
+        @apply text-left;
+        @apply gap-4;
+    }
+
+    td {
+        @apply text-neutral-700;
+        @apply px-4 py-3;
+    }
 }
 
 @layer components {
-  .readable {
-    width: min(75ch, 100%);
-  }
+    .readable {
+        width: min(75ch, 100%);
+    }
+
+    .readable ul {
+        @apply list-disc;
+        @apply pl-14;
+        @apply py-2;
+    }
+
+    .readable li {
+        @apply m-2;
+    }
 }
 
 @layer utilities {
-  .full-bleed {
-    @apply w-full;
-    grid-column: 1 / 4;
-  }
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+    .full-bleed {
+        @apply w-full;
+        grid-column: 1 / 4;
+    }
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
 }