Updated README styles including dark mode styles

app/resources/sass/dark-mode.scss

@@ -66,4 +66,39 @@
             }
         }
     }
+
+    #readme {
+        article {
+            @apply bg-gray-900;
+            @apply border-0;
+        }
+    }
+
+    .markdown {
+        a {
+            @apply text-purple-600;
+
+            &:hover {
+                @apply text-purple-800;
+            }
+        }
+
+        h1,
+        h2 {
+            @apply border-gray-800;
+        }
+
+        h6 {
+            @apply text-base;
+            @apply text-gray-600;
+        }
+
+        code {
+            @apply bg-gray-800;
+        }
+
+        hr {
+            @apply border-gray-800;
+        }
+    }
 }

app/resources/sass/markdown.scss

@@ -1,5 +1,6 @@
 .markdown {
     @apply font-sans;
+    @apply break-words;
 
     a {
         @apply text-blue-600;
@@ -10,6 +11,10 @@
         }
     }
 
+    img {
+        @apply inline;
+    }
+
     p,
     blockquote,
     ul,
@@ -80,11 +85,17 @@
         @apply mt-4;
     }
 
-    pre {
+    code {
         @apply bg-gray-200;
         @apply rounded-sm;
-        @apply p-4;
+        @apply p-1;
         @apply font-mono;
+        @apply overflow-y-auto;
+    }
+
+    pre > code {
+        @apply block;
+        @apply p-4;
         @apply text-sm;
         @apply whitespace-pre;
     }

app/resources/views/index.twig

@@ -4,7 +4,7 @@
     {% include "components/header.twig" %}
 
     <div id="content" class="flex-grow container mx-auto px-4">
-        <ul id="file-list" class="py-4">
+        <ul id="file-list" class="my-4">
             <div class="flex justify-between font-bold p-4">
                 <div class="flex-grow mr-2">
                     File Name
@@ -31,12 +31,12 @@
         </ul>
 
         {% if readme %}
-            <div id="readme" class="rounded-lg overflow-hidden shadow-md my-12">
-                <div class="flex items-center bg-blue-600 px-4 py-3 text-white">
+            <div id="readme" class="rounded-lg overflow-hidden shadow-md my-8">
+                <header class="flex items-center bg-blue-600 px-4 py-3 text-white">
                     <i class="fab fa-readme fa-lg pr-3"></i> README.md
-                </div>
+                </header>
 
-                <article class="bg-gray-100 border rounded-b-lg px-12 py-8 markdown">
+                <article class="bg-gray-100 rounded-b-lg px-12 py-8 markdown">
                     {{ readme | raw }}
                 </article>
             </div>