[Summary view] [Print] [Text view]

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