├── .gitignore ├── LICENCE.txt ├── README.md ├── better-font-finder.html ├── dev ├── cap_classic.svg ├── cap_classic_inverse.svg ├── cap_none.svg ├── cap_none_inverted.svg ├── cap_other.svg ├── cap_other_inverted.svg ├── cap_round.svg ├── cap_round_inverted.svg ├── cap_slab.svg ├── cap_slab_inverse.svg ├── contrast_hybrid.svg ├── contrast_hybrid_inverted.svg ├── contrast_stressed.svg ├── contrast_stressed_inverted.svg ├── contrast_ultra.svg ├── contrast_ultra_inverted.svg ├── contrast_unstressed.svg ├── contrast_unstressed_inverted.svg ├── favorite.svg ├── icons.afphoto ├── preset_sans.svg ├── preset_sans_inverted.svg ├── preset_serif.svg ├── preset_serif_inverted.svg └── weights.svg ├── font_database.js ├── icons.js ├── index.html ├── script.js └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .DS_Store? -------------------------------------------------------------------------------- /LICENCE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 jmattthew / @mattthew 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # better-font-finder 2 | A tool to easily filter and compare Google Fonts based on their visual characteristics. 3 | 4 | ## [Try it now!](https://jmattthew.github.io/better-font-finder/better-font-finder.html) 5 | 6 | You won't need to understand any font terminology to use this tool because the fonts are categorized visually. 7 | 8 | Visual categories are more exact than terminology. For example, the terms “serif” and “sans-serif” are ambiguous because many fonts blend the visual characteristics of both. 9 | 10 | Filter the font list with the buttons at the far left. By default, the list shows one font-weight per family, but you can expand the weights for more filters. Star fonts to compare them more easily. Tap the name of any font for more information. 11 | 12 | The list includes only fonts that are freely available from Google. 13 | 14 | ### Privacy Policy effective 2017/05/28 15 | This website/tool does not collect, store, transmit, nor share any personally identifiable information. The website/tool uses a Google Analytics cookies to collect, store, and share with the developer anonymous aggregated information about all visitors (but this does not include any personally identifiable information). For example, the Google Analytics cookie allows the developer to see, in aggregate, how many people have visited, how often they visit, actions they took and demographic information. 16 | -------------------------------------------------------------------------------- /better-font-finder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Find Great Google Fonts Tool by @mattthew 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 |
60 | 61 | 62 | 63 |
64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 |
72 |
73 | 74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 | 83 |
84 |
85 | 86 |
87 |
88 | 89 | 90 | 91 |
92 |
93 | 94 |
95 |
96 | 97 | 98 | 99 |
100 |
101 | 102 |
103 |
104 | 105 | 106 | 107 |
108 |
109 | 110 |
111 |
112 | 113 | 114 | 115 |
116 |
117 | 118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 | 130 | 131 | 132 |
133 |
134 | 135 |
136 |
137 | 138 | 139 | 140 |
141 |
142 | 143 |
144 |
145 | 146 | 147 | 148 |
149 |
150 | 151 |
152 |
153 | 154 | 155 | 156 |
157 |
158 | 159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 | 172 |
173 |
174 |
175 | • 176 | • 177 | • 178 | • 179 | • 180 | • 181 | • 182 | • 183 | • 184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 | 192 | 193 | 194 | 195 | 200 | 207 | 208 | 209 | 210 | 211 | 212 |
213 |
214 |
215 |
216 |
217 | 218 | 219 | 220 | 221 | 222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 | 249 |
250 |
251 |
252 |
253 |

254 | You won't need to understand any font terminology to use this tool because the fonts are categorized visually. 255 |

256 |

257 | Visual categories are more exact than terminology. For example, the terms “serif” and “sans-serif” are ambiguous because many fonts blend the visual characteristics of both. 258 |

259 |

260 | Filter the font list with the buttons at the far left. By default, the list shows one font-weight per family, but you can expand the weights for more filters. Star fonts to compare them more easily. Tap the name of any font for more information. 261 |

262 |

263 | The list includes only fonts that are freely available from Google. 264 |

265 |

266 | This tool was created & is curated by @mattthew 267 |

268 |

269 |   270 |

271 |

272 | Privacy Policy 273 |

