3
3
font-family : "Open Sans" , sans-serif;
4
4
}
5
5
6
- .mdl-layout__title a , .mdl-navigation__link , .hero-container {
6
+ .mdl-layout__title a ,
7
+ .mdl-navigation__link ,
8
+ .hero-container {
7
9
font-family : "Manrope" ;
8
10
}
9
11
@@ -28,15 +30,19 @@ a:hover {
28
30
text-decoration : underline;
29
31
}
30
32
31
- a , a : visited , a : hover , a : active {
33
+ a ,
34
+ a : visited ,
35
+ a : hover ,
36
+ a : active {
32
37
color : # 07a3ba ;
33
38
}
34
39
35
40
.spacer {
36
41
width : 100% ;
37
42
}
38
43
39
- .link-out , .resource-card-cta-button a {
44
+ .link-out ,
45
+ .resource-card-cta-button a {
40
46
font-family : "Manrope" ;
41
47
font-weight : 600 ;
42
48
font-size : 20px ;
@@ -134,11 +140,13 @@ h5 {
134
140
color : black;
135
141
}
136
142
137
- .mdl-layout__title a : visited , .mdl-layout__title a : active {
143
+ .mdl-layout__title a : visited ,
144
+ .mdl-layout__title a : active {
138
145
color : inherit;
139
146
}
140
147
141
- .sub-hero-container , .tutorial-hero-container {
148
+ .sub-hero-container ,
149
+ .tutorial-hero-container {
142
150
width : 100% ;
143
151
height : 225px ;
144
152
background-size : cover;
@@ -180,7 +188,11 @@ h5 {
180
188
margin-left : 5px ;
181
189
}
182
190
183
- .hero-container , .main-page-container , .sub-page-container , .tutorial-page-container , .footer-container {
191
+ .hero-container ,
192
+ .main-page-container ,
193
+ .sub-page-container ,
194
+ .tutorial-page-container ,
195
+ .footer-container {
184
196
margin : 0 auto;
185
197
max-width : 950px ;
186
198
}
209
221
border-radius : 8px ;
210
222
}
211
223
212
- .home-card-action , .section-action {
224
+ .home-card-action ,
225
+ .section-action {
213
226
font-weight : 600 ;
214
227
font-size : 16px ;
215
228
line-height : 22px ;
@@ -250,11 +263,15 @@ h5 {
250
263
margin-bottom : 50px ;
251
264
}
252
265
253
- .home-card-cta-button a : link , .link-out a : link {
266
+ .home-card-cta-button a : link ,
267
+ .link-out a : link {
254
268
text-decoration : none;
255
269
}
256
270
257
- .home-card-cta-button a : visited , .home-card-cta-button a : active , .link-out a : visited , .link-out a : active {
271
+ .home-card-cta-button a : visited ,
272
+ .home-card-cta-button a : active ,
273
+ .link-out a : visited ,
274
+ .link-out a : active {
258
275
color : # 07a3ba ;
259
276
}
260
277
270
287
overflow : hidden;
271
288
}
272
289
273
- .video-container iframe , .video-container object , .video-container embed {
290
+ .video-container iframe ,
291
+ .video-container object ,
292
+ .video-container embed {
274
293
position : absolute;
275
294
top : 0 ;
276
295
left : 0 ;
315
334
color : # 3C4043 ;
316
335
}
317
336
318
-
319
- .sub-title , . tutorial-title {
337
+ . sub-title ,
338
+ .tutorial-title {
320
339
color : white;
321
340
font-size : 32px ;
322
341
line-height : 40px ;
@@ -330,22 +349,27 @@ h5 {
330
349
line-height : 28px ;
331
350
}
332
351
333
-
334
- .capability-element , . tutorial-link-element {
352
+ . capability-element ,
353
+ .tutorial-link-element {
335
354
margin-top : 48px ;
336
355
border-bottom : 1px solid # A4B7C8 ;
337
356
}
338
357
339
- .capability-title a , .tutorial-link-title a {
358
+ .capability-title a ,
359
+ .tutorial-link-title a {
340
360
text-decoration : none;
341
361
color : inherit;
342
362
}
343
363
344
- .capability-title a : hover , .tutorial-link-title a : hover {
364
+ .capability-title a : hover ,
365
+ .tutorial-link-title a : hover {
345
366
text-decoration : underline;
346
367
}
347
368
348
- .capability-title a : visited , .tutorial-link-title a : visited , .capability-title a : active , .tutorial-link-title a : active {
369
+ .capability-title a : visited ,
370
+ .tutorial-link-title a : visited ,
371
+ .capability-title a : active ,
372
+ .tutorial-link-title a : active {
349
373
color : inherit;
350
374
}
351
375
365
389
margin : 25px 0px ;
366
390
}
367
391
368
- .capability-copy , .tutorial-link-copy {
392
+ .capability-copy ,
393
+ .tutorial-link-copy {
369
394
margin-bottom : 15px ;
370
395
}
371
396
375
400
padding : 12px ;
376
401
}
377
402
378
- .resource-card-title , .demo-card-title {
403
+ .resource-card-title ,
404
+ .demo-card-title {
379
405
font-size : 22px ;
380
406
line-height : 28px ;
381
407
color : # 8230cd ;
391
417
text-decoration : underline;
392
418
}
393
419
394
- .demo-card-title a : visited , .demo-card-title a : active {
420
+ .demo-card-title a : visited ,
421
+ .demo-card-title a : active {
395
422
color : inherit;
396
423
}
397
424
417
444
margin-bottom : 25px ;
418
445
}
419
446
420
- .resource-card-copy , .demo-card-copy {
447
+ .resource-card-copy ,
448
+ .demo-card-copy {
421
449
font-size : 16px ;
422
450
line-height : 20px ;
423
451
letter-spacing : 0.2px ;
@@ -455,19 +483,47 @@ h5 {
455
483
display : inline-block;
456
484
}
457
485
458
-
459
486
.tutorial-image {
460
487
width : 100% ;
488
+ cursor : zoom-in;
489
+ }
490
+
491
+ .tutorial-image-popover {
492
+ border : 0 ;
493
+ padding : 0 ;
494
+ background : transparent;
495
+ pointer-events : none; /* click to close image */
496
+ }
497
+
498
+ .tutorial-image-popover .tutorial-image {
499
+ max-width : calc (100vw - 80px );
500
+ max-height : calc (100vh - 80px );
501
+
502
+ cursor : zoom-out;
503
+ /* block the default popover close; we'll use js instead */
504
+ pointer-events : all;
505
+ /* in case image itself has transparency */
506
+ background : white;
461
507
}
462
508
463
- .tutorial-page-container p , .tutorial-page-container ul , .tutorial-page-container ol {
509
+ .tutorial-image-popover ::backdrop {
510
+ background : rgba (0 , 0 , 0 , 0.60 );
511
+ }
512
+
513
+ .tutorial-page-container p ,
514
+ .tutorial-page-container ul ,
515
+ .tutorial-page-container ol {
464
516
font-family : "Open Sans" ;
465
517
font-size : 18px ;
466
518
line-height : 24px ;
467
519
letter-spacing : 0.1px ;
468
520
color : # 0E0F12 ;
469
521
}
470
522
523
+ .tutorial-page-container p > code {
524
+ color : # c26412 ;
525
+ }
526
+
471
527
.tutorial-breadcrumbs {
472
528
margin : 72px 0 24px 0 ;
473
529
font-family : "Manrope" ;
488
544
text-decoration : underline;
489
545
}
490
546
491
- .tutorial-breadcrumbs a : active , .tutorial-breadcrumbs a : visited {
547
+ .tutorial-breadcrumbs a : active ,
548
+ .tutorial-breadcrumbs a : visited {
492
549
color : inherit;
493
550
}
494
551
@@ -544,6 +601,18 @@ h5 {
544
601
margin-bottom : 20px ;
545
602
}
546
603
604
+ details : not ([open ]) .info-box-title {
605
+ margin-bottom : 0 ;
606
+ }
607
+
608
+ summary {
609
+ cursor : pointer;
610
+ }
611
+
612
+ summary ::marker {
613
+ color : # 0B6F7A ;
614
+ }
615
+
547
616
.info-box-text ,
548
617
.info-box-text p ,
549
618
.info-box-text ul {
@@ -627,7 +696,11 @@ h5 {
627
696
display : none;
628
697
}
629
698
630
- .hero-container , .main-page-container , .sub-page-container , .tutorial-page-container , .footer-container {
699
+ .hero-container ,
700
+ .main-page-container ,
701
+ .sub-page-container ,
702
+ .tutorial-page-container ,
703
+ .footer-container {
631
704
margin : 0 16px ;
632
705
}
633
706
0 commit comments