Skip to content

Commit 7e2dfdb

Browse files
axadrnaxadrn
committed
feat: update footer and landing page styles for improved dark mode support
1 parent 3e787b7 commit 7e2dfdb

3 files changed

Lines changed: 13 additions & 13 deletions

File tree

‎internal/docs/ui/modules/footer.templ‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ templ FooterLinks(stars int) {
66
<footer class="mt-4 md:mt-5 flex border border-border bg-card shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
77
<a
88
href="/docs"
9-
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold border-r border-border hover:bg-accent transition-colors"
9+
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold border-r border-border hover:bg-accent dark:hover:bg-accent/40 transition-colors"
1010
>
1111
Docs
1212
</a>
1313
<a
1414
href="https://github.com/deeploy-sh/deeploy"
1515
target="_blank"
16-
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold border-r border-border hover:bg-accent transition-colors"
16+
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold border-r border-border hover:bg-accent dark:hover:bg-accent/40 transition-colors"
1717
>
1818
GitHub { utils.FormatStars(stars) }
1919
</a>
2020
<a
2121
href="https://x.com/axadrn"
2222
target="_blank"
23-
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold hover:bg-accent transition-colors"
23+
class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold hover:bg-accent dark:hover:bg-accent/40 transition-colors"
2424
>
2525
X
2626
</a>

‎internal/docs/ui/pages/doc.templ‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import (
1616

1717
templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
1818
@layouts.BaseLayout(layouts.SEOProps{Title: currentDoc.Title, Description: currentDoc.Description, Path: currentDoc.Slug}) {
19-
@sidebar.Layout(sidebar.LayoutProps{Class: "bg-background text-foreground [&_[data-sidebar=sidebar]]:border-r [&_[data-sidebar=sidebar]]:border-border [&_[data-sidebar=sidebar]]:bg-card [&_[data-sidebar=sidebar]]:text-card-foreground [&_[data-sidebar=sidebar]]:shadow-[6px_6px_0_0_rgba(0,0,0,0.45)] dark:[&_[data-sidebar=sidebar]]:shadow-[6px_6px_0_0_rgba(255,255,255,0.18)] [&_[data-tui-sidebar=menu-button]]:rounded-none [&_[data-tui-sidebar=menu-button]]:border [&_[data-tui-sidebar=menu-button]]:border-transparent [&_[data-tui-sidebar=menu-button]]:font-semibold [&_[data-tui-sidebar=menu-button]]:hover:bg-accent [&_[data-tui-sidebar=menu-button]]:hover:border-border [&_[data-tui-sidebar=menu-button]]:data-[tui-sidebar-active=true]:bg-accent [&_[data-tui-sidebar=menu-button]]:data-[tui-sidebar-active=true]:border-border [&_[data-tui-sidebar=menu-sub-button]]:rounded-none [&_[data-tui-sidebar=menu-sub-button]]:border [&_[data-tui-sidebar=menu-sub-button]]:border-transparent [&_[data-tui-sidebar=menu-sub-button]]:hover:bg-accent [&_[data-tui-sidebar=menu-sub-button]]:hover:border-border [&_[data-tui-sidebar=menu-sub-button]]:data-[tui-sidebar-active=true]:bg-accent [&_[data-tui-sidebar=menu-sub-button]]:data-[tui-sidebar-active=true]:border-border"}) {
19+
@sidebar.Layout(sidebar.LayoutProps{Class: "bg-background text-foreground [&_[data-sidebar=sidebar]]:border-r [&_[data-sidebar=sidebar]]:border-border [&_[data-sidebar=sidebar]]:bg-card [&_[data-sidebar=sidebar]]:text-card-foreground [&_[data-sidebar=sidebar]]:shadow-[6px_6px_0_0_rgba(0,0,0,0.45)] dark:[&_[data-sidebar=sidebar]]:shadow-[6px_6px_0_0_rgba(255,255,255,0.18)] [&_[data-tui-sidebar=menu-button]]:rounded-none [&_[data-tui-sidebar=menu-button]]:border [&_[data-tui-sidebar=menu-button]]:border-transparent [&_[data-tui-sidebar=menu-button]]:font-semibold [&_[data-tui-sidebar=menu-button]]:hover:bg-accent dark:[&_[data-tui-sidebar=menu-button]]:hover:bg-accent/40 [&_[data-tui-sidebar=menu-button]]:data-[tui-sidebar-active=true]:bg-accent dark:[&_[data-tui-sidebar=menu-button]]:data-[tui-sidebar-active=true]:bg-accent/40 [&_[data-tui-sidebar=menu-sub-button]]:rounded-none [&_[data-tui-sidebar=menu-sub-button]]:border [&_[data-tui-sidebar=menu-sub-button]]:border-transparent [&_[data-tui-sidebar=menu-sub-button]]:hover:bg-accent dark:[&_[data-tui-sidebar=menu-sub-button]]:hover:bg-accent/40 [&_[data-tui-sidebar=menu-sub-button]]:data-[tui-sidebar-active=true]:bg-accent dark:[&_[data-tui-sidebar=menu-sub-button]]:data-[tui-sidebar-active=true]:bg-accent/40"}) {
2020
@sidebar.Sidebar(sidebar.Props{}) {
2121
@sidebar.Header() {
2222
@sidebar.Menu() {
@@ -148,7 +148,7 @@ templ DocContent(doc *service.Doc, prev, next *service.Doc) {
148148
@button.Button(button.Props{
149149
Href: prev.Path,
150150
Variant: button.VariantOutline,
151-
Class: "rounded-none border-border bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
151+
Class: "rounded-none border-border bg-transparent shadow-none hover:bg-accent dark:hover:bg-accent/40 hover:text-accent-foreground",
152152
Attributes: templ.Attributes{
153153
"hx-get": prev.Path,
154154
"hx-target": "#docs-content-wrapper",
@@ -165,7 +165,7 @@ templ DocContent(doc *service.Doc, prev, next *service.Doc) {
165165
@button.Button(button.Props{
166166
Href: next.Path,
167167
Variant: button.VariantOutline,
168-
Class: "rounded-none border-border bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
168+
Class: "rounded-none border-border bg-transparent shadow-none hover:bg-accent dark:hover:bg-accent/40 hover:text-accent-foreground",
169169
Attributes: templ.Attributes{
170170
"hx-get": next.Path,
171171
"hx-target": "#docs-content-wrapper",

‎internal/docs/ui/pages/landing.templ‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,24 @@ templ Landing() {
2424
<main class="flex-1 flex flex-col justify-center px-1 pt-3 pb-3 md:px-5 md:pt-6 md:pb-6">
2525
<section class="space-y-5 md:space-y-7">
2626
<!-- Hero -->
27-
<section class="px-5 py-10 md:px-12 md:py-14 space-y-4 bg-primary/10 border border-border text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
27+
<section class="px-5 py-10 md:px-12 md:py-14 space-y-4 bg-card border border-border text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
2828
<p class="text-xs md:text-sm uppercase tracking-[0.2em] font-bold text-muted-foreground">Self-hosted deploy stack</p>
2929
<h1 class="text-3xl md:text-5xl font-bold tracking-tight leading-tight">
3030
Modern Deployment. Terminal First. Open Source.
3131
</h1>
3232
<p class="text-base md:text-lg text-muted-foreground">The self-hosted alternative to Heroku, Vercel, and Netlify.</p>
3333
</section>
3434
<!-- Teaser Image -->
35-
<section class="border border-border bg-accent/10 shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
35+
<section class="border border-border bg-card shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
3636
<img src="/assets/img/hero.png" class="w-full object-cover block" alt="deeploy ui preview"/>
3737
</section>
3838
<!-- Features -->
39-
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 border border-border bg-secondary text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
39+
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 border border-border bg-card text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
4040
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Features</p>
4141
<p class="text-muted-foreground">Zero-downtime · Auto SSL · Instant domains · Multi-VPS profiles · Self-hosted</p>
4242
</section>
4343
<!-- Install Commands -->
44-
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 border border-border bg-primary/10 text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
44+
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 border border-border bg-card text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
4545
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Get started in 30 seconds</p>
4646
<div class="space-y-3">
4747
<!-- Server Install -->
@@ -52,7 +52,7 @@ templ Landing() {
5252
<div class="flex items-center overflow-hidden border border-border bg-card shadow-[4px_4px_0_0_rgba(0,0,0,0.3)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.15)]">
5353
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/server.sh | sudo bash</code>
5454
<button
55-
class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent transition-colors"
55+
class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent dark:hover:bg-accent/40 transition-colors"
5656
data-copy="curl -fsSL https://deeploy.sh/server.sh | sudo bash"
5757
>copy</button>
5858
</div>
@@ -65,15 +65,15 @@ templ Landing() {
6565
<div class="flex items-center overflow-hidden border border-border bg-card shadow-[4px_4px_0_0_rgba(0,0,0,0.3)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.15)]">
6666
<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/tui.sh | bash</code>
6767
<button
68-
class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent transition-colors"
68+
class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent dark:hover:bg-accent/40 transition-colors"
6969
data-copy="curl -fsSL https://deeploy.sh/tui.sh | bash"
7070
>copy</button>
7171
</div>
7272
</div>
7373
</div>
7474
</section>
7575
<!-- Built with -->
76-
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 bg-accent/15 border border-border text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
76+
<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 bg-card border border-border text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
7777
<p class="text-base font-extrabold uppercase tracking-[0.08em]">Built with</p>
7878
<p class="text-muted-foreground">Go · Bubble Tea · Docker · Traefik · Let's Encrypt · SQLite</p>
7979
</section>

0 commit comments

Comments
 (0)