From 2c6bab54d71ddb9c23a28ba73f7bc886c32b7237 Mon Sep 17 00:00:00 2001
From: Chris Kankiewicz <Chris@ChrisKankiewicz.com>
Date: Tue, 7 Jan 2020 10:32:52 -0700
Subject: [PATCH] Updated README styles including dark mode styles

---
 app/resources/sass/dark-mode.scss | 35 +++++++++++++++++++++++++++++++
 app/resources/sass/markdown.scss  | 15 +++++++++++--
 app/resources/views/index.twig    | 10 ++++-----
 3 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/app/resources/sass/dark-mode.scss b/app/resources/sass/dark-mode.scss
index b94a406..6e034f6 100644
--- a/app/resources/sass/dark-mode.scss
+++ b/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;
+        }
+    }
 }
diff --git a/app/resources/sass/markdown.scss b/app/resources/sass/markdown.scss
index 8f09635..fab8218 100644
--- a/app/resources/sass/markdown.scss
+++ b/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;
     }
diff --git a/app/resources/views/index.twig b/app/resources/views/index.twig
index 29dbeb0..065797c 100644
--- a/app/resources/views/index.twig
+++ b/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>