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