Skip to content

Commit e244e2c

Browse files
authored
fix(ui): unify download button style with project baseline (#4)
The `Download as Markdown` / `Download as ZIP` buttons introduced in #1 used a Material-style filled look (saturated blue/green + white text) that clashed with the project's Neo-Brutalism language (thick black border, light background, black text, offset black shadow, yellow `:active`). The white `color` also made `box-shadow: 0.1em 0.1em currentColor` render as an invisible white shadow on the white page. Make the two download buttons inherit the baseline `button{}` rules and only override `background` for light-tinted semantic hints: - `--md` → `#cfe8ff` (light blue, black text, contrast ≈17:1) - `--zip` → `#c8f7da` (light green, black text, contrast ≈18:1) Border color, text color, offset shadow, and `:active` yellow now come from the baseline, so the three buttons (`Go back` + two downloads) share the same visual grammar. Net -14 lines of CSS; no JS or markup changes; `index.js` is byte-identical to main. Made-with: Cursor
1 parent 140d755 commit e244e2c

1 file changed

Lines changed: 4 additions & 18 deletions

File tree

style.css

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -195,30 +195,16 @@ h1 + p {
195195
}
196196

197197
.download-button--md {
198-
background: #0a84ff;
199-
color: #fff;
200-
border-color: #0060c7;
201-
}
202-
203-
.download-button--md:active {
204-
background: #0060c7;
198+
background: #cfe8ff;
205199
}
206200

207201
.download-button--zip {
208-
background: #00c853;
209-
color: #fff;
210-
border-color: #00a043;
211-
}
212-
213-
.download-button--zip:active {
214-
background: #00a043;
202+
background: #c8f7da;
215203
}
216204

217205
.download-button[disabled] {
218-
background: #ccc;
219-
color: #777;
220-
border-color: #999;
221-
cursor: not-allowed;
206+
background: #e8e8e8;
207+
color: #999;
222208
}
223209

224210
@media (max-width: 60ch) {

0 commit comments

Comments
 (0)