From 2aed9f5c8ae6d806da821c4bd0dd6dfdb7e53ef8 Mon Sep 17 00:00:00 2001 From: Sergey Vanyushkin Date: Sat, 2 May 2026 15:03:20 +0300 Subject: [PATCH] refactor(ui): improve UI/UX design and spacing - Increase card padding and gaps for better visual hierarchy - Add hover lift effect to cards with smooth transitions - Improve typography with larger headings and better line-height - Darken meta text colors for better readability - Add checkbox styling with accent color - Make tags interactive with hover effects - Add mobile responsive styles for forms and footer - Replace Unicode arrows with SVG icons - Improve focus styles for accessibility - Increase badge padding and font-weight - Add subtle shadow to cards by default --- app/presentation/templates/pages/index.html | 7 +- .../templates/pages/post_detail.html | 5 +- .../templates/partials/header.html | 10 +-- static/css/base.css | 10 ++- static/css/components.css | 37 ++++++--- static/css/layout.css | 80 +++++++++++++++++-- 6 files changed, 123 insertions(+), 26 deletions(-) diff --git a/app/presentation/templates/pages/index.html b/app/presentation/templates/pages/index.html index b66ecf6..d57f0d3 100644 --- a/app/presentation/templates/pages/index.html +++ b/app/presentation/templates/pages/index.html @@ -50,7 +50,12 @@ {{ tag }} {% endfor %} - Read more + + Read more + + + + {% endfor %} diff --git a/app/presentation/templates/pages/post_detail.html b/app/presentation/templates/pages/post_detail.html index 0572500..0f8d942 100644 --- a/app/presentation/templates/pages/post_detail.html +++ b/app/presentation/templates/pages/post_detail.html @@ -39,7 +39,10 @@
- ← Back to posts + + + + Back to posts
diff --git a/app/presentation/templates/partials/header.html b/app/presentation/templates/partials/header.html index bc8d572..31ba50d 100644 --- a/app/presentation/templates/partials/header.html +++ b/app/presentation/templates/partials/header.html @@ -15,15 +15,15 @@ type="button" class="theme-toggle" data-testid="theme-toggle" - aria-label="Toggle theme" - title="Toggle theme" + aria-label="Toggle dark mode" + title="Toggle dark mode" > - - + + - + diff --git a/static/css/base.css b/static/css/base.css index 7f30f73..a333116 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -102,7 +102,15 @@ pre code { /* Focus styles */ :focus-visible { outline: 2px solid var(--color-primary); - outline-offset: 2px; + outline-offset: 3px; +} + +/* Enhanced link focus for accessibility */ +a:focus-visible, +.btn:focus-visible, +.nav-link:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 4px; } /* Scrollbar */ diff --git a/static/css/components.css b/static/css/components.css index 01f3adc..d921970 100644 --- a/static/css/components.css +++ b/static/css/components.css @@ -104,13 +104,14 @@ .card { background-color: var(--color-box-body); border: 1px solid var(--color-border); - border-radius: 6px; + border-radius: 8px; overflow: hidden; - transition: box-shadow 0.2s ease; + box-shadow: 0 1px 3px var(--color-shadow); + transition: all 0.2s ease; } .card:hover { - box-shadow: 0 2px 8px var(--color-shadow); + box-shadow: 0 4px 12px var(--color-shadow); } .card-header { @@ -121,7 +122,7 @@ } .card-body { - padding: 1.25rem; + padding: 1.5rem 2rem; } .card-footer { @@ -254,13 +255,14 @@ .badge { display: inline-flex; align-items: center; - padding: 0.125rem 0.5rem; + padding: 0.25rem 0.75rem; font-size: 0.75rem; - font-weight: 500; + font-weight: 600; line-height: 1.5; border-radius: 9999px; background-color: var(--color-label-bg); color: var(--color-label-text); + white-space: nowrap; } .badge-primary { @@ -288,16 +290,31 @@ display: inline-flex; align-items: center; gap: 0.25rem; - padding: 0.125rem 0.5rem; - font-size: 0.75rem; + padding: 0.25rem 0.75rem; + font-size: 0.8125rem; + font-weight: 500; background-color: var(--color-secondary-light-3); border: 1px solid var(--color-border); - border-radius: 4px; + border-radius: 6px; color: var(--color-text-light); + cursor: pointer; + transition: all 0.2s ease; } .tag:hover { - background-color: var(--color-hover); + background-color: var(--color-primary-alpha-10); + border-color: var(--color-primary); + color: var(--color-primary); +} + +/* Checkbox styling */ +input[type="checkbox"] { + width: 1.25rem; + height: 1.25rem; + margin-right: 0.5rem; + accent-color: var(--color-primary); + cursor: pointer; + vertical-align: middle; } /* Avatar */ diff --git a/static/css/layout.css b/static/css/layout.css index 96ae99c..1cb59e6 100644 --- a/static/css/layout.css +++ b/static/css/layout.css @@ -228,14 +228,20 @@ .post-list { display: flex; flex-direction: column; - gap: 1.5rem; + gap: 2rem; } /* Post card specific */ .post-card { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.25rem; + padding: 1.5rem; + transition: all 0.2s ease; +} + +.post-card:hover { + transform: translateY(-2px); } .post-card-header { @@ -247,7 +253,8 @@ .post-card-title { margin-bottom: 0; - font-size: 1.25rem; + font-size: 1.5rem; + line-height: 1.3; } .post-card-title a { @@ -263,7 +270,8 @@ align-items: center; gap: 1rem; font-size: 0.875rem; - color: var(--color-text-light-2); + color: var(--color-text-light-1); + margin-bottom: 0.75rem; } .post-card-meta-item { @@ -273,8 +281,9 @@ } .post-card-content { - color: var(--color-text-light); - line-height: 1.6; + color: var(--color-text-light-1); + line-height: 1.7; + font-size: 1rem; } .post-card-footer { @@ -423,15 +432,70 @@ @media (max-width: 768px) { .site-header .container { height: 3.5rem; + padding: 0 1.25rem; } - + .main-nav { display: none; } - + .mobile-menu-btn { display: flex; } + + /* Form actions mobile */ + .form-actions { + flex-direction: column-reverse; + gap: 1rem; + } + + .form-actions .btn { + width: 100%; + } + + /* Footer mobile */ + .site-footer .container { + flex-direction: column; + text-align: center; + gap: 1.5rem; + padding: 2rem 1rem; + } + + .footer-links { + flex-wrap: wrap; + justify-content: center; + } + + /* Post card mobile */ + .post-card { + padding: 1.25rem; + } + + .post-card-title { + font-size: 1.25rem; + } + + .post-card-header { + flex-direction: column; + gap: 0.75rem; + } + + .post-card-footer { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + /* Page header mobile */ + .page-header-flex { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .page-title { + font-size: 1.75rem; + } } @media (min-width: 769px) {