melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: apply neo-brutalist ux principles and styling

Browse Source
This commit is contained in:
mkelvers
2026-04-09 12:52:50 +02:00
parent 944f981fbe
commit 3f1b5e1d0a
1 changed files with 35 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
static/css/style.css
View File

@@ -103,7 +103,7 @@ header {
.header-top {
display: flex;
align-items: center;
gap: var(--space-xl);
gap: var(--space-2xl);
max-width: 1400px;
margin: 0 auto;
}
@@ -111,7 +111,7 @@ header {
.header-left {
display: flex;
align-items: center;
gap: var(--space-xl);
gap: var(--space-2xl);
}
.logo {
@@ -133,14 +133,15 @@ header {
.nav {
display: flex;
gap: var(--space-lg);
gap: var(--space-xl);
}
.nav a {
font-size: var(--text-md);
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s ease;
font-weight: 500;
transition: color 0.1s ease;
}
.nav a:hover {
@@ -351,6 +352,16 @@ a:visited {
object-fit: cover;
background: var(--surface);
transition: opacity 0.2s ease;
animation: pulse-bg 2s ease-in-out infinite;
}
@keyframes pulse-bg {
0%, 100% {
background-color: var(--surface);
}
50% {
background-color: var(--surface-hover);
}
}
.catalog-item:hover .catalog-thumb,
@@ -523,20 +534,20 @@ a.htmx-request {
}
.login-button {
padding: var(--space-sm);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
padding: var(--space-md);
background: var(--text);
color: var(--bg);
border: none;
font-size: var(--text-md);
font-weight: 500;
font-weight: 600;
cursor: pointer;
margin-top: var(--space-xs);
font-family: inherit;
transition: opacity 0.15s;
}
.login-button:hover {
background: var(--surface-hover);
border-color: var(--link);
opacity: 0.8;
}
/* Watchlist */
@@ -725,7 +736,7 @@ a.htmx-request {
/* Anime Page */
.anime-page {
display: flex;
gap: var(--space-xl);
gap: var(--space-2xl);
max-width: 1200px;
}
@@ -736,8 +747,8 @@ a.htmx-request {
.anime-hero {
display: flex;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
gap: var(--space-xl);
margin-bottom: var(--space-2xl);
}
.anime-poster {
@@ -807,7 +818,8 @@ a.htmx-request {
.anime-synopsis p {
font-size: var(--text-md);
line-height: 1.6;
line-height: 1.8;
max-width: 65ch;
color: var(--text);
margin: 0;
}
@@ -930,23 +942,24 @@ a.htmx-request {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: var(--space-md) var(--space-lg);
background: var(--text);
border: none;
color: var(--bg);
font-size: var(--text-md);
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: opacity 0.15s;
}
.dropdown-trigger:hover {
background: var(--surface-hover);
border-color: var(--link);
opacity: 0.8;
}
.dropdown-arrow {
font-size: var(--text-xs);
color: var(--text-muted);
color: var(--bg);
}
.dropdown-menu {