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

feat: enhance styling and layout; add background image and improve UI elements

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-05-04 15:39:15 +02:00
parent 5dd9aac68d
commit bbb2ee00d6
4 changed files with 262 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Movies Diary</title> <title>Movies Diary</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
</head> </head>
<body> <body>

2
crates/adapters/template-askama/templates/diary.html
View File

@@ -23,7 +23,7 @@
<div class="watched-at">{{ entry.review().watched_at().format("%Y-%m-%d") }}</div> <div class="watched-at">{{ entry.review().watched_at().format("%Y-%m-%d") }}</div>
{% if let Some(uid) = ctx.user_id %} {% if let Some(uid) = ctx.user_id %}
{% if *uid == entry.review().user_id().value() %} {% if *uid == entry.review().user_id().value() %}
<form method="post" action="/reviews/{{ entry.review().id().value() }}/delete"> <form method="post" action="/reviews/{{ entry.review().id().value() }}/delete" class="delete-form">
<button type="submit">Delete</button> <button type="submit">Delete</button>
</form> </form>
{% endif %} {% endif %}

BIN
static/background.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

303
static/style.css
View File

@@ -1,50 +1,143 @@
*, *::before, *::after { box-sizing: border-box; } *,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.35);
--glass-shadow: 0 8px 32px oklch(85.2% 0.199 91.936 / 0.15);
--glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
--blur: blur(12px);
--aqua: oklch(85.2% 0.199 91.936);
--aqua-mid: oklch(89% 0.13 91.936);
--aqua-light: oklch(93% 0.07 91.936);
--aqua-glow: oklch(85.2% 0.199 91.936 / 0.3);
--text: #fff;
--text-muted: rgba(255, 255, 255, 0.7);
--text-light: rgba(255, 255, 255, 0.5);
}
html {
height: 100%;
}
body { body {
font-family: monospace; font-family: "Nunito", sans-serif;
max-width: 720px; max-width: 720px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
color: #222; color: var(--text);
background: #fff; background: url("/static/background.avif") center / cover no-repeat fixed;
min-height: 100%;
line-height: 1.5; line-height: 1.5;
} }
a { color: inherit; } a {
color: inherit;
}
/* Header */ /* Header */
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: center;
border-bottom: 1px solid #ccc; background: var(--glass-bg);
padding-bottom: 8px; backdrop-filter: var(--blur);
margin-bottom: 28px; -webkit-backdrop-filter: var(--blur);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 12px 20px;
margin-bottom: 24px;
box-shadow: var(--glass-shadow), var(--glass-inset);
} }
.site-title { .site-title {
font-weight: bold; font-weight: 800;
text-decoration: none;
font-size: 1.1em; font-size: 1.1em;
text-decoration: none;
color: var(--aqua);
text-shadow: 0 0 20px var(--aqua-glow);
} }
nav { nav {
display: flex; display: flex;
gap: 14px; gap: 8px;
font-size: 0.88em; align-items: center;
} }
nav a { text-decoration: none; } nav a {
nav a:hover { text-decoration: underline; } text-decoration: none;
color: var(--aqua);
font-weight: 600;
font-size: 0.85em;
padding: 4px 14px;
border-radius: 20px;
background: oklch(85.2% 0.199 91.936 / 0.08);
border: 1px solid oklch(85.2% 0.199 91.936 / 0.2);
transition:
background 0.2s,
box-shadow 0.2s;
}
.user-email { color: #666; } nav a:hover {
background: oklch(85.2% 0.199 91.936 / 0.2);
box-shadow: 0 0 12px var(--aqua-glow);
}
.user-email {
color: var(--text-muted);
font-size: 0.85em;
}
/* Diary entries */ /* Diary entries */
.diary {
display: flex;
flex-direction: column;
gap: 12px;
}
.entry { .entry {
display: flex; display: flex;
gap: 14px; gap: 16px;
padding: 14px 0; padding: 16px;
border-bottom: 1px solid #eee; background: var(--glass-bg);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: var(--glass-shadow), var(--glass-inset);
position: relative;
overflow: hidden;
transition:
box-shadow 0.2s,
transform 0.2s;
}
.entry::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.12),
transparent
);
border-radius: 16px 16px 0 0;
pointer-events: none;
}
.entry:hover {
transform: translateY(-2px);
box-shadow:
0 12px 40px var(--aqua-glow),
var(--glass-inset);
} }
.poster { .poster {
@@ -55,56 +148,89 @@ nav a:hover { text-decoration: underline; }
.poster img { .poster img {
width: 100%; width: 100%;
display: block; display: block;
border: 1px solid #ddd; border-radius: 8px;
border: 2px solid var(--aqua-mid);
box-shadow: 0 4px 12px var(--aqua-glow);
} }
.entry-body { flex: 1; } .entry-body {
flex: 1;
}
.entry-title { .entry-title {
font-weight: bold; font-weight: 700;
margin-bottom: 2px; margin-bottom: 2px;
color: var(--text);
} }
.year { color: #666; font-weight: normal; } .year {
color: var(--text-muted);
font-weight: 400;
}
.director { .director {
color: #666; color: var(--text-muted);
font-size: 0.88em; font-size: 0.88em;
margin-bottom: 2px; margin-bottom: 2px;
} }
.rating { .rating {
font-size: 0.88em; font-size: 0.88em;
font-weight: 700;
color: var(--aqua);
margin-bottom: 2px; margin-bottom: 2px;
} }
.comment { .comment {
font-style: italic; font-style: italic;
color: #444; color: var(--text-light);
font-size: 0.9em; font-size: 0.9em;
margin-bottom: 2px; margin-bottom: 2px;
} }
.watched-at { .watched-at {
font-size: 0.8em; font-size: 0.8em;
color: #888; color: var(--text-muted);
} }
.empty { color: #999; margin-top: 20px; } .empty {
color: var(--text-muted);
margin-top: 20px;
}
/* Pagination */ /* Pagination */
.pagination { .pagination {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
gap: 20px; gap: 10px;
font-size: 0.9em; font-size: 0.9em;
} }
.pagination a { text-decoration: none; } .pagination a {
.pagination a:hover { text-decoration: underline; } text-decoration: none;
color: var(--aqua);
font-weight: 600;
padding: 4px 16px;
border-radius: 20px;
background: oklch(85.2% 0.199 91.936 / 0.08);
border: 1px solid oklch(85.2% 0.199 91.936 / 0.2);
transition:
background 0.2s,
box-shadow 0.2s;
}
.pagination a:hover {
background: oklch(85.2% 0.199 91.936 / 0.2);
box-shadow: 0 0 12px var(--aqua-glow);
}
/* Forms */ /* Forms */
h1 { font-size: 1.2em; margin-bottom: 20px; } h1 {
font-size: 1.4em;
font-weight: 800;
color: var(--text);
margin-bottom: 20px;
}
form { form {
max-width: 400px; max-width: 400px;
@@ -114,6 +240,8 @@ form label {
display: block; display: block;
margin-bottom: 14px; margin-bottom: 14px;
font-size: 0.9em; font-size: 0.9em;
font-weight: 600;
color: var(--text);
} }
form input[type="text"], form input[type="text"],
@@ -124,14 +252,26 @@ form input[type="datetime-local"],
form textarea { form textarea {
display: block; display: block;
width: 100%; width: 100%;
font-family: monospace; font-family: "Nunito", sans-serif;
font-size: 1em; font-size: 1em;
margin-top: 3px; margin-top: 4px;
padding: 5px 6px; padding: 8px 12px;
border: 1px solid #bbb; border: 1px solid var(--glass-border);
border-radius: 0; border-radius: 10px;
background: #fff; background: rgba(255, 255, 255, 0.5);
color: #222; backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--text);
transition:
border-color 0.2s,
box-shadow 0.2s;
}
form input:focus,
form textarea:focus {
outline: none;
border-color: var(--aqua);
box-shadow: 0 0 0 3px oklch(85.2% 0.199 91.936 / 0.2);
} }
form textarea { form textarea {
@@ -141,27 +281,100 @@ form textarea {
form hr { form hr {
border: none; border: none;
border-top: 1px solid #eee; border-top: 1px solid rgba(255, 255, 255, 0.3);
margin: 18px 0; margin: 18px 0;
} }
form button[type="submit"] { form button[type="submit"] {
font-family: monospace; font-family: "Nunito", sans-serif;
font-size: 1em; font-size: 1em;
padding: 6px 18px; font-weight: 700;
padding: 10px 28px;
cursor: pointer; cursor: pointer;
background: #222; background: linear-gradient(
135deg,
var(--aqua-mid) 0%,
var(--aqua) 60%,
oklch(72% 0.199 91.936) 100%
);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 24px;
box-shadow:
0 4px 16px var(--aqua-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
position: relative;
overflow: hidden;
transition:
transform 0.15s,
box-shadow 0.15s;
} }
form button[type="submit"]:hover { background: #444; } form button[type="submit"]::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.28),
transparent
);
border-radius: 24px 24px 0 0;
pointer-events: none;
}
.optional { color: #888; font-size: 0.85em; } form button[type="submit"]:hover {
transform: translateY(-1px);
box-shadow:
0 6px 24px var(--aqua-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.delete-form {
display: inline;
margin-top: 6px;
}
.delete-form button[type="submit"] {
background: rgba(200, 60, 60, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: #fff;
border-radius: 16px;
padding: 3px 12px;
font-size: 0.8em;
font-weight: 600;
border: 1px solid rgba(220, 80, 80, 0.3);
box-shadow: none;
transition: background 0.2s;
}
.delete-form button[type="submit"]::after {
display: none;
}
.delete-form button[type="submit"]:hover {
background: rgba(220, 60, 60, 0.85);
transform: none;
box-shadow: none;
}
.optional {
color: var(--text-muted);
font-size: 0.85em;
font-weight: 400;
}
/* Errors */ /* Errors */
.error { .error {
color: #c00; color: #e05050;
background: rgba(220, 50, 50, 0.1);
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(220, 50, 50, 0.2);
margin-bottom: 16px; margin-bottom: 16px;
font-size: 0.9em; font-size: 0.9em;
} }