tidy up css for styles

This commit is contained in:
Echo
2025-06-25 17:14:03 -04:00
parent de6579c9a5
commit 7ea558c7ed
2 changed files with 42 additions and 18 deletions

View File

@@ -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>

View File

@@ -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>