274 |
275 |
276 | 277 | 278 | 279 | -------------------------------------------------------------------------------- /dev/cap_classic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_classic_inverse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_none.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_none_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_other.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_other_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_round.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_round_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_slab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/cap_slab_inverse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/contrast_hybrid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/contrast_hybrid_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/contrast_stressed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/contrast_stressed_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/contrast_ultra.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/contrast_ultra_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/contrast_unstressed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/contrast_unstressed_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/favorite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/icons.afphoto: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmattthew/better-font-finder/c0034d1d77d05d53c2f25a385f583537d9c32cbc/dev/icons.afphoto -------------------------------------------------------------------------------- /dev/preset_sans.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/preset_sans_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/preset_serif.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/preset_serif_inverted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/weights.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /font_database.js: -------------------------------------------------------------------------------- 1 | // define font attributes 2 | 3 | /* 4 | 5 | TEMPLATE 6 | 7 | Notes: 8 | This list may only contain fonts avialable at Google Fonts. 9 | Every unique family must have one and only one font-weight where primary = true. 10 | The primary weight should be 400 or whatever is closest to that. 11 | 12 | To do: Refactor database to use one entry per family, and available weights per family. 13 | 14 | fonts[fonts.length] = { 15 | cap: "", 16 | contrast: "", 17 | apparentWeight: "00", 18 | cssWeight: "00", 19 | primary: false, 20 | family: "" 21 | }; 22 | 23 | */ 24 | 25 | var fonts = []; 26 | 27 | fonts[fonts.length] = { 28 | cap: "round", 29 | contrast: "hybrid", 30 | apparentWeight: "400", 31 | cssWeight: "400", 32 | primary: true, 33 | family: "Berkshire Swash" 34 | }; 35 | /* EXCLUDED BECAUSE IT'S IDENTICAL TO CANTATA ONE 36 | fonts[fonts.length] = { 37 | cap: "slab", 38 | contrast: "stressed", 39 | apparentWeight: "400", 40 | cssWeight: "400", 41 | primary: true, 42 | family: "Sree Krushnadevaraya" 43 | }; 44 | */ 45 | fonts[fonts.length] = { 46 | cap: "classic", 47 | contrast: "stressed", 48 | apparentWeight: "400", 49 | cssWeight: "400", 50 | primary: true, 51 | family: "Sorts Mill Goudy" 52 | }; 53 | fonts[fonts.length] = { 54 | cap: "slab", 55 | contrast: "unstressed", 56 | apparentWeight: "400", 57 | cssWeight: "400", 58 | primary: true, 59 | family: "Slabo 13px" 60 | }; 61 | fonts[fonts.length] = { 62 | cap: "classic", 63 | contrast: "stressed", 64 | apparentWeight: "400", 65 | cssWeight: "400", 66 | primary: true, 67 | family: "Radley" 68 | }; 69 | fonts[fonts.length] = { 70 | cap: "none", 71 | contrast: "ultra", 72 | apparentWeight: "700", 73 | cssWeight: "400", 74 | primary: true, 75 | family: "Poller One" 76 | }; 77 | fonts[fonts.length] = { 78 | cap: "none", 79 | contrast: "unstressed", 80 | apparentWeight: "200", 81 | cssWeight: "400", 82 | primary: true, 83 | family: "Poiret One" 84 | }; 85 | fonts[fonts.length] = { 86 | cap: "slab", 87 | contrast: "unstressed", 88 | apparentWeight: "400", 89 | cssWeight: "400", 90 | primary: true, 91 | family: "Podkova" 92 | }; 93 | fonts[fonts.length] = { 94 | cap: "slab", 95 | contrast: "unstressed", 96 | apparentWeight: "500", 97 | cssWeight: "500", 98 | primary: false, 99 | family: "Podkova" 100 | }; 101 | fonts[fonts.length] = { 102 | cap: "slab", 103 | contrast: "unstressed", 104 | apparentWeight: "600", 105 | cssWeight: "600", 106 | primary: false, 107 | family: "Podkova" 108 | }; 109 | fonts[fonts.length] = { 110 | cap: "slab", 111 | contrast: "unstressed", 112 | apparentWeight: "700", 113 | cssWeight: "700", 114 | primary: false, 115 | family: "Podkova" 116 | }; 117 | fonts[fonts.length] = { 118 | cap: "slab", 119 | contrast: "unstressed", 120 | apparentWeight: "800", 121 | cssWeight: "800", 122 | primary: false, 123 | family: "Podkova" 124 | }; 125 | fonts[fonts.length] = { 126 | cap: "othercap", 127 | contrast: "hybrid", 128 | apparentWeight: "400", 129 | cssWeight: "400", 130 | primary: true, 131 | family: "Overlock" 132 | }; 133 | fonts[fonts.length] = { 134 | cap: "classic", 135 | contrast: "ultra", 136 | apparentWeight: "400", 137 | cssWeight: "400", 138 | primary: true, 139 | family: "Old Standard TT" 140 | }; 141 | fonts[fonts.length] = { 142 | cap: "classic", 143 | contrast: "ultra", 144 | apparentWeight: "700", 145 | cssWeight: "700", 146 | primary: false, 147 | family: "Old Standard TT" 148 | }; 149 | fonts[fonts.length] = { 150 | cap: "classic", 151 | contrast: "stressed", 152 | apparentWeight: "200", 153 | cssWeight: "200", 154 | primary: false, 155 | family: "Neuton" 156 | }; 157 | fonts[fonts.length] = { 158 | cap: "classic", 159 | contrast: "stressed", 160 | apparentWeight: "300", 161 | cssWeight: "300", 162 | primary: true, 163 | family: "Neuton" 164 | }; 165 | fonts[fonts.length] = { 166 | cap: "classic", 167 | contrast: "stressed", 168 | apparentWeight: "400", 169 | cssWeight: "400", 170 | primary: false, 171 | family: "Neuton" 172 | }; 173 | fonts[fonts.length] = { 174 | cap: "classic", 175 | contrast: "stressed", 176 | apparentWeight: "700", 177 | cssWeight: "700", 178 | primary: false, 179 | family: "Neuton" 180 | }; 181 | fonts[fonts.length] = { 182 | cap: "classic", 183 | contrast: "stressed", 184 | apparentWeight: "800", 185 | cssWeight: "800", 186 | primary: false, 187 | family: "Neuton" 188 | }; 189 | fonts[fonts.length] = { 190 | cap: "classic", 191 | contrast: "stressed", 192 | apparentWeight: "200", 193 | cssWeight: "200", 194 | primary: false, 195 | family: "Martel" 196 | }; 197 | fonts[fonts.length] = { 198 | cap: "classic", 199 | contrast: "stressed", 200 | apparentWeight: "300", 201 | cssWeight: "300", 202 | primary: false, 203 | family: "Martel" 204 | }; 205 | fonts[fonts.length] = { 206 | cap: "classic", 207 | contrast: "stressed", 208 | apparentWeight: "400", 209 | cssWeight: "400", 210 | primary: true, 211 | family: "Martel" 212 | }; 213 | fonts[fonts.length] = { 214 | cap: "classic", 215 | contrast: "stressed", 216 | apparentWeight: "600", 217 | cssWeight: "600", 218 | primary: false, 219 | family: "Martel" 220 | }; 221 | fonts[fonts.length] = { 222 | cap: "classic", 223 | contrast: "stressed", 224 | apparentWeight: "700", 225 | cssWeight: "700", 226 | primary: false, 227 | family: "Martel" 228 | }; 229 | fonts[fonts.length] = { 230 | cap: "classic", 231 | contrast: "stressed", 232 | apparentWeight: "800", 233 | cssWeight: "800", 234 | primary: false, 235 | family: "Martel" 236 | }; 237 | fonts[fonts.length] = { 238 | cap: "classic", 239 | contrast: "stressed", 240 | apparentWeight: "900", 241 | cssWeight: "900", 242 | primary: false, 243 | family: "Martel" 244 | }; 245 | fonts[fonts.length] = { 246 | cap: "othercap", 247 | contrast: "stressed", 248 | apparentWeight: "400", 249 | cssWeight: "400", 250 | primary: true, 251 | family: "Marcellus" 252 | }; 253 | fonts[fonts.length] = { 254 | cap: "round", 255 | contrast: "hybrid", 256 | apparentWeight: "400", 257 | cssWeight: "400", 258 | primary: true, 259 | family: "Macondo" 260 | }; 261 | fonts[fonts.length] = { 262 | cap: "classic", 263 | contrast: "stressed", 264 | apparentWeight: "400", 265 | cssWeight: "400", 266 | primary: true, 267 | family: "Linden Hill" 268 | }; 269 | fonts[fonts.length] = { 270 | cap: "none", 271 | contrast: "ultra", 272 | apparentWeight: "400", 273 | cssWeight: "400", 274 | primary: true, 275 | family: "Italiana" 276 | }; 277 | fonts[fonts.length] = { 278 | cap: "classic", 279 | contrast: "stressed", 280 | apparentWeight: "400", 281 | cssWeight: "400", 282 | primary: true, 283 | family: "Crimson Text" 284 | }; 285 | fonts[fonts.length] = { 286 | cap: "classic", 287 | contrast: "stressed", 288 | apparentWeight: "600", 289 | cssWeight: "600", 290 | primary: false, 291 | family: "Crimson Text" 292 | }; 293 | fonts[fonts.length] = { 294 | cap: "classic", 295 | contrast: "stressed", 296 | apparentWeight: "700", 297 | cssWeight: "700", 298 | primary: false, 299 | family: "Crimson Text" 300 | }; 301 | fonts[fonts.length] = { 302 | cap: "slab", 303 | contrast: "stressed", 304 | apparentWeight: "500", 305 | cssWeight: "400", 306 | primary: true, 307 | family: "Cantata One" 308 | }; 309 | fonts[fonts.length] = { 310 | cap: "slab", 311 | contrast: "hybrid", 312 | apparentWeight: "700", 313 | cssWeight: "400", 314 | primary: true, 315 | family: "Bigshot One" 316 | }; 317 | fonts[fonts.length] = { 318 | cap: "othercap", 319 | contrast: "unstressed", 320 | apparentWeight: "400", 321 | cssWeight: "400", 322 | primary: true, 323 | family: "Autour One" 324 | }; 325 | fonts[fonts.length] = { 326 | cap: "none", 327 | contrast: "unstressed", 328 | apparentWeight: "100", 329 | cssWeight: "100", 330 | primary: false, 331 | family: "Yantramanav" 332 | }; 333 | fonts[fonts.length] = { 334 | cap: "none", 335 | contrast: "unstressed", 336 | apparentWeight: "300", 337 | cssWeight: "300", 338 | primary: false, 339 | family: "Yantramanav" 340 | }; 341 | fonts[fonts.length] = { 342 | cap: "none", 343 | contrast: "unstressed", 344 | apparentWeight: "400", 345 | cssWeight: "400", 346 | primary: true, 347 | family: "Yantramanav" 348 | }; 349 | fonts[fonts.length] = { 350 | cap: "none", 351 | contrast: "unstressed", 352 | apparentWeight: "500", 353 | cssWeight: "500", 354 | primary: false, 355 | family: "Yantramanav" 356 | }; 357 | fonts[fonts.length] = { 358 | cap: "none", 359 | contrast: "unstressed", 360 | apparentWeight: "700", 361 | cssWeight: "700", 362 | primary: false, 363 | family: "Yantramanav" 364 | }; 365 | fonts[fonts.length] = { 366 | cap: "none", 367 | contrast: "unstressed", 368 | apparentWeight: "900", 369 | cssWeight: "900", 370 | primary: false, 371 | family: "Yantramanav" 372 | }; 373 | fonts[fonts.length] = { 374 | cap: "slab", 375 | contrast: "stressed", 376 | apparentWeight: "400", 377 | cssWeight: "400", 378 | primary: true, 379 | family: "Arapey" 380 | }; 381 | fonts[fonts.length] = { 382 | cap: "classic", 383 | contrast: "stressed", 384 | apparentWeight: "400", 385 | cssWeight: "400", 386 | primary: true, 387 | family: "Noto Serif" 388 | }; 389 | fonts[fonts.length] = { 390 | cap: "classic", 391 | contrast: "stressed", 392 | apparentWeight: "700", 393 | cssWeight: "700", 394 | primary: false, 395 | family: "Noto Serif" 396 | }; 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | fonts[fonts.length] = { 405 | cap: "slab", 406 | contrast: "ultra", 407 | apparentWeight: "800", 408 | cssWeight: "400", 409 | primary: true, 410 | family: "Abril Fatface" 411 | }; 412 | fonts[fonts.length] = { 413 | cap: "othercap", 414 | contrast: "stressed", 415 | apparentWeight: "600", 416 | cssWeight: "400", 417 | primary: true, 418 | family: "Aclonica" 419 | }; 420 | fonts[fonts.length] = { 421 | cap: "othercap", 422 | contrast: "unstressed", 423 | apparentWeight: "400", 424 | cssWeight: "400", 425 | primary: true, 426 | family: "Alef" 427 | }; 428 | fonts[fonts.length] = { 429 | cap: "othercap", 430 | contrast: "unstressed", 431 | apparentWeight: "700", 432 | cssWeight: "700", 433 | primary: false, 434 | family: "Alef" 435 | }; 436 | fonts[fonts.length] = { 437 | cap: "othercap", 438 | contrast: "unstressed", 439 | apparentWeight: "600", 440 | cssWeight: "400", 441 | primary: true, 442 | family: "Amaranth" 443 | }; 444 | fonts[fonts.length] = { 445 | cap: "othercap", 446 | contrast: "unstressed", 447 | apparentWeight: "800", 448 | cssWeight: "700", 449 | primary: false, 450 | family: "Amaranth" 451 | }; 452 | fonts[fonts.length] = { 453 | cap: "none", 454 | contrast: "stressed", 455 | apparentWeight: "400", 456 | cssWeight: "400", 457 | primary: true, 458 | family: "Arya" 459 | }; 460 | fonts[fonts.length] = { 461 | cap: "none", 462 | contrast: "stressed", 463 | apparentWeight: "700", 464 | cssWeight: "700", 465 | primary: false, 466 | family: "Arya" 467 | }; 468 | fonts[fonts.length] = { 469 | cap: "none", 470 | contrast: "stressed", 471 | apparentWeight: "400", 472 | cssWeight: "400", 473 | primary: true, 474 | family: "Belleza" 475 | }; 476 | fonts[fonts.length] = { 477 | cap: "slab", 478 | contrast: "unstressed", 479 | apparentWeight: "800", 480 | cssWeight: "400", 481 | primary: true, 482 | family: "Bevan" 483 | }; 484 | fonts[fonts.length] = { 485 | cap: "slab", 486 | contrast: "unstressed", 487 | apparentWeight: "200", 488 | cssWeight: "200", 489 | primary: false, 490 | family: "BioRhyme" 491 | }; 492 | fonts[fonts.length] = { 493 | cap: "slab", 494 | contrast: "unstressed", 495 | apparentWeight: "300", 496 | cssWeight: "300", 497 | primary: false, 498 | family: "BioRhyme" 499 | }; 500 | fonts[fonts.length] = { 501 | cap: "slab", 502 | contrast: "unstressed", 503 | apparentWeight: "400", 504 | cssWeight: "400", 505 | primary: true, 506 | family: "BioRhyme" 507 | }; 508 | fonts[fonts.length] = { 509 | cap: "slab", 510 | contrast: "unstressed", 511 | apparentWeight: "700", 512 | cssWeight: "700", 513 | primary: false, 514 | family: "BioRhyme" 515 | }; 516 | fonts[fonts.length] = { 517 | cap: "slab", 518 | contrast: "unstressed", 519 | apparentWeight: "800", 520 | cssWeight: "800", 521 | primary: false, 522 | family: "BioRhyme" 523 | }; 524 | fonts[fonts.length] = { 525 | cap: "classic", 526 | contrast: "unstressed", 527 | apparentWeight: "400", 528 | cssWeight: "400", 529 | primary: true, 530 | family: "Bitter" 531 | }; 532 | fonts[fonts.length] = { 533 | cap: "classic", 534 | contrast: "unstressed", 535 | apparentWeight: "700", 536 | cssWeight: "700", 537 | primary: false, 538 | family: "Bitter" 539 | }; 540 | fonts[fonts.length] = { 541 | cap: "round", 542 | contrast: "hybrid", 543 | apparentWeight: "500", 544 | cssWeight: "400", 545 | primary: true, 546 | family: "Cagliostro" 547 | }; 548 | fonts[fonts.length] = { 549 | cap: "othercap", 550 | contrast: "unstressed", 551 | apparentWeight: "400", 552 | cssWeight: "400", 553 | primary: true, 554 | family: "Capriola" 555 | }; 556 | fonts[fonts.length] = { 557 | cap: "round", 558 | contrast: "stressed", 559 | apparentWeight: "800", 560 | cssWeight: "400", 561 | primary: true, 562 | family: "Chango" 563 | }; 564 | fonts[fonts.length] = { 565 | cap: "slab", 566 | contrast: "unstressed", 567 | apparentWeight: "400", 568 | cssWeight: "400", 569 | primary: true, 570 | family: "Cherry Swash" 571 | }; 572 | fonts[fonts.length] = { 573 | cap: "slab", 574 | contrast: "unstressed", 575 | apparentWeight: "700", 576 | cssWeight: "700", 577 | primary: false, 578 | family: "Cherry Swash" 579 | }; 580 | fonts[fonts.length] = { 581 | cap: "round", 582 | contrast: "unstressed", 583 | apparentWeight: "300", 584 | cssWeight: "300", 585 | primary: false, 586 | family: "Comfortaa" 587 | }; 588 | fonts[fonts.length] = { 589 | cap: "round", 590 | contrast: "unstressed", 591 | apparentWeight: "400", 592 | cssWeight: "400", 593 | primary: true, 594 | family: "Comfortaa" 595 | }; 596 | fonts[fonts.length] = { 597 | cap: "round", 598 | contrast: "unstressed", 599 | apparentWeight: "700", 600 | cssWeight: "700", 601 | primary: false, 602 | family: "Comfortaa" 603 | }; 604 | fonts[fonts.length] = { 605 | cap: "othercap", 606 | contrast: "stressed", 607 | apparentWeight: "400", 608 | cssWeight: "400", 609 | primary: true, 610 | family: "Corben" 611 | }; 612 | fonts[fonts.length] = { 613 | cap: "othercap", 614 | contrast: "stressed", 615 | apparentWeight: "800", 616 | cssWeight: "700", 617 | primary: false, 618 | family: "Corben" 619 | }; 620 | fonts[fonts.length] = { 621 | cap: "classic", 622 | contrast: "unstressed", 623 | apparentWeight: "400", 624 | cssWeight: "400", 625 | primary: true, 626 | family: "Coustard" 627 | }; 628 | fonts[fonts.length] = { 629 | cap: "othercap", 630 | contrast: "stressed", 631 | apparentWeight: "600", 632 | cssWeight: "400", 633 | primary: true, 634 | family: "Croissant One" 635 | }; 636 | fonts[fonts.length] = { 637 | cap: "round", 638 | contrast: "unstressed", 639 | apparentWeight: "600", 640 | cssWeight: "400", 641 | primary: true, 642 | family: "Days One" 643 | }; 644 | fonts[fonts.length] = { 645 | cap: "round", 646 | contrast: "hybrid", 647 | apparentWeight: "700", 648 | cssWeight: "400", 649 | primary: true, 650 | family: "Denk One" 651 | }; 652 | fonts[fonts.length] = { 653 | cap: "round", 654 | contrast: "unstressed", 655 | apparentWeight: "200", 656 | cssWeight: "200", 657 | primary: false, 658 | family: "Dosis" 659 | }; 660 | fonts[fonts.length] = { 661 | cap: "round", 662 | contrast: "unstressed", 663 | apparentWeight: "300", 664 | cssWeight: "300", 665 | primary: false, 666 | family: "Dosis" 667 | }; 668 | fonts[fonts.length] = { 669 | cap: "round", 670 | contrast: "unstressed", 671 | apparentWeight: "400", 672 | cssWeight: "400", 673 | primary: true, 674 | family: "Dosis" 675 | }; 676 | fonts[fonts.length] = { 677 | cap: "round", 678 | contrast: "unstressed", 679 | apparentWeight: "500", 680 | cssWeight: "500", 681 | primary: false, 682 | family: "Dosis" 683 | }; 684 | fonts[fonts.length] = { 685 | cap: "round", 686 | contrast: "unstressed", 687 | apparentWeight: "600", 688 | cssWeight: "600", 689 | primary: false, 690 | family: "Dosis" 691 | }; 692 | fonts[fonts.length] = { 693 | cap: "round", 694 | contrast: "unstressed", 695 | apparentWeight: "700", 696 | cssWeight: "700", 697 | primary: false, 698 | family: "Dosis" 699 | }; 700 | fonts[fonts.length] = { 701 | cap: "round", 702 | contrast: "unstressed", 703 | apparentWeight: "800", 704 | cssWeight: "800", 705 | primary: false, 706 | family: "Dosis" 707 | }; 708 | fonts[fonts.length] = { 709 | cap: "othercap", 710 | contrast: "stressed", 711 | apparentWeight: "400", 712 | cssWeight: "400", 713 | primary: true, 714 | family: "El Messiri" 715 | }; 716 | fonts[fonts.length] = { 717 | cap: "othercap", 718 | contrast: "stressed", 719 | apparentWeight: "500", 720 | cssWeight: "500", 721 | primary: false, 722 | family: "El Messiri" 723 | }; 724 | fonts[fonts.length] = { 725 | cap: "othercap", 726 | contrast: "stressed", 727 | apparentWeight: "600", 728 | cssWeight: "600", 729 | primary: false, 730 | family: "El Messiri" 731 | }; 732 | fonts[fonts.length] = { 733 | cap: "round", 734 | contrast: "hybrid", 735 | apparentWeight: "800", 736 | cssWeight: "400", 737 | primary: true, 738 | family: "Fascinate" 739 | }; 740 | fonts[fonts.length] = { 741 | cap: "othercap", 742 | contrast: "unstressed", 743 | apparentWeight: "100", 744 | cssWeight: "300", 745 | primary: false, 746 | family: "Flamenco" 747 | }; 748 | fonts[fonts.length] = { 749 | cap: "othercap", 750 | contrast: "unstressed", 751 | apparentWeight: "400", 752 | cssWeight: "400", 753 | primary: true, 754 | family: "Flamenco" 755 | }; 756 | fonts[fonts.length] = { 757 | cap: "round", 758 | contrast: "unstressed", 759 | apparentWeight: "800", 760 | cssWeight: "400", 761 | primary: true, 762 | family: "Fredoka One" 763 | }; 764 | fonts[fonts.length] = { 765 | cap: "othercap", 766 | contrast: "hybrid", 767 | apparentWeight: "400", 768 | cssWeight: "400", 769 | primary: true, 770 | family: "Glass Antiqua" 771 | }; 772 | fonts[fonts.length] = { 773 | cap: "round", 774 | contrast: "unstressed", 775 | apparentWeight: "500", 776 | cssWeight: "400", 777 | primary: true, 778 | family: "Happy Monkey" 779 | }; 780 | fonts[fonts.length] = { 781 | cap: "none", 782 | contrast: "unstressed", 783 | apparentWeight: "100", 784 | cssWeight: "100", 785 | primary: false, 786 | family: "Lato" 787 | }; 788 | fonts[fonts.length] = { 789 | cap: "none", 790 | contrast: "unstressed", 791 | apparentWeight: "300", 792 | cssWeight: "300", 793 | primary: false, 794 | family: "Lato" 795 | }; 796 | fonts[fonts.length] = { 797 | cap: "none", 798 | contrast: "unstressed", 799 | apparentWeight: "400", 800 | cssWeight: "400", 801 | primary: true, 802 | family: "Lato" 803 | }; 804 | fonts[fonts.length] = { 805 | cap: "none", 806 | contrast: "unstressed", 807 | apparentWeight: "700", 808 | cssWeight: "700", 809 | primary: false, 810 | family: "Lato" 811 | }; 812 | fonts[fonts.length] = { 813 | cap: "none", 814 | contrast: "unstressed", 815 | apparentWeight: "900", 816 | cssWeight: "900", 817 | primary: false, 818 | family: "Lato" 819 | }; 820 | fonts[fonts.length] = { 821 | cap: "classic", 822 | contrast: "stressed", 823 | apparentWeight: "400", 824 | cssWeight: "400", 825 | primary: true, 826 | family: "Libre Baskerville" 827 | }; 828 | fonts[fonts.length] = { 829 | cap: "classic", 830 | contrast: "stressed", 831 | apparentWeight: "700", 832 | cssWeight: "700", 833 | primary: false, 834 | family: "Libre Baskerville" 835 | }; 836 | fonts[fonts.length] = { 837 | cap: "none", 838 | contrast: "ultra", 839 | apparentWeight: "700", 840 | cssWeight: "400", 841 | primary: true, 842 | family: "Limelight" 843 | }; 844 | fonts[fonts.length] = { 845 | cap: "classic", 846 | contrast: "stressed", 847 | apparentWeight: "400", 848 | cssWeight: "400", 849 | primary: true, 850 | family: "Lora" 851 | }; 852 | fonts[fonts.length] = { 853 | cap: "classic", 854 | contrast: "stressed", 855 | apparentWeight: "700", 856 | cssWeight: "700", 857 | primary: false, 858 | family: "Lora" 859 | }; 860 | fonts[fonts.length] = { 861 | cap: "round", 862 | contrast: "unstressed", 863 | apparentWeight: "400", 864 | cssWeight: "400", 865 | primary: true, 866 | family: "Mallanna" 867 | }; 868 | fonts[fonts.length] = { 869 | cap: "round", 870 | contrast: "stressed", 871 | apparentWeight: "500", 872 | cssWeight: "400", 873 | primary: true, 874 | family: "Marmelad" 875 | }; 876 | fonts[fonts.length] = { 877 | cap: "slab", 878 | contrast: "unstressed", 879 | apparentWeight: "200", 880 | cssWeight: "400", 881 | primary: true, 882 | family: "Nixie One" 883 | }; 884 | fonts[fonts.length] = { 885 | cap: "round", 886 | contrast: "unstressed", 887 | apparentWeight: "500", 888 | cssWeight: "400", 889 | primary: true, 890 | family: "NTR" 891 | }; 892 | fonts[fonts.length] = { 893 | cap: "othercap", 894 | contrast: "stressed", 895 | apparentWeight: "400", 896 | cssWeight: "400", 897 | primary: true, 898 | family: "Philosopher" 899 | }; 900 | fonts[fonts.length] = { 901 | cap: "othercap", 902 | contrast: "stressed", 903 | apparentWeight: "700", 904 | cssWeight: "700", 905 | primary: false, 906 | family: "Philosopher" 907 | }; 908 | fonts[fonts.length] = { 909 | cap: "none", 910 | contrast: "stressed", 911 | apparentWeight: "400", 912 | cssWeight: "400", 913 | primary: true, 914 | family: "Proza Libre" 915 | }; 916 | fonts[fonts.length] = { 917 | cap: "none", 918 | contrast: "stressed", 919 | apparentWeight: "500", 920 | cssWeight: "500", 921 | primary: false, 922 | family: "Proza Libre" 923 | }; 924 | fonts[fonts.length] = { 925 | cap: "none", 926 | contrast: "stressed", 927 | apparentWeight: "600", 928 | cssWeight: "600", 929 | primary: false, 930 | family: "Proza Libre" 931 | }; 932 | fonts[fonts.length] = { 933 | cap: "none", 934 | contrast: "stressed", 935 | apparentWeight: "700", 936 | cssWeight: "700", 937 | primary: false, 938 | family: "Proza Libre" 939 | }; 940 | fonts[fonts.length] = { 941 | cap: "none", 942 | contrast: "stressed", 943 | apparentWeight: "800", 944 | cssWeight: "800", 945 | primary: false, 946 | family: "Proza Libre" 947 | }; 948 | fonts[fonts.length] = { 949 | cap: "round", 950 | contrast: "unstressed", 951 | apparentWeight: "300", 952 | cssWeight: "300", 953 | primary: false, 954 | family: "Quicksand" 955 | }; 956 | fonts[fonts.length] = { 957 | cap: "round", 958 | contrast: "unstressed", 959 | apparentWeight: "400", 960 | cssWeight: "400", 961 | primary: true, 962 | family: "Quicksand" 963 | }; 964 | fonts[fonts.length] = { 965 | cap: "round", 966 | contrast: "unstressed", 967 | apparentWeight: "500", 968 | cssWeight: "500", 969 | primary: false, 970 | family: "Quicksand" 971 | }; 972 | fonts[fonts.length] = { 973 | cap: "round", 974 | contrast: "unstressed", 975 | apparentWeight: "700", 976 | cssWeight: "700", 977 | primary: false, 978 | family: "Quicksand" 979 | }; 980 | fonts[fonts.length] = { 981 | cap: "none", 982 | contrast: "unstressed", 983 | apparentWeight: "100", 984 | cssWeight: "100", 985 | primary: false, 986 | family: "Raleway" 987 | }; 988 | fonts[fonts.length] = { 989 | cap: "none", 990 | contrast: "unstressed", 991 | apparentWeight: "200", 992 | cssWeight: "200", 993 | primary: false, 994 | family: "Raleway" 995 | }; 996 | fonts[fonts.length] = { 997 | cap: "none", 998 | contrast: "unstressed", 999 | apparentWeight: "300", 1000 | cssWeight: "300", 1001 | primary: false, 1002 | family: "Raleway" 1003 | }; 1004 | fonts[fonts.length] = { 1005 | cap: "none", 1006 | contrast: "unstressed", 1007 | apparentWeight: "400", 1008 | cssWeight: "400", 1009 | primary: true, 1010 | family: "Raleway" 1011 | }; 1012 | fonts[fonts.length] = { 1013 | cap: "none", 1014 | contrast: "unstressed", 1015 | apparentWeight: "500", 1016 | cssWeight: "500", 1017 | primary: false, 1018 | family: "Raleway" 1019 | }; 1020 | fonts[fonts.length] = { 1021 | cap: "none", 1022 | contrast: "unstressed", 1023 | apparentWeight: "600", 1024 | cssWeight: "600", 1025 | primary: false, 1026 | family: "Raleway" 1027 | }; 1028 | fonts[fonts.length] = { 1029 | cap: "none", 1030 | contrast: "unstressed", 1031 | apparentWeight: "700", 1032 | cssWeight: "700", 1033 | primary: false, 1034 | family: "Raleway" 1035 | }; 1036 | fonts[fonts.length] = { 1037 | cap: "none", 1038 | contrast: "unstressed", 1039 | apparentWeight: "800", 1040 | cssWeight: "800", 1041 | primary: false, 1042 | family: "Raleway" 1043 | }; 1044 | fonts[fonts.length] = { 1045 | cap: "none", 1046 | contrast: "unstressed", 1047 | apparentWeight: "900", 1048 | cssWeight: "900", 1049 | primary: false, 1050 | family: "Raleway" 1051 | }; 1052 | fonts[fonts.length] = { 1053 | cap: "classic", 1054 | contrast: "unstressed", 1055 | apparentWeight: "400", 1056 | cssWeight: "400", 1057 | primary: true, 1058 | family: "Rhodium Libre" 1059 | }; 1060 | fonts[fonts.length] = { 1061 | cap: "slab", 1062 | contrast: "unstressed", 1063 | apparentWeight: "100", 1064 | cssWeight: "100", 1065 | primary: false, 1066 | family: "Roboto Slab" 1067 | }; 1068 | fonts[fonts.length] = { 1069 | cap: "slab", 1070 | contrast: "unstressed", 1071 | apparentWeight: "300", 1072 | cssWeight: "300", 1073 | primary: false, 1074 | family: "Roboto Slab" 1075 | }; 1076 | fonts[fonts.length] = { 1077 | cap: "slab", 1078 | contrast: "unstressed", 1079 | apparentWeight: "400", 1080 | cssWeight: "400", 1081 | primary: true, 1082 | family: "Roboto Slab" 1083 | }; 1084 | fonts[fonts.length] = { 1085 | cap: "slab", 1086 | contrast: "unstressed", 1087 | apparentWeight: "500", 1088 | cssWeight: "500", 1089 | primary: false, 1090 | family: "Roboto Slab" 1091 | }; 1092 | fonts[fonts.length] = { 1093 | cap: "slab", 1094 | contrast: "unstressed", 1095 | apparentWeight: "700", 1096 | cssWeight: "700", 1097 | primary: false, 1098 | family: "Roboto Slab" 1099 | }; 1100 | fonts[fonts.length] = { 1101 | cap: "slab", 1102 | contrast: "unstressed", 1103 | apparentWeight: "900", 1104 | cssWeight: "900", 1105 | primary: false, 1106 | family: "Roboto Slab" 1107 | }; 1108 | fonts[fonts.length] = { 1109 | cap: "othercap", 1110 | contrast: "unstressed", 1111 | apparentWeight: "400", 1112 | cssWeight: "400", 1113 | primary: true, 1114 | family: "Ruluko" 1115 | }; 1116 | fonts[fonts.length] = { 1117 | cap: "othercap", 1118 | contrast: "unstressed", 1119 | apparentWeight: "300", 1120 | cssWeight: "400", 1121 | primary: true, 1122 | family: "Scope One" 1123 | }; 1124 | fonts[fonts.length] = { 1125 | cap: "othercap", 1126 | contrast: "stressed", 1127 | apparentWeight: "400", 1128 | cssWeight: "400", 1129 | primary: true, 1130 | family: "Sofia" 1131 | }; 1132 | fonts[fonts.length] = { 1133 | cap: "round", 1134 | contrast: "hybrid", 1135 | apparentWeight: "800", 1136 | cssWeight: "400", 1137 | primary: true, 1138 | family: "Titan One" 1139 | }; 1140 | fonts[fonts.length] = { 1141 | cap: "othercap", 1142 | contrast: "stressed", 1143 | apparentWeight: "800", 1144 | cssWeight: "400", 1145 | primary: true, 1146 | family: "Ultra" 1147 | }; 1148 | fonts[fonts.length] = { 1149 | cap: "round", 1150 | contrast: "unstressed", 1151 | apparentWeight: "400", 1152 | cssWeight: "400", 1153 | primary: true, 1154 | family: "Varela Round" 1155 | }; 1156 | fonts[fonts.length] = { 1157 | cap: "none", 1158 | contrast: "unstressed", 1159 | apparentWeight: "100", 1160 | cssWeight: "100", 1161 | primary: false, 1162 | family: "Work Sans" 1163 | }; 1164 | fonts[fonts.length] = { 1165 | cap: "none", 1166 | contrast: "unstressed", 1167 | apparentWeight: "200", 1168 | cssWeight: "200", 1169 | primary: false, 1170 | family: "Work Sans" 1171 | }; 1172 | fonts[fonts.length] = { 1173 | cap: "none", 1174 | contrast: "unstressed", 1175 | apparentWeight: "300", 1176 | cssWeight: "300", 1177 | primary: false, 1178 | family: "Work Sans" 1179 | }; 1180 | fonts[fonts.length] = { 1181 | cap: "none", 1182 | contrast: "unstressed", 1183 | apparentWeight: "400", 1184 | cssWeight: "400", 1185 | primary: true, 1186 | family: "Work Sans" 1187 | }; 1188 | fonts[fonts.length] = { 1189 | cap: "none", 1190 | contrast: "unstressed", 1191 | apparentWeight: "500", 1192 | cssWeight: "500", 1193 | primary: false, 1194 | family: "Work Sans" 1195 | }; 1196 | fonts[fonts.length] = { 1197 | cap: "none", 1198 | contrast: "unstressed", 1199 | apparentWeight: "600", 1200 | cssWeight: "600", 1201 | primary: false, 1202 | family: "Work Sans" 1203 | }; 1204 | fonts[fonts.length] = { 1205 | cap: "none", 1206 | contrast: "unstressed", 1207 | apparentWeight: "700", 1208 | cssWeight: "700", 1209 | primary: false, 1210 | family: "Work Sans" 1211 | }; 1212 | fonts[fonts.length] = { 1213 | cap: "none", 1214 | contrast: "unstressed", 1215 | apparentWeight: "800", 1216 | cssWeight: "800", 1217 | primary: false, 1218 | family: "Work Sans" 1219 | }; 1220 | fonts[fonts.length] = { 1221 | cap: "none", 1222 | contrast: "unstressed", 1223 | apparentWeight: "900", 1224 | cssWeight: "900", 1225 | primary: false, 1226 | family: "Work Sans" 1227 | }; 1228 | 1229 | 1230 | 1231 | 1232 | 1233 | -------------------------------------------------------------------------------- /icons.js: -------------------------------------------------------------------------------- 1 | // special 2 | var iconFavorite = ''; 3 | 4 | // presets 5 | 6 | var iconClassicStressed = ''; 7 | 8 | var iconClassicStressedZoomed = ''; 9 | 10 | var iconNoneUnstressed = ''; 11 | 12 | var iconNoneUnstressedZoomed = ''; 13 | 14 | 15 | 16 | 17 | // caps 18 | var iconSlab = ''; 19 | 20 | var iconSlabZoomed = ''; 21 | 22 | var iconClassic = ''; 23 | 24 | var iconClassicZoomed = ''; 25 | 26 | var iconNone = ''; 27 | 28 | var iconNoneZoomed = ''; 29 | 30 | var iconRound = ''; 31 | 32 | var iconRoundZoomed = ''; 33 | 34 | var iconOtherCap = ''; 35 | 36 | var iconOtherCapZoomed = ''; 37 | 38 | 39 | 40 | 41 | // contrast 42 | var iconUltra = ''; 43 | 44 | var iconUltraZoomed = ''; 45 | 46 | var iconStressed = ''; 47 | 48 | var iconStressedZoomed = ''; 49 | 50 | var iconUnstressed = ''; 51 | 52 | var iconUnstressedZoomed = ''; 53 | 54 | var iconHybrid = ''; 55 | 56 | var iconHybridZoomed = ''; 57 | 58 | var iconWeightAccordion = ''; 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var sampleText = "Explore the filters & Tap this text to edit it."; 2 | var minInputLength = 10; 3 | var fontsReturned = 0; 4 | var familiesCount = 0; 5 | var navUA = navigator.userAgent; 6 | 7 | fonts.sort(fontDBsorter); 8 | 9 | // load webfonts 10 | var families = []; 11 | for ((i = 0), (il = fonts.length); i < il; i++) { 12 | var str = fonts[i].family; 13 | var weights = 0; 14 | for ((j = i + 1), (jl = fonts.length); j < jl; j++) { 15 | if (fonts[i].family == fonts[j].family) { 16 | if (weights == 0) { 17 | str += ':' + fonts[i].cssWeight + ','; 18 | } 19 | str += fonts[j].cssWeight + ','; 20 | weights++; 21 | } else { 22 | if (weights > 0) { 23 | str = str.substring(0, str.length - 1); 24 | weights = 0; 25 | } 26 | break; 27 | } 28 | } 29 | families[families.length] = str; 30 | familiesCount++; 31 | i = j - 1; 32 | } 33 | 34 | WebFont.load({ 35 | google: { 36 | families: families 37 | }, 38 | active: function() { 39 | // delay is needed because active is triggered 40 | // before font has rendered despite the claims of 41 | // documentation. 42 | var t = window.setTimeout(function(){ 43 | filter_list(); 44 | scale_fonts(); 45 | },500); 46 | }, 47 | fontactive: function(familyName, fvd) { 48 | fontsReturned++; 49 | updateLoadingProgress(); 50 | }, 51 | fontinactive: function(familyName, fvd) { 52 | fontsReturned++; 53 | updateLoadingProgress(); 54 | console.log(familyName + ' failed to load'); 55 | } 56 | }); 57 | 58 | // Add Helvetica & Times local fonts for comparison 59 | if(navUA.indexOf('Android') == -1) { 60 | // Helvetica & Times are not currently available on Android devices 61 | fonts[fonts.length] = { 62 | cap: "none", 63 | contrast: "unstressed", 64 | apparentWeight: "400", 65 | cssWeight: "400", 66 | primary: true, 67 | family: "Helvetica" 68 | }; 69 | fonts[fonts.length] = { 70 | cap: "none", 71 | contrast: "unstressed", 72 | apparentWeight: "700", 73 | cssWeight: "700", 74 | primary: false, 75 | family: "Helvetica" 76 | }; 77 | fonts[fonts.length] = { 78 | cap: "classic", 79 | contrast: "stressed", 80 | apparentWeight: "400", 81 | cssWeight: "400", 82 | primary: true, 83 | family: "Times New Roman" 84 | }; 85 | fonts[fonts.length] = { 86 | cap: "classic", 87 | contrast: "stressed", 88 | apparentWeight: "700", 89 | cssWeight: "700", 90 | primary: false, 91 | family: "Times New Roman" 92 | }; 93 | familiesCount += 2; 94 | } 95 | fonts.sort(fontDBsorter); 96 | 97 | 98 | $(document).ready(function() { 99 | 100 | // insert icons 101 | $('#compare svg').html(iconFavorite); 102 | $('#classic_stressed svg').html(iconClassicStressed); 103 | $('#classic_stressed_zoomed svg').html(iconClassicStressedZoomed); 104 | $('#none_unstressed svg').html(iconNoneUnstressed); 105 | $('#none_unstressed_zoomed svg').html(iconNoneUnstressedZoomed); 106 | $('#slab svg').html(iconSlab); 107 | $('#slab_zoomed svg').html(iconSlabZoomed); 108 | $('#classic svg').html(iconClassic); 109 | $('#classic_zoomed svg').html(iconClassicZoomed); 110 | $('#none svg').html(iconNone); 111 | $('#none_zoomed svg').html(iconNoneZoomed); 112 | $('#round svg').html(iconRound); 113 | $('#round_zoomed svg').html(iconRoundZoomed); 114 | $('#othercap svg').html(iconOtherCap); 115 | $('#othercap_zoomed svg').html(iconOtherCapZoomed); 116 | $('#ultra svg').html(iconUltra); 117 | $('#ultra_zoomed svg').html(iconUltraZoomed); 118 | $('#stressed svg').html(iconStressed); 119 | $('#stressed_zoomed svg').html(iconStressedZoomed); 120 | $('#unstressed svg').html(iconUnstressed); 121 | $('#unstressed_zoomed svg').html(iconUnstressedZoomed); 122 | $('#hybrid svg').html(iconHybrid); 123 | $('#hybrid_zoomed svg').html(iconHybridZoomed); 124 | $('.group_accordion svg').html(iconWeightAccordion); 125 | 126 | // insert font list 127 | for ((i = 0), (il = fonts.length); i < il; i++) { 128 | var font = fonts[i]; 129 | font.cssName = font.family.replace(/\s/g,'_'); 130 | font.url = font.family.replace(/\s/g,'+'); 131 | font.apparentWeight = 'w' + font.apparentWeight; 132 | var primary = font.primary ? " primary" : ""; 133 | html = 134 | '
' + 146 | sampleText + 147 | '
' + 150 | font.family + 151 | " " + 152 | font.cssWeight + 153 | '' + 154 | '
' + 155 | iconFavorite + 156 | + '
'; 157 | var el = $(html) 158 | $(el).data('cssName',font.cssName); 159 | $("#list > div").append(el); 160 | var html = 161 | '"; 166 | $("#list > div").append(html); 167 | } 168 | 169 | // Fix links for Helvetica & Times local fonts 170 | $('.Helvetica .google_link a, .Times_New_Roman .google_link a').attr('href','#'); 171 | 172 | 173 | 174 | 175 | // bind event handlers 176 | 177 | 178 | 179 | 180 | // filter buttons 181 | $('#filters').mouseleave(function() { 182 | $('.option, .filter_preset, .binary').removeClass('tapped'); 183 | }); 184 | 185 | $('#compare .binary').click(function(event) { 186 | $(this).toggleClass('selected'); 187 | $('#categorize').toggleClass('open'); 188 | $(this).addClass('tapped'); 189 | filter_list(); 190 | scale_fonts(); 191 | }); 192 | 193 | $('.option').click(function() { 194 | window.getSelection().removeAllRanges(); 195 | update_header(); 196 | $(this).toggleClass('selected'); 197 | $(this).addClass('tapped'); 198 | // count selected options 199 | var options = $(this).parent().find('.option'); 200 | var selectedCount = 0; 201 | for ((j = 0), (jl = options.length); j < jl; j++) { 202 | var option = $(options).eq(j); 203 | if ($(option).hasClass('selected')) { 204 | selectedCount++; 205 | } 206 | } 207 | // update toggle 208 | var toggle = $(this).parent().parent().find('.group_toggle'); 209 | if (selectedCount == 0) { 210 | $(toggle).removeClass('selected'); 211 | } else { 212 | $(toggle).addClass('selected'); 213 | } 214 | $('.filter_preset').removeClass('selected'); 215 | filter_list(); 216 | scale_fonts(); 217 | }); 218 | 219 | // toggle buttons 220 | $('.group_toggle').click(function(){ 221 | update_header(); 222 | $(this).toggleClass('selected'); 223 | var options = $(this).parent().find('.option'); 224 | if($(this).hasClass('selected')) { 225 | $(options).addClass('selected'); 226 | } else { 227 | $(options).removeClass('selected'); 228 | } 229 | $('.filter_preset').removeClass('selected'); 230 | filter_list(); 231 | scale_fonts(); 232 | }); 233 | 234 | // preset buttons 235 | $('.filter_preset').click(function() { 236 | $(this).addClass('tapped'); 237 | // update option buttons 238 | var classes = $(this).attr('class').split(" "); 239 | $('.option').removeClass('selected'); 240 | for (var i = 0, il = classes.length; i < il; i++) { 241 | $("#" + classes[i]).addClass('selected'); 242 | if(classes[i] == 'unstressed') { 243 | } 244 | } 245 | $(this).addClass('selected'); 246 | filter_list(); 247 | scale_fonts(); 248 | }); 249 | 250 | // weight accordion button 251 | $('.group_accordion').click(function() { 252 | $(this).toggleClass('selected'); 253 | $(this).parent().toggleClass('open'); 254 | if(!$(this).parent().hasClass('open')) { 255 | // collapsing weights toggles all weights to on 256 | $('#weight .option, #weight group_toggle').addClass('selected'); 257 | $('.google_link a').removeClass('show_weights'); 258 | $('#filters #weight').css('overflow',''); 259 | } else { 260 | // scroll down if weights are hidden 261 | $('#filters').animate({ 262 | scrollTop: 296 263 | }, { 264 | duration: 500, 265 | easing: 'swing', 266 | complete: function() { 267 | $('#filters #weight').css('overflow','visible'); 268 | } 269 | }); 270 | $('.google_link a').addClass('show_weights'); 271 | } 272 | filter_list(); 273 | scale_fonts(); 274 | }); 275 | 276 | // specimens 277 | $('.specimen').click(function() { 278 | if($(this).find('input').length == 0) { 279 | window.getSelection().removeAllRanges(); 280 | $('.header_bar').toggleClass('selected'); 281 | $('#about_button').toggleClass('selected'); 282 | // replace the sample span with an identical looking input field 283 | $(this).find('span').eq(0).css('display','none'); 284 | var fontClasses = $(this).attr('class'); 285 | fontClasses = fontClasses.replace('animate',''); 286 | fontClasses = fontClasses.replace('specimen',''); 287 | var inputText = sampleText.replace(/ /g,' ') 288 | var html = ''; 289 | $(this).find('.sample').append(html); 290 | var scale = parseFloat($(this).find('.sample').css('transform').split(',')[0].replace('matrix(','')); 291 | var width = parseFloat($(this).find('.sample').css('width')); 292 | $(this).find('input').css('width',width/scale); 293 | $(this).find('input').focus(); 294 | $(this).find('input').select(); 295 | $(this).find('input').keydown(function(e) { 296 | $(this).data('key',e.which); 297 | }); 298 | $(this).find('input').keyup(function() { 299 | var key = $(this).data('key'); 300 | if (key == 32 || key == 8 || key >= 46) { 301 | // on space, delete, or visible character 302 | sampleText = $(this).val(); 303 | if(sampleText.length < minInputLength) { 304 | for(i=0, il = minInputLength - sampleText.length; i 0) { 372 | $('#compare').addClass('open'); 373 | // scroll up if compare button is hidden 374 | $('#filters').animate({ 375 | scrollTop: 0 376 | }, { 377 | duration: 500, 378 | easing: 'swing' 379 | }); 380 | } else { 381 | $('#compare').removeClass('open'); 382 | $('#compare .binary').removeClass('selected'); 383 | filter_list(); 384 | scale_fonts(); 385 | } 386 | }); 387 | 388 | // about 389 | $('#about, #about_button').click(function() { 390 | var about = $('#about div'); 391 | $(about).html($(about).data('originalAbout')); 392 | $('#about, #about_button').toggleClass('open'); 393 | }); 394 | 395 | // browser 396 | $(window).resize(function() { 397 | update_header(); 398 | $('#list').css('opacity','0'); 399 | // re-scale fonts after browser window resizing has stopped 400 | clearTimeout($.data(this, 'scrollTimer')); 401 | $.data(this, 'scrollTimer', setTimeout(function() { 402 | filter_list(); 403 | scale_fonts(); 404 | }, 500)); 405 | }); 406 | 407 | }); 408 | 409 | function scale_fonts() { 410 | // scale font to match in width 411 | var sampleWidth = $('.specimen').eq(0).width(); 412 | var els = $('.specimen'); 413 | var elsa = $(els).find('.google_link'); 414 | var aW = 0; 415 | var temp = 0; 416 | $(elsa).css('width',''); 417 | for ((i = 0), (il = $(elsa).length); i < il; i++) { 418 | // find widest font link 419 | temp = $(elsa).eq(i).outerWidth(); 420 | if(temp > aW) { aW = temp; } 421 | } 422 | aW = aW * 1.2; 423 | if($(document).width() > 600) { 424 | $(elsa).css('width',aW); 425 | sampleWidth -= aW; 426 | $(els).find('.sample').css('width',sampleWidth); 427 | } 428 | for ((i = 0), (il = $(els).length); i < il; i++) { 429 | var el = $(els).eq(i); 430 | var currentWidth = $(el).find('span').width(); 431 | var scale = sampleWidth/currentWidth; 432 | $(el).find('.sample').css('transform','scale('+ scale +')'); 433 | var currentHeight = $(el).find('span').height(); 434 | $(el).data('cssHeight',currentHeight*scale); 435 | if((el).find('input').length > 0) { 436 | $('#list').find('input').css('width',sampleWidth/scale); 437 | } 438 | } 439 | for ((i = 0), (il = $(els).length); i < il; i++) { 440 | var el = $(els).eq(i); 441 | $(el).css('height',$(el).data('cssHeight')); 442 | } 443 | } 444 | 445 | function filter_list() { 446 | var specimens = $('.specimen'); 447 | $(specimens).removeClass('filtered_out'); 448 | // hide specimens without a matching selected option 449 | var options = $('.option'); 450 | for ((i = 0), (il = specimens.length); i < il; i++) { 451 | var specimen = $(specimens).eq(i); 452 | if($('#compare .binary').hasClass('selected')) { 453 | // ignore all options and show favorited 454 | if(!$(specimen).find('.favorite').hasClass('selected')) { 455 | $(specimen).addClass('filtered_out'); 456 | } 457 | } else { 458 | for ((j = 0), (jl = options.length); j < jl; j++) { 459 | var option = $(options).eq(j); 460 | if (!$(option).hasClass('selected')) { 461 | if ($(specimen).hasClass($(option).attr('id'))) { 462 | $(specimen).addClass('filtered_out'); 463 | } 464 | } 465 | // also hide non primary weigths if weigths collapsed 466 | if(!$('#weight').hasClass('open')) { 467 | if(!$(specimen).hasClass('primary')) { 468 | $(specimen).addClass('filtered_out'); 469 | } 470 | } 471 | } 472 | } 473 | } 474 | // add animations 475 | $(specimen).removeClass('animate'); 476 | $(specimen).css('animation-delay',''); 477 | var delay = 0; 478 | for ((i = 0), (il = specimens.length); i < il; i++) { 479 | var specimen = $(specimens).eq(i); 480 | if(!$(specimen).hasClass('filtered_out')) { 481 | $(specimen).addClass('animate'); 482 | $(specimen).css('animation-delay',(delay*30)+'ms'); 483 | delay++; 484 | } 485 | } 486 | // update family count 487 | var count = 0; 488 | var lastName = ''; 489 | for ((i = 0), (il = specimens.length); i < il; i++) { 490 | var specimen = $(specimens).eq(i); 491 | if($(specimen).css('display')=='block') { 492 | var cssName = $(specimen).data('cssName'); 493 | if(cssName != lastName) { count++ } 494 | lastName = cssName; 495 | } 496 | } 497 | $('#loading span').css('animation-iteration-count',1); 498 | $('#loading').css('opacity',0); 499 | if(count > 0) { 500 | $('#families_count').html('Displaying ' + count + ' of the ' + familiesCount + '.'); 501 | $('#list').css('opacity','1'); 502 | $('#no_matches').removeClass('open'); 503 | } else { 504 | $('#families_count').html('All ' + familiesCount + ' fonts are hidden!.'); 505 | $('#list').css('opacity',0); 506 | $('#no_matches').addClass('open'); 507 | } 508 | } 509 | 510 | function update_header() { 511 | // ensure that found count is visible on narrow window 512 | $('#title, #subtitle').css('display',''); 513 | if($(document).width() < 980) { 514 | $('#subtitle').css('display','none'); 515 | } 516 | if($(document).width() < 600) { 517 | $('#title').css('display','none'); 518 | } 519 | } 520 | 521 | function updateLoadingProgress() { 522 | var percent = parseInt((fontsReturned/fonts.length)*100); 523 | var gradient = 'linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,1) ' + 524 | (percent-5) + 525 | '%,rgba(255,255,255,0) ' + 526 | (percent+5) + 527 | '%,rgba(255,255,255,0) 100%)'; 528 | $('#loading > div > div').css('background',gradient); 529 | } 530 | 531 | function fontDBsorter(a, b) { 532 | // sort by font database by family then cssWeight 533 | if (a.family < b.family) { 534 | return -1; 535 | } else if (a.family > b.family) { 536 | return 1; 537 | } else { 538 | if (a.cssWeight < b.cssWeight) { 539 | return -1; 540 | } else if (a.cssWeight > b.cssWeight) { 541 | return 1; 542 | } else { 543 | return 0; 544 | } 545 | } 546 | } 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Helvetica', 'Arial', sans-serif; 5 | } 6 | 7 | svg { 8 | fill-rule: evenodd; 9 | } 10 | 11 | /******************* 12 | ******************** 13 | ******************** 14 | 15 | HEADER 16 | 17 | ******************** 18 | ******************** 19 | ********************/ 20 | 21 | #header { 22 | position: absolute; 23 | width: 100vw; 24 | height: 50px; 25 | top: 0; 26 | left: 0; 27 | background: white; 28 | } 29 | 30 | #header #header_bar_intro { 31 | margin-left: 7px; 32 | } 33 | 34 | #header #header_bar_edit { 35 | margin-left: 50px; 36 | white-space: nowrap; 37 | } 38 | 39 | #header #header_bar_edit > div { 40 | position: relative; 41 | top: 100%; 42 | height: 36px; 43 | margin: 7px 0 0 7px; 44 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 45 | border-radius: 3px; 46 | font-size: 12px; 47 | font-weight: 500; 48 | padding: 0 10px 0 10px; 49 | color: rgb(255, 104, 104); 50 | background: white; 51 | cursor: pointer; 52 | transition: color 250ms, background 250ms; 53 | } 54 | 55 | #header #header_bar_edit.selected > div { 56 | animation-name: header_alert; 57 | animation-duration: 300ms; 58 | animation-iteration-count: 1; 59 | animation-fill-mode: forwards; 60 | animation-timing-function: ease-in; 61 | } 62 | 63 | #header #header_bar_edit > div:nth-child(1) { 64 | animation-delay: 150ms; 65 | } 66 | 67 | #header #header_bar_edit > div:nth-child(2) { 68 | animation-delay: 250ms; 69 | } 70 | 71 | #header #header_bar_edit > div:nth-child(3) { 72 | animation-delay: 350ms; 73 | } 74 | 75 | #header #header_bar_edit > div:nth-child(4) { 76 | animation-delay: 450ms; 77 | } 78 | 79 | #header #header_bar_edit > div:nth-child(5) { 80 | animation-delay: 550ms; 81 | } 82 | 83 | @keyframes header_alert { 84 | 0% { 85 | top: 100%; 86 | } 87 | 60% { 88 | top: -10%; 89 | } 90 | 100% { 91 | top: 0%; 92 | } 93 | } 94 | 95 | #header #header_bar_edit > div:hover { 96 | background: rgb(255, 104, 104); 97 | color: white; 98 | } 99 | 100 | #header #header_bar_edit span { 101 | position: relative; 102 | display: block; 103 | top: 50%; 104 | transform: translateY(-50%); 105 | } 106 | 107 | #header .header_bar { 108 | overflow-y: hidden; 109 | height: 0; 110 | transition: height 250ms ease-out; 111 | font-size: 0; 112 | } 113 | 114 | #header .header_bar.selected { 115 | height: 50px; 116 | } 117 | 118 | #header .header_bar > div { 119 | display: inline-block; 120 | vertical-align: top; 121 | height: 50px; 122 | font-family: 'Work Sans', 'Helvetica', 'Arial', sans-serif; 123 | } 124 | 125 | #header #title h1, 126 | #header #subtitle h2, 127 | #header #families_count span { 128 | display: block; 129 | position: relative; 130 | top: 50%; 131 | transform: perspective(1px) translateY(-50%); 132 | padding-right: 20px; 133 | margin: 0; 134 | font-weight: 300; 135 | font-size: 24px; 136 | white-space: nowrap; 137 | color: #aaa; 138 | } 139 | 140 | #header #subtitle h2 { 141 | padding-right: 13px; 142 | font-weight: 100; 143 | } 144 | 145 | #header #families_count span { 146 | font-weight: 100; 147 | } 148 | 149 | #header #families_count strong { 150 | font-weight: 300; 151 | } 152 | 153 | #header #families_count em { 154 | font-weight: 300; 155 | font-style: normal; 156 | color: hsl(24, 100%, 44%); 157 | } 158 | 159 | /* About button in ABOUT section below */ 160 | 161 | /******************* 162 | ******************** 163 | ******************** 164 | 165 | LOADING AREA 166 | 167 | ******************** 168 | ******************** 169 | ********************/ 170 | 171 | .waiting_area { 172 | position: absolute; 173 | width: calc(100vw - 50px); 174 | height: calc(100vh - 50px); 175 | top: 50px; 176 | left: 50px; 177 | box-sizing: border-box; 178 | background: hsl(0, 0%, 96%); 179 | box-shadow: inset 0 5vh 5vh -2.5vh rgba(0, 0, 0, 0.03), 180 | inset 0 -5vh 5vh -2.5vh rgba(0, 0, 0, 0.06); 181 | } 182 | 183 | #loading { 184 | transition: opacity 500ms; 185 | } 186 | 187 | #loading div { 188 | height: calc(25vh - 50px); 189 | position: relative; 190 | top: 50%; 191 | transform: translateY(-50%); 192 | text-align: center; 193 | } 194 | 195 | #loading > div > div { 196 | display: inline-block; 197 | height: 100%; 198 | padding: 3vh; 199 | box-sizing: border-box; 200 | border-radius: 1.5vh; 201 | transition: background 5ms; 202 | } 203 | 204 | #loading span { 205 | display: inline-block; 206 | vertical-align: top; 207 | width: 10vw; 208 | height: 100%; 209 | margin-left: 1vw; 210 | border-radius: 0.5vw; 211 | animation-name: bounce; 212 | animation-duration: 1500ms; 213 | animation-iteration-count: infinite; 214 | animation-timing-function: ease-out; 215 | } 216 | 217 | #loading span:nth-child(1) { 218 | margin-left: 0; 219 | } 220 | 221 | #loading span:nth-child(2) { 222 | animation-delay: 100ms; 223 | } 224 | 225 | #loading span:nth-child(3) { 226 | animation-delay: 200ms; 227 | } 228 | 229 | #loading span:nth-child(4) { 230 | animation-delay: 300ms; 231 | } 232 | 233 | #loading span:nth-child(5) { 234 | animation-delay: 400ms; 235 | } 236 | 237 | @keyframes bounce { 238 | 0% { 239 | opacity: 0; 240 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); 241 | transform: scale(0.85); 242 | } 243 | 30% { 244 | opacity: 1; 245 | box-shadow: 0 0 2vw 0.25vw rgba(0, 0, 0, 0.2); 246 | transform: scale(1); 247 | } 248 | 35% { 249 | opacity: 1; 250 | box-shadow: 0 0 2vw 0.25vw rgba(0, 0, 0, 0.2); 251 | transform: scale(1); 252 | } 253 | 65% { 254 | opacity: 0; 255 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); 256 | transform: scale(0.85); 257 | } 258 | 100% { 259 | opacity: 0; 260 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); 261 | transform: scale(0.85); 262 | } 263 | } 264 | 265 | #no_matches { 266 | visibility: hidden; 267 | font-size: 0; 268 | } 269 | 270 | #no_matches.open { 271 | visibility: visible; 272 | } 273 | 274 | #no_matches > div { 275 | height: 36vh; 276 | position: relative; 277 | top: 50%; 278 | transform: translateY(-50%); 279 | text-align: center; 280 | } 281 | 282 | #no_matches > div > div { 283 | width: 36vh; 284 | height: 36vh; 285 | display: inline-block; 286 | vertical-align: top; 287 | position: relative; 288 | border-radius: 18vh; 289 | background: rgba(0,0,0,0.2); 290 | box-shadow: inset 0 0 5vh 0px rgba(0, 0, 0, 0.2); 291 | opacity: 0; 292 | transition: opacity 1000ms ease-in, left 1000ms cubic-bezier(.31,.74,.49,1); 293 | } 294 | 295 | #no_matches > div > div:nth-child(1) { 296 | left: -8vh; 297 | } 298 | 299 | #no_matches > div > div:nth-child(2) { 300 | left: 8vh; 301 | } 302 | 303 | #no_matches.open > div > div { 304 | opacity: 1; 305 | } 306 | 307 | #no_matches.open > div > div:nth-child(1) { 308 | left: 6vh; 309 | } 310 | 311 | #no_matches.open > div > div:nth-child(2) { 312 | left: -6vh; 313 | } 314 | 315 | /******************* 316 | ******************** 317 | ******************** 318 | 319 | LIST 320 | 321 | ******************** 322 | ******************** 323 | ********************/ 324 | 325 | #list { 326 | position: absolute; 327 | width: calc(100vw - 50px); 328 | height: calc(100vh - 50px); 329 | top: 50px; 330 | left: 50px; 331 | padding: 7px 0; 332 | box-sizing: border-box; 333 | overflow-y: scroll; 334 | overflow-x: hidden; 335 | background: hsl(0, 0%, 96%); 336 | box-shadow: 337 | inset 0 5vh 5vh -2.5vh rgba(0, 0, 0, 0.03), 338 | inset 0 -5vh 5vh -2.5vh rgba(0, 0, 0, 0.06), 339 | inset 5vh 0 2.5vh -5vh rgba(0, 0, 0, 0.06); 340 | opacity: 0; 341 | transition: opacity 500ms; 342 | } 343 | 344 | #list.collapse_weights .specimen { 345 | display: none; 346 | } 347 | 348 | #list.collapse_weights .specimen.primary { 349 | display: block; 350 | } 351 | 352 | .specimen { 353 | width: calc(100% - 14px); 354 | margin: 0 7px; 355 | box-sizing: border-box; 356 | color: hsl(0, 0%, 30%); 357 | font-size: 0; 358 | border-radius: 5px; 359 | opacity: 0; 360 | transition: color 200ms, background-color 200ms; 361 | } 362 | 363 | .specimen.animate { 364 | animation-name: notice; 365 | animation-duration: 300ms; 366 | animation-iteration-count: 1; 367 | animation-timing-function: ease-in; 368 | animation-fill-mode: forwards; 369 | } 370 | 371 | @keyframes notice { 372 | 0% { 373 | transform: scale(1.1); 374 | opacity: 0; 375 | } 376 | 100% { 377 | transform: scale(1); 378 | opacity: 1; 379 | } 380 | } 381 | 382 | .specimen.filtered_out { 383 | display: none; 384 | } 385 | 386 | .specimen > div { 387 | display: inline-block; 388 | vertical-align: top; 389 | transform-origin: 0% 0%; 390 | } 391 | 392 | .specimen .google_link { 393 | text-align: right; 394 | position: relative; 395 | top: 40%; 396 | transform: perspective(1px) translateY(-50%); 397 | } 398 | 399 | .specimen span { 400 | font-size: 60px; 401 | margin-left: 7px; 402 | box-sizing: border-box; 403 | } 404 | 405 | .specimen span, .specimen a { 406 | white-space: nowrap; 407 | } 408 | 409 | .specimen a { 410 | display: inline-block; 411 | vertical-align: bottom; 412 | padding: 7px; 413 | margin-right: 7px; 414 | text-decoration: none; 415 | box-sizing: border-box; 416 | border-radius: 3px; 417 | font-size: 18px; 418 | font-weight: 300; 419 | font-family: 'Work Sans', 'Helvetica', 'Arial', sans-serif; 420 | color: rgb(255, 104, 104); 421 | box-shadow: 0 0 0 rgb(156, 156, 156); 422 | transition: background 250ms, box-shadow 250ms; 423 | } 424 | 425 | .specimen a span { 426 | font-size: 12px; 427 | margin: 0; 428 | vertical-align: super; 429 | opacity: 0; 430 | display: none; 431 | transition: display 1ms 249ms, opacity: 250ms; 432 | } 433 | 434 | .specimen a.show_weights span { 435 | opacity: 1; 436 | display: inline; 437 | transition: display 1ms, opacity: 250ms; 438 | } 439 | 440 | .specimen .favorite { 441 | display: inline-block; 442 | width: 30px; 443 | height: 35px; 444 | padding: 11px 8px 0 0; 445 | box-sizing: border-box; 446 | margin-right: 7px; 447 | border-radius: 3px; 448 | cursor: pointer; 449 | transition: background 250ms, box-shadow 250ms; 450 | } 451 | 452 | .specimen .favorite svg { 453 | height: 13px; 454 | fill: hsla(0, 100%, 100%, 0); 455 | stroke: hsl(0, 100%, 70%); 456 | stroke-width: 1.5px; 457 | transition: fill 250ms; 458 | } 459 | 460 | .specimen .favorite.selected svg { 461 | fill: hsl(0, 100%, 70%); 462 | } 463 | 464 | .specimen input { 465 | width: 100%; 466 | margin: 0 0 0 7px; 467 | padding: 0; 468 | border: 0; 469 | outline: none; 470 | background: none; 471 | font-size: 60px; 472 | color: rgb(255, 104, 104); 473 | } 474 | 475 | /******************* 476 | ******************** 477 | ******************** 478 | 479 | FILTERS 480 | 481 | ******************** 482 | ******************** 483 | ********************/ 484 | 485 | #filters { 486 | position: absolute; 487 | width: 100vw; 488 | height: calc(100vh - 50px); 489 | top: 50px; 490 | left: 0; 491 | background: white; 492 | overflow-y: scroll; 493 | overflow-x: hidden; 494 | } 495 | 496 | #filters #compare { 497 | height: 0px; 498 | position: relative; 499 | top: 7px; 500 | left: 7px; 501 | margin-bottom: 0px; 502 | transition: height 250ms ease-in, margin-bottom 250ms ease-in; 503 | } 504 | 505 | #filters #compare.open { 506 | height: 30px; 507 | margin-bottom: 28px; 508 | transition: height 500ms 250ms ease-out, margin-bottom 500ms 250ms ease-out; 509 | } 510 | 511 | #filters #compare .binary { 512 | position: relative; 513 | top: 0; 514 | left: 0; 515 | width: 36px; 516 | height: 30px; 517 | padding: 5px 0px 0 8px; 518 | border: 1px solid hsla(0, 100%, 50%, 0.2); 519 | border-radius: 3px; 520 | box-sizing: border-box; 521 | background-color: white; 522 | fill: hsl(0, 0%, 65%); 523 | cursor: pointer; 524 | transition: fill 250ms, background 250ms, box-shadow 250ms; 525 | } 526 | 527 | #filters #compare .binary svg { 528 | height: 18px; 529 | } 530 | 531 | #filters #compare .binary.selected { 532 | background: hsl(0, 0%, 92%); 533 | border: 1px solid hsl(0, 0%, 74%); 534 | fill: hsl(0, 0%, 45%); 535 | box-shadow: 536 | inset 4px 0 4px -4px rgb(156, 156, 156), 537 | inset -4px 0 4px -4px rgb(156, 156, 156), 538 | inset 0 4px 4px -4px rgb(156, 156, 156), 539 | inset 0 -4px 4px -4px rgb(156, 156, 156); 540 | border-radius: 3px; 541 | } 542 | 543 | #filters #compare.open .binary { 544 | animation-name: alert; 545 | animation-delay: 750ms; 546 | animation-duration: 1000ms; 547 | animation-iteration-count: 1; 548 | animation-timing-function: ease-out; 549 | } 550 | 551 | @keyframes alert { 552 | 0% { 553 | top: 0; 554 | left: 0; 555 | width: 36px; 556 | height: 30px; 557 | padding: 5px 0 0 8px; 558 | border-color: hsla(0, 100%, 50%, 0.2); 559 | fill: hsl(0, 0%, 65%); 560 | background-color: white; 561 | } 562 | 25% { 563 | top: -2px; 564 | left: -2px; 565 | width: 40px; 566 | height: 34px; 567 | padding: 7px 0 0 10px; 568 | border-color: rgb(255, 104, 104); 569 | background-color: rgb(255, 104, 104); 570 | fill: hsl(0, 0%, 100%); 571 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 572 | } 573 | 75% { 574 | top: -2px; 575 | left: -2px; 576 | width: 40px; 577 | height: 34px; 578 | padding: 7px 0 0 10px; 579 | border-color: rgb(255, 104, 104); 580 | background-color: rgb(255, 104, 104); 581 | fill: hsl(0, 0%, 100%); 582 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 583 | } 584 | 100% { 585 | top: 0; 586 | left: 0; 587 | width: 36px; 588 | height: 30px; 589 | padding: 5px 0 0 8px; 590 | border-color: hsla(0, 100%, 50%, 0.2); 591 | fill: hsl(0, 0%, 65%); 592 | background-color: white; 593 | } 594 | } 595 | 596 | #filters #categorize { 597 | opacity: 0; 598 | transition: opacity 500ms; 599 | position: relative; 600 | top: 7px; 601 | left: 7px; 602 | } 603 | 604 | #filters #categorize.open { 605 | opacity: 1; 606 | transition: opacity 250ms; 607 | } 608 | 609 | #filters #categorize > div { 610 | font-size: 0; 611 | margin-bottom: 28px; 612 | } 613 | 614 | #filters .opt_group { 615 | width: 36px; 616 | border-radius: 3px; 617 | } 618 | 619 | #filters .option { 620 | display: block; 621 | position: relative; 622 | top: 0; 623 | left: 0; 624 | width: 36px; 625 | height: 30px; 626 | box-sizing: border-box; 627 | border-left: 1px solid hsla(0, 100%, 50%, 0.2); 628 | border-right: 1px solid hsla(0, 100%, 50%, 0.2); 629 | border-bottom: 1px solid rgba(0,0,0,0.03); 630 | background-color: white; 631 | fill: hsl(0, 0%, 65%); 632 | text-align: center; 633 | cursor: pointer; 634 | transition: fill 250ms, 635 | background 250ms, 636 | box-shadow 250ms 637 | } 638 | 639 | /* see media queries below 640 | #filters .option:hover { 641 | } 642 | */ 643 | 644 | #filters .option svg { 645 | width: 34px; 646 | height: 28px; 647 | } 648 | 649 | #filters .option.opt_top { 650 | border-top: 1px solid hsla(0, 100%, 50%, 0.2); 651 | border-radius: 3px 3px 0 0; 652 | } 653 | 654 | #filters .option.opt_bottom { 655 | border-bottom: 1px solid hsla(0, 100%, 50%, 0.2); 656 | border-radius: 0 0 3px 3px; 657 | } 658 | 659 | #filters .option.selected { 660 | background: hsl(0, 0%, 92%); 661 | fill: hsl(0, 0%, 45%); 662 | box-shadow: 663 | inset 4px 0 4px -4px hsl(0, 0%, 61%), 664 | inset -4px 0 4px -4px hsl(0, 0%, 61%), 665 | inset 0 -1px 0 0 hsl(0, 0%, 88%); 666 | border: none; 667 | } 668 | 669 | #filters .option.opt_top.selected { 670 | box-shadow: 671 | inset 4px 0 4px -4px rgb(156, 156, 156), 672 | inset -4px 0 4px -4px rgb(156, 156, 156), 673 | inset 0 4px 4px -4px rgb(156, 156, 156), 674 | inset 0 -1px 0 0 hsl(0, 0%, 88%); 675 | } 676 | 677 | #filters .option.opt_bottom.selected { 678 | box-shadow: 679 | inset 4px 0 4px -4px rgb(156, 156, 156), 680 | inset -4px 0 4px -4px rgb(156, 156, 156), 681 | inset 0 -4px 4px -4px rgb(156, 156, 156); 682 | } 683 | 684 | #filters .group_accordion { 685 | margin-bottom: 3px; 686 | width: 36px; 687 | height: 30px; 688 | border-radius: 3px; 689 | box-sizing: border-box; 690 | fill: hsl(0, 0%, 65%); 691 | background-color: white; 692 | cursor: pointer; 693 | transition: fill 250ms, background 250ms, box-shadow 250ms; 694 | } 695 | 696 | /* see media queries below 697 | #filters .group_accordion:hover { 698 | } 699 | */ 700 | 701 | #filters .group_accordion.selected { 702 | background: hsl(0, 0%, 92%); 703 | border: none; 704 | fill: hsl(0, 0%, 45%); 705 | box-shadow: 706 | inset 4px 0 4px -4px rgb(156, 156, 156), 707 | inset -4px 0 4px -4px rgb(156, 156, 156), 708 | inset 0 4px 4px -4px rgb(156, 156, 156), 709 | inset 0 -4px 4px -4px rgb(156, 156, 156); 710 | border-radius: 3px; 711 | } 712 | 713 | #filters .group_toggle { 714 | width: 36px; 715 | height: 36px; 716 | box-sizing: border-box; 717 | cursor: pointer; 718 | } 719 | 720 | #filters .group_toggle > div { 721 | height: 16px; 722 | position: relative; 723 | left: 3px; 724 | top: 10px; 725 | width: 30px; 726 | border-radius: 8px; 727 | background-color: hsl(0, 0%, 95%); 728 | box-shadow: inset 0 0px 4px 0 hsl(0, 0%, 80%); 729 | } 730 | 731 | #filters .group_toggle > div > div { 732 | width: 20px; 733 | height: 20px; 734 | position: relative; 735 | top: -2px; 736 | left: 0; 737 | border-radius: 10px; 738 | background-color: hsl(0, 0%, 95%); 739 | box-shadow: 0 1px 4px hsla(0, 0%, 0%, .3); 740 | transition: left 100ms ease-in; 741 | } 742 | 743 | #filters .group_toggle > div:hover > div { 744 | box-shadow: 0 1px 4px rgb(255, 104, 104); 745 | } 746 | 747 | #filters .group_toggle.selected > div { 748 | background-color: rgb(255, 104, 104); 749 | } 750 | 751 | #filters .group_toggle.selected > div > div { 752 | left: 11px; 753 | } 754 | 755 | #filters #weight { 756 | height: 33px; 757 | overflow: hidden; 758 | transition: height 200ms ease-in; 759 | } 760 | 761 | #filters #weight.open { 762 | height: 335px; 763 | transition: height 500ms ease-out; 764 | } 765 | 766 | #filters .weight span { 767 | display: block; 768 | height: 28px; 769 | position: relative; 770 | top: 50%; 771 | transform: perspective(1px) translateY(-50%); 772 | font-family: 'Work Sans'; 773 | } 774 | 775 | #filters .weight { 776 | font-size: 24px; 777 | height: 30px; 778 | } 779 | 780 | #filters #w100, 781 | #list .css100 { 782 | font-weight: 100; 783 | } 784 | 785 | #filters #w200, 786 | #list .css200 { 787 | font-weight: 200; 788 | } 789 | 790 | #filters #w300, 791 | #list .css300 { 792 | font-weight: 300; 793 | } 794 | 795 | #filters #w400, 796 | #list .css400 { 797 | font-weight: 400; 798 | } 799 | 800 | #filters #w500, 801 | #list .css500 { 802 | font-weight: 500; 803 | } 804 | 805 | #filters #w600, 806 | #list .css600 { 807 | font-weight: 600; 808 | } 809 | 810 | #filters #w700, 811 | #list .css700 { 812 | font-weight: 700; 813 | } 814 | 815 | #filters #w800, 816 | #list .css800 { 817 | font-weight: 800; 818 | } 819 | 820 | #filters #w900, 821 | #list .css900 { 822 | font-weight: 900; 823 | } 824 | 825 | .zoomed { 826 | position: absolute; 827 | width: calc(100vw - 50px); 828 | height: calc(100vh - 50px); 829 | top: 0; 830 | left: 50px; 831 | margin: 0; 832 | z-index: 0; 833 | transition: z-index 0ms 500ms; 834 | } 835 | 836 | .zoomed div { 837 | position: relative; 838 | height: 40vh; 839 | top: 48%; 840 | left: 50%; 841 | transform: translateX(-50%) translateY(-50%); 842 | transition: top 250ms 250ms cubic-bezier(.31,.74,.49,1); 843 | } 844 | 845 | .zoomed svg { 846 | width: 100%; 847 | height: 100%; 848 | /* padding prevents the svg dropshadow effect from being cropped */ 849 | padding: 10vh 0; 850 | /* margin offsets padding */ 851 | margin-top: -10vh; 852 | fill: hsla(0,100%,60%,0.8); 853 | opacity: 0; 854 | transition: opacity 250ms 250ms; 855 | } 856 | 857 | /* see media queries below 858 | .option:hover ~ .zoomed { 859 | } 860 | */ 861 | 862 | #filters #zoom #svg_filters { 863 | position: absolute; 864 | top: 0; 865 | left: 0; 866 | width: 0; 867 | height: 0; 868 | padding: 0; 869 | } 870 | 871 | /******************* 872 | ******************** 873 | ******************** 874 | 875 | ABOUT 876 | 877 | ******************** 878 | ******************** 879 | ********************/ 880 | 881 | #about { 882 | } 883 | 884 | #about.open { 885 | position: absolute; 886 | width: 100vw; 887 | height: 100vh; 888 | cursor: pointer; 889 | } 890 | 891 | #about > div { 892 | position: absolute; 893 | top: 0; 894 | right: 0; 895 | width: 0; 896 | height: 100vh; 897 | box-sizing: border-box; 898 | background-color: hsl(0, 100%, 70%); 899 | padding-top: 50px; 900 | overflow: auto; 901 | cursor: default; 902 | transition: width 250ms cubic-bezier(.31,.74,.49,1); 903 | } 904 | 905 | #about.open > div { 906 | width: 221px; 907 | box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1); 908 | transition: width 500ms cubic-bezier(.31,.74,.49,1); 909 | } 910 | 911 | #about p { 912 | display: block; 913 | width: 200px; 914 | margin: 0 7px 14px 14px; 915 | padding: 0; 916 | font-family: 'Work Sans', 'Helvetica', 'Arial', sans-serif; 917 | font-weight: 200; 918 | color: white; 919 | font-size: 15px; 920 | opacity: 0; 921 | transition: opacity 300ms; 922 | } 923 | 924 | #about.open p { 925 | opacity: 1; 926 | transition: opacity 750ms 150ms; 927 | } 928 | 929 | #about a { 930 | color: white; 931 | font-weight: 500; 932 | } 933 | 934 | #about a:hover { 935 | text-decoration: none; 936 | } 937 | 938 | #about a.tiny { 939 | font-weight: 200; 940 | } 941 | 942 | #header #about_button { 943 | width: 50px; 944 | position: absolute; 945 | top: 0; 946 | right: 0; 947 | height: 0; 948 | overflow: hidden; 949 | transition: height 250ms ease-out; 950 | } 951 | 952 | #header #about_button.selected { 953 | height: 50px; 954 | } 955 | 956 | #header #about_button div { 957 | height: 36px; 958 | width: 36px; 959 | margin: 7px 0 0 7px; 960 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 961 | border-radius: 3px; 962 | font-size: 24px; 963 | font-weight: 500; 964 | font-family: 'Croissant One'; 965 | text-align: center; 966 | color: rgb(255, 104, 104); 967 | background: white; 968 | cursor: pointer; 969 | transition: color 250ms, background 250ms, border-radius 500ms; 970 | } 971 | 972 | #header #about_button.open { 973 | z-index: 1; /* so that button is visible above about panel */ 974 | } 975 | 976 | #header #about_button.open div { 977 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); 978 | border-radius: 18px; 979 | } 980 | 981 | /* see media queries below 982 | #header #about_button div:hover { 983 | } 984 | */ 985 | 986 | #header #about_button span { 987 | display: block; 988 | position: relative; 989 | top: 50%; 990 | transform: perspective(1px) translateY(-50%); 991 | } 992 | 993 | /******************* 994 | ******************** 995 | ******************** 996 | 997 | SMALLER SCREENS 998 | 999 | ******************** 1000 | ******************** 1001 | ********************/ 1002 | 1003 | @media all and (max-width: 600px) { 1004 | 1005 | .waiting_area > div { 1006 | height: calc(20vh - 50px); 1007 | } 1008 | 1009 | .specimen { 1010 | margin-bottom: 20px; 1011 | } 1012 | 1013 | .specimen .google_link { 1014 | position: absolute; 1015 | top: 120%; 1016 | right: 0; 1017 | } 1018 | 1019 | .specimen a { 1020 | margin-right: -7px; 1021 | position: absolute; 1022 | right: 35px; 1023 | font-size: 12px; 1024 | } 1025 | 1026 | .specimen a span { 1027 | font-size: 10px; 1028 | } 1029 | 1030 | .specimen .favorite { 1031 | padding: 7px 5px 4px 5px; 1032 | margin-right: -7px; 1033 | } 1034 | 1035 | .specimen .favorite svg { 1036 | height: 16px; 1037 | } 1038 | 1039 | } 1040 | 1041 | /******************* 1042 | ******************** 1043 | ******************** 1044 | 1045 | HOVER DEVICES 1046 | 1047 | ******************** 1048 | ******************** 1049 | ********************/ 1050 | 1051 | @media (hover: hover) { 1052 | 1053 | /* 1054 | styles for devices that support true hover 1055 | puttng styles here prevents sticky-hover on mobile 1056 | */ 1057 | 1058 | #filters #compare .binary:hover { 1059 | top: -2px; 1060 | left: -2px; 1061 | width: 40px; 1062 | height: 34px; 1063 | padding: 7px 0 0 10px; 1064 | border-color: rgb(255, 104, 104); 1065 | background-color: rgb(255, 104, 104); 1066 | fill: hsl(0, 0%, 100%); 1067 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 1068 | } 1069 | 1070 | #filters #compare .binary.tapped:hover { 1071 | top: 0; 1072 | left: 0; 1073 | width: 36px; 1074 | height: 30px; 1075 | padding: 5px 0px 0 8px; 1076 | border-color: hsla(0, 100%, 50%, 0.2); 1077 | background-color: white; 1078 | fill: hsl(0, 0%, 65%); 1079 | box-shadow: none; 1080 | } 1081 | 1082 | #filters #compare .binary.selected.tapped:hover { 1083 | background: hsl(0, 0%, 92%); 1084 | border-color: hsl(0, 0%, 74%); 1085 | fill: hsl(0, 0%, 45%); 1086 | box-shadow: 1087 | inset 4px 0 4px -4px rgb(156, 156, 156), 1088 | inset -4px 0 4px -4px rgb(156, 156, 156), 1089 | inset 0 4px 4px -4px rgb(156, 156, 156), 1090 | inset 0 -4px 4px -4px rgb(156, 156, 156); 1091 | border-radius: 3px; 1092 | } 1093 | 1094 | #filters .option:hover ~ .zoomed { 1095 | z-index: 2; 1096 | transition: z-index 0ms 0ms; 1097 | } 1098 | 1099 | #filters .option:hover ~ .zoomed div { 1100 | top: 45%; 1101 | transition: top 500ms cubic-bezier(.31,.74,.49,1); 1102 | } 1103 | 1104 | #classic_stressed:hover + #classic_stressed_zoomed svg, 1105 | #none_unstressed:hover + #none_unstressed_zoomed svg, 1106 | #slab:hover + #slab_zoomed svg, 1107 | #classic:hover + #classic_zoomed svg, 1108 | #none:hover + #none_zoomed svg, 1109 | #round:hover + #round_zoomed svg, 1110 | #othercap:hover + #othercap_zoomed svg, 1111 | #ultra:hover + #ultra_zoomed svg, 1112 | #stressed:hover + #stressed_zoomed svg, 1113 | #unstressed:hover + #unstressed_zoomed svg, 1114 | #hybrid:hover + #hybrid_zoomed svg 1115 | { 1116 | opacity: 1; 1117 | transition: opacity 500ms; 1118 | } 1119 | 1120 | #classic_stressed.tapped:hover + #classic_stressed_zoomed svg, 1121 | #none_unstressed.tapped:hover + #none_unstressed_zoomed svg, 1122 | #slab.tapped:hover + #slab_zoomed svg, 1123 | #classic.tapped:hover + #classic_zoomed svg, 1124 | #none.tapped:hover + #none_zoomed svg, 1125 | #round.tapped:hover + #round_zoomed svg, 1126 | #othercap.tapped:hover + #othercap_zoomed svg, 1127 | #ultra.tapped:hover + #ultra_zoomed svg, 1128 | #stressed.tapped:hover + #stressed_zoomed svg, 1129 | #unstressed.tapped:hover + #unstressed_zoomed svg, 1130 | #hybrid.tapped:hover + #hybrid_zoomed svg 1131 | { 1132 | opacity: 0; 1133 | transition: opacity 250ms; 1134 | } 1135 | 1136 | #filters .option:hover { 1137 | top: -2px; 1138 | left: -2px; 1139 | width: 40px; 1140 | height: 34px; 1141 | margin-bottom: -4px; 1142 | border-left: 1px solid hsla(0, 100%, 50%, 0); 1143 | border-right: 1px solid hsla(0, 100%, 50%, 0); 1144 | border-bottom: 1px solid rgba(0,0,0,0); 1145 | background: rgb(255, 104, 104); 1146 | fill: white; 1147 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 1148 | border-radius: 2px; 1149 | padding-top: 2px; 1150 | z-index: 1; 1151 | } 1152 | 1153 | #filters .option.tapped:hover { 1154 | top: 0; 1155 | left: 0; 1156 | width: 36px; 1157 | height: 30px; 1158 | margin-bottom: 0; 1159 | border-left: 1px solid hsla(0, 100%, 50%, 0.2); 1160 | border-right: 1px solid hsla(0, 100%, 50%, 0.2); 1161 | border-bottom: 1px solid rgba(0,0,0,0.03); 1162 | background-color: white; 1163 | fill: hsl(0, 0%, 65%); 1164 | border-radius: 0; 1165 | padding-top: 0; 1166 | box-shadow: none; 1167 | } 1168 | 1169 | #filters .option.tapped.selected:hover { 1170 | background: hsl(0, 0%, 92%); 1171 | fill: hsl(0, 0%, 45%); 1172 | border-radius: 0; 1173 | width: 36px; 1174 | height: 30px; 1175 | padding: 0; 1176 | box-shadow: 1177 | inset 4px 0 4px -4px hsl(0, 0%, 61%), 1178 | inset -4px 0 4px -4px hsl(0, 0%, 61%), 1179 | inset 0 -1px 0 0 hsl(0, 0%, 88%); 1180 | border: none; 1181 | } 1182 | 1183 | #filters .option.opt_top:hover { 1184 | border-color: hsla(0, 100%, 50%, 0); 1185 | } 1186 | 1187 | #filters .option.opt_top.selected:hover { 1188 | border-color: hsla(0, 100%, 50%, 0); 1189 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 1190 | } 1191 | 1192 | #filters .option.tapped.opt_top:hover { 1193 | border-width: 1px 1px 0 1px; 1194 | border-color: hsla(0, 100%, 50%, 0.2); 1195 | border-radius: 3px 3px 0 0; 1196 | } 1197 | 1198 | #filters .option.tapped.opt_top.selected:hover { 1199 | box-shadow: 1200 | inset 4px 0 4px -4px rgb(156, 156, 156), 1201 | inset -4px 0 4px -4px rgb(156, 156, 156), 1202 | inset 0 4px 4px -4px rgb(156, 156, 156), 1203 | inset 0 -1px 0 0 hsl(0, 0%, 88%); 1204 | border-radius: 3px 3px 0 0; 1205 | } 1206 | 1207 | #filters .option.opt_bottom:hover { 1208 | border-color: hsla(0, 100%, 50%, 0); 1209 | } 1210 | 1211 | #filters .option.opt_bottom.selected:hover { 1212 | border-color: hsla(0, 100%, 50%, 0); 1213 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 1214 | } 1215 | 1216 | #filters .option.tapped.opt_bottom:hover { 1217 | border-width: 0 1px 1px 1px; 1218 | border-color: hsla(0, 100%, 50%, 0.2); 1219 | border-radius: 0 0 3px 3px; 1220 | } 1221 | 1222 | #filters .option.tapped.opt_bottom.selected:hover { 1223 | box-shadow: 1224 | inset 4px 0 4px -4px rgb(156, 156, 156), 1225 | inset -4px 0 4px -4px rgb(156, 156, 156), 1226 | inset 0 -4px 4px -4px rgb(156, 156, 156); 1227 | } 1228 | 1229 | #filters .group_accordion:hover { 1230 | background: rgb(255, 104, 104); 1231 | fill: white; 1232 | box-shadow: none; 1233 | } 1234 | 1235 | #header #about_button div:hover { 1236 | background: rgb(255, 104, 104); 1237 | color: white; 1238 | } 1239 | 1240 | .specimen:hover { 1241 | color: black; 1242 | background-color: rgba(255,255,255,0.6); 1243 | } 1244 | 1245 | .specimen a:hover { 1246 | background: white; 1247 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 1248 | } 1249 | 1250 | .specimen .favorite:hover { 1251 | background: white; 1252 | box-shadow: 0 1.5px 4px rgb(156, 156, 156); 1253 | } 1254 | 1255 | } 1256 | 1257 | 1258 | 1259 | --------------------------------------------------------------------------------