earthjasonlin/mailova
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): optimize landing page and showcase for mobile (hamburger nav, 2-col grid, compact lightbox)

Browse Source
This commit is contained in:
earthjasonlin
2026-07-18 09:41:42 +08:00
parent 64dfa71bd0
commit ae1a23143e
3 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/style.css
+31 -9
View File
@@ -302,26 +302,48 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
.detail-grid { grid-template-columns: 1fr; }
.card-grid { grid-template-columns: 1fr; }
.postcard-row-info { flex-wrap: wrap; gap: .35rem; }
.navbar { padding: .5rem 1rem; }
.nav-links { gap: .75rem; }
.nav-links a { font-size: .8rem; }
.container { margin: 1rem auto; padding: 0 1rem; }
/* Navbar */
.navbar { padding: .5rem .75rem; }
.nav-brand { font-size: .9rem; }
.nav-links { gap: .5rem; }
.nav-links a { font-size: .78rem; }
.nav-links .btn-sm { padding: .3rem .6rem; font-size: .75rem; }
.container { margin: 1rem auto; padding: 0 .75rem; }
/* Dashboard */
.dash-stats { display: grid; grid-template-columns: 1fr 1fr; }
.dash-stat-card { min-width: 0; }
.dash-sections { grid-template-columns: 1fr; }
.recent-meta > span:nth-child(-n+2) { display: none; }
.recent-meta .recent-time { display: inline; }
.recent-item { gap: .5rem; padding: .5rem; }
.section-header { flex-direction: column; gap: .75rem; }
/* Section header */
.section-header { flex-direction: column; gap: .5rem; text-align: center; }
.section-header .btn { width: auto; }
/* Detail */
.detail-title-row h1 { font-size: 1.2rem; }
.btn-back { padding: .25rem .5rem; font-size: .85rem; }
/* Profiles */
.profile-grid { grid-template-columns: 1fr; }
.profile-card-stats { gap: .75rem; flex-wrap: wrap; }
.showcase-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.showcase-card-meta { flex-wrap: wrap; }
.detail-title-row h1 { font-size: 1.2rem; }
.btn-back { padding: .25rem .5rem; font-size: .85rem; }
/* Showcase / Landing grid — 2 columns on mobile */
.showcase-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.showcase-card-body { padding: .5rem; }
.showcase-card-meta { font-size: .72rem; flex-wrap: wrap; gap: .25rem; }
/* Lightbox — tighter on mobile */
.lightbox-content { max-width: 95vw; }
.lightbox-content img { max-width: 95vw; max-height: 75vh; }
.lightbox-prev, .lightbox-next { font-size: 1.4rem; padding: .4rem .6rem; }
.lightbox-prev { left: .5rem; }
.lightbox-next { right: .5rem; }
.lightbox-close { top: .5rem; right: .75rem; font-size: 1.6rem; }
}
/* Admin invite form */