GKaszewski/movies-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update color scheme to use primary variables for consistency in styling

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-05-04 17:47:00 +02:00
parent 59d308f41b
commit d034af9e9c
2 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
crates/adapters/template-askama/templates/base.html
View File

@@ -13,6 +13,7 @@
<header> <header>
<a href="/" class="site-title">Movies Diary</a> <a href="/" class="site-title">Movies Diary</a>
<nav> <nav>
<a href="/feed.rss">RSS</a>
{% if let Some(email) = ctx.user_email %} {% if let Some(email) = ctx.user_email %}
<a href="/reviews/new">Add Review</a> <a href="/reviews/new">Add Review</a>
<span class="user-email">{{ email }}</span> <span class="user-email">{{ email }}</span>

40
static/style.css
View File

@@ -11,10 +11,10 @@
--glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
--blur: blur(12px); --blur: blur(12px);
--aqua: oklch(85.2% 0.199 91.936); --primary: oklch(85.2% 0.199 91.936);
--aqua-mid: oklch(89% 0.13 91.936); --primary-mid: oklch(89% 0.13 91.936);
--aqua-light: oklch(93% 0.07 91.936); --primary-light: oklch(93% 0.07 91.936);
--aqua-glow: oklch(85.2% 0.199 91.936 / 0.3); --primary-glow: oklch(85.2% 0.199 91.936 / 0.3);
--text: #fff; --text: #fff;
--text-muted: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.7);
@@ -59,8 +59,8 @@ header {
font-weight: 800; font-weight: 800;
font-size: 1.1em; font-size: 1.1em;
text-decoration: none; text-decoration: none;
color: var(--aqua); color: var(--primary);
text-shadow: 0 0 20px var(--aqua-glow); text-shadow: 0 0 20px var(--primary-glow);
} }
nav { nav {
@@ -71,7 +71,7 @@ nav {
nav a { nav a {
text-decoration: none; text-decoration: none;
color: var(--aqua); color: var(--primary);
font-weight: 600; font-weight: 600;
font-size: 0.85em; font-size: 0.85em;
padding: 4px 14px; padding: 4px 14px;
@@ -85,7 +85,7 @@ nav a {
nav a:hover { nav a:hover {
background: oklch(85.2% 0.199 91.936 / 0.2); background: oklch(85.2% 0.199 91.936 / 0.2);
box-shadow: 0 0 12px var(--aqua-glow); box-shadow: 0 0 12px var(--primary-glow);
} }
.user-email { .user-email {
@@ -136,7 +136,7 @@ nav a:hover {
.entry:hover { .entry:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: box-shadow:
0 12px 40px var(--aqua-glow), 0 12px 40px var(--primary-glow),
var(--glass-inset); var(--glass-inset);
} }
@@ -149,8 +149,8 @@ nav a:hover {
width: 100%; width: 100%;
display: block; display: block;
border-radius: 8px; border-radius: 8px;
border: 2px solid var(--aqua-mid); border: 2px solid var(--primary-mid);
box-shadow: 0 4px 12px var(--aqua-glow); box-shadow: 0 4px 12px var(--primary-glow);
} }
.entry-body { .entry-body {
@@ -181,8 +181,8 @@ nav a:hover {
} }
.star.filled { .star.filled {
color: var(--aqua); color: var(--primary);
text-shadow: 0 0 8px var(--aqua-glow), 0 0 2px var(--aqua); text-shadow: 0 0 8px var(--primary-glow), 0 0 2px var(--primary);
} }
.star.empty { .star.empty {
@@ -216,7 +216,7 @@ nav a:hover {
.pagination a { .pagination a {
text-decoration: none; text-decoration: none;
color: var(--aqua); color: var(--primary);
font-weight: 600; font-weight: 600;
padding: 4px 16px; padding: 4px 16px;
border-radius: 20px; border-radius: 20px;
@@ -229,7 +229,7 @@ nav a:hover {
.pagination a:hover { .pagination a:hover {
background: oklch(85.2% 0.199 91.936 / 0.2); background: oklch(85.2% 0.199 91.936 / 0.2);
box-shadow: 0 0 12px var(--aqua-glow); box-shadow: 0 0 12px var(--primary-glow);
} }
/* Forms */ /* Forms */
@@ -278,7 +278,7 @@ form textarea {
form input:focus, form input:focus,
form textarea:focus { form textarea:focus {
outline: none; outline: none;
border-color: var(--aqua); border-color: var(--primary);
box-shadow: 0 0 0 3px oklch(85.2% 0.199 91.936 / 0.2); box-shadow: 0 0 0 3px oklch(85.2% 0.199 91.936 / 0.2);
} }
@@ -301,15 +301,15 @@ form button[type="submit"] {
cursor: pointer; cursor: pointer;
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
var(--aqua-mid) 0%, var(--primary-mid) 0%,
var(--aqua) 60%, var(--primary) 60%,
oklch(72% 0.199 91.936) 100% oklch(72% 0.199 91.936) 100%
); );
color: #fff; color: #fff;
border: none; border: none;
border-radius: 24px; border-radius: 24px;
box-shadow: box-shadow:
0 4px 16px var(--aqua-glow), 0 4px 16px var(--primary-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.4); inset 0 1px 0 rgba(255, 255, 255, 0.4);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -337,7 +337,7 @@ form button[type="submit"]::after {
form button[type="submit"]:hover { form button[type="submit"]:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: box-shadow:
0 6px 24px var(--aqua-glow), 0 6px 24px var(--primary-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.4); inset 0 1px 0 rgba(255, 255, 255, 0.4);
} }