assets/css/screen.css

   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   4.1 Home header
  12   4.2 Archive header
  13 5.  Site Navigation
  14 6.  Post Feed
  15 7.  Single Post
  16   7.1. Post Byline
  17   7.2. Members Subscribe Form
  18   7.4. Related Posts
  19   7.5. Koenig Styles
  20 8.  Author Template
  21 9.  Error Template
  22 11. Site Footer
  23 12. Dark Mode
  24
  25 */
  26
  27 /* 1. Global - Set up the things
  28 /* ---------------------------------------------------------- */
  29
  30 /* Import CSS reset and base styles */
  31 @import "global.css";
  32
  33 :root {
  34
  35     /* Colours */
  36     --color-green: #a4d037;
  37     --color-yellow: #fecd35;
  38     --color-red: #f05230;
  39     --color-darkgrey: #15171A;
  40     --color-midgrey: #738a94;
  41     --color-lightgrey: #c5d2d9;
  42     --color-wash: #e5eff5;
  43     --color-darkmode: #151719;
  44
  45     /*
  46     An accent color is also set by Ghost itself in
  47     Ghost Admin > Settings > Brand
  48
  49     --ghost-accent-color: {value};
  50
  51     You can use this variale throughout your styles
  52      */
  53
  54     /* Fonts */
  55     --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  56     --font-serif: Georgia, Times, serif;
  57     --font-mono: Menlo, Courier, monospace;
  58
  59 }
  60
  61
  62 /* 2. Layout - Page building blocks
  63 /* ---------------------------------------------------------- */
  64
  65 .viewport {
  66     display: flex;
  67     flex-direction: column;
  68     min-height: 100vh;
  69 }
  70
  71 .viewport > main {
  72     flex-grow: 1;
  73 }
  74
  75 /* Full width page blocks */
  76 .outer {
  77     position: relative;
  78     padding: 0 4vmin;
  79 }
  80
  81 /* Centered content container blocks */
  82 .inner {
  83     margin: 0 auto;
  84     max-width: 1200px;
  85     width: 100%;
  86 }
  87
  88
  89 /* 4. Site Header
  90 /* ---------------------------------------------------------- */
  91
  92 .site-header {
  93     position: relative;
  94     color: #fff;
  95     background: var(--ghost-accent-color);
  96 }
  97
  98 .site-header-cover {
  99     position: absolute;
 100     top: 0;
 101     right: 0;
 102     bottom: 0;
 103     left: 0;
 104     width: 100%;
 105     height: 100%;
 106     object-fit: cover;
 107 }
 108
 109 .site-header-content {
 110     position: relative;
 111     z-index: 100;
 112     display: flex;
 113     flex-direction: column;
 114     justify-content: center;
 115     align-items: center;
 116     padding: 6vw 3vw;
 117     min-height: 200px;
 118     max-height: 340px;
 119     text-align: center;
 120 }
 121
 122 .site-title {
 123     z-index: 10;
 124     margin: 0 0 0.15em;
 125     padding: 0;
 126 }
 127
 128 .site-logo {
 129     max-height: 55px;
 130 }
 131
 132 .site-header-content p {
 133     z-index: 10;
 134     max-width: 600px;
 135     margin: 0 auto;
 136     line-height: 1.2em;
 137     opacity: 0.8;
 138 }
 139
 140 @media (max-width: 600px) {
 141     .site-header-content p {
 142         max-width: 80vmin;
 143         font-size: 1.8rem;
 144     }
 145 }
 146
 147 /* 4.1 Home header
 148 /* ---------------------------------------------------------- */
 149
 150 .site-home-header {
 151     position: relative;
 152     z-index: 1000;
 153     overflow: hidden;
 154 }
 155
 156 .site-header-content {
 157     padding: 18vmin 4vmin;
 158     font-size: 2.5rem;
 159     font-weight: 400;
 160     color: #fff;
 161     background: var(--ghost-accent-color);
 162 }
 163
 164
 165
 166 /* 5. Site Navigation
 167 /* ---------------------------------------------------------- */
 168
 169 .gh-head {
 170     padding: 1vmin 4vmin;
 171     font-size: 1.6rem;
 172     line-height: 1.3em;
 173     color: #fff;
 174     background: var(--ghost-accent-color);
 175 }
 176
 177 .gh-head a {
 178     color: inherit;
 179     text-decoration: none;
 180 }
 181
 182 .gh-head-inner {
 183     display: grid;
 184     grid-gap: 2.5vmin;
 185     grid-template-columns: auto auto 1fr;
 186     grid-auto-flow: row dense;
 187 }
 188
 189
 190 /* Brand
 191 /* ---------------------------------------------------------- */
 192
 193 .gh-head-brand {
 194     display: flex;
 195     align-items: center;
 196     height: 40px;
 197     max-width: 200px;
 198     text-align: center;
 199     word-break: break-all;
 200 }
 201
 202 .gh-head-logo {
 203     display: block;
 204     padding: 10px 0;
 205     font-weight: 700;
 206     font-size: 2rem;
 207     line-height: 1.2em;
 208     letter-spacing: -0.02em;
 209 }
 210
 211 .gh-head-logo img {
 212     max-height: 26px;
 213 }
 214
 215
 216 /* Primary Navigation
 217 /* ---------------------------------------------------------- */
 218
 219 .gh-head-menu {
 220     display: flex;
 221     align-items: center;
 222     font-weight: 500;
 223 }
 224
 225 .gh-head-menu .nav {
 226     display: inline-flex;
 227     flex-wrap: wrap;
 228     align-items: center;
 229     list-style: none;
 230     margin: 0;
 231     padding: 0;
 232 }
 233
 234 .gh-head-menu .nav li {
 235     margin: 0 2.5vmin 0 0;
 236     padding: 0;
 237 }
 238
 239 .gh-head-menu .nav a {
 240     display: inline-block;
 241     padding: 5px 0;
 242     opacity: 0.8
 243 }
 244
 245 .gh-head-menu .nav a:hover {
 246     opacity: 1;
 247 }
 248
 249
 250 /* Secondary Navigation
 251 /* ---------------------------------------------------------- */
 252
 253 .gh-head-actions {
 254     display: flex;
 255     justify-content: flex-end;
 256     align-items: center;
 257     list-style: none;
 258     text-align: right;
 259 }
 260
 261 .gh-head-actions-list {
 262     display: inline-flex;
 263     flex-wrap: wrap;
 264     justify-content: flex-end;
 265     align-items: center;
 266 }
 267
 268 .gh-head-actions-list a:not([class]) {
 269     display: inline-block;
 270     margin: 0 0 0 1.5vmin;
 271     padding: 5px 0;
 272 }
 273
 274 .gh-social {
 275     margin: 0 1.5vmin 0 0;
 276 }
 277
 278 .gh-social a {
 279     opacity: 0.8
 280 }
 281
 282 .gh-social a + a {
 283     margin-left: 0.8rem;
 284 }
 285
 286 .gh-social a:hover {
 287     opacity: 1;
 288 }
 289
 290 .gh-social svg {
 291     height: 22px;
 292     width: 22px;
 293     fill: #fff;
 294 }
 295
 296 .gh-social-facebook svg {
 297     height: 20px;
 298     width: 20px;
 299 }
 300
 301 a.gh-head-button {
 302     display: block;
 303     padding: 8px 15px;
 304     color: var(--color-darkgrey);
 305     font-weight: 500;
 306     letter-spacing: -0.015em;
 307     font-size: 1.5rem;
 308     line-height: 1em;
 309     background: #fff;
 310     border-radius: 30px;
 311 }
 312
 313
 314 /* Mobile Menu Trigger
 315 /* ---------------------------------------------------------- */
 316
 317 .gh-burger {
 318     position: relative;
 319     display: none;
 320     cursor: pointer;
 321 }
 322
 323 .gh-burger-box {
 324     position: relative;
 325     display: flex;
 326     align-items: center;
 327     justify-content: center;
 328     width: 33px;
 329     height: 33px;
 330 }
 331
 332 .gh-burger-inner {
 333     width: 100%;
 334     height: 100%;
 335 }
 336
 337 .gh-burger-box::before {
 338     position: absolute;
 339     display: block;
 340     top: 0;
 341     left: 0;
 342     bottom: 0;
 343     margin: auto;
 344     content: '';
 345     width: 100%;
 346     height: 1px;
 347     background: currentcolor;
 348     transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
 349     will-change: transform, width;
 350 }
 351
 352 .gh-burger-inner::before,
 353 .gh-burger-inner::after {
 354     position: absolute;
 355     display: block;
 356     top: 0;
 357     left: 0;
 358     bottom: 0;
 359     margin: auto;
 360     content: '';
 361     width: 100%;
 362     height: 1px;
 363     background: currentcolor;
 364     transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
 365     will-change: transform, width;
 366 }
 367
 368 .gh-burger-inner::before {
 369     transform: translatey(-6px);
 370 }
 371 .gh-burger-inner::after {
 372     transform: translatey(6px);
 373 }
 374
 375 body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
 376     transform: translatey(-8px);
 377 }
 378 body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 379     transform: translatey(8px);
 380 }
 381
 382 .gh-head-open .gh-burger-box::before {
 383     width: 0;
 384     transform: translatex(19px);
 385     transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
 386 }
 387
 388 .gh-head-open .gh-burger-inner::before {
 389     width: 26px;
 390     transform: translatex(6px) rotate(135deg);
 391 }
 392
 393 .gh-head-open .gh-burger-inner::after {
 394     width: 26px;
 395     transform: translatex(6px) rotate(-135deg);
 396 }
 397
 398
 399 /* Mobile Menu
 400 /* ---------------------------------------------------------- */
 401 /* IDs needed to ensure sufficient specificity */
 402
 403 @media (max-width: 900px) {
 404     .gh-burger {
 405         display: inline-block;
 406     }
 407     #gh-head {
 408         transition: all 0.4s ease-out;
 409         overflow: hidden;
 410     }
 411     #gh-head .gh-head-inner {
 412         height: 100%;
 413         grid-template-columns: 1fr;
 414     }
 415     #gh-head .gh-head-brand {
 416         position: relative;
 417         z-index: 10;
 418         grid-column-start: auto;
 419         max-width: none;
 420         display: flex;
 421         align-items: center;
 422         justify-content: space-between;
 423         user-select: none;
 424     }
 425     .home-template #gh-head .gh-head-brand {
 426         justify-content: flex-end;
 427     }
 428     #gh-head .gh-head-menu {
 429         align-self: center;
 430         display: flex;
 431         flex-direction: column;
 432         align-items: center;
 433         text-align: center;
 434         margin: 0 0 10vh 0;
 435         font-weight: 300;
 436         font-size: 3.6rem;
 437         line-height: 1.1em;
 438     }
 439     #gh-head .gh-head-menu .nav li {
 440         margin: 5px 0;
 441     }
 442     #gh-head .gh-head-menu .nav a {
 443         padding: 8px 0;
 444     }
 445     #gh-head .gh-head-menu .nav {
 446         display: flex;
 447         flex-direction: column;
 448         align-items: center;
 449     }
 450     #gh-head .gh-head-actions {
 451         padding: 20px 0;
 452         justify-content: center;
 453         text-align: left;
 454     }
 455     #gh-head .gh-head-actions a {
 456         margin: 0 10px;
 457     }
 458     /* Hide collapsed content */
 459     #gh-head .gh-head-actions,
 460     #gh-head .gh-head-menu {
 461         display: none;
 462     }
 463     /* Open the menu */
 464     .gh-head-open {
 465         overflow: hidden;
 466         height: 100vh;
 467     }
 468     .gh-head-open #gh-head {
 469         position: fixed;
 470         top: 0;
 471         right: 0;
 472         bottom: 0;
 473         left: 0;
 474         z-index: 3999999;
 475         overflow-y: scroll;
 476     }
 477     .gh-head-open #gh-head .gh-head-inner {
 478         grid-template-rows: auto 1fr auto;
 479     }
 480     .gh-head-open #gh-head .gh-head-actions,
 481     .gh-head-open #gh-head .gh-head-menu {
 482         display: flex;
 483     }
 484 }
 485
 486 @media (max-width: 600px) {
 487     #gh-head .gh-head-menu {
 488         font-size: 6vmin;
 489     }
 490 }
 491
 492 .home-template .gh-head {
 493     position: absolute;
 494     top: 0;
 495     right: 0;
 496     left: 0;
 497     z-index: 2000;
 498 }
 499
 500 .home-template .gh-head.has-cover {
 501     background: transparent;
 502 }
 503
 504 .home-template.gh-head-open .gh-head {
 505     background: var(--ghost-accent-color);
 506 }
 507
 508 .home-template .gh-head-logo {
 509     display: none;
 510 }
 511 .home-template .gh-head-menu {
 512     margin-left: -2.5vmin;
 513 }
 514
 515
 516 /* 6. Post Feed
 517 /* ---------------------------------------------------------- */
 518
 519 .post-feed {
 520     position: relative;
 521     display: grid;
 522     grid-gap: 4vmin;
 523     grid-template-columns: 1fr 1fr 1fr;
 524     padding: 4vmin 0;
 525 }
 526
 527 @media (max-width: 1000px) {
 528     .post-feed {
 529         grid-template-columns: 1fr 1fr;
 530     }
 531 }
 532 @media (max-width: 700px) {
 533     .post-feed {
 534         grid-template-columns: 1fr;
 535         grid-gap: 40px;
 536     }
 537 }
 538
 539 .post-card {
 540     position: relative;
 541     flex: 1 1 301px;
 542     display: flex;
 543     flex-direction: column;
 544     min-height: 220px;
 545     background-size: cover;
 546     word-break: break-word;
 547 }
 548
 549 .post-card-image-link {
 550     position: relative;
 551     display: block;
 552     overflow: hidden;
 553     border-radius: 3px;
 554 }
 555
 556 .post-card-image {
 557     width: 100%;
 558     height: 200px;
 559     background: var(--color-lightgrey) no-repeat center center;
 560
 561     object-fit: cover;
 562 }
 563
 564 .post-card-content-link {
 565     position: relative;
 566     display: block;
 567     color: var(--color-darkgrey);
 568 }
 569
 570 .post-card-content-link:hover {
 571     text-decoration: none;
 572 }
 573
 574 .post-card-header {
 575     margin: 20px 0 0;
 576 }
 577
 578 .post-feed .no-image .post-card-content-link {
 579     padding: 0;
 580 }
 581
 582 .no-image .post-card-header {
 583     margin-top: 0;
 584 }
 585
 586 .post-card-primary-tag {
 587     margin: 0 0 0.2em;
 588     color: var(--ghost-accent-color);
 589     font-size: 1.2rem;
 590     font-weight: 500;
 591     letter-spacing: 0.2px;
 592     text-transform: uppercase;
 593 }
 594
 595 .post-card-title {
 596     margin: 0 0 0.4em;
 597     font-size: 2.4rem;
 598     transition: color 0.2s ease-in-out;
 599 }
 600
 601 .no-image .post-card-title {
 602     margin-top: 0;
 603 }
 604
 605 .post-card-content {
 606     flex-grow: 1;
 607     display: flex;
 608     flex-direction: column;
 609 }
 610
 611 .post-card-excerpt {
 612     max-width: 56em;
 613     color: color-mod(var(--color-midgrey) l(-8%));
 614 }
 615
 616 .post-card-excerpt p {
 617     margin-bottom: 1em;
 618     display: -webkit-box;
 619     overflow-y: hidden;
 620     -webkit-line-clamp: 3;
 621     -webkit-box-orient: vertical;
 622     word-break: break-word;
 623 }
 624
 625 .post-card-meta {
 626     display: flex;
 627     align-items: center;
 628     padding: 0;
 629 }
 630
 631 .author-profile-image,
 632 .avatar-wrapper {
 633     display: block;
 634     width: 100%;
 635     height: 100%;
 636     background: color-mod(var(--color-lightgrey) l(+10%));
 637     border-radius: 100%;
 638
 639     object-fit: cover;
 640 }
 641
 642 .post-card-meta .profile-image-wrapper,
 643 .post-card-meta .avatar-wrapper {
 644     position: relative;
 645 }
 646
 647 .author-list {
 648     display: flex;
 649     flex-wrap: wrap;
 650     margin: 0 0 0 4px;
 651     padding: 0;
 652     list-style: none;
 653 }
 654
 655 .author-list-item {
 656     position: relative;
 657     flex-shrink: 0;
 658     margin: 0;
 659     padding: 0;
 660 }
 661
 662 .static-avatar {
 663     display: block;
 664     overflow: hidden;
 665     margin: 0 0 0 -6px;
 666     width: 36px;
 667     height: 36px;
 668     border-radius: 100%;
 669     box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
 670 }
 671
 672 .post-card-byline-content {
 673     flex: 1 1 50%;
 674     display: flex;
 675     flex-direction: column;
 676     margin: 0 0 0 8px;
 677     color: color-mod(var(--color-midgrey) l(+10%));
 678     font-size: 1.4rem;
 679     line-height: 1.2em;
 680     font-weight: 400;
 681 }
 682
 683 .post-card-byline-content span {
 684     margin: 0;
 685 }
 686
 687 .post-card-byline-content a {
 688     color: color-mod(var(--color-darkgrey) l(+15%));
 689     font-weight: 600;
 690 }
 691
 692 .post-card-byline-date {
 693     font-size: 1.3rem;
 694     line-height: 1.5em;
 695 }
 696
 697 .post-card-byline-date .bull {
 698     display: inline-block;
 699     margin: 0 2px;
 700     opacity: 0.6;
 701 }
 702
 703 .single-author-byline {
 704     display: flex;
 705     flex-direction: column;
 706     margin-left: 5px;
 707     color: color-mod(var(--color-midgrey) l(-10%));
 708     font-size: 1.3rem;
 709     line-height: 1.4em;
 710     font-weight: 500;
 711 }
 712
 713 .single-author {
 714     display: flex;
 715     align-items: center;
 716 }
 717
 718 .single-author .static-avatar {
 719     margin-left: -2px;
 720 }
 721
 722 .single-author-name {
 723     display: inline-block;
 724 }
 725
 726 /* Special Styling for home page grid (below):
 727
 728 The first post in the list is styled to be bigger than the others and take over
 729 the full width of the grid to give it more emphasis. Wrapped in a media query to
 730 make sure this only happens on large viewports / desktop-ish devices.
 731
 732  */
 733
 734 @media (min-width: 1001px) {
 735     .post-card-large {
 736         grid-column: 1 / span 3;
 737         display: grid;
 738         grid-gap: 4vmin;
 739         grid-template-columns: 1fr 1fr 1fr;
 740         min-height: 280px;
 741         border-top: 0;
 742     }
 743
 744     .post-card-large:not(.no-image) .post-card-header {
 745         margin-top: 0;
 746     }
 747
 748     .post-card-large .post-card-image-link {
 749         position: relative;
 750         grid-column: 1 / span 2;
 751         margin-bottom: 0;
 752         min-height: 380px;
 753     }
 754
 755     .post-card-large .post-card-image {
 756         position: absolute;
 757         width: 100%;
 758         height: 100%;
 759     }
 760
 761     .post-card-large .post-card-content {
 762         justify-content: center;
 763     }
 764
 765     .post-card-large .post-card-title {
 766         margin-top: 0;
 767         font-size: 3.2rem;
 768     }
 769
 770     .post-card-large .post-card-excerpt p {
 771         margin-bottom: 1.5em;
 772         font-size: 1.7rem;
 773         line-height: 1.55em;
 774         -webkit-line-clamp: 8;
 775     }
 776 }
 777
 778
 779 @media (max-width: 500px) {
 780     .post-card-title {
 781         font-size: 1.9rem;
 782     }
 783
 784     .post-card-excerpt {
 785         font-size: 1.6rem;
 786     }
 787 }
 788
 789
 790 /* 7. Single Post
 791 /* ---------------------------------------------------------- */
 792
 793 .article {
 794     padding: 8vmin 0;
 795     word-break: break-word;
 796 }
 797
 798 .article-header {
 799     padding: 0 0 6vmin 0;
 800 }
 801
 802 .article-tag {
 803     display: flex;
 804     justify-content: flex-start;
 805     align-items: center;
 806     margin: 0 0 0.5rem;
 807     color: var(--color-midgrey);
 808     font-size: 1.3rem;
 809     line-height: 1.4em;
 810     letter-spacing: 0.02em;
 811     font-weight: 600;
 812     text-transform: uppercase;
 813 }
 814
 815 .article-tag a {
 816     color: var(--ghost-accent-color);
 817 }
 818
 819 .article-title {
 820     color: color-mod(var(--color-darkgrey) l(-5%));
 821 }
 822
 823 .article-excerpt {
 824     margin: 0 0 1rem;
 825     font-size: 2rem;
 826     line-height: 1.4em;
 827     opacity: 0.6;
 828 }
 829
 830 .gh-canvas .article-image {
 831     grid-column: wide-start / wide-end;
 832     width: 100%;
 833     margin: 6vmin 0 0;
 834 }
 835
 836 .gh-canvas .article-image img {
 837     display: block;
 838     margin-left: auto;
 839     margin-right: auto;
 840     width: 100%;
 841 }
 842
 843 @media (max-width: 600px) {
 844     .article-excerpt {
 845         font-size: 1.8rem;
 846     }
 847 }
 848
 849 /* -------- */
 850
 851 /* Content grid
 852 /* ---------------------------------------------------------- */
 853
 854 /* Canvas creates a multi-column, centered grid which the post
 855 is laid out on top of. Canvas just defines the grid, we don't
 856 use it for applying any other styles. */
 857
 858 .gh-canvas {
 859     display: grid;
 860     grid-template-columns:
 861         [full-start]
 862         minmax(4vmin, auto)
 863             [wide-start]
 864             minmax(auto, 240px)
 865                 [main-start]
 866                     min(720px, calc(100% - 8vw))
 867                 [main-end]
 868             minmax(auto, 240px)
 869             [wide-end]
 870         minmax(4vmin, auto)
 871         [full-end]
 872     ;
 873 }
 874
 875 .gh-canvas > * {
 876     grid-column: main-start / main-end;
 877 }
 878
 879 .kg-width-wide {
 880     grid-column: wide-start / wide-end;
 881 }
 882
 883 .kg-width-full {
 884     grid-column: full-start / full-end;
 885 }
 886
 887 .kg-width-full img {
 888     width: 100%;
 889 }
 890
 891
 892 /* Content
 893 /* ---------------------------------------------------------- */
 894
 895 /* Content refers to styling all page and post content that is
 896 created within the Ghost editor. The main content handles
 897 headings, text, images and lists. We deal with cards lower down. */
 898
 899 /* Default vertical spacing */
 900 .gh-content > * + * {
 901     margin-top: 4vmin;
 902     margin-bottom: 0;
 903 }
 904
 905 /* [id] represents all headings h1-h6, reset all margins */
 906 .gh-content > [id] {
 907     margin: 0;
 908     color: var(--color-darkgrey);
 909 }
 910
 911 /* Add back a top margin to all headings, unless a heading
 912 is the very first element in the post content */
 913 .gh-content > [id]:not(:first-child) {
 914     margin: 2em 0 0;
 915 }
 916
 917 /* Add a small margin between a heading and anything after it */
 918 .gh-content > [id] + * {
 919     margin-top: 1.5rem !important;
 920 }
 921
 922 /* A larger margin before/after HRs and blockquotes */
 923 .gh-content > hr,
 924 .gh-content > blockquote {
 925     position: relative;
 926     margin-top: 6vmin;
 927 }
 928 .gh-content > hr + *,
 929 .gh-content > blockquote + * {
 930     margin-top: 6vmin !important;
 931 }
 932
 933 /* Now the content typography styles */
 934 .gh-content a {
 935     color: var(--ghost-accent-color);
 936     text-decoration: underline;
 937     word-break: break-word;
 938 }
 939
 940 .gh-content > blockquote,
 941 .gh-content > ol,
 942 .gh-content > ul,
 943 .gh-content > dl,
 944 .gh-content > p {
 945     font-family: var(--font-serif);
 946     font-weight: 400;
 947     font-size: 2.1rem;
 948     line-height: 1.6em;
 949 }
 950
 951 .gh-content > ul,
 952 .gh-content > ol,
 953 .gh-content > dl {
 954     padding-left: 1.9em;
 955 }
 956
 957 .gh-content > blockquote {
 958     position: relative;
 959     font-style: italic;
 960     padding: 0;
 961 }
 962
 963 .gh-content > blockquote::before {
 964     content: "";
 965     position: absolute;
 966     left: -1.5em;
 967     top: 0;
 968     bottom: 0;
 969     width: 0.3rem;
 970     background: var(--ghost-accent-color);
 971 }
 972
 973 .gh-content :not(pre) > code {
 974     vertical-align: middle;
 975     padding: 0.15em 0.4em 0.15em;
 976     border: #e1eaef 1px solid;
 977     font-weight: 400 !important;
 978     font-size: 0.9em;
 979     line-height: 1em;
 980     color: #15171A;
 981     background: #f0f6f9;
 982     border-radius: 0.25em;
 983 }
 984
 985 .gh-content pre {
 986     overflow: auto;
 987     padding: 16px 20px;
 988     color: var(--color-wash);
 989     font-size: 1.4rem;
 990     line-height: 1.5em;
 991     background: var(--color-darkgrey);
 992     border-radius: 5px;
 993     box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
 994 }
 995
 996 @media (max-width: 650px) {
 997     .gh-content blockquote,
 998     .gh-content ol,
 999     .gh-content ul,
1000     .gh-content dl,
1001     .gh-content p {
1002         font-size: 1.7rem;
1003     }
1004
1005     .gh-content blockquote::before {
1006         left: -4vmin;
1007     }
1008 }
1009
1010
1011 /* Cards
1012 /* ---------------------------------------------------------- */
1013
1014 /* Cards are dynamic blocks of content which appear within Ghost
1015 posts, for example: embedded videos, tweets, galleries, or
1016 specially styled bookmark links. We add extra styling here to
1017 make sure they look good, and are given a bit of extra spacing. */
1018
1019 /* Add extra margin before/after any cards,
1020 except for when immediately preceeded by a heading */
1021 .gh-content :not(.kg-card):not([id]) + .kg-card {
1022     margin-top: 6vmin;
1023     margin-bottom: 0;
1024 }
1025 .gh-content .kg-card + :not(.kg-card) {
1026     margin-top: 6vmin;
1027     margin-bottom: 0;
1028 }
1029
1030 /* This keeps small embeds centered */
1031 .kg-embed-card {
1032     display: flex;
1033     flex-direction: column;
1034     align-items: center;
1035     width: 100%;
1036 }
1037
1038 /* This keeps small iamges centered */
1039 .kg-image-card img {
1040     margin: auto;
1041 }
1042
1043
1044 /* Captions */
1045 .kg-card figcaption {
1046     padding: 1.5rem 1.5rem 0;
1047     text-align: center;
1048     color: rgba(0,0,0,0.5);
1049     font-weight: 600;
1050     font-size: 1.3rem;
1051     line-height: 1.4em;
1052 }
1053 .kg-card figcaption strong {
1054     color: rgba(0,0,0,0.8);
1055 }
1056
1057
1058 /* Highly specific styles for traditional Instagram embeds */
1059 iframe.instagram-media {
1060     margin-top: 6vmin !important;
1061     margin-left: auto !important;
1062     margin-right: auto !important;
1063     margin-bottom: 0 !important;
1064 }
1065
1066 iframe.instagram-media + script + :not([id]) {
1067     margin-top: 6vmin;
1068 }
1069
1070
1071 /* Galleries
1072 /* ---------------------------------------------------------- */
1073
1074 /* When there galleries are mixed with images, reduce margin
1075 between them, so it looks like 1 big gallery */
1076 .kg-image-card + .kg-gallery-card,
1077 .kg-gallery-card + .kg-image-card,
1078 .kg-gallery-card + .kg-gallery-card {
1079     margin-top: 0.75em;
1080 }
1081
1082 .kg-image-card.kg-card-hascaption + .kg-gallery-card,
1083 .kg-gallery-card.kg-card-hascaption + .kg-image-card,
1084 .kg-gallery-card.kg-card-hascaption + .kg-gallery-card {
1085     margin-top: 1.75em;
1086 }
1087
1088 .kg-gallery-container {
1089     position: relative;
1090 }
1091
1092 .kg-gallery-row {
1093     display: flex;
1094     flex-direction: row;
1095     justify-content: center;
1096 }
1097
1098 .kg-gallery-image img {
1099     display: block;
1100     margin: 0;
1101     width: 100%;
1102     height: 100%;
1103 }
1104
1105 .kg-gallery-row:not(:first-of-type) {
1106     margin: 0.75em 0 0 0;
1107 }
1108
1109 .kg-gallery-image:not(:first-of-type) {
1110     margin: 0 0 0 0.75em;
1111 }
1112
1113
1114 /* Bookmark Cards
1115 /* ---------------------------------------------------------- */
1116
1117 /* These are styled links with structured data, similar to a
1118 Twitter card. These styles roughly match what you see in the
1119 Ghost editor. */
1120
1121 .kg-bookmark-card,
1122 .kg-bookmark-publisher {
1123     position: relative;
1124     width: 100%;
1125 }
1126
1127 .kg-bookmark-container,
1128 .kg-bookmark-container:hover {
1129     display: flex;
1130     color: currentColor;
1131     font-family: var(--font-sans-serif);
1132     text-decoration: none !important;
1133     background: rgba(255,255,255,0.6);
1134     border-radius: 5px;
1135     box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
1136     overflow: hidden;
1137 }
1138
1139 .kg-bookmark-content {
1140     display: flex;
1141     flex-direction: column;
1142     flex-grow: 1;
1143     flex-basis: 100%;
1144     align-items: flex-start;
1145     justify-content: flex-start;
1146     padding: 20px;
1147 }
1148
1149 .kg-bookmark-title {
1150     font-size: 1.5rem;
1151     line-height: 1.4em;
1152     font-weight: 600;
1153     color: #15171A;
1154 }
1155
1156 .kg-bookmark-description {
1157     display: -webkit-box;
1158     font-size: 1.4rem;
1159     line-height: 1.5em;
1160     margin-top: 3px;
1161     color: #626d79;
1162     font-weight: 400;
1163     max-height: 44px;
1164     overflow-y: hidden;
1165     -webkit-line-clamp: 2;
1166     -webkit-box-orient: vertical;
1167 }
1168
1169 .kg-bookmark-metadata {
1170     display: flex;
1171     align-items: center;
1172     margin-top: 22px;
1173     width: 100%;
1174     color: #394047;
1175     font-size: 1.4rem;
1176     font-weight: 500;
1177 }
1178
1179 .kg-bookmark-icon {
1180     width: 20px;
1181     height: 20px;
1182     margin-right: 6px;
1183 }
1184
1185 .kg-bookmark-author,
1186 .kg-bookmark-publisher {
1187     display: inline;
1188 }
1189
1190 .kg-bookmark-publisher {
1191     text-overflow: ellipsis;
1192     overflow: hidden;
1193     max-width: 240px;
1194     white-space: nowrap;
1195     display: block;
1196     line-height: 1.65em;
1197 }
1198
1199 .kg-bookmark-metadata > span:nth-of-type(2) {
1200     color: #626d79;
1201     font-weight: 400;
1202 }
1203
1204 .kg-bookmark-metadata > span:nth-of-type(2):before {
1205     content: "•";
1206     color: #394047;
1207     margin: 0 6px;
1208 }
1209
1210 .kg-bookmark-thumbnail {
1211     position: relative;
1212     flex-grow: 1;
1213     min-width: 33%;
1214 }
1215
1216 .kg-bookmark-thumbnail img {
1217     width: 100%;
1218     height: 100%;
1219     object-fit: cover;
1220     position: absolute;
1221     top: 0;
1222     left: 0;
1223     border-radius: 0 4px 4px 0;
1224 }
1225
1226
1227 /* Card captions
1228 /* ---------------------------------------------------------- */
1229
1230 .kg-width-full.kg-card-hascaption {
1231     display: grid;
1232     grid-template-columns: inherit;
1233 }
1234
1235 .kg-width-wide.kg-card-hascaption img {
1236     grid-column: wide-start / wide-end;
1237 }
1238 .kg-width-full.kg-card-hascaption img {
1239     grid-column: 1 / -1;
1240 }
1241
1242 .kg-width-full.kg-card-hascaption figcaption {
1243     grid-column: main-start / main-end;
1244 }
1245
1246 .article-comments {
1247     margin: 6vmin 0 0 0;
1248 }
1249
1250 /* -----old------ */
1251
1252 .footnotes-sep {
1253     margin-bottom: 30px;
1254 }
1255
1256 .footnotes {
1257     font-size: 1.5rem;
1258 }
1259
1260 .footnotes p {
1261     margin: 0;
1262 }
1263
1264 .footnote-backref {
1265     font-size: 1.2rem;
1266     font-weight: bold;
1267     text-decoration: none !important;
1268     box-shadow: none !important;
1269 }
1270
1271 /* Tables */
1272 .post-full-content table {
1273     display: inline-block;
1274     overflow-x: auto;
1275     margin: 0.5em 0 2.5em;
1276     max-width: 100%;
1277     width: auto;
1278     border-spacing: 0;
1279     border-collapse: collapse;
1280     font-family: var(--font-sans-serif);
1281     font-size: 1.6rem;
1282     white-space: nowrap;
1283     vertical-align: top;
1284 }
1285
1286 .post-full-content table {
1287     -webkit-overflow-scrolling: touch;
1288     background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
1289     background-attachment: scroll, scroll;
1290     background-size: 10px 100%, 10px 100%;
1291     background-repeat: no-repeat;
1292 }
1293
1294 .post-full-content table td:first-child {
1295     background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
1296     background-size: 20px 100%;
1297     background-repeat: no-repeat;
1298 }
1299
1300 .post-full-content table td:last-child {
1301     background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
1302     background-position: 100% 0;
1303     background-size: 20px 100%;
1304     background-repeat: no-repeat;
1305 }
1306
1307 .post-full-content table th {
1308     color: var(--color-darkgrey);
1309     font-size: 1.2rem;
1310     font-weight: 700;
1311     letter-spacing: 0.2px;
1312     text-align: left;
1313     text-transform: uppercase;
1314     background-color: color-mod(var(--color-wash) l(+4%));
1315 }
1316
1317 .post-full-content table th,
1318 .post-full-content table td {
1319     padding: 6px 12px;
1320     border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
1321 }
1322
1323
1324 /* 7.1. Post Byline
1325 /* ---------------------------------------------------------- */
1326
1327 .article-byline {
1328     display: flex;
1329     justify-content: space-between;
1330     margin: 20px 0 0;
1331 }
1332
1333 .article-byline-content {
1334     flex-grow: 1;
1335     display: flex;
1336     align-items: center;
1337 }
1338
1339 .article-byline-content .author-list {
1340     justify-content: flex-start;
1341     padding: 0 12px 0 0;
1342 }
1343
1344 .article-byline-meta {
1345     color: color-mod(var(--color-midgrey));
1346     font-size: 1.4rem;
1347     line-height: 1.2em;
1348 }
1349
1350 .article-byline-meta h4 {
1351     margin: 0 0 3px;
1352     font-size: 1.6rem;
1353 }
1354
1355 .article-byline-meta .bull {
1356     display: inline-block;
1357     margin: 0 2px;
1358     opacity: 0.6;
1359 }
1360
1361 .author-avatar {
1362     display: block;
1363     overflow: hidden;
1364     margin: 0 -4px;
1365     width: 50px;
1366     height: 50px;
1367     border: #fff 2px solid;
1368     border-radius: 100%;
1369     transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
1370 }
1371
1372 .basic-info .avatar-wrapper {
1373     position: relative;
1374     margin: 0;
1375     width: 60px;
1376     height: 60px;
1377     border: none;
1378     background: rgba(229, 239, 245, 0.1);
1379 }
1380
1381 .basic-info .avatar-wrapper svg {
1382     margin: 0;
1383     width: 60px;
1384     height: 60px;
1385     opacity: 0.15;
1386 }
1387
1388 .page-template .article-title {
1389     margin-bottom: 0;
1390 }
1391
1392
1393 /* 7.3. Subscribe
1394 /* ---------------------------------------------------------- */
1395
1396 .footer-cta {
1397     position: relative;
1398     padding: 9vmin 4vmin 10vmin;
1399     color: #fff;
1400     text-align: center;
1401     background: var(--color-darkgrey);
1402 }
1403
1404 /* Increases the default h2 size by 15%, for small and large screens */
1405 .footer-cta h2 {
1406     margin: 0 0 30px;
1407     font-size: 3.2rem;
1408 }
1409
1410 @media (max-width: 600px) {
1411     .footer-cta h2 {
1412         font-size: 2.65rem;
1413     }
1414 }
1415
1416 .footer-cta-button {
1417     position: relative;
1418     display: inline-flex;
1419     align-items: center;
1420     justify-content: space-between;
1421     width: 100%;
1422     max-width: 500px;
1423     padding: 5px 5px 5px 15px;
1424     font-size: 1.8rem;
1425     color: var(--color-midgrey);
1426     background: #fff;
1427     border-radius: 8px;
1428 }
1429
1430 .footer-cta-button span {
1431     display: inline-block;
1432     padding: 10px 20px;
1433     color: #fff;
1434     font-weight: 500;
1435     background: var(--ghost-accent-color);
1436     border-radius: 5px;
1437 }
1438
1439
1440 /* 7.4. Read more
1441 /* ---------------------------------------------------------- */
1442
1443 .read-more-wrap {
1444     width: 100%;
1445     padding: 4vmin;
1446     margin: 0 auto -40px;
1447     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
1448     background: color-mod(var(--color-darkgrey) l(-5%));
1449 }
1450
1451 .read-more {
1452     display: grid;
1453     grid-template-columns: 1fr 1fr 1fr;
1454     grid-gap: 4vmin;
1455 }
1456
1457 .read-more .post-card-title {
1458     color: #fff;
1459     opacity: 0.8;
1460 }
1461
1462 .read-more .post-card-excerpt {
1463     color: rgba(255, 255, 255, 0.6);
1464 }
1465
1466 .read-more .post-card-byline-content a {
1467     color: #fff;
1468 }
1469
1470
1471 @media (max-width: 1000px) {
1472     .read-more {
1473         grid-template-columns: 1fr 1fr;
1474     }
1475     .read-more article:nth-child(3) {
1476         display: none;
1477     }
1478 }
1479
1480 @media (max-width: 700px) {
1481     .read-more {
1482         grid-template-columns: 1fr;
1483     }
1484     .read-more article:nth-child(2) {
1485         display: none;
1486     }
1487 }
1488
1489
1490 /* 8. Author Template
1491 /* ---------------------------------------------------------- */
1492
1493 .author-template .posts {
1494     position: relative;
1495     height: 100%;
1496     display: grid;
1497     grid-template-columns: 200px 1fr 1fr;
1498     grid-gap: 4vmin;
1499 }
1500
1501 .author-template .posts .post-feed {
1502     grid-column: 2 / 4;
1503     grid-template-columns: 1fr 1fr;
1504 }
1505
1506 .author-profile {
1507     padding: 4vmin 0;
1508 }
1509
1510 .author-profile-content {
1511     height: auto;
1512     position: sticky;
1513     top: 4vmin;
1514     font-size: 1.4rem;
1515     line-height:  1.4em;
1516 }
1517
1518 .author-profile-pic {
1519     display: block;
1520     width: 150px;
1521     height: 150px;
1522     object-fit: cover;
1523     margin: 0 0 2rem;
1524     background: color-mod(var(--color-lightgrey) l(+10%));
1525     border-radius: 50%;
1526 }
1527
1528 .author-profile h1 {
1529     margin: 0 0 0.3em;
1530     font-size: 2rem;
1531 }
1532
1533 .author-profile p {
1534     margin: 0 0 1.5em;
1535     color: color-mod(var(--color-midgrey) l(-8%));
1536 }
1537
1538 .author-profile-location {
1539     margin: 0 0 1.5em;
1540     font-weight: 700;
1541 }
1542
1543 .author-profile-social-link {
1544     display: block;
1545     padding: 0 0 5px;
1546     font-size: 1.3rem;
1547     color: color-mod(var(--color-midgrey) l(-8%));
1548     text-overflow: ellipsis;
1549     overflow: hidden;
1550     max-width: 100%;
1551     white-space: nowrap;
1552 }
1553
1554 .author-profile-social-link:hover {
1555     color: var(--color-darkgrey);
1556 }
1557
1558 @media (max-width: 900px) {
1559     .author-template .posts .post-feed {
1560         grid-template-columns: 1fr;
1561     }
1562 }
1563
1564 @media (max-width: 650px) {
1565     .author-template .posts {
1566         grid-template-columns: 1fr;
1567         grid-gap: 0;
1568     }
1569     .author-template .posts .post-feed {
1570         grid-column: 1 / auto;
1571     }
1572     .author-profile {
1573         padding-right: 0;
1574     }
1575     .author-profile-content {
1576         display: flex;
1577         flex-direction: column;
1578         align-items: center;
1579         text-align: center;
1580     }
1581 }
1582
1583
1584 /* 8. Tag Template
1585 /* ---------------------------------------------------------- */
1586
1587 .tag-template .post-card-large .post-card-image-link {
1588     grid-column: 2 / span 2;
1589     order: 2;
1590 }
1591
1592 .tag-template .post-card-large .post-card-content {
1593     order: 1;
1594 }
1595
1596
1597 /* 9. Error Template
1598 /* ---------------------------------------------------------- */
1599
1600 .error-content {
1601     padding: 14vw 4vw 6vw;
1602 }
1603
1604 .error-message {
1605     padding-bottom: 10vw;
1606     text-align: center;
1607 }
1608
1609 .error-code {
1610     margin: 0;
1611     color: var(--ghost-accent-color);
1612     font-size: 12vw;
1613     line-height: 1em;
1614     letter-spacing: -5px;
1615 }
1616
1617 .error-description {
1618     margin: 0;
1619     color: var(--color-midgrey);
1620     font-size: 3.2rem;
1621     line-height: 1.3em;
1622     font-weight: 400;
1623 }
1624
1625 .error-link {
1626     display: inline-block;
1627     margin-top: 5px;
1628 }
1629
1630 @media (min-width: 940px) {
1631     .error-content .post-card {
1632         margin-bottom: 0;
1633         padding-bottom: 0;
1634         border-bottom: none;
1635     }
1636 }
1637
1638 @media (max-width: 800px) {
1639     .error-content {
1640         padding-top: 24vw;
1641     }
1642     .error-code {
1643         font-size: 11.2rem;
1644     }
1645     .error-message {
1646         padding-bottom: 16vw;
1647     }
1648     .error-description {
1649         margin: 5px 0 0 0;
1650         font-size: 1.8rem;
1651     }
1652 }
1653
1654 @media (max-width: 500px) {
1655     .error-content {
1656         padding-top: 28vw;
1657     }
1658     .error-message {
1659         padding-bottom: 14vw;
1660     }
1661 }
1662
1663
1664 /* 11. Site Footer
1665 /* ---------------------------------------------------------- */
1666
1667 .site-footer {
1668     position: relative;
1669     margin: 40px 0 0 0;
1670     padding: 40px 4vmin 140px;
1671     color: #fff;
1672     background: color-mod(var(--color-darkgrey) l(-5%));
1673 }
1674
1675 .site-footer .inner {
1676     display: grid;
1677     grid-gap: 40px;
1678     grid-template-columns: auto 1fr auto;
1679     color: rgba(255,255,255,0.7);
1680     font-size: 1.3rem;
1681 }
1682
1683 .site-footer .copyright a {
1684     color: #fff;
1685     letter-spacing: -0.015em;
1686     font-weight: 500;
1687 }
1688
1689 .site-footer a {
1690     color: rgba(255,255,255,0.7);
1691 }
1692
1693 .site-footer a:hover {
1694     color: rgba(255,255,255,1);
1695     text-decoration: none;
1696 }
1697
1698 .site-footer-nav ul {
1699     display: flex;
1700     justify-content: center;
1701     flex-wrap: wrap;
1702     margin: 0 0 20px;
1703     padding: 0;
1704     list-style: none;
1705 }
1706
1707 .site-footer-nav li {
1708     display: inline-flex;
1709     align-items: center;
1710     padding: 0;
1711     margin: 0;
1712     line-height: 2em;
1713 }
1714
1715 .site-footer-nav a {
1716     position: relative;
1717     display: inline-flex;
1718     align-items: center;
1719     margin-left: 10px;
1720 }
1721
1722 .site-footer-nav li:not(:first-child) a:before {
1723     content: "";
1724     display: block;
1725     width: 2px;
1726     height: 2px;
1727     margin: 0 10px 0 0;
1728     background: #fff;
1729     border-radius: 100%;
1730 }
1731
1732 @media (max-width: 800px) {
1733     .site-footer .inner {
1734         max-width: 500px;
1735         grid-template-columns: 1fr;
1736         grid-gap: 0;
1737         text-align: center;
1738     }
1739     .site-footer .copyright,
1740     .site-footer .copyright a {
1741         color: #fff;
1742         font-size: 1.5rem;
1743     }
1744 }
1745
1746
1747 /* 12. Dark Mode
1748 /* ---------------------------------------------------------- */
1749
1750 /* If you prefer a dark color scheme, you can enable dark mode
1751 by adding the following code to the Head section of "Code Injection"
1752 settings inside: Ghost Admin > Settings > Advanced
1753
1754 <script>document.documentElement.classList.add('dark-mode');</script>
1755
1756 Or you can just edit default.hbs and add the .dark-mode class directly
1757 to the html tag on the very first line of the file.
1758
1759  */
1760
1761 html.dark-mode body {
1762     color: rgba(255, 255, 255, 0.75);
1763     background: var(--color-darkmode);
1764 }
1765
1766 html.dark-mode img {
1767     opacity: 0.9;
1768 }
1769
1770 html.dark-mode .post-card,
1771 html.dark-mode .post-card:hover {
1772     border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
1773 }
1774
1775 html.dark-mode .post-card-byline-content a {
1776     color: rgba(255, 255, 255, 0.75);
1777 }
1778
1779 html.dark-mode .post-card-byline-content a:hover {
1780     color: #fff;
1781 }
1782
1783 html.dark-mode .post-card-image {
1784     background: var(--color-darkmode);
1785 }
1786
1787 html.dark-mode .post-card-title {
1788     color: rgba(255, 255, 255, 0.85);
1789 }
1790
1791 html.dark-mode .post-card-excerpt {
1792     color: color-mod(var(--color-midgrey) l(+10%));
1793 }
1794
1795 html.dark-mode .post-full-content {
1796     background: var(--color-darkmode);
1797 }
1798
1799 html.dark-mode .article-title {
1800     color: rgba(255, 255, 255, 0.9);
1801 }
1802
1803 html.dark-mode .article-excerpt {
1804     color: color-mod(var(--color-midgrey) l(+10%));
1805 }
1806
1807 html.dark-mode .post-full-image {
1808     background-color: color-mod(var(--color-darkmode) l(+8%));
1809 }
1810
1811 html.dark-mode .article-byline {
1812     border-top-color: color-mod(var(--color-darkmode) l(+15%));
1813 }
1814
1815 html.dark-mode .article-byline-meta h4 a {
1816     color: rgba(255, 255, 255, 0.75);
1817 }
1818
1819 html.dark-mode .article-byline-meta h4 a:hover {
1820     color: #fff;
1821 }
1822
1823 html.dark-mode .no-image .author-social-link a {
1824     color: rgba(255, 255, 255, 0.75);
1825 }
1826
1827 html.dark-mode .gh-content h1,
1828 html.dark-mode .gh-content h2,
1829 html.dark-mode .gh-content h3,
1830 html.dark-mode .gh-content h4,
1831 html.dark-mode .gh-content h5,
1832 html.dark-mode .gh-content h6 {
1833     color: rgba(255, 255, 255, 0.9);
1834 }
1835
1836 html.dark-mode .gh-content pre {
1837     background: color-mod(var(--color-darkgrey) l(-8%));
1838 }
1839
1840 html.dark-mode .gh-content :not(pre) > code {
1841     background: color-mod(var(--color-darkgrey) l(+6%));
1842     border-color: color-mod(var(--color-darkmode) l(+8%));
1843     color: var(--color-wash);
1844 }
1845
1846 html.dark-mode .post-full-content a {
1847     color: #fff;
1848     box-shadow: inset 0 -1px 0 #fff;
1849 }
1850
1851 html.dark-mode .post-full-content strong {
1852     color: #fff;
1853 }
1854
1855 html.dark-mode .post-full-content em {
1856     color: #fff;
1857 }
1858
1859 html.dark-mode .post-full-content code {
1860     color: #fff;
1861     background: #000;
1862 }
1863
1864 html.dark-mode hr {
1865     border-top-color: color-mod(var(--color-darkmode) l(+8%));
1866 }
1867
1868 html.dark-mode .post-full-content hr:after {
1869     background: color-mod(var(--color-darkmode) l(+8%));
1870     box-shadow: var(--color-darkmode) 0 0 0 5px;
1871 }
1872
1873 html.dark-mode .gh-content figcaption {
1874     color: rgba(255, 255, 255, 0.6);
1875 }
1876
1877 html.dark-mode .post-full-content table td:first-child {
1878     background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
1879 }
1880
1881 html.dark-mode .post-full-content table td:last-child {
1882     background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
1883 }
1884
1885 html.dark-mode .post-full-content table th {
1886     color: rgba(255, 255, 255, 0.85);
1887     background-color: color-mod(var(--color-darkmode) l(+8%));
1888 }
1889
1890 html.dark-mode .post-full-content table th,
1891 html.dark-mode .post-full-content table td {
1892     border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
1893 }
1894
1895 html.dark-mode .post-full-content .kg-bookmark-container,
1896 html.dark-mode .post-full-content .kg-bookmark-container:hover {
1897     color: rgba(255, 255, 255, 0.75);
1898     box-shadow: 0 0 1px rgba(255,255,255,0.9);
1899 }
1900
1901 html.dark-mode .post-full-content input {
1902     color: color-mod(var(--color-midgrey) l(-30%));
1903 }
1904
1905 html.dark-mode .kg-bookmark-title {
1906     color: #fff;
1907 }
1908
1909 html.dark-mode .kg-bookmark-description {
1910     color: rgba(255, 255, 255, 0.75);
1911 }
1912
1913 html.dark-mode .kg-bookmark-metadata {
1914     color: rgba(255, 255, 255, 0.75);
1915 }
1916
1917 html.dark-mode .site-archive-header .no-image {
1918     color: rgba(255, 255, 255, 0.9);
1919     background: var(--color-darkmode);
1920 }
1921
1922 html.dark-mode .subscribe-form {
1923     border: none;
1924     background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
1925 }
1926
1927 html.dark-mode .subscribe-form-title {
1928     color: rgba(255, 255, 255, 0.9);
1929 }
1930
1931 html.dark-mode .subscribe-form p {
1932     color: rgba(255, 255, 255, 0.7);
1933 }
1934
1935 html.dark-mode .subscribe-email {
1936     border-color: color-mod(var(--color-darkmode) l(+6%));
1937     color: rgba(255, 255, 255, 0.9);
1938     background: color-mod(var(--color-darkmode) l(+3%));
1939 }
1940
1941 html.dark-mode .subscribe-email:focus {
1942     border-color: color-mod(var(--color-darkmode) l(+25%));
1943 }
1944
1945 html.dark-mode .subscribe-form button {
1946     opacity: 0.9;
1947 }
1948
1949 html.dark-mode .subscribe-form .invalid .message-error,
1950 html.dark-mode .subscribe-form .error .message-error {
1951     color: color-mod(var(--color-red) l(+5%) s(-5%));
1952 }
1953
1954 html.dark-mode .subscribe-form .success .message-success {
1955     color: color-mod(var(--color-green) l(+5%) s(-5%));
1956 }
1957
1958 /*
1959
1960 Hey! You reached the end.
1961
1962 Hope you enjoyed this CSS file, if you have any suggestions
1963 for improvements that might be useful for everyone who uses
1964 this theme, you can find the open source repository for it
1965 here: https://github.com/tryghost/casper
1966
1967 Or, if you've just scrolled all the way to the bottom of the
1968 file to add some of your own styles. Well, you've come to
1969 the right place. Onward!
1970
1971  */