From f77649cc29d3a015e2438be24ffec6c04355819b Mon Sep 17 00:00:00 2001 From: mkelvers Date: Mon, 6 Apr 2026 18:18:22 +0200 Subject: [PATCH] ui: modernize styling, cleaner layout, non-4chan vibe --- internal/templates/layout.templ | 27 +-- internal/templates/layout_templ.go | 4 +- static/css/style.css | 369 +++++++++++++++++------------ 3 files changed, 231 insertions(+), 169 deletions(-) diff --git a/internal/templates/layout.templ b/internal/templates/layout.templ index 9b37369..869809b 100644 --- a/internal/templates/layout.templ +++ b/internal/templates/layout.templ @@ -12,31 +12,30 @@ templ Layout(title string) {
-
-

/malago/

-
- - +
+

/malago

+
+ home + catalog + watchlist +
+ + +
-
- [ home ] - [ catalog ] - [ watchlist ] -
-
{ children... }
-
+

/malago/

[ home ] [ catalog ] [ watchlist ]
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "

/malago

home catalog watchlist
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -50,7 +50,7 @@ func Layout(title string) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/static/css/style.css b/static/css/style.css index 24f7eac..e3f08d5 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,155 +1,200 @@ :root { - /* Dark Monochromatic Palette (4chan catalog style but dark) */ - --bg: #111111; /* very dark grey / almost black */ - --surface: #1a1a1a; /* slightly lighter dark for inputs/boxes */ - --border: #333333; /* dark grey border */ - --text: #e0e0e0; /* light grey text */ - --text-muted: #888888; /* medium grey for meta/loading */ - --link: #cccccc; /* light grey links */ + /* Minimalist, Clean Dark Palette */ + --bg: #0a0a0a; /* deep black background */ + --surface: #141414; /* dark grey surface */ + --surface-hover: #1f1f1f; /* slightly lighter surface for hover */ + --border: #262626; /* subtle border */ + --text: #f0f0f0; /* crisp white text */ + --text-muted: #a3a3a3; /* readable grey for secondary text */ + --accent: #e5e5e5; /* near-white for accents */ + --link: #a3a3a3; /* muted links */ --link-hover: #ffffff; /* pure white on hover */ - --greentext: #98fb98; /* pale green for success/quotes */ + --greentext: #4ade80; /* modern green */ } body { background-color: var(--bg); color: var(--text); - font-family: arial, helvetica, sans-serif; - font-size: 15px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.5; margin: 0; - padding: 16px; + padding: 0; min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } header { - text-align: center; - margin-bottom: 24px; + padding: 24px 32px; + border-bottom: 1px solid var(--border); + background: var(--bg); + position: sticky; + top: 0; + z-index: 100; + display: flex; + flex-direction: column; + gap: 16px; +} + +.header-top { + display: flex; + justify-content: space-between; + align-items: center; } h1 { - font-size: 24px; - font-weight: bold; - margin: 0 0 8px 0; + font-size: 20px; + font-weight: 600; + letter-spacing: -0.02em; + margin: 0; color: var(--text); } .nav { - font-size: 14px; - font-weight: bold; + font-size: 13px; + font-weight: 500; + display: flex; + gap: 24px; + padding-left: 0; } a { color: var(--link); text-decoration: none; + transition: color 0.15s ease; } a:hover { color: var(--link-hover); - text-decoration: underline; +} + +.nav a { + text-transform: lowercase; + letter-spacing: 0.05em; } hr { - border: 0; - border-bottom: 1px solid var(--border); - margin: 16px 0; + display: none; +} + +main { + padding: 32px; + max-width: 1400px; + margin: 0 auto; } /* Search Area */ -.search-box { - text-align: center; - margin-bottom: 24px; -} - -.search-form { - display: inline-flex; - gap: 4px; -} - .search-input { border: 1px solid var(--border); background: var(--surface); - padding: 6px; + padding: 8px 12px; color: var(--text); - font-size: 15px; - width: 250px; + font-size: 13px; + width: 280px; + transition: all 0.2s ease; + border-radius: 0; /* Strict no rounded corners */ } .search-input:focus { outline: none; border-color: var(--text-muted); + background: var(--bg); +} + +.search-input::placeholder { + color: #525252; } .search-button { - background-color: var(--surface); - border: 1px solid var(--border); - color: var(--text); - padding: 6px 16px; + background-color: var(--text); + border: 1px solid var(--text); + color: var(--bg); + padding: 8px 16px; cursor: pointer; - font-size: 15px; + font-size: 13px; + font-weight: 600; + transition: all 0.15s ease; + border-radius: 0; } .search-button:hover { - background-color: var(--border); + background-color: var(--link-hover); + border-color: var(--link-hover); } .status-text { color: var(--text-muted); - font-weight: bold; - font-size: 12px; - text-align: center; - margin-bottom: 16px; + font-weight: 500; + font-size: 13px; + margin-bottom: 24px; + text-transform: lowercase; + text-align: left; } -/* 4chan Catalog Grid */ +/* Grid Layout */ .catalog-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - gap: 24px; - padding: 0 16px; - justify-items: center; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 32px 24px; } .catalog-item { - text-align: center; - width: 180px; + display: flex; + flex-direction: column; + gap: 12px; + text-align: left; + width: 100%; } -.catalog-thumb { - max-width: 180px; - max-height: 240px; +.image-container, .catalog-thumb { + width: 100%; + aspect-ratio: 2/3; + object-fit: cover; + background: var(--surface); border: 1px solid var(--border); - transition: opacity 0.1s; + transition: transform 0.3s ease, opacity 0.3s ease; + display: block; } -.catalog-thumb:hover { - opacity: 0.8; +.image-container:hover, .catalog-thumb:hover { + transform: scale(1.02); + opacity: 0.9; } .no-image { - width: 180px; - height: 240px; - background-color: var(--surface); - border: 1px solid var(--border); + width: 100%; + aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; - color: var(--text-muted); - font-size: 13px; + color: #525252; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.1em; + background: var(--surface); + border: 1px solid var(--border); } .catalog-title { - font-weight: bold; - font-size: 13px; - margin-top: 6px; - word-wrap: break-word; + font-weight: 500; + font-size: 14px; + margin: 0; line-height: 1.4; color: var(--text); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } footer { text-align: center; - font-size: 13px; + font-size: 12px; color: var(--text-muted); - margin-top: 48px; + margin-top: 64px; + padding: 32px; + border-top: 1px solid var(--border); } /* HTMX states */ @@ -159,162 +204,180 @@ footer { /* Anime Details Page */ .details-container { - padding: 16px; + display: grid; + grid-template-columns: 300px 1fr; + gap: 48px; + align-items: start; } .details-header { - border-bottom: 1px solid var(--border); - padding-bottom: 16px; - margin-bottom: 24px; + grid-column: 1 / -1; + margin-bottom: 16px; + border: none; } .details-header h2 { - font-size: 28px; + font-size: 32px; + font-weight: 600; + letter-spacing: -0.02em; margin: 0 0 8px 0; - color: var(--text); } .details-subtitle { - font-size: 16px; + font-size: 15px; color: var(--text-muted); } -.details-body { - display: flex; - gap: 32px; - align-items: flex-start; -} - .details-sidebar { - width: 250px; - flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 24px; + width: 100%; } .details-image { width: 100%; height: auto; border: 1px solid var(--border); - margin-bottom: 16px; + display: block; } .stats-table { width: 100%; border-collapse: collapse; - font-size: 14px; - background-color: var(--surface); + font-size: 13px; border: 1px solid var(--border); } .stats-table td { - border: 1px solid var(--border); - padding: 6px 8px; - text-align: left; - vertical-align: top; + border-bottom: 1px solid var(--border); + padding: 10px 12px; + border-right: none; + border-left: none; +} + +.stats-table tr:last-child td { + border-bottom: none; } .stats-table .stat-label { - font-weight: bold; color: var(--text-muted); - background-color: var(--bg); - width: 80px; + width: 100px; + font-weight: 500; + background: transparent; } .stat-sub { - color: var(--text-muted); + color: #525252; font-size: 12px; + display: block; + margin-top: 2px; } .details-main { - flex: 1; + display: flex; + flex-direction: column; + gap: 32px; } .details-main h3 { - font-size: 20px; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-muted); margin: 0 0 16px 0; - color: var(--text); + font-weight: 600; border-bottom: 1px solid var(--border); - padding-bottom: 4px; - display: inline-block; + padding-bottom: 8px; + display: block; } .details-synopsis { - font-size: 17px; - line-height: 1.7; + font-size: 15px; + line-height: 1.8; + color: var(--text); white-space: pre-wrap; } -.relations-container { - margin-top: 32px; -} - -.relations-list { - margin-top: 32px; - padding-top: 16px; -} - .relations-list ul { list-style-type: none; padding: 0; margin: 0; + display: flex; + flex-direction: column; + gap: 12px; } .relations-list li { - margin-bottom: 8px; - font-size: 15px; + font-size: 14px; + display: flex; + gap: 8px; + align-items: baseline; +} + +.relations-list strong { + color: var(--text-muted); + font-weight: 500; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.05em; + min-width: 80px; +} + +/* Forms & Selects */ +select, input[type="text"], input[type="password"], input[type="email"] { + background: var(--surface); + border: 1px solid var(--border); + color: var(--text); + padding: 8px 12px; + font-size: 13px; + font-family: inherit; + border-radius: 0; + transition: all 0.2s ease; +} + +select:focus, input:focus { + outline: none; + border-color: var(--text-muted); + background: var(--bg); +} + +button { + border-radius: 0; } /* Responsive adjustments */ -@media (max-width: 600px) { - body { - padding: 8px; +@media (max-width: 768px) { + header { + padding: 16px; } - - .catalog-grid { - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - gap: 8px; - padding: 0 4px; - } - - .catalog-item, .catalog-thumb, .no-image { - width: 120px; - } - - .catalog-thumb, .no-image { - max-height: 170px; - } - - .search-form { + + .header-top { flex-direction: column; + align-items: flex-start; + gap: 16px; + } + + form[action="/"] { width: 100%; } .search-input { width: 100%; - box-sizing: border-box; + flex: 1; } - .search-button { - width: 100%; + main { + padding: 16px; } - .details-body { - flex-direction: column; - gap: 16px; + .details-container { + grid-template-columns: 1fr; + gap: 32px; } - .details-sidebar { - width: 100%; - margin: 0 auto; - } - - .details-main { - width: 100%; - } - - .nav { - font-size: 14px; - gap: 8px; - display: flex; - justify-content: center; + .catalog-grid { + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 24px 16px; } } \ No newline at end of file