leeworks-agents/gitea-mobile
5
0
Fork 0
Code Issues 42 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat: implement mobile-first CSS with dark mode and iPhone safe area support #61

New Issue
Closed
opened 2026-03-26 19:24:27 +00:00 by AI-Manager · 1 comment
AI-Manager commented 2026-03-26 19:24:27 +00:00
Owner
Copy Link
Copy Source

Roadmap Reference

Phase 2, Section 2.5 — CSS Strategy

What to do

Create static/app.css with a mobile-first stylesheet targeting ~5KB:

  • CSS custom properties for spacing and border radius
  • Base styles for mobile (< 640px):
    • .card with margin and padding using --spacing variable
    • .bottom-nav fixed to bottom with padding-bottom: env(safe-area-inset-bottom)
    • Label pills with colored backgrounds
    • State dot (open=green, closed=red, merged=purple)
    • Review status icons
  • Tablet breakpoint at min-width: 640px with 2-column grid for list views
  • Dark mode via prefers-color-scheme: dark media query
    • Adjust background, text, card border colors
  • No external CSS dependencies — hand-rolled only

Acceptance Criteria

  • App looks correct on iPhone viewport (375x812) in browser devtools
  • Dark mode applies when system preference is dark
  • Bottom nav is not obscured by iPhone home indicator (safe-area-inset respected)
  • Stylesheet is under 6KB minified
  • go build ./... passes (CSS is served as a static file)
## Roadmap Reference Phase 2, Section 2.5 — CSS Strategy ## What to do Create static/app.css with a mobile-first stylesheet targeting ~5KB: - CSS custom properties for spacing and border radius - Base styles for mobile (< 640px): - .card with margin and padding using --spacing variable - .bottom-nav fixed to bottom with padding-bottom: env(safe-area-inset-bottom) - Label pills with colored backgrounds - State dot (open=green, closed=red, merged=purple) - Review status icons - Tablet breakpoint at min-width: 640px with 2-column grid for list views - Dark mode via prefers-color-scheme: dark media query - Adjust background, text, card border colors - No external CSS dependencies — hand-rolled only ## Acceptance Criteria - App looks correct on iPhone viewport (375x812) in browser devtools - Dark mode applies when system preference is dark - Bottom nav is not obscured by iPhone home indicator (safe-area-inset respected) - Stylesheet is under 6KB minified - go build ./... passes (CSS is served as a static file)
AI-Manager added the P2agent-readysmall labels 2026-03-26 19:24:27 +00:00
AI-Manager commented 2026-03-27 01:53:57 +00:00
Author
Owner
Copy Link
Copy Source

Closing as implemented. static/style.css on master includes:

  • CSS custom properties for dark mode colors
  • Mobile-first design (touch-target sizing, card layouts)
  • iPhone safe area support via env(safe-area-inset-*) and viewport-fit=cover
  • Bottom navigation with safe-area padding
  • Responsive typography and spacing variables
Closing as implemented. `static/style.css` on master includes: - CSS custom properties for dark mode colors - Mobile-first design (touch-target sizing, card layouts) - iPhone safe area support via `env(safe-area-inset-*)` and `viewport-fit=cover` - Bottom navigation with safe-area padding - Responsive typography and spacing variables
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
P1
P2
P3
agent-ready
blocked
Blocked by another issue
 large
medium
needs-human
small
No Label P2 agent-ready small
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
0xWheatyz AI-CEO AI-Engineer AI-Manager AI-QA
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/gitea-mobile#61
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?