From 7ea558c7edf62029ef795b2ef637c7b10e659b20 Mon Sep 17 00:00:00 2001
From: Echo <github@3kh0.net>
Date: Wed, 25 Jun 2025 17:14:03 -0400
Subject: [PATCH] tidy up css for styles

---
 app/views/docs/index.html.erb |  7 ++---
 app/views/docs/show.html.erb  | 53 ++++++++++++++++++++++++++---------
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/app/views/docs/index.html.erb b/app/views/docs/index.html.erb
index e715424..60b8bdf 100644
--- a/app/views/docs/index.html.erb
+++ b/app/views/docs/index.html.erb
@@ -140,8 +140,8 @@
     </div>
   
     <details class="bg-dark rounded-lg p-6 mb-8">
-      <summary class="cursor-pointer font-semibold text-primary mb-4">View all 77 supported editors</summary>
-      <div id="all-editors" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 mt-4 p-4 bg-darkless rounded-lg">
+      <summary class="cursor-pointer font-semibold text-primary">View all 77 supported editors</summary>
+      <div id="all-editors" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 mt-4 p-4">
       <% 
         # All 77 editors - alphabetically sorted
         all_editors = [
@@ -168,7 +168,7 @@
         ]
       %>
         <% all_editors.each do |name, slug| %>
-          <a href="<%= doc_path("editors/#{slug}") %>" class="bg-dark rounded p-2 hover:bg-primary/10 transition-colors text-center block">
+          <a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded p-2 hover:bg-primary/10 transition-colors text-center block">
             <img src="/images/editor-icons/<%= slug %>-128.png" alt="<%= name %>" class="w-8 h-8 mx-auto mb-1">
             <div class="text-xs text-white leading-tight"><%= name %></div>
           </a>
@@ -186,6 +186,5 @@
         </a> - we'd love your help making them better!
       </p>
     </div>
-
   </div>
 </div>
diff --git a/app/views/docs/show.html.erb b/app/views/docs/show.html.erb
index b1fd764..b92088c 100644
--- a/app/views/docs/show.html.erb
+++ b/app/views/docs/show.html.erb
@@ -54,25 +54,50 @@
         <% end %>
       <% end %>
     </nav>
