[Summary view] [Print] [Text view]

   1  /* !Block styles */
   2  
   3  
   4  // Default block margin and alignment rules.
   5  // These are replicated inside of the Group block
   6  // so that child blocks in there appear the same way.
   7  .entry .entry-content > *,
   8  .entry .entry-summary > *,
   9  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
  10  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
  11      margin: 32px 0;
  12      max-width: 100%;
  13  
  14      @include postContentMaxWidth();
  15  
  16      @include media(tablet) {
  17          margin: 32px 0;
  18      }
  19  
  20      &.alignwide {
  21          margin-left: auto;
  22          margin-right: auto;
  23          clear: both;
  24  
  25          @include media(tablet) {
  26              width: 100%;
  27              max-width: 100%;
  28          }
  29      }
  30  
  31      &.alignfull {
  32          position: relative;
  33          left: -#{$size__spacing-unit };
  34          width: calc( 100% + (2 * #{$size__spacing-unit}));
  35          max-width: calc( 100% + (2 * #{$size__spacing-unit}));
  36          clear: both;
  37  
  38          @include media(tablet) {
  39              margin-top: calc(2 * #{$size__spacing-unit});
  40              margin-bottom: calc(2 * #{$size__spacing-unit});
  41              left: calc( -12.5% - 75px );
  42              width: calc( 125% + 150px );
  43              max-width: calc( 125% + 150px );
  44          }
  45      }
  46  
  47      &.alignleft {
  48          /*rtl:ignore*/
  49          float: left;
  50          max-width: calc(5 * (100vw / 12));
  51          margin-top: 0;
  52          margin-left: 0;
  53          /*rtl:ignore*/
  54          margin-right: $size__spacing-unit;
  55  
  56          @include media(tablet) {
  57              max-width: calc(4 * (100vw / 12));
  58              /*rtl:ignore*/
  59              margin-right: calc(2 * #{$size__spacing-unit});
  60          }
  61      }
  62  
  63      &.alignright {
  64          /*rtl:ignore*/
  65          float: right;
  66          max-width: calc(5 * (100vw / 12));
  67          margin-top: 0;
  68          margin-right: 0;
  69          /*rtl:ignore*/
  70          margin-left: $size__spacing-unit;
  71  
  72          @include media(tablet) {
  73              max-width: calc(4 * (100vw / 12));
  74              margin-right: 0;
  75              /*rtl:ignore*/
  76              margin-left: calc(2 * #{$size__spacing-unit});
  77          }
  78      }
  79      &.aligncenter {
  80          margin-left: auto;
  81          margin-right: auto;
  82  
  83          @include postContentMaxWidth();
  84  
  85          @include media(tablet) {
  86              margin-left: 0;
  87              margin-right: 0;
  88          }
  89      }
  90  }
  91  
  92  .entry .entry-content > *,
  93  .entry .entry-summary > * {
  94  
  95      > *:first-child {
  96          margin-top: 0;
  97      }
  98  
  99      > *:last-child {
 100          margin-bottom: 0;
 101      }
 102  }
 103  
 104  /*
 105   * Unset nested content selector styles
 106   * - Prevents layout styles from cascading too deeply
 107   * - helps with plugin compatibility
 108   */
 109  .entry .entry-content,
 110  .entry .entry-summary {
 111  
 112      .entry-content,
 113      .entry-summary,
 114      .entry {
 115          margin: inherit;
 116          max-width: inherit;
 117          padding: inherit;
 118  
 119          @include media(tablet) {
 120              margin: inherit;
 121              max-width: inherit;
 122              padding: inherit;
 123          }
 124      }
 125  }
 126  
 127  .entry .entry-content {
 128  
 129      //! Paragraphs
 130      p.has-background {
 131          padding: 20px 30px;
 132      }
 133  
 134      //! Audio
 135      .wp-block-audio {
 136  
 137          width: 100%;
 138  
 139          audio {
 140              width: 100%;
 141          }
 142  
 143          &.alignleft audio,
 144          &.alignright audio {
 145  
 146              max-width: (0.33 * $mobile_width);
 147  
 148              @include media(tablet) {
 149                  max-width: (0.5 * $tablet_width);
 150              }
 151  
 152              @include media(wide) {
 153                  max-width: (0.33 * $desktop_width);
 154              }
 155          }
 156      }
 157  
 158      //! Video
 159      .wp-block-video {
 160  
 161          video {
 162              width: 100%;
 163          }
 164      }
 165  
 166      //! Buttons
 167      .wp-block-buttons {
 168          line-height: $font__line-height-heading;
 169      }
 170  
 171      .wp-block-button {
 172  
 173          .wp-block-button__link {
 174              @include button-transition;
 175              border: none;
 176              font-size: $font__size-sm;
 177              @include font-family( $font__heading );
 178              box-sizing: border-box;
 179              font-weight: bold;
 180              text-decoration: none;
 181              padding: ($size__spacing-unit * .76) $size__spacing-unit;
 182              outline: none;
 183  
 184              &:not(.has-background) {
 185                  background-color: $color__background-button;
 186              }
 187  
 188              &:not(.has-text-color) {
 189                  color: white;
 190              }
 191  
 192              &:hover {
 193                  color: white;
 194                  background: $color__background-button-hover;
 195                  cursor: pointer;
 196                  &:not(.has-background) {
 197                      background: $color__background-button-hover;
 198                  }
 199              }
 200  
 201              &:focus {
 202                  color: white;
 203                  background: $color__background-button-hover;
 204                  outline: thin dotted;
 205                  outline-offset: -4px;
 206                  &:not(.has-background) {
 207                      background: $color__background-button-hover;
 208                  }
 209              }
 210          }
 211  
 212          &:not(.is-style-squared) .wp-block-button__link {
 213              border-radius: 5px;
 214          }
 215  
 216          &.is-style-outline .wp-block-button__link,
 217          &.is-style-outline .wp-block-button__link:focus,
 218          &.is-style-outline .wp-block-button__link:active {
 219              @include button-all-transition;
 220              border-width: 2px;
 221              border-style: solid;
 222  
 223              &:not(.has-background) {
 224                  background: transparent;
 225              }
 226  
 227              &:not(.has-text-color) {
 228                  color: $color__background-button;
 229                  border-color: currentColor;
 230              }
 231          }
 232  
 233          &.is-style-outline .wp-block-button__link:hover {
 234              color: white;
 235              border-color: $color__background-button-hover;
 236              &:not(.has-background) {
 237                  color: $color__background-button-hover;
 238              }
 239          }
 240      }
 241  
 242      //! Latest posts, categories, archives
 243      .wp-block-archives,
 244      .wp-block-categories,
 245      .wp-block-latest-posts {
 246          padding: 0;
 247          list-style: none;
 248  
 249          li > a {
 250              @include font-family( $font__heading );
 251              font-size: calc(#{$font__size_base} * #{$font__size-ratio});
 252              font-weight: bold;
 253              line-height: $font__line-height-heading;
 254              text-decoration: none;
 255          }
 256      }
 257  
 258      .wp-block-archives,
 259      .wp-block-categories {
 260  
 261          &.aligncenter {
 262              text-align: center;
 263          }
 264      }
 265  
 266      //! Latest categories
 267      .wp-block-categories {
 268  
 269          ul {
 270              padding-top: ( .75 * $size__spacing-unit );
 271          }
 272  
 273          li ul {
 274              list-style: none;
 275              padding-left: 0;
 276          }
 277  
 278          @include nestedSubMenuPadding();
 279      }
 280  
 281      //! Latest posts
 282      .wp-block-latest-posts {
 283  
 284          .wp-block-latest-posts__post-date {
 285              @include font-family( $font__heading );
 286              font-size: $font__size-xs;
 287              color: $color__text-light;
 288              line-height: 1.2;
 289          }
 290  
 291          .wp-block-latest-posts__post-full-content,
 292          .wp-block-latest-posts__post-excerpt {
 293              margin-top: $size__spacing-unit;
 294              margin-bottom: $size__spacing-unit;
 295          }
 296  
 297          li {
 298              padding-bottom: ( .5 * $size__spacing-unit );
 299  
 300              &.menu-item-has-children,
 301              &:last-child {
 302                  padding-bottom: 0;
 303              }
 304  
 305              :not(:last-child) .wp-block-latest-posts__post-excerpt {
 306                  padding-bottom: ( .5 * $size__spacing-unit );
 307              }
 308          }
 309  
 310          &.is-grid li {
 311              border-top: 2px solid $color__border;
 312              padding-top: (1 * $size__spacing-unit);
 313              margin-bottom: (2 * $size__spacing-unit);
 314              a {
 315                  &:after {
 316                      content: '';
 317                  }
 318              }
 319              &:last-child {
 320                  margin-bottom: auto;
 321                  a:after {
 322                      content: '';
 323                  }
 324              }
 325          }
 326      }
 327  
 328      //! Latest preformatted text
 329      .wp-block-preformatted {
 330          font-size: $font__size-xs;
 331          line-height: 1.8;
 332          padding: $size__spacing-unit;
 333      }
 334  
 335      //! Verse
 336      .wp-block-verse {
 337          @include font-family( $font__body );
 338          font-size: $font__size_base;
 339          line-height: 1.8;
 340      }
 341  
 342      //! Paragraphs
 343      .has-drop-cap {
 344          &:not(:focus):first-letter {
 345              @include font-family( $font__heading );
 346              font-size: $font__size-xxxl;
 347              line-height: 1;
 348              font-weight: bold;
 349              margin: 0 0.25em 0 0;
 350  
 351              @-moz-document url-prefix()  {
 352                  & {
 353                      margin-top: 0.2em;
 354                  }
 355              }
 356          }
 357      }
 358  
 359      //! Pullquote
 360      .wp-block-pullquote {
 361          color: $color__text-main;
 362          border-color: transparent;
 363          border-width: 2px;
 364          padding: $size__spacing-unit;
 365  
 366          blockquote {
 367              border: none;
 368              margin-top: calc(4 * #{ $size__spacing-unit});
 369              margin-bottom: calc(4.33 * #{ $size__spacing-unit});
 370              margin-right: 0;
 371              padding-left: 0;
 372          }
 373  
 374          p {
 375              font-size: $font__size-lg;
 376              font-style: italic;
 377              line-height: 1.3;
 378              margin-bottom: 0.5em;
 379              margin-top: 0.5em;
 380  
 381              em {
 382                  font-style: normal;
 383              }
 384  
 385              @include media(tablet) {
 386                  font-size: $font__size-xl;
 387              }
 388          }
 389  
 390          cite {
 391              display: inline-block;
 392              @include font-family( $font__heading );
 393              line-height: 1.6;
 394              text-transform: none;
 395              color: $color__text-light;
 396  
 397              /*
 398               * This requires a rem-based font size calculation instead of our normal em-based one,
 399               * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 400               */
 401              font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 402          }
 403  
 404          &.alignleft,
 405          &.alignright {
 406              width: 100%;
 407              padding: 0;
 408  
 409              blockquote {
 410                  margin: $size__spacing-unit 0;
 411                  padding: 0;
 412                  text-align: left;
 413                  max-width: 100%;
 414  
 415                  p:first-child {
 416                      margin-top: 0;
 417                  }
 418              }
 419          }
 420  
 421          &.is-style-solid-color {
 422              background-color: $color__link;
 423              padding-left: 0;
 424              padding-right: 0;
 425  
 426              @include media(tablet) {
 427                  padding-left: 10%;
 428                  padding-right: 10%;
 429              }
 430  
 431              p {
 432                  font-size: $font__size-lg;
 433                  line-height: 1.3;
 434                  margin-bottom: 0.5em;
 435                  margin-top: 0.5em;
 436  
 437                  @include media(tablet) {
 438                      font-size: $font__size-xl;
 439                  }
 440              }
 441  
 442              a {
 443                  color: $color__background-body;
 444              }
 445  
 446              cite {
 447                  color: inherit;
 448              }
 449  
 450              blockquote {
 451                  max-width: 100%;
 452                  color: $color__background-body;
 453                  padding-left: 0;
 454                  margin-left: $size__spacing-unit;
 455                  margin-right: $size__spacing-unit;
 456  
 457                  &.has-text-color p,
 458                  &.has-text-color a,
 459                  &.has-primary-color,
 460                  &.has-secondary-color,
 461                  &.has-dark-gray-color,
 462                  &.has-light-gray-color,
 463                  &.has-white-color {
 464                      color: inherit;
 465                  }
 466  
 467                  @include media(tablet) {
 468                      margin-left: 0;
 469                      margin-right: 0;
 470                  }
 471              }
 472  
 473              &.alignright,
 474              &.alignleft {
 475  
 476                  @include media(tablet) {
 477                      padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
 478                  }
 479              }
 480  
 481              &.alignfull {
 482  
 483                  @include media(tablet) {
 484                      padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 485                      padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 486                  }
 487              }
 488          }
 489      }
 490  
 491      //! Blockquote
 492      .wp-block-quote {
 493  
 494          &:not(.is-large),
 495          &:not(.is-style-large) {
 496              border-width: 2px;
 497              border-color: $color__link;
 498              padding-top: 0;
 499              padding-bottom: 0;
 500          }
 501  
 502          p {
 503              font-size: 1em;
 504              font-style: normal;
 505              line-height: 1.8;
 506          }
 507  
 508          cite {
 509              /*
 510               * This requires a rem-based font size calculation instead of our normal em-based one,
 511               * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 512               */
 513              font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 514          }
 515  
 516          &.is-large,
 517          &.is-style-large {
 518              margin: $size__spacing-unit 0;
 519              padding: 0;
 520              border-left: none;
 521  
 522              p {
 523                  font-size: $font__size-lg;
 524                  line-height: 1.4;
 525                  font-style: italic;
 526              }
 527  
 528              cite,
 529              footer {
 530                  /*
 531                   * This requires a rem-based font size calculation instead of our normal em-based one,
 532                   * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 533                   */
 534                  font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 535              }
 536  
 537              @include media(tablet) {
 538                  margin: $size__spacing-unit 0;
 539                  padding: $size__spacing-unit 0;
 540  
 541                  p {
 542                      font-size: $font__size-lg;
 543                  }
 544              }
 545          }
 546      }
 547  
 548      //! Image
 549      .wp-block-image {
 550          max-width: 100%;
 551  
 552          img {
 553              display: block;
 554          }
 555  
 556          // If an image does not have a left/center/right alignment, 
 557          // it's a direct child of .wp-block-image.  If it has no other 
 558          // alignment added, we want to make sure the image and its 
 559          // caption do not extend beyond the width of the text column.
 560          &:not(.alignwide):not(.alignfull) > img,
 561          &:not(.alignwide):not(.alignfull) > a > img,
 562          &:not(.alignwide):not(.alignfull) > img + figcaption,
 563          &:not(.alignwide):not(.alignfull) > a + figcaption {
 564              @include postContentMaxWidth();
 565          }
 566  
 567          .aligncenter {
 568  
 569              @include postContentMaxWidth();
 570  
 571              @include media(tablet) {
 572                  margin: 0;
 573                  width: $size__site-tablet-content;
 574  
 575                  img {
 576                      margin: 0 auto;
 577                  }
 578              }
 579  
 580              @include media(desktop) {
 581                  width: $size__site-desktop-content;
 582  
 583                  img {
 584                      margin: 0 auto;
 585                  }
 586              }
 587          }
 588  
 589          &.alignfull img {
 590              width: 100vw;
 591              max-width: calc( 100% + (2 * #{$size__spacing-unit}));
 592  
 593              @include media(tablet) {
 594                  max-width: calc( 125% + 150px );
 595                  margin-left: auto;
 596                  margin-right: auto;
 597              }
 598          }
 599      }
 600  
 601      //! Cover Image
 602      .wp-block-cover-image,
 603      .wp-block-cover {
 604          position: relative;
 605          min-height: 430px;
 606          padding: $size__spacing-unit;
 607  
 608          @include media(tablet) {
 609              padding: $size__spacing-unit 10%;
 610          }
 611  
 612          .wp-block-cover-image-text,
 613          .wp-block-cover-text,
 614          h2 {
 615              @include font-family( $font__heading );
 616              font-size: $font__size-lg;
 617              font-weight: bold;
 618              line-height: 1.25;
 619              padding: 0;
 620              color: #fff;
 621  
 622              @include media(tablet) {
 623                  font-size: $font__size-xl;
 624                  max-width: 100%;
 625              }
 626          }
 627  
 628          &.alignleft,
 629          &.alignright {
 630              width: 100%;
 631  
 632              @include media(tablet) {
 633                  padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
 634              }
 635          }
 636  
 637          &.alignfull {
 638  
 639              .wp-block-cover-image-text,
 640              .wp-block-cover-text,
 641              h2 {
 642                  @include postContentMaxWidth();
 643              }
 644  
 645              @include media(tablet) {
 646                  padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 647                  padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 648  
 649                  .wp-block-cover-image-text,
 650                  .wp-block-cover-text,
 651                  h2 {
 652                      padding: 0;
 653                  }
 654              }
 655          }
 656      }
 657  
 658      //! Galleries
 659      .wp-block-gallery {
 660          list-style-type: none;
 661          padding-left: 0;
 662  
 663          .blocks-gallery-image:last-child,
 664          .blocks-gallery-item:last-child {
 665              margin-bottom: 16px;
 666          }
 667  
 668          figcaption a {
 669              color: #fff;
 670          }
 671      }
 672  
 673      //! Captions
 674      .wp-block-audio figcaption,
 675      .wp-block-video figcaption,
 676      .wp-block-image figcaption,
 677      .wp-block-gallery .blocks-gallery-image figcaption,
 678      .wp-block-gallery .blocks-gallery-item figcaption {
 679          font-size: $font__size-xs;
 680          @include font-family( $font__heading );
 681          line-height: $font__line-height-pre;
 682          margin: 0;
 683          padding: ( $size__spacing-unit * .5 );
 684          text-align: center;
 685      }
 686  
 687      //! Separator
 688      .wp-block-separator,
 689      hr {
 690          background-color: $color__text-light;
 691          border: 0;
 692          height: 2px;
 693          margin-bottom: (2 * $size__spacing-unit);
 694          margin-top: (2 * $size__spacing-unit);
 695          max-width: 2.25em;
 696          text-align: left;
 697  
 698          &:not(.wp-block-separator) {
 699              max-width: 100%;
 700              @include postContentMaxWidth();
 701          }
 702  
 703          &.is-style-wide {
 704              max-width: 100%;
 705              @include postContentMaxWidth();
 706          }
 707  
 708          &.is-style-dots {
 709              max-width: 100%;
 710              @include postContentMaxWidth();
 711              background-color: inherit;
 712              border: inherit;
 713              height: inherit;
 714              text-align: center;
 715  
 716              // Only apply the default dot color if there's no separator color specified.
 717              &:not(.has-text-color):not(.has-background) {
 718                  color: $color__text-light;
 719              }
 720  
 721              &:before {
 722                  font-size: $font__size-lg;
 723                  letter-spacing: $font__size-sm;
 724                  padding-left: $font__size-sm;
 725              }
 726          }
 727  
 728          /* Remove duplicate rule-line when a separator
 729           * is followed by an H1, or H2 */
 730          & + h1,
 731          & + h2 {
 732  
 733              &:before {
 734                  display: none;
 735              }
 736          }
 737      }
 738  
 739      //! Twitter Embed
 740      .wp-block-embed-twitter {
 741          word-break: break-word;
 742      }
 743  
 744      //! Table
 745      .wp-block-table {
 746  
 747          th,
 748          td {
 749              border-color: $color__text-light;
 750          }
 751      }
 752  
 753      //! File
 754      .wp-block-file {
 755          @include font-family( $font__heading );
 756  
 757          .wp-block-file__button {
 758              display: table;
 759              @include button-transition;
 760              border: none;
 761              border-radius: 5px;
 762              background: $color__background-button;
 763              font-size: $font__size-base;
 764              @include font-family( $font__heading );
 765              line-height: $font__line-height-heading;
 766              text-decoration: none;
 767              font-weight: bold;
 768              padding: ($size__spacing-unit * .75) $size__spacing-unit;
 769              color: #fff;
 770              margin-left: 0;
 771              margin-top: calc(0.75 * #{$size__spacing-unit});
 772  
 773              @include media(desktop) {
 774                  font-size: $font__size-base;
 775                  padding: ($size__spacing-unit * .875) ($size__spacing-unit * 1.5);
 776              }
 777  
 778              &:hover {
 779                  background: $color__background-button-hover;
 780                  cursor: pointer;
 781              }
 782  
 783              &:focus {
 784                  background: $color__background-button-hover;
 785                  outline: thin dotted;
 786                  outline-offset: -4px;
 787              }
 788          }
 789      }
 790  
 791      //! Code
 792      .wp-block-code {
 793          border-radius: 0;
 794  
 795          code {
 796              font-size: $font__size-md;
 797              white-space: pre-wrap;
 798              word-break: break-word;
 799          }
 800      }
 801  
 802      //! Columns
 803      .wp-block-columns {
 804  
 805          .wp-block-column > * {
 806  
 807              &:first-child {
 808                  margin-top: 0;
 809              }
 810  
 811              &:last-child {
 812                  margin-bottom: 0;
 813              }
 814          }
 815  
 816          // Ensure images do not expand beyond the column.
 817          .wp-block-image:not(.alignwide):not(.alignfull) > img,
 818          .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
 819          .wp-block-image > img:not(.alignwide):not(.alignfull),
 820          .wp-block-image > figure {
 821  
 822              @include media(tablet) {
 823                  max-width: 100%;
 824              }
 825  
 826              @include media(desktop) {
 827                  max-width: 100%;
 828              }
 829          }
 830  
 831          @include media(tablet) {
 832              flex-wrap: nowrap;
 833  
 834              .wp-block-column:not(:first-child) {
 835                  margin-left: 32px;
 836              }
 837          }
 838      }
 839  
 840      //! Group
 841      .wp-block-group {
 842  
 843          // When the Group block is standard/wide, we need to prevent full-aligned 
 844          // child blocks from expanding out of their container.
 845          &:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
 846          &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
 847  
 848              @include media(tablet) {
 849                  left: 0;
 850                  max-width: 100%;
 851              }
 852          }
 853  
 854          // The full-width Group block's inner container should mimic .entry-content styles.
 855          &.alignfull > .wp-block-group__inner-container {
 856              max-width: calc(100% - (2 * #{ $size__spacing-unit }));
 857              margin: 0 $size__spacing-unit;
 858  
 859              @include media(tablet) {
 860                  max-width: 80%;
 861                  margin: 0 10%;
 862                  padding: 0 60px;
 863              }
 864          }
 865  
 866          // Group block with a colored background.
 867          &.has-background {
 868              padding: $size__spacing-unit;
 869              margin-top: 0;
 870              margin-bottom: 0;
 871  
 872              // Remove the top and bottom margins of inner blocks.
 873              .wp-block-group__inner-container {
 874  
 875                  > *:first-child {
 876                      margin-top: 0;
 877                  }
 878  
 879                  > *:last-child {
 880                      margin-bottom: 0;
 881                  }
 882              }
 883  
 884              // If the Group block is full-width, it does not need this extra padding. 
 885              &.alignfull {
 886                  padding-left: 0;
 887                  padding-right: 0;
 888  
 889                  @include media(tablet) {
 890                      padding-top: $size__spacing-unit;
 891                      padding-bottom: $size__spacing-unit;
 892                  }
 893              }
 894  
 895              // Full-aligned child blocks should take up the maximum width available in their container.
 896              &:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
 897                  width: 100%;
 898                  max-width: 100%;
 899                  
 900                  @include media(tablet) {
 901                      width: calc( 100% + #{$size__spacing-unit * 2} );
 902                      max-width: calc( 100% + #{$size__spacing-unit * 2} );
 903                      margin-left: -#{$size__spacing-unit};
 904                  }
 905              }
 906          }
 907          
 908      }
 909  
 910      //! Latest Comments
 911      .wp-block-latest-comments {
 912  
 913          .wp-block-latest-comments__comment-meta {
 914              @include font-family( $font__heading );
 915              font-weight: bold;
 916  
 917              .wp-block-latest-comments__comment-date {
 918                  font-weight: normal;
 919              }
 920          }
 921  
 922          .wp-block-latest-comments__comment,
 923          .wp-block-latest-comments__comment-date,
 924          .wp-block-latest-comments__comment-excerpt p {
 925              font-size: inherit;
 926          }
 927  
 928          &.has-avatars {
 929  
 930          }
 931  
 932          &.has-dates {
 933  
 934              .wp-block-latest-comments__comment-date {
 935                  font-size: $font__size-xs;
 936              }
 937          }
 938  
 939          &.has-excerpts {
 940  
 941          }
 942      }
 943  
 944      //! Font Sizes
 945      .has-small-font-size {
 946          font-size: $font__size-sm;
 947      }
 948  
 949      .has-normal-font-size {
 950          font-size: $font__size-md;
 951      }
 952  
 953      .has-large-font-size {
 954          font-size: $font__size-lg;
 955      }
 956  
 957      .has-huge-font-size {
 958          font-size: $font__size-xl;
 959      }
 960  
 961      //! Custom background colors
 962      .has-primary-background-color,
 963      .has-secondary-background-color,
 964      .has-dark-gray-background-color,
 965      .has-light-gray-background-color {
 966  
 967          // Use white text against these backgrounds by default.
 968          color: $color__background-body;
 969  
 970          > p,
 971          > h1,
 972          > h2,
 973          > h3,
 974          > h4,
 975          > h5,
 976          > h6,
 977          > a {
 978              color: $color__background-body;
 979          }
 980      }
 981  
 982      .has-white-background-color {
 983          color: $color__text-main;
 984  
 985          // Use dark gray text against this background by default.
 986          > p,
 987          > h1,
 988          > h2,
 989          > h3,
 990          > h4,
 991          > h5,
 992          > h6,
 993          > a {
 994              color: $color__text-main;
 995          }
 996      }
 997  
 998      .has-primary-background-color,
 999      .wp-block-pullquote.is-style-solid-color.has-primary-background-color {
1000          background-color: $color__link;
1001      }
1002  
1003      .has-secondary-background-color,
1004      .wp-block-pullquote.is-style-solid-color.has-secondary-background-color {
1005          background-color: $color__border-link-hover;
1006      }
1007  
1008      .has-dark-gray-background-color,
1009      .wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color {
1010          background-color: $color__text-main;
1011      }
1012  
1013      .has-light-gray-background-color,
1014      .wp-block-pullquote.is-style-solid-color.has-light-gray-background-color {
1015          background-color: $color__text-light;
1016      }
1017  
1018      .has-white-background-color,
1019      .wp-block-pullquote.is-style-solid-color.has-white-background-color {
1020          background-color: #FFF;
1021      }
1022  
1023      //! Custom foreground colors
1024      .has-primary-color,
1025      .wp-block-pullquote blockquote.has-primary-color,
1026      .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color,
1027      .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color > p {
1028          color: $color__link;
1029      }
1030  
1031      .has-secondary-color,
1032      .wp-block-pullquote blockquote.has-secondary-color,
1033      .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color,
1034      .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color > p {
1035          color: $color__border-link-hover;
1036      }
1037  
1038      .has-dark-gray-color,
1039      .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color,
1040      .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color > p {
1041          color: $color__text-main;
1042      }
1043  
1044      .has-light-gray-color,
1045      .wp-block-pullquote blockquote.has-light-gray-color,
1046      .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color,
1047      .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color > p {
1048          color: $color__text-light;
1049      }
1050  
1051      .has-white-color,
1052      .wp-block-pullquote blockquote.has-white-color,
1053      .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
1054          color: #FFF;
1055      }
1056  }