Commit 03b5def70190c5c38cdfaab41f0899d39fff6052
Clearer focus state for links
Also, highlight image links using an offset outline instead of a border, padding and negative margin.Grey Nicholson committed on 10/6/2021, 5:55:41 PM
Parent: 6ee6c8df21be3048d5582232e3677dc6c0bff8af
Files changed
| static/style/tarazed.css | changed |
| static/style/tarazed.css | ||
|---|---|---|
| @@ -193,55 +193,32 @@ | ||
| 193 | 193 … | } |
| 194 | 194 … | |
| 195 | 195 … | :link, |
| 196 | 196 … | :visited, |
| 197 | -nav a:link strong, | |
| 198 | -nav a:visited strong { | |
| 197 … | +nav :link strong, | |
| 198 … | +nav :visited strong { | |
| 199 | 199 … | text-decoration: underline; |
| 200 | 200 … | text-decoration-thickness: max(1px, calc(1rem / 16)); |
| 201 | 201 … | text-underline-offset: calc(4rem / 16); |
| 202 | 202 … | } |
| 203 | 203 … | |
| 204 | -:link:focus, | |
| 205 | 204 … | :link:hover, |
| 206 | -:visited:focus, | |
| 207 | 205 … | :visited:hover, |
| 208 | -nav a:link:focus strong, | |
| 209 | -nav a:link:hover strong, | |
| 210 | -nav a:visited:focus strong, | |
| 211 | -nav a:visited:hover strong { | |
| 206 … | +nav :link:hover strong, | |
| 207 … | +nav :visited:hover strong { | |
| 212 | 208 … | text-decoration-thickness: max(2px, calc(2rem / 16)); |
| 213 | - outline: 0; | |
| 214 | 209 … | } |
| 215 | 210 … | |
| 211 … | +:link:focus, | |
| 212 … | +:visited:focus { | |
| 213 … | + outline: max(2px, calc(2rem / 16)) solid; | |
| 214 … | +} | |
| 215 … | + | |
| 216 | 216 … | :link:active, |
| 217 | 217 … | :visited:active { |
| 218 | 218 … | color: var(--foreground-color); |
| 219 | 219 … | } |
| 220 | 220 … | |
| 221 | -nav a, | |
| 222 | -nav a > *, | |
| 223 | -nav a > * > * { | |
| 224 | - display: block; | |
| 225 | -} | |
| 226 | -nav a * { | |
| 227 | - width: max-content; | |
| 228 | -} | |
| 229 | -nav > a:link, | |
| 230 | -nav > a:link:focus, | |
| 231 | -nav > a:link:hover, | |
| 232 | -nav > a:visited, | |
| 233 | -nav > a:visited:focus, | |
| 234 | -nav > a:visited:hover, | |
| 235 | -nav:not(.menu) a:link, | |
| 236 | -nav:not(.menu) a:link:focus, | |
| 237 | -nav:not(.menu) a:link:hover, | |
| 238 | -nav:not(.menu) a:visited, | |
| 239 | -nav:not(.menu) a:visited:focus, | |
| 240 | -nav:not(.menu) a:visited:hover { | |
| 241 | - text-decoration: none; | |
| 242 | -} | |
| 243 | - | |
| 244 | 221 … | address { |
| 245 | 222 … | font-style: normal; |
| 246 | 223 … | } |
| 247 | 224 … | |
| @@ -341,17 +318,14 @@ | ||
| 341 | 318 … | margin-right: auto; |
| 342 | 319 … | } |
| 343 | 320 … | a img, |
| 344 | 321 … | a object { |
| 345 | - padding: calc(0.25rem - max(1px, calc(1rem / 16))); | |
| 346 | - border: max(1px, calc(1rem / 16)) solid; | |
| 322 … | + outline: max(1px, calc(1rem / 16)) solid; | |
| 323 … | + outline-offset: max(2px, calc(2rem / 16)); | |
| 347 | 324 … | } |
| 348 | -a img:focus, | |
| 349 | 325 … | a img:hover, |
| 350 | -a object:focus, | |
| 351 | 326 … | a object:hover { |
| 352 | - padding: calc(0.25rem - max(2px, calc(2rem / 16))); | |
| 353 | - border: max(2px, calc(2rem / 16)) solid; | |
| 327 … | + outline: max(2px, calc(2rem / 16)) solid; | |
| 354 | 328 … | } |
| 355 | 329 … | |
| 356 | 330 … | nav { |
| 357 | 331 … | margin-top: 1.5rem; |
| @@ -388,11 +362,31 @@ | ||
| 388 | 362 … | display: inline-block; |
| 389 | 363 … | margin: 0; |
| 390 | 364 … | margin-right: 1.5rem; |
| 391 | 365 … | } |
| 366 … | +nav a, | |
| 367 … | +nav a > *, | |
| 368 … | +nav a > * > * { | |
| 369 … | + display: block; | |
| 370 … | + outline-offset: max(2px, calc(2rem / 16)); | |
| 371 … | +} | |
| 372 … | +nav a * { | |
| 373 … | + width: max-content; | |
| 374 … | +} | |
| 392 | 375 … | nav.menu li a { |
| 393 | - display: inline-block; | |
| 376 … | + display: inline; | |
| 377 … | + outline-offset: 0; | |
| 394 | 378 … | } |
| 379 … | +nav > :link, | |
| 380 … | +nav > :link:hover, | |
| 381 … | +nav > :visited, | |
| 382 … | +nav > :visited:hover, | |
| 383 … | +nav:not(.menu) :link, | |
| 384 … | +nav:not(.menu) :link:hover, | |
| 385 … | +nav:not(.menu) :visited, | |
| 386 … | +nav:not(.menu) :visited:hover { | |
| 387 … | + text-decoration: none; | |
| 388 … | +} | |
| 395 | 389 … | |
| 396 | 390 … | ol, |
| 397 | 391 … | ul { |
| 398 | 392 … | margin-top: 1.5rem; |
Built with git-ssb-web