-    <div class="bg-dark rounded-lg p-8 mb-8 prose prose-invert max-w-none
-                prose-headings:text-primary prose-h1:text-3xl prose-h1:font-bold 
-                prose-h2:text-2xl prose-h2:font-semibold prose-h2:text-primary
-                prose-h3:text-xl prose-h3:font-semibold prose-h3:text-primary
-                prose-p:text-white prose-p:leading-relaxed
-                prose-a:text-primary prose-a:hover:text-red prose-a:underline
-                prose-strong:text-white prose-em:text-secondary
-                prose-code:bg-darkless prose-code:text-primary prose-code:px-2 prose-code:py-1 prose-code:rounded
-                prose-pre:bg-darkless prose-pre:border prose-pre:border-primary/20
-                prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-darkless prose-blockquote:pl-4
-                prose-ul:text-white prose-ol:text-white prose-li:text-white">
+    <div class="bg-dark rounded-lg p-8 mb-8 prose prose-invert prose-lg max-w-none
+                prose-headings:text-primary prose-headings:font-bold prose-headings:leading-tight
+                prose-h1:text-4xl prose-h1:mb-6 prose-h1:text-primary prose-h1:mt-0
+                prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:text-primary prose-h2:border-b prose-h2:border-primary/20 prose-h2:pb-2
+                prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3 prose-h3:text-primary
+                prose-h4:text-lg prose-h4:mt-4 prose-h4:mb-2 prose-h4:text-white prose-h4:font-semibold
+                prose-p:text-white prose-p:leading-7 prose-p:mb-5
+                prose-a:text-primary prose-a:hover:text-red prose-a:underline prose-a:font-medium
+                prose-strong:text-white prose-strong:font-semibold
+                prose-em:text-secondary prose-em:italic
+                prose-code:bg-darkless prose-code:text-primary prose-code:px-2 prose-code:py-1 prose-code:rounded prose-code:text-sm prose-code:font-mono
+                prose-pre:bg-darkless prose-pre:border prose-pre:border-primary/20 prose-pre:rounded-lg prose-pre:p-4 prose-pre:overflow-x-auto
+                prose-pre:text-white prose-pre:text-sm
+                prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-darkless prose-blockquote:pl-6 prose-blockquote:py-4 prose-blockquote:rounded-r-lg
+                prose-blockquote:text-secondary prose-blockquote:italic prose-blockquote:font-normal prose-blockquote:my-6
+                prose-ul:text-white prose-ul:mb-4 prose-ul:pl-6
+                prose-ol:text-white prose-ol:mb-4 prose-ol:pl-6
+                prose-li:text-white prose-li:mb-3 prose-li:leading-7 prose-li:pl-2
+                prose-table:border-collapse prose-table:border prose-table:border-primary/20 prose-table:rounded-lg prose-table:overflow-hidden prose-table:my-6
+                prose-th:bg-darkless prose-th:text-primary prose-th:font-semibold prose-th:p-3 prose-th:border prose-th:border-primary/20
+                prose-td:text-white prose-td:p-3 prose-td:border prose-td:border-primary/20
+                prose-img:rounded-lg prose-img:shadow-lg prose-img:mx-auto prose-img:block prose-img:max-w-24 prose-img:h-auto prose-img:my-4
+                prose-hr:border-primary/20 prose-hr:my-8
+                [&_ol>li::marker]:text-primary [&_ol>li::marker]:font-semibold
+                [&_ul>li::marker]:text-primary
+                [&_ol>li]:mb-3 [&_ol>li]:pl-2
+                [&_h2:not(:first-child)]:mt-10
+                [&_h3:not(:first-child)]:mt-8
+                [&_p_strong:first-child]:text-primary
+                [&_pre[class*='language-json']]:bg-darkless [&_pre[class*='language-json']]:border [&_pre[class*='language-json']]:border-primary/10
+                [&_pre[class*='language-bash']]:bg-darkless [&_pre[class*='language-bash']]:border [&_pre[class*='language-bash']]:border-primary/10
+                [&_img[alt*='PyCharm']]:w-16 [&_img[alt*='PyCharm']]:h-16 [&_img[alt*='PyCharm']]:mx-auto [&_img[alt*='PyCharm']]:block [&_img[alt*='PyCharm']]:my-4
+                [&_img[alt*='VS_Code']]:w-16 [&_img[alt*='VS_Code']]:h-16 [&_img[alt*='VS_Code']]:mx-auto [&_img[alt*='VS_Code']]:block [&_img[alt*='VS_Code']]:my-4
+                [&_img[alt*='IntelliJ']]:w-16 [&_img[alt*='IntelliJ']]:h-16 [&_img[alt*='IntelliJ']]:mx-auto [&_img[alt*='IntelliJ']]:block [&_img[alt*='IntelliJ']]:my-4
+                [&_img[src*='/images/editor-icons/']]:w-16 [&_img[src*='/images/editor-icons/']]:h-16 [&_img[src*='/images/editor-icons/']]:mx-auto [&_img[src*='/images/editor-icons/']]:block [&_img[src*='/images/editor-icons/']]:my-4
+                [&_.editor-steps]:bg-darkless [&_.editor-steps]:p-6 [&_.editor-steps]:rounded-lg [&_.editor-steps]:my-4
+                [&_.editor-steps_ol]:m-0
+                [&_.editor-steps_li]:mb-2">
       <%= raw @rendered_content %>
     </div>
     <div class="text-center bg-darkless rounded-lg p-6">
       <p class="text-secondary">
         Found an issue with this page? 
-        <a href="https://github.com/hackclub/hackatime/edit/main/docs/<%= @doc_path %>.md" target="_blank" class="text-primary hover:text-red underline">
-          Edit it on GitHub
-        </a> - we'd love your help making the docs better!
+        <a href="https://github.com/hackclub/hackatime/edit/main/docs/<%= @doc_path %>.md" target="_blank" class="text-primary hover:text-red underline">Edit it on GitHub</a> - we'd love your help making the docs better!
       </p>
     </div>
   </div>