hanabi.screen.css (41940B)
1 /* Table of Contents 2 /* ------------------------------------------------------------ 3 4 This is a development CSS file which is built to a minified 5 production stylesheet in assets/built/screen.css 6 7 1. Global Styles 8 2. Layout 9 3. Special Templates 10 4. Site Header 11 5. Site Navigation 12 6. Post Feed 13 7. Single Post 14 7.1. Subscribe Form 15 7.2. Post Footer 16 7.2.1 Single Author Byline 17 7.2.2 Multiple Author Byline 18 7.3. Comments 19 7.4. Related Posts 20 7.5. Floating Header 21 7.6. Koenig Styles 22 8. Author Template 23 9. Error Template 24 10. Subscribe Overlay 25 11. Site Footer 26 27 */ 28 29 /* 1. Global - Set up the things 30 /* ---------------------------------------------------------- */ 31 @import 'hanabi.global.css'; 32 33 body { 34 background: #f1f1f1; 35 } 36 37 .img { 38 display: block; 39 width: 100%; 40 height: 100%; 41 background-position: center center; 42 background-size: cover; 43 border-radius: 100%; 44 } 45 46 .hidden { 47 visibility: hidden; 48 position: absolute; 49 text-indent: -9999px; 50 } 51 52 /* 2. Layout - Page building blocks 53 /* ---------------------------------------------------------- */ 54 55 .site-wrapper { 56 display: flex; 57 flex-direction: column; 58 min-height: 100vh; 59 } 60 61 .site-main { 62 z-index: 100; 63 flex-grow: 1; 64 } 65 66 /* Full width page blocks */ 67 .outer { 68 position: relative; 69 padding: 0 4vw; 70 } 71 72 /* Centered content container blocks */ 73 .inner { 74 margin: 0 auto; 75 max-width: 1040px; 76 width: 100%; 77 } 78 79 /* Usage: 80 81 <div class="outer"> 82 <div class="inner"> 83 Centered content 84 </div> 85 </div> 86 87 */ 88 89 /* 3. Special Template Styles 90 /* ---------------------------------------------------------- */ 91 92 @media (min-width: 900px) { 93 .home-template .post-feed, 94 .tag-template .post-feed, 95 .author-template .post-feed { 96 margin-top: -70px; 97 padding-top: 0; 98 } 99 .home-template .site-nav { 100 position: relative; 101 top: -70px; 102 } 103 } 104 105 /* 4. Site Header 106 /* ---------------------------------------------------------- */ 107 108 .site-header { 109 position: relative; 110 padding-top: 12px; 111 padding-bottom: 12px; 112 color: #fff; 113 background: #090a0b no-repeat 50%; 114 background-size: cover; 115 } 116 117 .site-header:before { 118 content: ''; 119 position: absolute; 120 top: 0; 121 right: 0; 122 bottom: 0; 123 left: 0; 124 z-index: 10; 125 display: block; 126 background: rgba(0, 0, 0, 0.18); 127 } 128 129 .site-header:after { 130 content: ''; 131 position: absolute; 132 top: 0; 133 right: 0; 134 bottom: auto; 135 left: 0; 136 z-index: 10; 137 display: block; 138 height: 80px; 139 background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); 140 } 141 142 .site-header.no-cover:before, 143 .site-header.no-cover:after { 144 display: none; 145 } 146 147 .site-header-content { 148 display: flex; 149 flex-direction: column; 150 justify-content: center; 151 align-items: center; 152 padding: 10vw 4vw; 153 min-height: 200px; 154 max-height: 450px; 155 text-align: center; 156 } 157 158 .site-title { 159 z-index: 10; 160 margin: 0; 161 padding: 0; 162 font-size: 3.8rem; 163 font-weight: 700; 164 } 165 166 .site-logo { 167 max-height: 45px; 168 } 169 170 .site-description { 171 z-index: 10; 172 margin: 0; 173 padding: 5px 0; 174 font-size: 2.2rem; 175 font-weight: 300; 176 letter-spacing: 0.5px; 177 opacity: 0.8; 178 } 179 180 @media (max-width: 500px) { 181 .site-title { 182 font-size: 3rem; 183 } 184 .site-description { 185 font-size: 1.8rem; 186 } 187 } 188 189 /* 5. Site Navigation 190 /* ---------------------------------------------------------- */ 191 192 .site-nav { 193 position: relative; 194 z-index: 300; 195 display: flex; 196 justify-content: space-between; 197 align-items: flex-start; 198 overflow-y: hidden; 199 height: 40px; 200 font-size: 1.2rem; 201 } 202 203 .site-nav-left { 204 display: flex; 205 align-items: center; 206 overflow-x: auto; 207 overflow-y: hidden; 208 -webkit-overflow-scrolling: touch; 209 margin-right: 10px; 210 padding-bottom: 80px; 211 letter-spacing: 0.4px; 212 white-space: nowrap; 213 214 -ms-overflow-scrolling: touch; 215 } 216 217 /* Site Nav Hack Explanation (above): 218 219 What's happening above it .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them. 220 221 The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result. 222 223 */ 224 225 .site-nav-logo { 226 flex-shrink: 0; 227 display: block; 228 margin-right: 24px; 229 padding: 11px 0; 230 color: #fff; 231 font-size: 1.7rem; 232 line-height: 1em; 233 font-weight: bold; 234 letter-spacing: -0.5px; 235 } 236 237 .site-nav-logo:hover { 238 text-decoration: none; 239 } 240 241 .site-nav-logo img { 242 display: block; 243 width: auto; 244 height: 21px; 245 } 246 247 .nav { 248 display: flex; 249 margin: 0 0 0 -12px; 250 padding: 0; 251 list-style: none; 252 } 253 254 .nav li { 255 display: block; 256 margin: 0; 257 padding: 0; 258 text-transform: uppercase; 259 } 260 261 .nav li a { 262 display: block; 263 margin: 0; 264 padding: 10px 12px; 265 color: #fff; 266 opacity: 0.8; 267 } 268 269 .nav li a:hover { 270 text-decoration: none; 271 opacity: 1; 272 } 273 274 .site-nav-right { 275 flex-shrink: 0; 276 display: flex; 277 align-items: center; 278 height: 40px; 279 } 280 281 .social-links { 282 flex-shrink: 0; 283 display: flex; 284 align-items: center; 285 } 286 287 .social-links a:last-of-type { 288 padding-right: 20px; 289 } 290 291 .social-link { 292 display: flex; 293 justify-content: center; 294 align-items: center; 295 margin: 0; 296 padding: 10px; 297 color: #fff; 298 opacity: 0.8; 299 } 300 301 .social-link:hover { 302 opacity: 1; 303 } 304 305 .social-link svg { 306 height: 1.8rem; 307 fill: #fff; 308 } 309 310 .social-link-fb svg { 311 height: 1.5rem; 312 } 313 314 .social-link-wb svg { 315 height: 1.6rem; 316 } 317 318 .social-link-wb svg path { 319 stroke: #fff; 320 } 321 322 .social-link-rss svg { 323 height: 1.9rem; 324 } 325 326 .subscribe-button { 327 display: block; 328 padding: 4px 10px; 329 border: #fff 1px solid; 330 color: #fff; 331 font-size: 1.2rem; 332 line-height: 1em; 333 border-radius: 10px; 334 opacity: 0.8; 335 } 336 337 .subscribe-button:hover { 338 text-decoration: none; 339 opacity: 1; 340 } 341 342 .rss-button { 343 opacity: 0.8; 344 } 345 346 .rss-button:hover { 347 opacity: 1; 348 } 349 350 .rss-button svg { 351 margin-bottom: 1px; 352 height: 2.1rem; 353 fill: #fff; 354 } 355 356 @media (max-width: 700px) { 357 .site-header { 358 padding-right: 0; 359 padding-left: 0; 360 } 361 .site-nav-left { 362 margin-right: 0; 363 padding-left: 4vw; 364 } 365 .site-nav-right { 366 display: none; 367 } 368 } 369 370 /* 6. Post Feed 371 /* ---------------------------------------------------------- */ 372 373 .post-feed { 374 position: relative; 375 display: flex; 376 flex-wrap: wrap; 377 margin: 0 -20px; 378 padding: 40px 0 0 0; 379 } 380 381 .post-card { 382 flex: 1 1 300px; 383 display: flex; 384 flex-direction: column; 385 overflow: hidden; 386 margin: 0 20px 40px; 387 min-height: 300px; 388 background: #f7f7f7 center center; 389 background-size: cover; 390 border-radius: 10px; 391 /* box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); */ 392 box-shadow: 0 20px 25px 0 rgba(50, 50, 50, 0.2); 393 transition: all 0.5s ease; 394 } 395 396 .post-card:hover { 397 /* box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3); */ 398 box-shadow: 0 30px 35px 0 rgba(50, 50, 50, 0.4); 399 transition: all 0.4s ease; 400 transform: translate3D(0, -1px, 0) scale(1.02); 401 } 402 403 .post-card-image-link { 404 position: relative; 405 display: block; 406 overflow: hidden; 407 border-radius: 5px 5px 0 0; 408 } 409 410 .post-card-image { 411 width: auto; 412 height: 200px; 413 background: var(--lightgrey) no-repeat center center; 414 background-size: cover; 415 } 416 417 .post-card-content-link { 418 position: relative; 419 flex-grow: 1; 420 display: block; 421 padding: 25px 25px 0; 422 /* color: var(--darkgrey); */ 423 color: #454545; 424 } 425 426 .post-card-content-link:hover { 427 text-decoration: none; 428 } 429 430 .post-card-tags { 431 display: block; 432 margin-bottom: 4px; 433 /* color: var(--midgrey); */ 434 color: #434343; 435 font-size: 1.2rem; 436 line-height: 1.15em; 437 font-weight: bolder; 438 letter-spacing: 0.5px; 439 text-transform: uppercase; 440 } 441 442 .post-card-title { 443 margin-top: 0; 444 } 445 446 .post-card-content { 447 flex-grow: 1; 448 display: flex; 449 flex-direction: column; 450 justify-content: space-between; 451 } 452 453 .post-card-excerpt { 454 /* font-family: Georgia, serif; */ 455 } 456 457 .post-card-meta { 458 display: flex; 459 justify-content: space-between; 460 align-items: flex-end; 461 padding: 0 25px 25px; 462 } 463 464 .author-profile-image, 465 .avatar-wrapper { 466 display: block; 467 width: 100%; 468 height: 100%; 469 background: color(var(--lightgrey) l(+10%)); 470 border-radius: 100%; 471 472 object-fit: cover; 473 } 474 475 .post-card-meta .profile-image-wrapper, 476 .post-card-meta .avatar-wrapper { 477 position: relative; 478 } 479 480 .author-list { 481 display: flex; 482 flex-wrap: wrap-reverse; 483 margin: 0; 484 padding: 0; 485 list-style: none; 486 } 487 488 .author-list-item { 489 position: relative; 490 flex-shrink: 0; 491 margin: 0; 492 padding: 0; 493 } 494 495 .author-list-item:nth-child(1) { 496 z-index: 10; 497 } 498 .author-list-item:nth-child(2) { 499 z-index: 9; 500 } 501 .author-list-item:nth-child(3) { 502 z-index: 8; 503 } 504 .author-list-item:nth-child(4) { 505 z-index: 7; 506 } 507 .author-list-item:nth-child(5) { 508 z-index: 6; 509 } 510 .author-list-item:nth-child(6) { 511 z-index: 5; 512 } 513 .author-list-item:nth-child(7) { 514 z-index: 4; 515 } 516 .author-list-item:nth-child(8) { 517 z-index: 3; 518 } 519 .author-list-item:nth-child(9) { 520 z-index: 2; 521 } 522 .author-list-item:nth-child(10) { 523 z-index: 1; 524 } 525 526 .static-avatar { 527 display: block; 528 overflow: hidden; 529 margin: 0 -5px; 530 width: 34px; 531 height: 34px; 532 border: #e0e0e0 2px solid; 533 border-radius: 100%; 534 } 535 536 .moving-avatar { 537 display: block; 538 overflow: hidden; 539 margin: 0 -6px; 540 width: 56px; 541 height: 56px; 542 border: #fff 2px solid; 543 border-radius: 100%; 544 transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s; 545 } 546 547 @media (min-width: 800px) { 548 .author-list:hover .moving-avatar { 549 margin: 0; 550 transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); 551 } 552 } 553 554 .author-name-tooltip { 555 position: absolute; 556 bottom: 105%; 557 z-index: 999; 558 display: block; 559 padding: 2px 8px; 560 color: white; 561 font-size: 1.2rem; 562 letter-spacing: 0.2px; 563 white-space: nowrap; 564 background: var(--darkgrey); 565 border-radius: 3px; 566 box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px, 567 rgba(39, 44, 49, 0.03) 1px 3px 8px; 568 opacity: 0; 569 transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); 570 transform: translateY(6px); 571 pointer-events: none; 572 } 573 574 .author-list-item:hover .author-name-tooltip { 575 opacity: 1; 576 transform: translateY(0px); 577 } 578 579 @media (max-width: 650px) { 580 .author-name-tooltip { 581 display: none; 582 } 583 } 584 585 .reading-time { 586 flex-shrink: 0; 587 margin-left: 20px; 588 /* color: var(--midgrey); */ 589 color: #a6aaa9; 590 font-size: 1.2rem; 591 line-height: 33px; 592 font-weight: bolder; 593 letter-spacing: 0.5px; 594 text-transform: uppercase; 595 } 596 597 /* Special Styling for home page grid (below): 598 599 The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices. 600 601 */ 602 603 @media (min-width: 795px) { 604 .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) { 605 flex: 1 1 100%; 606 flex-direction: row; 607 } 608 609 .home-template 610 .post-feed 611 .post-card:nth-child(6n + 1):not(.no-image) 612 .post-card-image-link { 613 position: relative; 614 flex: 1 1 auto; 615 border-radius: 5px 0 0 5px; 616 } 617 618 .home-template 619 .post-feed 620 .post-card:nth-child(6n + 1):not(.no-image) 621 .post-card-image { 622 position: absolute; 623 width: 100%; 624 height: 100%; 625 } 626 627 .home-template 628 .post-feed 629 .post-card:nth-child(6n + 1):not(.no-image) 630 .post-card-content { 631 flex: 0 1 357px; 632 } 633 634 .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) h2 { 635 font-size: 2.6rem; 636 } 637 638 .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) p { 639 font-size: 1.8rem; 640 line-height: 1.55em; 641 } 642 643 .home-template 644 .post-feed 645 .post-card:nth-child(6n + 1):not(.no-image) 646 .post-card-content-link { 647 padding: 30px 40px 0; 648 } 649 650 .home-template 651 .post-feed 652 .post-card:nth-child(6n + 1):not(.no-image) 653 .post-card-meta { 654 padding: 0 40px 30px; 655 } 656 } 657 658 .home-template .site-header:after { 659 display: none; 660 } 661 662 /* Adjust some margins for smaller screens */ 663 @media (max-width: 650px) { 664 .post-feed { 665 padding-top: 5vw; 666 } 667 .post-card { 668 margin: 0 20px 5vw; 669 } 670 } 671 672 /* 7. Single Post 673 /* ---------------------------------------------------------- */ 674 675 .post-template .site-main, 676 .page-template .site-main { 677 padding-bottom: 4vw; 678 background: #f5f5f5; 679 } 680 681 .post-full { 682 position: relative; 683 z-index: 50; 684 } 685 /* ^ Required to make .post-full-content:before/after z-index stacking work */ 686 687 .post-full-header { 688 margin: 0 auto; 689 padding: 6vw 3vw 3vw; 690 max-width: 1040px; 691 text-align: center; 692 } 693 @media (max-width: 500px) { 694 .post-full-header { 695 padding: 14vw 3vw 10vw; 696 } 697 } 698 699 .post-full-meta { 700 display: flex; 701 justify-content: center; 702 align-items: center; 703 color: var(--midgrey); 704 font-size: 1.4rem; 705 font-weight: 600; 706 text-transform: uppercase; 707 } 708 709 .post-full-meta-date { 710 /* color: var(--blue); */ 711 color: #e4af0a; 712 } 713 714 .post-full-title { 715 margin: 0; 716 /* color: color(var(--darkgrey) l(-5%)); */ 717 color: #434343; 718 font-family: 'Didot', 'Baskerville', 'Playfair Display', serif; 719 font-weight: 500 !important; 720 } 721 722 .date-divider { 723 display: inline-block; 724 margin: 0 6px 1px; 725 } 726 727 .post-full-image { 728 margin: 0 -10vw -165px; 729 height: 800px; 730 background: var(--lightgrey) center center; 731 background-size: cover; 732 border-radius: 5px; 733 } 734 735 @media (max-width: 1170px) { 736 .post-full-image { 737 margin: 0 -4vw -100px; 738 height: 600px; 739 border-radius: 0; 740 } 741 } 742 743 @media (max-width: 800px) { 744 .post-full-image { 745 height: 400px; 746 } 747 } 748 749 .post-full-content { 750 position: relative; 751 margin: 0 auto; 752 padding: 70px 100px 0; 753 min-height: 230px; 754 /* font-family: Georgia, serif; */ 755 font-size: 2.2rem; 756 line-height: 1.6em; 757 background: #f5f5f5; 758 } 759 760 @media (max-width: 1170px) { 761 .post-full-content { 762 padding: 5vw 7vw 0; 763 } 764 } 765 @media (max-width: 800px) { 766 .post-full-content { 767 font-size: 1.9rem; 768 } 769 } 770 771 .post-full-content:before { 772 content: ''; 773 position: absolute; 774 top: 15px; 775 left: -5px; 776 z-index: -1; 777 display: block; 778 width: 20px; 779 height: 200px; 780 background: rgba(39, 44, 49, 0.15); 781 filter: blur(5px); 782 transform: rotate(-5deg); 783 } 784 785 .post-full-content:after { 786 content: ''; 787 position: absolute; 788 top: 15px; 789 right: -5px; 790 z-index: -1; 791 display: block; 792 width: 20px; 793 height: 200px; 794 background: rgba(39, 44, 49, 0.15); 795 filter: blur(5px); 796 transform: rotate(5deg); 797 } 798 799 .no-image .post-full-content { 800 padding-top: 0; 801 } 802 803 .no-image .post-full-content:before, 804 .no-image .post-full-content:after { 805 display: none; 806 } 807 808 .post-full-content h1, 809 .post-full-content h2, 810 .post-full-content h3, 811 .post-full-content h4, 812 .post-full-content h5, 813 .post-full-content h6, 814 .post-full-content p, 815 .post-full-content ul, 816 .post-full-content ol, 817 .post-full-content dl, 818 .post-full-content pre, 819 .post-full-content blockquote, 820 .post-full-comments, 821 .footnotes { 822 min-width: 100%; 823 } 824 825 .post-full-content li { 826 word-break: break-word; 827 } 828 829 .post-full-content li p { 830 margin: 0; 831 } 832 833 .post-full-content a { 834 color: #000; 835 word-break: break-word; 836 /* box-shadow: var(--blue) 0 -1px 0 inset; */ 837 box-shadow: #e4af0a 0 -1px 0 inset; 838 } 839 840 .post-full-content a:hover { 841 /* color: var(--blue); */ 842 color: #e4af0a; 843 text-decoration: none; 844 } 845 846 .post-full-content strong, 847 .post-full-content em { 848 /* color: color(var(--darkgrey) l(-5%)); */ 849 color: #434343; 850 } 851 852 .post-full-content small { 853 display: inline-block; 854 line-height: 1.6em; 855 } 856 857 .post-full-content li:first-child { 858 margin-top: 0; 859 } 860 861 .post-full-content img, 862 .post-full-content video { 863 display: block; 864 margin: 1.5em auto; 865 max-width: 1040px; 866 height: auto; 867 } 868 @media (max-width: 1040px) { 869 .post-full-content img, 870 .post-full-content video { 871 width: 100%; 872 } 873 } 874 875 /* Full bleed images (#full) 876 Super neat trick courtesy of @JoelDrapper 877 878 Usage (In Ghost edtior): 879 880  881 882 */ 883 .post-full-content img[src$='#full'] { 884 max-width: none; 885 width: 100vw; 886 } 887 888 /* Image captions 889 890 Usage (In Ghost editor): 891 892  893 <small>Your image caption</small> 894 895 */ 896 .post-full-content img + br + small { 897 display: block; 898 margin-top: -3em; 899 margin-bottom: 1.5em; 900 text-align: center; 901 } 902 903 /* Override third party iframe styles */ 904 .post-full-content iframe { 905 margin: 0 auto !important; 906 } 907 908 .post-full-content blockquote { 909 margin: 0 0 1.5em; 910 padding: 0 1.5em; 911 /* border-left: #3eb0ef 3px solid; */ 912 border-left: #e4af0a 3px solid; 913 } 914 915 .post-full-content blockquote p { 916 margin: 0 0 1em 0; 917 color: inherit; 918 font-size: inherit; 919 line-height: inherit; 920 font-style: italic; 921 } 922 923 .post-full-content blockquote p:last-child { 924 margin-bottom: 0; 925 } 926 927 .post-full-content code { 928 padding: 0 5px 2px; 929 font-size: 0.8em; 930 line-height: 1em; 931 font-weight: 400 !important; 932 /* background: var(--whitegrey); */ 933 /* border-radius: 3px; */ 934 } 935 936 .post-full-content p code { 937 word-break: break-all; 938 } 939 940 .post-full-content pre { 941 overflow-x: auto; 942 margin: 1.5em 0 3em; 943 padding: 20px; 944 max-width: 100%; 945 border: color(var(--darkgrey) l(-10%)) 1px solid; 946 color: var(--whitegrey); 947 font-size: 1.4rem; 948 line-height: 1.5em; 949 background: color(var(--darkgrey) l(-3%)); 950 border-radius: 5px; 951 } 952 953 .post-full-content pre code { 954 padding: 0; 955 font-size: inherit; 956 line-height: inherit; 957 background: transparent; 958 } 959 960 .post-full-content pre code :not(span) { 961 color: inherit; 962 } 963 964 .post-full-content .fluid-width-video-wrapper { 965 margin: 1.5em 0 3em; 966 } 967 968 .post-full-content hr { 969 margin: 4vw 0; 970 } 971 972 /* .post-full-content hr:after { 973 content: ""; 974 position: absolute; 975 top: -15px; 976 left: 50%; 977 display: block; 978 margin-left: -10px; 979 width: 1px; 980 height: 30px; 981 background: color(var(--lightgrey) l(+10%)); 982 box-shadow: #fff 0 0 0 5px; 983 transform: rotate(45deg); 984 } */ 985 986 .post-full-content h1, 987 .post-full-content h2, 988 .post-full-content h3, 989 .post-full-content h4, 990 .post-full-content h5, 991 .post-full-content h6 { 992 /* color: color(var(--darkgrey) l(-5%)); */ 993 color: #a6aaa9; 994 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 995 Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 996 } 997 998 .post-full-content h1 { 999 margin: 0.5em 0 0.2em 0; 1000 font-size: 4.6rem; 1001 font-weight: 700; 1002 } 1003 @media (max-width: 500px) { 1004 .post-full-content h1 { 1005 font-size: 2.8rem; 1006 } 1007 } 1008 1009 .post-full-content h2 { 1010 margin: 0.5em 0 0.2em 0; 1011 font-size: 3.6rem; 1012 font-weight: 700; 1013 } 1014 @media (max-width: 500px) { 1015 .post-full-content h2 { 1016 font-size: 2.6rem; 1017 } 1018 } 1019 1020 .post-full-content h3 { 1021 margin: 0.5em 0 0.2em 0; 1022 font-size: 2.8rem; 1023 font-weight: 700; 1024 } 1025 @media (max-width: 500px) { 1026 .post-full-content h3 { 1027 font-size: 2.2rem; 1028 } 1029 } 1030 1031 .post-full-content h4 { 1032 margin: 0.5em 0 0.2em 0; 1033 font-size: 2.8rem; 1034 font-weight: 700; 1035 } 1036 @media (max-width: 500px) { 1037 .post-full-content h4 { 1038 font-size: 2.2rem; 1039 } 1040 } 1041 1042 .post-full-content h5 { 1043 display: block; 1044 margin: 0.5em 0; 1045 padding: 1em 0 1.5em; 1046 border: 0; 1047 color: var(--blue); 1048 /* font-family: Georgia,serif; */ 1049 font-size: 3.2rem; 1050 line-height: 1.35em; 1051 text-align: center; 1052 } 1053 @media (min-width: 1180px) { 1054 .post-full-content h5 { 1055 max-width: 1060px; 1056 width: 100vw; 1057 } 1058 } 1059 @media (max-width: 500px) { 1060 .post-full-content h5 { 1061 padding: 0 0 0.5em; 1062 font-size: 2.2rem; 1063 } 1064 } 1065 1066 .post-full-content h6 { 1067 margin: 0.5em 0 0.2em 0; 1068 font-size: 2.3rem; 1069 font-weight: 700; 1070 } 1071 @media (max-width: 500px) { 1072 .post-full-content h6 { 1073 font-size: 2rem; 1074 } 1075 } 1076 1077 .footnotes-sep { 1078 margin-bottom: 30px; 1079 } 1080 1081 .footnotes { 1082 font-size: 1.5rem; 1083 } 1084 1085 .footnotes p { 1086 margin: 0; 1087 } 1088 1089 .footnote-backref { 1090 color: var(--blue) !important; 1091 font-size: 1.2rem; 1092 font-weight: bold; 1093 text-decoration: none !important; 1094 box-shadow: none !important; 1095 } 1096 1097 /* Some grouped styles for smaller viewports */ 1098 @media (max-width: 500px) { 1099 .post-full-meta { 1100 font-size: 1.2rem; 1101 line-height: 1.3em; 1102 } 1103 .post-full-title { 1104 font-size: 2.9rem; 1105 } 1106 .post-full-image { 1107 margin-bottom: 4vw; 1108 height: 350px; 1109 } 1110 .post-full-content { 1111 padding: 0; 1112 } 1113 .post-full-content:before, 1114 .post-full-content:after { 1115 display: none; 1116 } 1117 } 1118 1119 /* Tables */ 1120 .post-full-content table { 1121 display: inline-block; 1122 overflow-x: auto; 1123 margin: 0.5em 0 2.5em; 1124 max-width: 100%; 1125 width: auto; 1126 border-spacing: 0; 1127 border-collapse: collapse; 1128 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 1129 Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 1130 font-size: 1.6rem; 1131 white-space: nowrap; 1132 vertical-align: top; 1133 } 1134 1135 .post-full-content table { 1136 -webkit-overflow-scrolling: touch; 1137 background: radial-gradient( 1138 ellipse at left, 1139 rgba(0, 0, 0, 0.2) 0%, 1140 rgba(0, 0, 0, 0) 75% 1141 ) 1142 0 center, 1143 radial-gradient( 1144 ellipse at right, 1145 rgba(0, 0, 0, 0.2) 0%, 1146 rgba(0, 0, 0, 0) 75% 1147 ) 1148 100% center; 1149 background-attachment: scroll, scroll; 1150 background-size: 10px 100%, 10px 100%; 1151 background-repeat: no-repeat; 1152 } 1153 1154 .post-full-content table td:first-child { 1155 background-image: linear-gradient( 1156 to right, 1157 rgba(255, 255, 255, 1) 50%, 1158 rgba(255, 255, 255, 0) 100% 1159 ); 1160 background-size: 20px 100%; 1161 background-repeat: no-repeat; 1162 } 1163 1164 .post-full-content table td:last-child { 1165 background-image: linear-gradient( 1166 to left, 1167 rgba(255, 255, 255, 1) 50%, 1168 rgba(255, 255, 255, 0) 100% 1169 ); 1170 background-position: 100% 0; 1171 background-size: 20px 100%; 1172 background-repeat: no-repeat; 1173 } 1174 1175 .post-full-content table th { 1176 color: var(--darkgrey); 1177 font-size: 1.2rem; 1178 font-weight: 700; 1179 letter-spacing: 0.2px; 1180 text-align: left; 1181 text-transform: uppercase; 1182 background-color: color(var(--whitegrey) l(+4%)); 1183 } 1184 1185 .post-full-content table th, 1186 .post-full-content table td { 1187 padding: 6px 12px; 1188 border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid; 1189 } 1190 1191 /* 7.1. Subscribe Form 1192 /* ---------------------------------------------------------- */ 1193 1194 .subscribe-form { 1195 margin: 1.5em 0; 1196 padding: 6.5vw 7vw 7vw; 1197 border: color(var(--whitegrey) l(+2%)) 1px solid; 1198 text-align: center; 1199 background: color(var(--whitegrey) l(+4%)); 1200 border-radius: 7px; 1201 } 1202 1203 .subscribe-form-title { 1204 margin: 0 0 3px 0; 1205 padding: 0; 1206 color: var(--darkgrey); 1207 font-size: 3.5rem; 1208 line-height: 1; 1209 font-weight: 700; 1210 } 1211 1212 .subscribe-form p { 1213 margin-bottom: 1em; 1214 color: var(--midgrey); 1215 font-size: 2.2rem; 1216 line-height: 1.55em; 1217 letter-spacing: 0.2px; 1218 } 1219 1220 .subscribe-form form { 1221 display: flex; 1222 justify-content: center; 1223 align-items: center; 1224 margin: 0 auto; 1225 max-width: 420px; 1226 } 1227 1228 .subscribe-form .form-group { 1229 flex-grow: 1; 1230 } 1231 1232 .subscribe-email { 1233 display: block; 1234 padding: 10px; 1235 width: 100%; 1236 border: color(var(--lightgrey) l(+7%)) 1px solid; 1237 color: var(--midgrey); 1238 font-size: 1.8rem; 1239 line-height: 1em; 1240 font-weight: normal; 1241 user-select: text; 1242 border-radius: 5px; 1243 transition: border-color 0.15s linear; 1244 1245 -webkit-appearance: none; 1246 } 1247 1248 .subscribe-email:focus { 1249 outline: 0; 1250 border-color: color(var(--lightgrey) l(-2%)); 1251 } 1252 1253 .subscribe-form button { 1254 display: inline-block; 1255 margin: 0 0 0 10px; 1256 padding: 0 20px; 1257 height: 41px; 1258 outline: none; 1259 color: #fff; 1260 font-size: 1.5rem; 1261 line-height: 37px; 1262 font-weight: 400; 1263 text-align: center; 1264 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); 1265 background: linear-gradient( 1266 color(var(--blue) whiteness(+7%)), 1267 color(var(--blue) lightness(-7%) saturation(-10%)) 60%, 1268 color(var(--blue) lightness(-7%) saturation(-10%)) 90%, 1269 color(var(--blue) lightness(-4%) saturation(-10%)) 1270 ); 1271 border-radius: 5px; 1272 box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14); 1273 1274 -webkit-font-smoothing: subpixel-antialiased; 1275 } 1276 1277 .subscribe-form button:active, 1278 .subscribe-form button:focus { 1279 background: color(var(--blue) lightness(-9%) saturation(-10%)); 1280 } 1281 1282 @media (max-width: 650px) { 1283 .subscribe-form-title { 1284 font-size: 2.4rem; 1285 } 1286 .subscribe-form p { 1287 font-size: 1.6rem; 1288 } 1289 } 1290 1291 @media (max-width: 500px) { 1292 .subscribe-form form { 1293 flex-direction: column; 1294 } 1295 .subscribe-form .form-group { 1296 width: 100%; 1297 } 1298 .subscribe-form button { 1299 margin: 10px 0 0 0; 1300 width: 100%; 1301 } 1302 } 1303 1304 /* 7.2. Post Footer 1305 /* ---------------------------------------------------------- */ 1306 1307 .post-full-footer { 1308 display: flex; 1309 justify-content: space-between; 1310 align-items: center; 1311 margin: 0 auto; 1312 padding: 3vw 0 6vw 0; 1313 max-width: 840px; 1314 } 1315 1316 /* 7.2.1 Single Author Byline 1317 /* ---------------------------------------------------------- */ 1318 1319 .author-card { 1320 display: flex; 1321 } 1322 1323 .author-card .author-profile-image, 1324 .author-card .avatar-wrapper { 1325 margin-right: 15px; 1326 width: 60px; 1327 height: 60px; 1328 } 1329 1330 .author-card-name { 1331 margin: 8px 0 2px 0; 1332 padding: 0; 1333 font-size: 2rem; 1334 } 1335 1336 .author-card-name a { 1337 color: var(--darkgrey); 1338 font-weight: 700; 1339 } 1340 1341 .author-card-name a:hover { 1342 text-decoration: none; 1343 } 1344 1345 .author-card-content p { 1346 margin: 0; 1347 color: var(--midgrey); 1348 line-height: 1.3em; 1349 } 1350 1351 .post-full-footer-right { 1352 flex-shrink: 0; 1353 margin-left: 20px; 1354 } 1355 1356 .author-card-button { 1357 display: block; 1358 padding: 9px 16px; 1359 border: #aebbc1 1px solid; 1360 color: var(--midgrey); 1361 font-size: 1.2rem; 1362 line-height: 1; 1363 font-weight: 500; 1364 border-radius: 20px; 1365 transition: all ease 0.2s; 1366 } 1367 1368 .author-card-button:hover { 1369 border-color: var(--blue); 1370 color: var(--blue); 1371 text-decoration: none; 1372 } 1373 1374 /* 7.2.2 Multiple Author Byline 1375 /* ---------------------------------------------------------- */ 1376 1377 .post-full-authors { 1378 flex-grow: 1; 1379 display: flex; 1380 flex-direction: column; 1381 align-items: center; 1382 margin-top: 20px; 1383 padding-top: 40px; 1384 border-top: color(var(--lightgrey) l(+10%)) 1px solid; 1385 } 1386 1387 .post-full-authors-content { 1388 margin-bottom: 20px; 1389 } 1390 1391 .post-full-authors-content p { 1392 margin-bottom: 0; 1393 color: var(--midgrey); 1394 font-size: 1.4rem; 1395 letter-spacing: 0.2px; 1396 text-align: center; 1397 text-transform: uppercase; 1398 } 1399 1400 .post-full-authors-content a { 1401 display: inline-block; 1402 color: color(var(--darkgrey) l(+20%)); 1403 font-size: 1.4rem; 1404 font-weight: 600; 1405 text-transform: uppercase; 1406 } 1407 1408 .post-full-footer .author-list { 1409 justify-content: center; 1410 padding: 10px 20px; 1411 } 1412 1413 .author-card .author-profile-image, 1414 .author-card .avatar-wrapper { 1415 position: relative; 1416 margin-right: 15px; 1417 } 1418 1419 .author-list-item .author-card { 1420 position: absolute; 1421 bottom: 130%; 1422 left: 50%; 1423 z-index: 300; 1424 display: block; 1425 margin-left: -160px; 1426 width: 320px; 1427 font-size: 1.4rem; 1428 letter-spacing: 0.2px; 1429 background: white; 1430 border-radius: 6px; 1431 box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px, 1432 rgba(39, 44, 49, 0.03) 1px 3px 8px; 1433 opacity: 0; 1434 transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); 1435 transform: scale(0.98) translateY(15px); 1436 pointer-events: none; 1437 } 1438 1439 .author-list-item .author-card:before { 1440 content: ''; 1441 position: absolute; 1442 top: 100%; 1443 left: 50%; 1444 display: block; 1445 margin-left: -12px; 1446 width: 0; 1447 height: 0; 1448 border-top: 12px solid #fff; 1449 border-right: 12px solid transparent; 1450 border-left: 12px solid transparent; 1451 } 1452 1453 .author-list-item .author-card.hovered { 1454 opacity: 1; 1455 transform: scale(1) translateY(0px); 1456 pointer-events: auto; 1457 } 1458 1459 .author-card .basic-info { 1460 display: flex; 1461 flex-direction: column; 1462 align-items: center; 1463 padding: 30px 20px 20px 20px; 1464 color: #fff; 1465 background: var(--darkgrey); 1466 border-radius: 6px 6px 0 0; 1467 } 1468 1469 .author-card .basic-info h2 { 1470 margin: 1em 0 0.5em; 1471 } 1472 1473 .author-card .bio { 1474 padding: 20px 20px 0; 1475 } 1476 1477 @media (max-width: 650px) { 1478 .author-list-item .author-card { 1479 display: none; 1480 } 1481 } 1482 1483 .basic-info .author-profile-image { 1484 margin: 0; 1485 width: 88px; 1486 height: 88px; 1487 border: none; 1488 } 1489 1490 .basic-info .avatar-wrapper { 1491 position: relative; 1492 margin: 0; 1493 width: 88px; 1494 height: 88px; 1495 border: none; 1496 background: rgba(229, 239, 245, 0.1); 1497 } 1498 1499 .basic-info .avatar-wrapper svg { 1500 margin: 0; 1501 width: 88px; 1502 height: 88px; 1503 opacity: 0.15; 1504 } 1505 1506 /* 7.3. Comments 1507 /* ---------------------------------------------------------- */ 1508 1509 .post-full-comments { 1510 margin: 0 auto; 1511 max-width: 840px; 1512 } 1513 1514 /* 7.4. Related posts 1515 /* ---------------------------------------------------------- */ 1516 1517 .read-next-feed { 1518 display: flex; 1519 flex-wrap: wrap; 1520 margin: 0 -20px; 1521 padding: 40px 0 0 0; 1522 } 1523 1524 .read-next-card { 1525 position: relative; 1526 flex: 1 1 300px; 1527 display: flex; 1528 flex-direction: column; 1529 overflow: hidden; 1530 margin: 0 20px 40px; 1531 padding: 25px; 1532 color: #fff; 1533 background: var(--darkgrey) center center; 1534 background-size: cover; 1535 border-radius: 5px; 1536 box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px, 1537 rgba(39, 44, 49, 0.03) 1px 3px 8px; 1538 } 1539 1540 .read-next-card:before { 1541 content: ''; 1542 position: absolute; 1543 top: 0; 1544 right: 0; 1545 bottom: 0; 1546 left: 0; 1547 display: block; 1548 background: linear-gradient( 1549 135deg, 1550 rgba(0, 40, 60, 0.8) 0%, 1551 rgba(0, 20, 40, 0.7) 100% 1552 ); 1553 border-radius: 5px; 1554 1555 backdrop-filter: blur(2px); 1556 } 1557 1558 .read-next-card-header { 1559 position: relative; 1560 z-index: 50; 1561 padding-top: 20px; 1562 text-align: center; 1563 } 1564 1565 .read-next-card-header-sitetitle { 1566 display: block; 1567 font-size: 1.3rem; 1568 line-height: 1.3em; 1569 opacity: 0.8; 1570 } 1571 1572 .read-next-card-header-title { 1573 margin: 0; 1574 padding: 0 20px; 1575 color: #fff; 1576 font-size: 3rem; 1577 line-height: 1.2em; 1578 letter-spacing: 1px; 1579 } 1580 1581 .read-next-card-header-title a { 1582 color: #fff; 1583 font-weight: 300; 1584 text-decoration: none; 1585 } 1586 1587 .read-next-card-header-title a:hover { 1588 text-decoration: none; 1589 } 1590 1591 .read-next-divider { 1592 position: relative; 1593 display: flex; 1594 justify-content: center; 1595 height: 80px; 1596 } 1597 1598 .read-next-divider svg { 1599 width: 40px; 1600 fill: transparent; 1601 stroke: #fff; 1602 1603 stroke-width: 0.5px; 1604 stroke-opacity: 0.65; 1605 } 1606 1607 .read-next-card-content { 1608 position: relative; 1609 z-index: 50; 1610 flex-grow: 1; 1611 display: flex; 1612 font-size: 1.7rem; 1613 } 1614 1615 .read-next-card-content ul { 1616 display: flex; 1617 flex-direction: column; 1618 margin: 0 auto; 1619 padding: 0; 1620 text-align: center; 1621 list-style: none; 1622 } 1623 1624 .read-next-card-content li { 1625 margin: 0; 1626 padding: 0; 1627 font-size: 1.6rem; 1628 line-height: 1.25em; 1629 font-weight: 200; 1630 letter-spacing: -0.5px; 1631 } 1632 1633 .read-next-card-content li a { 1634 display: block; 1635 padding: 20px 0; 1636 border-bottom: rgba(255, 255, 255, 0.3) 1px solid; 1637 color: #fff; 1638 font-weight: 500; 1639 vertical-align: top; 1640 transition: opacity 0.3s ease; 1641 } 1642 1643 .read-next-card-content li:first-of-type a { 1644 padding-top: 10px; 1645 } 1646 1647 .read-next-card-content li a:hover { 1648 opacity: 1; 1649 } 1650 1651 .read-next-card-footer { 1652 position: relative; 1653 margin: 15px 0 3px 0; 1654 text-align: center; 1655 } 1656 1657 .read-next-card-footer a { 1658 color: #fff; 1659 } 1660 1661 /* 7.5. Floating Header 1662 /* ---------------------------------------------------------- */ 1663 1664 .floating-header { 1665 visibility: hidden; 1666 position: fixed; 1667 top: 0; 1668 right: 0; 1669 left: 0; 1670 z-index: 1000; 1671 display: flex; 1672 align-items: center; 1673 height: 60px; 1674 border-bottom: rgba(0, 0, 0, 0.06) 1px solid; 1675 /* background: rgba(255,255,255,0.95); */ 1676 background: rgba(247, 247, 247, 0.95); 1677 transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); 1678 transform: translate3d(0, -120%, 0); 1679 } 1680 1681 .floating-active { 1682 visibility: visible; 1683 transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1); 1684 transform: translate3d(0, 0, 0); 1685 } 1686 1687 .floating-header-logo { 1688 overflow: hidden; 1689 margin: 0 0 0 20px; 1690 font-size: 1.6rem; 1691 line-height: 1em; 1692 letter-spacing: -1px; 1693 text-overflow: ellipsis; 1694 white-space: nowrap; 1695 } 1696 1697 .floating-header-logo a { 1698 display: flex; 1699 align-items: center; 1700 color: var(--darkgrey); 1701 line-height: 1.1em; 1702 font-weight: 700; 1703 } 1704 1705 .floating-header-logo a:hover { 1706 text-decoration: none; 1707 } 1708 1709 .floating-header-logo img { 1710 margin: 0 10px 0 0; 1711 max-height: 20px; 1712 } 1713 1714 .floating-header-divider { 1715 margin: 0 5px; 1716 line-height: 1em; 1717 } 1718 1719 .floating-header-title { 1720 flex: 1; 1721 overflow: hidden; 1722 margin: 0; 1723 color: #2e2e2e; 1724 font-size: 1.6rem; 1725 line-height: 1.3em; 1726 font-weight: bold; 1727 text-overflow: ellipsis; 1728 white-space: nowrap; 1729 } 1730 1731 .floating-header-share { 1732 display: flex; 1733 justify-content: flex-end; 1734 align-items: center; 1735 padding-left: 2%; 1736 font-size: 1.3rem; 1737 line-height: 1; 1738 } 1739 1740 .floating-header-share a { 1741 display: flex; 1742 justify-content: center; 1743 align-items: center; 1744 } 1745 1746 .floating-header-share svg { 1747 width: auto; 1748 height: 16px; 1749 fill: #fff; 1750 } 1751 1752 .floating-header-share-label { 1753 flex-shrink: 0; 1754 display: flex; 1755 align-items: center; 1756 margin-right: 10px; 1757 color: rgba(0, 0, 0, 0.7); 1758 font-weight: 500; 1759 } 1760 1761 .floating-header-share-label svg { 1762 margin: 0 5px 0 10px; 1763 width: 18px; 1764 height: 18px; 1765 stroke: rgba(0, 0, 0, 0.7); 1766 transform: rotate(90deg); 1767 } 1768 1769 .floating-header-share-tw, 1770 .floating-header-share-fb { 1771 display: block; 1772 align-items: center; 1773 width: 60px; 1774 height: 60px; 1775 color: #fff; 1776 line-height: 48px; 1777 text-align: center; 1778 transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); 1779 } 1780 1781 .floating-header-share-tw { 1782 background: #33b1ff; 1783 } 1784 1785 .floating-header-share-fb { 1786 background: #005e99; 1787 } 1788 1789 .progress { 1790 position: absolute; 1791 right: 0; 1792 bottom: -1px; 1793 left: 0; 1794 width: 100%; 1795 height: 2px; 1796 border: none; 1797 /* color: var(--blue); */ 1798 color: #e4af0a; 1799 background: transparent; 1800 1801 appearance: none; 1802 } 1803 1804 .progress::-webkit-progress-bar { 1805 background-color: transparent; 1806 } 1807 1808 .progress::-webkit-progress-value { 1809 /* background-color: var(--blue); */ 1810 background-color: #e4af0a; 1811 } 1812 1813 .progress::-moz-progress-bar { 1814 /* background-color: var(--blue); */ 1815 background-color: #e4af0a; 1816 } 1817 1818 .progress-container { 1819 position: absolute; 1820 top: 0; 1821 left: 0; 1822 display: block; 1823 width: 100%; 1824 height: 2px; 1825 background-color: transparent; 1826 } 1827 1828 .progress-bar { 1829 display: block; 1830 width: 50%; 1831 height: inherit; 1832 /* background-color: var(--blue); */ 1833 background-color: #e4af0a; 1834 } 1835 1836 @media (max-width: 900px) { 1837 .floating-header { 1838 height: 40px; 1839 } 1840 .floating-header-title, 1841 .floating-header-logo { 1842 font-size: 1.5rem; 1843 } 1844 .floating-header-share-tw, 1845 .floating-header-share-fb { 1846 width: 40px; 1847 height: 40px; 1848 line-height: 38px; 1849 } 1850 } 1851 1852 @media (max-width: 800px) { 1853 .floating-header-logo { 1854 margin-left: 10px; 1855 } 1856 .floating-header-logo a { 1857 color: #2e2e2e; 1858 } 1859 .floating-header-title, 1860 .floating-header-divider { 1861 visibility: hidden; 1862 } 1863 } 1864 1865 @media (max-width: 450px) { 1866 .floating-header-share-label { 1867 display: none; 1868 } 1869 } 1870 1871 /* 7.6. Koenig Styles 1872 /* ---------------------------------------------------------- */ 1873 1874 .post-content { 1875 display: flex; 1876 flex-direction: column; 1877 align-items: center; 1878 max-width: 920px; 1879 } 1880 1881 .post-template .post-content > p:first-child { 1882 /* font-size: 1.25em; */ 1883 line-height: 1.5em; 1884 } 1885 1886 .post-full-content .kg-image { 1887 max-width: 100%; 1888 } 1889 1890 /* Preventing full-width image overlap with post image. */ 1891 .post-full-image + .post-full-content .kg-content *:first-child .kg-image { 1892 width: 100%; 1893 } 1894 1895 .post-full-content .kg-width-wide .kg-image { 1896 max-width: 1040px; 1897 } 1898 1899 .post-full-content .kg-width-full .kg-image { 1900 max-width: 100vw; 1901 } 1902 1903 .post-full-content figure { 1904 margin: 1.5em 0 3em; 1905 } 1906 1907 .post-full-content figure img { 1908 margin: 0; 1909 } 1910 1911 .post-full-content figcaption { 1912 margin: 1em 0 0; 1913 font-size: 80%; 1914 line-height: 1.6em; 1915 text-align: center; 1916 color: #a6aaa9; 1917 } 1918 1919 .kg-width-full figcaption { 1920 padding: 0 1.5em; 1921 } 1922 1923 .kg-embed-card { 1924 display: flex; 1925 flex-direction: column; 1926 align-items: center; 1927 min-width: 100%; 1928 } 1929 1930 .kg-embed-card .fluid-width-video-wrapper { 1931 margin: 0; 1932 } 1933 1934 @media (max-width: 1040px) { 1935 .post-full-content .kg-width-full .kg-image { 1936 width: 100vw; 1937 } 1938 } 1939 1940 .kg-gallery-container { 1941 display: flex; 1942 flex-direction: column; 1943 max-width: 1040px; 1944 width: 100vw; 1945 } 1946 1947 .kg-gallery-row { 1948 display: flex; 1949 flex-direction: row; 1950 justify-content: center; 1951 } 1952 1953 .kg-gallery-image img { 1954 display: block; 1955 margin: 0; 1956 width: 100%; 1957 height: 100%; 1958 } 1959 1960 .kg-gallery-row:not(:first-of-type) { 1961 margin: 0.75em 0 0 0; 1962 } 1963 1964 .kg-gallery-image:not(:first-of-type) { 1965 margin: 0 0 0 0.75em; 1966 } 1967 1968 .kg-gallery-card + .kg-image-card.kg-width-wide, 1969 .kg-gallery-card + .kg-gallery-card, 1970 .kg-image-card.kg-width-wide + .kg-gallery-card, 1971 .kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide { 1972 margin: -2.25em 0 3em; 1973 } 1974 1975 /* 8. Author Template 1976 /* ---------------------------------------------------------- */ 1977 1978 .site-header-content .author-profile-image { 1979 z-index: 10; 1980 flex-shrink: 0; 1981 margin: 0 0 20px 0; 1982 width: 100px; 1983 height: 100px; 1984 box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 6px; 1985 } 1986 1987 .site-header-content .author-bio { 1988 z-index: 10; 1989 flex-shrink: 0; 1990 margin: 5px 0 10px 0; 1991 max-width: 600px; 1992 font-size: 2rem; 1993 line-height: 1.3em; 1994 font-weight: 300; 1995 letter-spacing: 0.5px; 1996 opacity: 0.8; 1997 } 1998 1999 .site-header-content .author-meta { 2000 z-index: 10; 2001 flex-shrink: 0; 2002 display: flex; 2003 justify-content: center; 2004 align-items: center; 2005 margin: 0 0 10px 0; 2006 /* font-family: Georgia, serif; */ 2007 font-style: italic; 2008 } 2009 2010 .site-header-content .author-location svg { 2011 height: 1.9rem; 2012 stroke: #fff; 2013 } 2014 2015 .site-header-content .bull { 2016 display: inline-block; 2017 margin: 0 12px; 2018 opacity: 0.5; 2019 } 2020 2021 .site-header-content .social-link:first-of-type { 2022 padding-left: 4px; 2023 } 2024 2025 @media (max-width: 500px) { 2026 .site-header-content .author-bio { 2027 font-size: 1.8rem; 2028 line-height: 1.15em; 2029 letter-spacing: 0; 2030 } 2031 .author-location, 2032 .author-stats { 2033 display: none; 2034 } 2035 } 2036 2037 /* 9. Error Template 2038 /* ---------------------------------------------------------- */ 2039 2040 .error-template .site-main { 2041 padding: 7vw 4vw; 2042 } 2043 2044 .site-nav-center { 2045 display: flex; 2046 justify-content: center; 2047 align-items: center; 2048 text-align: center; 2049 } 2050 2051 .site-nav-center .site-nav-logo { 2052 margin-right: 0; 2053 } 2054 2055 .error-message { 2056 text-align: center; 2057 } 2058 2059 .error-code { 2060 margin: 0; 2061 font-size: 12vw; 2062 line-height: 1em; 2063 letter-spacing: -5px; 2064 opacity: 0.3; 2065 } 2066 2067 .error-description { 2068 margin: 0; 2069 color: var(--midgrey); 2070 font-size: 3rem; 2071 line-height: 1.3em; 2072 font-weight: 400; 2073 } 2074 2075 @media (max-width: 800px) { 2076 .error-description { 2077 margin: 5px 0 0 0; 2078 font-size: 1.8rem; 2079 } 2080 } 2081 2082 .error-link { 2083 display: inline-block; 2084 margin-top: 5px; 2085 } 2086 2087 .error-template .post-feed { 2088 padding-top: 0; 2089 } 2090 2091 /* 10. Subscribe Overlay 2092 /* ---------------------------------------------------------- */ 2093 2094 .subscribe-overlay { 2095 position: fixed; 2096 top: 0; 2097 right: 0; 2098 bottom: 0; 2099 left: 0; 2100 z-index: 9000; 2101 display: flex; 2102 justify-content: center; 2103 align-items: center; 2104 background: rgba(0, 25, 40, 0.97); 2105 opacity: 0; 2106 transition: opacity 200ms ease-in; 2107 pointer-events: none; 2108 2109 backdrop-filter: blur(3px); 2110 } 2111 2112 .subscribe-overlay:target { 2113 opacity: 1; 2114 pointer-events: auto; 2115 } 2116 2117 .subscribe-overlay-content { 2118 position: relative; 2119 z-index: 9999; 2120 margin: 0 0 5vw 0; 2121 padding: 4vw; 2122 color: #fff; 2123 text-align: center; 2124 } 2125 2126 .subscribe-overlay-logo { 2127 position: fixed; 2128 top: 23px; 2129 left: 30px; 2130 height: 30px; 2131 } 2132 2133 .subscribe-overlay-title { 2134 display: inline-block; 2135 margin: 0 0 10px 0; 2136 font-size: 6rem; 2137 line-height: 1.15em; 2138 } 2139 2140 .subscribe-overlay-description { 2141 margin: 0 auto 50px; 2142 max-width: 650px; 2143 /* font-family: Georgia, serif; */ 2144 font-size: 3rem; 2145 line-height: 1.3em; 2146 font-weight: 300; 2147 opacity: 0.8; 2148 } 2149 2150 .subscribe-overlay form { 2151 display: flex; 2152 justify-content: center; 2153 align-items: center; 2154 margin: 0 auto; 2155 max-width: 500px; 2156 } 2157 2158 .subscribe-overlay .form-group { 2159 flex-grow: 1; 2160 } 2161 2162 .subscribe-overlay .subscribe-email { 2163 display: block; 2164 padding: 14px 20px; 2165 width: 100%; 2166 border: none; 2167 color: var(--midgrey); 2168 font-size: 2rem; 2169 line-height: 1em; 2170 font-weight: normal; 2171 letter-spacing: 0.5px; 2172 user-select: text; 2173 border-radius: 8px; 2174 transition: border-color 0.15s linear; 2175 2176 -webkit-appearance: none; 2177 } 2178 2179 .subscribe-email:focus { 2180 outline: 0; 2181 border-color: color(var(--lightgrey) l(-2%)); 2182 } 2183 2184 .subscribe-overlay button { 2185 display: inline-block; 2186 margin: 0 0 0 15px; 2187 padding: 0 25px; 2188 height: 52px; 2189 outline: none; 2190 color: #fff; 2191 font-size: 1.7rem; 2192 line-height: 37px; 2193 font-weight: 400; 2194 text-align: center; 2195 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); 2196 background: linear-gradient( 2197 color(var(--blue) whiteness(+7%)), 2198 color(var(--blue) lightness(-7%) saturation(-10%)) 60%, 2199 color(var(--blue) lightness(-7%) saturation(-10%)) 90%, 2200 color(var(--blue) lightness(-4%) saturation(-10%)) 2201 ); 2202 border-radius: 8px; 2203 box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14); 2204 2205 -webkit-font-smoothing: subpixel-antialiased; 2206 } 2207 2208 .subscribe-overlay button:active, 2209 .subscribe-overlay button:focus { 2210 background: color(var(--blue) lightness(-9%) saturation(-10%)); 2211 } 2212 2213 .subscribe-overlay-close { 2214 position: absolute; 2215 top: 0; 2216 right: 0; 2217 bottom: 0; 2218 left: 0; 2219 display: block; 2220 } 2221 2222 .subscribe-overlay-close:before { 2223 content: ''; 2224 position: absolute; 2225 top: 40px; 2226 right: 25px; 2227 display: block; 2228 width: 30px; 2229 height: 2px; 2230 background: #fff; 2231 opacity: 0.8; 2232 transform: rotate(45deg); 2233 } 2234 2235 .subscribe-overlay-close:after { 2236 content: ''; 2237 position: absolute; 2238 top: 40px; 2239 right: 25px; 2240 display: block; 2241 width: 30px; 2242 height: 2px; 2243 background: #fff; 2244 opacity: 0.8; 2245 transform: rotate(-45deg); 2246 } 2247 2248 .subscribe-overlay-close:hover { 2249 cursor: default; 2250 } 2251 2252 /* 11. Site Footer 2253 /* ---------------------------------------------------------- */ 2254 2255 .site-footer { 2256 position: relative; 2257 padding-top: 20px; 2258 padding-bottom: 60px; 2259 color: #fff; 2260 background: #000; 2261 } 2262 2263 .site-footer-content { 2264 display: flex; 2265 flex-wrap: wrap; 2266 justify-content: space-between; 2267 align-items: center; 2268 color: rgba(255, 255, 255, 0.7); 2269 font-size: 1.3rem; 2270 } 2271 2272 .site-footer-content a { 2273 color: rgba(255, 255, 255, 0.7); 2274 } 2275 2276 .site-footer-content a:hover { 2277 color: rgba(255, 255, 255, 1); 2278 text-decoration: none; 2279 } 2280 2281 .site-footer-nav { 2282 display: flex; 2283 } 2284 2285 .site-footer-nav a { 2286 position: relative; 2287 margin-left: 20px; 2288 } 2289 2290 .site-footer-nav a:before { 2291 content: ''; 2292 position: absolute; 2293 top: 11px; 2294 left: -11px; 2295 display: block; 2296 width: 2px; 2297 height: 2px; 2298 background: #fff; 2299 border-radius: 100%; 2300 } 2301 2302 .site-footer-nav a:first-of-type:before { 2303 display: none; 2304 } 2305 2306 @media (max-width: 650px) { 2307 .site-footer-content { 2308 flex-direction: column; 2309 } 2310 .site-footer-nav a:first-child { 2311 margin-left: 0; 2312 } 2313 }