From f77fcbddc95b7b30360ab163000a98121c232bc8 Mon Sep 17 00:00:00 2001 From: "viet-anh.n" Date: Wed, 8 Jul 2026 06:29:14 +0000 Subject: [PATCH] [TSC-4] Implement responsive CSS layout and styling - Add styles.css with mobile-first responsive design (Flexbox/Grid) - Three breakpoints: mobile (320px+), tablet (768px+), desktop (1024px+) - All interactive elements meet 44x44px minimum touch target size - WCAG AA color contrast: text #1a1a1a on white (~17:1), buttons #fff on #1565c0 (~5.85:1), error #c62828 on white (~5.6:1) - Clear visual hierarchy: h1 > h2 > body text, prominent result area, red error styling - Link styles.css from index.html - Update CLAUDE.md project structure to include styles.css --- CLAUDE.md | 1 + index.html | 1 + styles.css | 266 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 268 insertions(+) create mode 100644 styles.css diff --git a/CLAUDE.md b/CLAUDE.md index eb6b9ae..15f587d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -7,6 +7,7 @@ Greenfield project. Implementation is driven by the Vexa AI-SDLC pipeline (Jira ``` / ├── index.html # Calculator UI (semantic HTML5) +├── styles.css # Responsive CSS layout and styling ├── README.md # Project overview └── CLAUDE.md # This file ``` diff --git a/index.html b/index.html index a8df71a..ccb86de 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Simple Calculator +
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..205cd58 --- /dev/null +++ b/styles.css @@ -0,0 +1,266 @@ +/* ===== Reset & Base ===== */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + color: #1a1a1a; + background-color: #f0f2f5; + min-height: 100vh; + display: flex; + align-items: flex-start; + justify-content: center; + padding: 1rem; +} + +/* ===== Main container ===== */ +main { + background: #ffffff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); + padding: 1.5rem; + width: 100%; + max-width: 480px; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +/* ===== Typography hierarchy ===== */ +h1 { + font-size: 1.75rem; + font-weight: 700; + color: #1a1a1a; + text-align: center; +} + +h2 { + font-size: 1.125rem; + font-weight: 600; + color: #1a1a1a; + margin-bottom: 0.5rem; +} + +/* ===== Form ===== */ +#calculator-form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +fieldset { + border: 1px solid #d0d0d0; + border-radius: 6px; + padding: 1rem; +} + +legend { + font-size: 0.9375rem; + font-weight: 600; + color: #1a1a1a; + padding: 0 0.5rem; +} + +fieldset > div + div { + margin-top: 1rem; +} + +/* ===== Labels & Inputs ===== */ +label { + display: block; + font-size: 0.9375rem; + font-weight: 500; + color: #1a1a1a; + margin-bottom: 0.375rem; +} + +input[type="number"] { + display: block; + width: 100%; + min-height: 44px; + padding: 0.625rem 0.75rem; + border: 2px solid #767676; + border-radius: 4px; + font-size: 1rem; + color: #1a1a1a; + background: #ffffff; + -moz-appearance: textfield; + appearance: textfield; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; +} + +input[type="number"]:focus { + outline: 3px solid #1565c0; + outline-offset: 1px; + border-color: #1565c0; +} + +/* ===== Operation buttons ===== */ +[role="group"] { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5rem; +} + +button[name="operation"] { + min-height: 44px; + min-width: 44px; + padding: 0.625rem 0.5rem; + border: 2px solid #767676; + border-radius: 4px; + background: #f5f5f5; + color: #1a1a1a; + font-size: 0.9375rem; + font-weight: 500; + cursor: pointer; + transition: background-color 0.15s, border-color 0.15s, color 0.15s; +} + +button[name="operation"]:hover { + background: #e0e0e0; + border-color: #1565c0; +} + +button[name="operation"][aria-pressed="true"] { + background: #1565c0; + border-color: #1565c0; + color: #ffffff; +} + +button[name="operation"]:focus-visible { + outline: 3px solid #1565c0; + outline-offset: 2px; +} + +/* ===== Action buttons (Calculate / Clear) ===== */ +#calculator-form > div { + display: flex; + gap: 0.75rem; +} + +#calculate-btn, +#clear-btn { + flex: 1; + min-height: 44px; + min-width: 44px; + padding: 0.625rem 1rem; + border: 2px solid transparent; + border-radius: 4px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.15s; +} + +#calculate-btn { + background: #1565c0; + color: #ffffff; +} + +#calculate-btn:hover { + background: #0d47a1; +} + +#clear-btn { + background: #f5f5f5; + color: #1a1a1a; + border-color: #767676; +} + +#clear-btn:hover { + background: #e0e0e0; +} + +#calculate-btn:focus-visible, +#clear-btn:focus-visible { + outline: 3px solid #1565c0; + outline-offset: 2px; +} + +/* ===== Result section ===== */ +section:first-of-type { + border: 1px solid #d0d0d0; + border-radius: 6px; + padding: 1rem; + background: #f8f9fa; +} + +#result { + display: block; + font-size: 1.5rem; + font-weight: 700; + color: #1a1a1a; + min-height: 2rem; +} + +/* ===== Error section ===== */ +#error-message { + font-size: 0.9375rem; + font-weight: 500; + color: #c62828; + min-height: 1.25rem; +} + +/* ===== Tablet (768px+) ===== */ +@media (min-width: 768px) { + body { + padding: 2rem; + align-items: center; + } + + main { + padding: 2rem; + gap: 2rem; + } + + h1 { + font-size: 2rem; + } + + fieldset > div { + display: flex; + align-items: center; + gap: 1rem; + } + + fieldset > div + div { + margin-top: 0.75rem; + } + + fieldset > div label { + flex: 0 0 140px; + margin-bottom: 0; + } + + fieldset > div input { + flex: 1; + } + + [role="group"] { + grid-template-columns: repeat(4, 1fr); + } +} + +/* ===== Desktop (1024px+) ===== */ +@media (min-width: 1024px) { + main { + max-width: 560px; + } + + h1 { + font-size: 2.25rem; + } + + #result { + font-size: 1.75rem; + } +}