From f5e6689a2748a110eec73ac48edf2dffef540e2f Mon Sep 17 00:00:00 2001
From: Ross Kaffenberger <rosskaff@gmail.com>
Date: Wed, 20 Dec 2023 09:03:50 -0500
Subject: [PATCH 1/2] Improve vertical and horizontal article layout

---
 app/content/layouts/article.html.erb     | 6 ++----
 app/javascript/css/themes/typography.css | 3 +++
 app/views/layouts/application.html.erb   | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/content/layouts/article.html.erb b/app/content/layouts/article.html.erb
index 2b979977..4fad2ae6 100644
--- a/app/content/layouts/article.html.erb
+++ b/app/content/layouts/article.html.erb
@@ -22,7 +22,7 @@
       <div class="lg:flex lg:flex-row-reverse">
         <aside
           class="
-            hidden lg:block lg:sticky lg:self-start lg:flex-auto ml-20 mt-1 top-[114px]
+            hidden lg:block lg:sticky lg:self-start lg:flex-1 ml-16 mt-1 top-[114px]
           "
         >
           <h2 class="font-semibold mb-4 text-sm leading-6 uppercase tracking-widest">Table of Contents</h2>
@@ -40,9 +40,7 @@
           </nav>
         </aside>
         <article
-          class="
-            max-w-screen-md prose dark:prose-invert sm:prose-lg lg:prose-xl
-          "
+          class="prose dark:prose-invert sm:prose-lg lg:prose-xl"
         >
           <h2
             id="introduction"
diff --git a/app/javascript/css/themes/typography.css b/app/javascript/css/themes/typography.css
index 273a9a47..c2994fe1 100644
--- a/app/javascript/css/themes/typography.css
+++ b/app/javascript/css/themes/typography.css
@@ -1,4 +1,7 @@
 /* Typography overrides */
+.prose {
+  max-width: min(100%, 712px);
+}
 .prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
   font-weight: 500;
   text-decoration: none;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 7684e48f..373912a4 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -23,7 +23,7 @@
     <main
       class="
         w-full flex flex-col flex-grow
-        mx-auto mb-96
+        mx-auto mb-16 min-h-[32vh]
       "
     >
       <%= yield %>

From 19e540da98202a770908fba77430585ef3215ef5 Mon Sep 17 00:00:00 2001
From: Ross Kaffenberger <rosskaff@gmail.com>
Date: Wed, 20 Dec 2023 09:04:02 -0500
Subject: [PATCH 2/2] Update dracula theme colors

---
 app/javascript/css/themes/colors.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/javascript/css/themes/colors.css b/app/javascript/css/themes/colors.css
index 79f9a1de..44dfbbe2 100644
--- a/app/javascript/css/themes/colors.css
+++ b/app/javascript/css/themes/colors.css
@@ -51,11 +51,11 @@
 .dark[data-joy-theme='dracula'] {
   --theme-title: var(--dracula-cyan);
   --theme-base: var(--dracula-black);
-  --theme-bg-subtle: var(--violet-2);
-  --theme-bg: var(--violet-3);
-  --theme-bg-hover: var(--violet-4);
-  --theme-bg-active: var(--violet-5);
-  --theme-text: var(--violet-11);
+  --theme-bg-subtle: var(--dracula-black-secondary);
+  --theme-bg: var(--dracula-black-secondary);
+  --theme-bg-hover: var(--dracula-purple-200);
+  --theme-bg-active: var(--dracula-purple);
+  --theme-text: var(--dracula-purple);
   --theme-text-contrast: var(--violet-12);
   --theme-link: var(--dracula-pink);
   --theme-link-hover: var(--dracula-pink-secondary);