Commit 09b114cdd1d3e593fdde24cfc682313f348b84a5
Simplify line widths
It's not essential that the thinner and thicker lines are distinct at small font sizes, because the distinction is only essential for hover, so the pointer's position should be clear enough.Grey Nicholson committed on 5/11/2022, 11:34:53 PM
Parent: 79af93866bf1186fe0a4ef8fb51c85d4eafc6628
Files changed
| static/style/tarazed.css | changed |
| static/style/tarazed.css | ||
|---|---|---|
| @@ -188,23 +188,24 @@ | ||
| 188 | 188 … | |
| 189 | 189 … | a { |
| 190 | 190 … | text-decoration: none; |
| 191 | 191 … | color: var(--primary-color); |
| 192 … | + outline-offset: 0.0625rem; | |
| 192 | 193 … | } |
| 193 | 194 … | |
| 194 | 195 … | a, |
| 195 | 196 … | nav a strong { |
| 196 | 197 … | text-decoration: underline; |
| 197 | - text-decoration-thickness: max(1px, 0.0625rem); | |
| 198 … | + text-decoration-thickness: 0.0625rem; | |
| 198 | 199 … | } |
| 199 | 200 … | |
| 200 | 201 … | a:hover, |
| 201 | 202 … | nav a:hover strong { |
| 202 | - text-decoration-thickness: max(2px, 0.125rem); | |
| 203 … | + text-decoration-thickness: 0.125rem; | |
| 203 | 204 … | } |
| 204 | 205 … | |
| 205 | 206 … | a:focus { |
| 206 | - outline: max(2px, 0.125rem) solid; | |
| 207 … | + outline: 0.125rem solid; | |
| 207 | 208 … | } |
| 208 | 209 … | |
| 209 | 210 … | a:active { |
| 210 | 211 … | color: var(--foreground-color); |
| @@ -226,10 +227,10 @@ | ||
| 226 | 227 … | margin-bottom: 1.5rem; |
| 227 | 228 … | max-width: min(30rem, 67.5vw); |
| 228 | 229 … | margin-left: auto; |
| 229 | 230 … | margin-right: auto; |
| 230 | - border-left: max(2px, 0.125rem) solid var(--foreground-color); | |
| 231 | - padding-left: calc(1rem - max(2px, 0.125rem)); | |
| 231 … | + border-left: 0.125rem solid var(--foreground-color); | |
| 232 … | + padding-left: 0.875rem; | |
| 232 | 233 … | } |
| 233 | 234 … | |
| 234 | 235 … | figure { |
| 235 | 236 … | margin-top: 1.5rem; |
| @@ -310,14 +311,14 @@ | ||
| 310 | 311 … | margin-right: auto; |
| 311 | 312 … | } |
| 312 | 313 … | a img, |
| 313 | 314 … | a object { |
| 314 | - outline: max(1px, 0.0625rem) solid; | |
| 315 | - outline-offset: max(2px, 0.125rem); | |
| 315 … | + outline: 0.0625rem solid; | |
| 316 … | + outline-offset: 0.125rem; | |
| 316 | 317 … | } |
| 317 | 318 … | a:hover img, |
| 318 | 319 … | a:hover object { |
| 319 | - outline: max(2px, 0.125rem) solid; | |
| 320 … | + outline-width: 0.125rem; | |
| 320 | 321 … | } |
| 321 | 322 … | |
| 322 | 323 … | nav { |
| 323 | 324 … | margin-top: 1.5rem; |
| @@ -358,16 +359,14 @@ | ||
| 358 | 359 … | nav a, |
| 359 | 360 … | nav a > *, |
| 360 | 361 … | nav a > * > * { |
| 361 | 362 … | display: block; |
| 362 | - outline-offset: max(2px, 0.125rem); | |
| 363 | 363 … | } |
| 364 | 364 … | nav a * { |
| 365 | 365 … | width: max-content; |
| 366 | 366 … | } |
| 367 | 367 … | nav.menu li a { |
| 368 | 368 … | display: inline; |
| 369 | - outline-offset: 0; | |
| 370 | 369 … | } |
| 371 | 370 … | nav > a, |
| 372 | 371 … | nav > a:hover, |
| 373 | 372 … | nav:not(.menu) a, |
Built with git-ssb-web