|
1 | 1 | /* import via postcss */ |
2 | 2 | @import "../site/css/ticker.css"; |
| 3 | +@import "../site/css/hubspot-form.css"; |
3 | 4 |
|
4 | 5 | /* purgecss start ignore */ |
5 | 6 | @tailwind base; |
|
17 | 18 | } |
18 | 19 | } |
19 | 20 | h2 { |
20 | | - @apply text-white text-3xl font-bold leading-none mb-8; |
| 21 | + @apply text-white text-3xl font-bold leading-none mb-8; |
21 | 22 | } |
22 | 23 | @screen md { |
23 | 24 | h2 { |
@@ -54,9 +55,7 @@ dd a:focus { |
54 | 55 | p+p { |
55 | 56 | @apply mt-4; |
56 | 57 | } |
57 | | -section.cards { |
58 | | - max-width: 66rem; |
59 | | -} |
| 58 | + |
60 | 59 |
|
61 | 60 | /* |
62 | 61 | CTA links |
@@ -154,21 +153,29 @@ footer p a:focus { |
154 | 153 | } |
155 | 154 |
|
156 | 155 | @supports (outline: none) { |
| 156 | + .group:hover .group-hover\:card-shadow-blue-seafoam, |
| 157 | + .group:focus .group-hover\:card-shadow-blue-seafoam, |
157 | 158 | .hover\:card-shadow-blue-seafoam:hover, |
158 | 159 | .hover\:card-shadow-blue-seafoam:focus { |
159 | 160 | outline: none; |
160 | 161 | box-shadow: 0px 3px 20px rgba(1, 159, 220, 0.6); |
161 | 162 | } |
| 163 | + .group:hover .group-hover\:card-shadow-seafoam, |
| 164 | + .group:focus .group-hover\:card-shadow-seafoam, |
162 | 165 | .hover\:card-shadow-seafoam:hover, |
163 | 166 | .hover\:card-shadow-seafoam:focus { |
164 | 167 | outline: none; |
165 | 168 | box-shadow: 0px 3px 20px rgba(135, 249, 237, 0.7); |
166 | 169 | } |
| 170 | + .group:hover .group-hover\:card-shadow-sunrise, |
| 171 | + .group:focus .group-hover\:card-shadow-sunrise, |
167 | 172 | .hover\:card-shadow-sunrise:hover, |
168 | 173 | .hover\:card-shadow-sunrise:focus { |
169 | 174 | outline: none; |
170 | 175 | box-shadow: 0px 3px 20px rgba(246, 62, 103, 0.6); |
171 | 176 | } |
| 177 | + .group:hover .group-hover\:card-shadow-gold, |
| 178 | + .group:focus .group-hover\:card-shadow-gold, |
172 | 179 | .hover\:card-shadow-gold:hover, |
173 | 180 | .hover\:card-shadow-gold:focus { |
174 | 181 | outline: none; |
@@ -316,13 +323,159 @@ details[open] .summary-swap-open { |
316 | 323 | } |
317 | 324 |
|
318 | 325 | /* Filters */ |
| 326 | +.filter-form { |
| 327 | + opacity: .4; |
| 328 | + pointer-events: none; |
| 329 | +} |
| 330 | +.filter-container--js .filter-form { |
| 331 | + opacity: 1; |
| 332 | + pointer-events: auto; |
| 333 | +} |
319 | 334 | .filter-opensource--hide, |
320 | 335 | .filter-typeofcms--hide, |
321 | 336 | .filter-language--hide, |
322 | 337 | .filter-template--hide, |
323 | | -.filter-license--hide { |
| 338 | +.filter-license--hide, |
| 339 | +.filter-country--hide { |
324 | 340 | display: none !important; |
325 | 341 | } |
| 342 | + |
| 343 | +/* Jamstack TV */ |
| 344 | +.ais-SearchBox-input { |
| 345 | + @apply bg-blue-900; |
| 346 | + @apply text-white; |
| 347 | + @apply font-bold; |
| 348 | + @apply p-3; |
| 349 | + @apply pl-14; |
| 350 | + @apply mx-auto; |
| 351 | + @apply border; |
| 352 | + border-color: #5A5F75; |
| 353 | + @apply rounded-full; |
| 354 | + @apply block; |
| 355 | + @apply w-full; |
| 356 | + background-image: url(/img/svg/icon-search.svg); |
| 357 | + background-repeat: no-repeat; |
| 358 | + background-position: 1em 50%; |
| 359 | + position: relative; |
| 360 | +} |
| 361 | +.ais-SearchBox-input:before { |
| 362 | + content: ""; |
| 363 | + position: absolute; |
| 364 | + left: 0; |
| 365 | + top: 0; |
| 366 | + bottom: 0; |
| 367 | + width: 3em; |
| 368 | + background-color: #2b3350; |
| 369 | +} |
| 370 | +@supports (box-shadow: none) { |
| 371 | + .ais-SearchBox-input:focus { |
| 372 | + outline: none; |
| 373 | + box-shadow: 0 0 1px 4px #E7017A; |
| 374 | + } |
| 375 | +} |
| 376 | + |
| 377 | +.jamstacktv-link { |
| 378 | + display: flex; |
| 379 | + flex-wrap: wrap; |
| 380 | +} |
| 381 | +.jamstacktv-card { |
| 382 | + flex-basis: 18.75em; /* 300px /16 */ |
| 383 | +} |
| 384 | +.jamstacktv-item { |
| 385 | + flex-basis: 18.75em; /* 300px /16 */ |
| 386 | + flex-grow: 3; |
| 387 | +} |
| 388 | +.jamstacktv-card, |
| 389 | +.jamstacktv-img { |
| 390 | + border-radius: 1em 0 1em 1em; |
| 391 | +} |
| 392 | +.jamstacktv-img { |
| 393 | + width: 100%; |
| 394 | +} |
| 395 | +.jamstacktv-duration { |
| 396 | + @apply inline-block; |
| 397 | + @apply px-1; |
| 398 | + @apply bg-black; |
| 399 | + @apply text-sm; |
| 400 | + @apply font-bold; |
| 401 | + position: absolute; |
| 402 | + right: .4em; |
| 403 | + top: .4em; |
| 404 | +} |
| 405 | +.jamstacktv-time { |
| 406 | + display: inline-block; |
| 407 | + margin-right: 0.25em; /* 4px /16 */ |
| 408 | +} |
| 409 | +.jamstacktv-time > b { |
| 410 | + display: inline-block; |
| 411 | + width: 0; |
| 412 | + height: 0; |
| 413 | + border-top: 5px solid transparent; |
| 414 | + border-bottom: 5px solid transparent; |
| 415 | + border-left: 7px solid currentColor; |
| 416 | +} |
| 417 | +.jamstacktv-time > b + b { |
| 418 | + margin-right: 3px; |
| 419 | +} |
| 420 | +.jamstacktv-item { |
| 421 | + @apply p-4; |
| 422 | + display: flex; |
| 423 | + flex-direction: column; |
| 424 | + justify-content: center; |
| 425 | +} |
| 426 | +.jamstacktv-item mark { |
| 427 | + @apply bg-pink-900; |
| 428 | + @apply text-white; |
| 429 | +} |
| 430 | +.jamstacktv-meta { |
| 431 | + @apply leading-normal; |
| 432 | +} |
| 433 | +.jamstacktv-category:after { |
| 434 | + content: ": "; |
| 435 | +} |
| 436 | +.jamstacktv-no-skip .jamstacktv-category:after { |
| 437 | + content: ""; |
| 438 | +} |
| 439 | +.jamstacktv-no-skip .jamstacktv-category { |
| 440 | + display: block; |
| 441 | +} |
| 442 | +.jamstacktv-caption { |
| 443 | + @apply text-xl; |
| 444 | + @apply font-normal; |
| 445 | +} |
| 446 | +.jamstacktv-caption-quote { |
| 447 | + @apply italic; |
| 448 | +} |
| 449 | +.jamstacktv-caption-quote:before { |
| 450 | + content: "“" |
| 451 | +} |
| 452 | +.jamstacktv-caption-quote:after { |
| 453 | + content: "”" |
| 454 | +} |
| 455 | +.jamstacktv-no-skip .jamstacktv-title { |
| 456 | + @apply text-2xl; |
| 457 | + @apply font-bold; |
| 458 | +} |
| 459 | +.jamstacktv-no-skip .jamstacktv-caption { |
| 460 | + display: none; |
| 461 | +} |
| 462 | +.js .jamstacktv-js { |
| 463 | + display: none; |
| 464 | +} |
| 465 | +.jamstacktv-scrubber { |
| 466 | + position: absolute; |
| 467 | + bottom: 0; |
| 468 | + width: 100%; |
| 469 | + display: flex; |
| 470 | + align-items: flex-end; |
| 471 | + height: 1em; |
| 472 | + border-radius: 0 0 1em 1em; |
| 473 | + overflow: hidden; |
| 474 | +} |
| 475 | +.jamstacktv-scrubber > div { |
| 476 | + height: 4px; |
| 477 | + background-color: red; |
| 478 | +} |
326 | 479 | /* purgecss end ignore */ |
327 | 480 |
|
328 | 481 | @tailwind utilities; |
0 commit comments