Polish UI with antialiased text, flash fade-out, and softer agenda shadow
Antialiased font smoothing produces crisper text with IBM Plex Mono.
Flash bar fades out over 300ms instead of vanishing abruptly.
Agenda week uses a subtle two-layer shadow instead of a hard border.
Ref: https://jakub.kr/writing/details-that-make-interfaces-feel-better
Assisted-by: Claude Opus 4.6 via pi
diff --git a/lib/ketchup/views/layout.rb b/lib/ketchup/views/layout.rb
index 0832a24..8b0940a 100644
--- a/lib/ketchup/views/layout.rb
+++ b/lib/ketchup/views/layout.rb
@@ -86,7 +86,10 @@ module Ketchup
var undo = bar.querySelector('.flash-undo-btn');
var close = bar.querySelector('.flash-close-btn');
var path = bar.dataset.undoPath;
- function dismiss() { bar.remove(); }
+ function dismiss() {
+ bar.classList.add('flash-bar--dismissing');
+ bar.addEventListener('transitionend', function() { bar.remove(); });
+ }
if (undo && path) {
undo.addEventListener('click', function() {
fetch(path, {method: 'DELETE'}).then(function() { location.reload(); });
diff --git a/public/css/app.css b/public/css/app.css
index b956a3e..628d704 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -24,6 +24,8 @@ body {
min-height: 100dvh;
display: flex;
flex-direction: column;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
a {
@@ -124,6 +126,11 @@ h2 { font-size: var(--step-0); font-weight: 600; }
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 20rem;
+ transition: opacity 0.3s ease-out;
+}
+
+.flash-bar--dismissing {
+ opacity: 0;
}
.flash-message {
@@ -210,9 +217,11 @@ h2 { font-size: var(--step-0); font-weight: 600; }
.agenda-week {
display: flex;
margin-block-end: var(--space-m);
- border: 1px solid var(--color-border-light);
border-radius: 6px;
overflow: hidden;
+ box-shadow:
+ 0 1px 2px rgba(0, 0, 0, 0.04),
+ 0 1px 4px rgba(0, 0, 0, 0.06);
}
.agenda-week-day {