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