[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      @include media(tablet) {
 308          padding-left: 10%;
 309          padding-right: 10%;
 310  
 311          h2,
 312          .wp-block-cover-text {
 313              font-size: $font__size-xl;
 314          }
 315      }
 316  }
 317  
 318  .wp-block[data-type="core/cover"][data-align="left"],
 319  .wp-block[data-type="core/cover"][data-align="right"] {
 320  
 321      .editor-block-list__block-edit {
 322          width: calc(4 * (100vw / 12));
 323      }
 324  
 325      .wp-block-cover {
 326          width: 100%;
 327          max-width: 100%;
 328          padding: calc(1.375 * #{$size__spacing-unit});
 329  
 330          p {
 331              padding-left: 0;
 332              padding-right: 0;
 333          }
 334  
 335          @include media(tablet) {
 336              padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit});
 337          }
 338      }
 339  }
 340  
 341  .wp-block[data-type="core/cover"][data-align="wide"],
 342  .wp-block[data-type="core/cover"][data-align="full"] {
 343  
 344      @include media(tablet) {
 345  
 346          h2,
 347          .wp-block-cover-text {
 348              max-width: calc(8 * (100vw / 12));
 349          }
 350      }
 351  
 352      @include media(desktop) {
 353  
 354          h2,
 355          .wp-block-cover-text {
 356              max-width: calc(6 * (100vw / 12));
 357          }
 358      }
 359  }
 360  
 361  .wp-block[data-type="core/cover"][data-align="full"] {
 362  
 363      @include media(tablet) {
 364  
 365          .wp-block-cover {
 366              padding-left: calc(10% + 64px);
 367              padding-right: calc(10% + 64px);
 368          }
 369      }
 370  }
 371  
 372  /** === Gallery === */
 373  
 374  .wp-block-gallery {
 375  
 376      .blocks-gallery-image figcaption,
 377      .blocks-gallery-item figcaption,
 378      .gallery-item .gallery-caption {
 379          font-size: $font__size-xs;
 380          line-height: 1.6;
 381      }
 382  }
 383  
 384  /** === Audio === */
 385  
 386  .wp-block-audio {
 387  
 388      audio {
 389          display: block;
 390      }
 391  }
 392  
 393  /** === Button === */
 394  
 395  .wp-block-buttons {
 396      line-height: $font__line-height-heading;
 397  }
 398  
 399  .wp-block-button {
 400  
 401      .wp-block-button__link {
 402          @include font-family( $font__heading );
 403          font-size: $font__size-sm;
 404          font-weight: bold;
 405          padding: ($font__size_base * .76) $font__size_base;
 406  
 407          &:not(.has-text-color) {
 408              color: #fff;
 409          }
 410      }
 411  
 412      &:not(.is-style-outline) .wp-block-button__link {
 413          background: $color__background-button;
 414      }
 415  
 416      &:not(.is-style-squared) .wp-block-button__link {
 417          border-radius: 5px;
 418      }
 419  
 420      &.is-style-outline,
 421      &.is-style-outline:hover,
 422      &.is-style-outline:focus,
 423      &.is-style-outline:active {
 424          background: transparent;
 425          color: $color__background-button;
 426  
 427          .wp-block-button__link {
 428              background: transparent;
 429  
 430              &:not(.has-text-color) {
 431                  color: $color__background-button;
 432              }
 433          }
 434      }
 435  }
 436  
 437  .wp-block-buttons,
 438  .wp-block-button {
 439  
 440      &[style*="font-weight"] .wp-block-button__link {
 441          font-weight: inherit;
 442      }
 443  
 444      &[style*="text-decoration"] .wp-block-button__link {
 445          text-decoration: inherit;
 446      }
 447  }
 448  
 449  .wp-block-search {
 450      .wp-block-search__button {
 451          @include font-family( $font__heading );
 452          font-size: $font__size-sm;
 453          font-weight: bold;
 454          border-radius: 5px;
 455  
 456          &:not(.has-text-color) {
 457              color: #fff;
 458          }
 459  
 460          &:not(.has-background-color) {
 461              background: $color__background-button;
 462          }
 463      }
 464  }
 465  
 466  
 467  /** === Blockquote === */
 468  
 469  .wp-block-quote {
 470  
 471      &:not(.is-large):not(.is-style-large) {
 472          border-width: 2px;
 473          border-color: $color__link;
 474      }
 475  
 476      &.is-large,
 477      &.is-style-large {
 478          margin-top: $font__size-xxl;
 479          margin-bottom: $font__size-xxl;
 480      }
 481  
 482      &.is-large p,
 483      &.is-style-large p {
 484          font-size: $font__size-lg;
 485          line-height: 1.3;
 486          margin-bottom: 0.5em;
 487          margin-top: 0.5em;
 488      }
 489  
 490      cite,
 491      footer,
 492      .wp-block-quote__citation {
 493          @include font-family( $font__heading );
 494          font-size: $font__size-xs;
 495          line-height: 1.6;
 496          color: inherit;
 497      }
 498  }
 499  
 500  /** === Pullquote === */
 501  
 502  .wp-block-pullquote {
 503      border-color: transparent;
 504      border-width: 2px;
 505      color: #000;
 506  
 507      blockquote {
 508          margin-top: calc(3 * #{ $size__spacing-unit});
 509          margin-bottom: calc(3.33 * #{ $size__spacing-unit});
 510          hyphens: auto;
 511          word-break: break-word;
 512      }
 513  
 514      &:not(.is-style-solid-color) .wp-block-pullquote__citation {
 515          color: $color__text-light;
 516      }
 517  
 518      &.has-text-color .wp-block-pullquote__citation,
 519      &.has-primary-background-color blockquote p,
 520      &.has-dark-gray-background-color blockquote p {
 521          color: inherit;
 522      }
 523  
 524      &.is-style-solid-color {
 525  
 526          blockquote {
 527              width: calc(100% - (2 * #{ $size__spacing-unit}));
 528              max-width: calc( 100% - (2 * #{ $size__spacing-unit}));
 529  
 530              a,
 531              &.has-text-color p,
 532              &.has-text-color a {
 533                  color: inherit;
 534              }
 535  
 536              &:not(.has-text-color) {
 537                  color: $color__background-body;
 538              }
 539  
 540              @include media(tablet) {
 541                  max-width: 80%;
 542              }
 543          }
 544  
 545          &:not(.has-background-color) {
 546              background-color: $color__link;
 547          }
 548      }
 549  }
 550  
 551  .wp-block-pullquote[data-type="core/pullquote"],
 552  .wp-block[data-type="core/pullquote"],
 553  .wp-block[data-type="core/pullquote"][data-align="left"],
 554  .wp-block[data-type="core/pullquote"][data-align="right"] {
 555  
 556      blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 557      blockquote > .editor-rich-text p,
 558      p {
 559          font-size: $font__size-lg;
 560          font-style: italic;
 561          line-height: 1.3;
 562          margin-bottom: 0.5em;
 563          margin-top: 0.5em;
 564  
 565          @include media(tablet) {
 566              font-size: $font__size-xl;
 567          }
 568      }
 569  
 570      .wp-block-pullquote__citation {
 571          @include font-family( $font__heading );
 572          font-size: $font__size-xs;
 573          line-height: 1.6;
 574          text-transform: none;
 575      }
 576  
 577      em {
 578          font-style: normal;
 579      }
 580  }
 581  
 582  .wp-block[data-align="left"] > .wp-block-pullquote,
 583  .wp-block[data-align="right"] > .wp-block-pullquote {
 584      max-width: 50%;
 585      text-align: inherit;
 586  
 587      &:not(.is-style-solid-color) {
 588          padding: 0;
 589      }
 590  
 591      &.is-style-solid-color {
 592          padding: 1em;
 593      }
 594  }
 595  
 596  .wp-block[data-type="core/pullquote"][data-align="left"],
 597  .wp-block[data-type="core/pullquote"][data-align="right"] {
 598  
 599      .editor-block-list__block-edit {
 600          width: calc(4 * (100vw / 12));
 601          max-width: 50%;
 602  
 603          .wp-block-pullquote:not(.is-style-solid-color) {
 604              padding: 0;
 605          }
 606  
 607          .wp-block-pullquote.is-style-solid-color {
 608              padding: 1em;
 609          }
 610      }
 611  
 612      blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 613      blockquote > .editor-rich-text p,
 614      p,
 615      .wp-block-pullquote__citation {
 616          text-align: left;
 617      }
 618  }
 619  
 620  .wp-block[data-type="core/pullquote"][data-align="full"] {
 621  
 622      @include media(tablet) {
 623  
 624          .wp-block-pullquote blockquote {
 625              max-width: calc(80% - 128px);
 626          }
 627      }
 628  }
 629  
 630  
 631  /** === File === */
 632  
 633  .wp-block-file {
 634      @include font-family( $font__heading );
 635  
 636      .wp-block-file__textlink {
 637          text-decoration: underline;
 638          color: $color__link;
 639  
 640          &:hover {
 641              color: $color__link-hover;
 642              text-decoration: none;
 643          }
 644      }
 645  
 646      .wp-block-file__button {
 647          display: table;
 648          line-height: 1.8;
 649          font-size: $font__size-sm;
 650          font-weight: bold;
 651          background-color: $color__link;
 652          border-radius: 5px;
 653      }
 654  
 655      .wp-block-file__button-richtext-wrapper {
 656          display: block;
 657          margin-top: calc(0.75 * #{$size__spacing-unit});
 658          margin-left: 0;
 659      }
 660  
 661  }
 662  
 663  /** === Poetry (Verse) === */
 664  
 665  .wp-block-verse,
 666  .wp-block-verse pre {
 667      padding: 0;
 668  }
 669  
 670  /** === Code === */
 671  
 672  .wp-block-code {
 673      border-radius: 0;
 674  }
 675  
 676  /** === Table === */
 677  
 678  .wp-block-table {
 679  
 680      td, th {
 681          border-color: $color__text-light;
 682      }
 683  }
 684  
 685  /** === Separator === */
 686  
 687  .wp-block-separator {
 688  
 689      &:not(.is-style-dots) {
 690          background-color: $color__text-light;
 691          height: 2px;
 692      }
 693  
 694      &:not(.is-style-wide):not(.is-style-dots) {
 695          width: $font__size-xl;
 696          margin-left: 0;
 697      }
 698  
 699      &.is-style-dots {
 700          color: $color__text-light;
 701      }
 702  
 703      &.is-style-dots:before {
 704          font-size: $font__size-lg;
 705          letter-spacing: calc(2 * #{$size__spacing-unit});
 706          padding-left: calc(2 * #{$size__spacing-unit});
 707      }
 708  
 709      &.has-primary-background-color {
 710          color: $color__link;
 711          background-color: $color__link;
 712      }
 713  
 714      &.has-secondary-background-color {
 715          color: $color__border-link-hover;
 716          background-color: $color__border-link-hover;
 717      }
 718  
 719      &.has-dark-gray-background-color {
 720          color: $color__text-main;
 721          background-color: $color__text-main;
 722      }
 723  
 724      &.has-light-gray-background-color {
 725          color: $color__text-light;
 726          background-color: $color__text-light;
 727      }
 728  
 729      &.has-white-background-color {
 730          color: #fff;
 731          background-color: #fff;
 732      }
 733  }
 734  
 735  /* Remove duplicate rule-line when a separator
 736   * is followed by an H1, or H2 */
 737  .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before,
 738  .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before {
 739      display: none;
 740  }
 741  
 742  /** === Latest Posts, Archives, Categories === */
 743  
 744  ul.wp-block-archives,
 745  .wp-block-categories,
 746  .wp-block-latest-posts {
 747      padding: 0;
 748      list-style-type: none;
 749  
 750      ul {
 751          padding: 0;
 752          list-style-type: none;
 753      }
 754  
 755      li {
 756  
 757          > a {
 758              @include font-family( $font__heading );
 759              font-size: calc(#{$font__size_base} * #{$font__size-ratio});
 760              font-weight: bold;
 761              line-height: $font__line-height-heading;
 762              text-decoration: none;
 763          }
 764  
 765          ul {
 766              padding-left: $size__spacing-unit;
 767          }
 768      }
 769  }
 770  
 771  .wp-block-categories {
 772  
 773      ul {
 774          padding-top: ( .75 * $size__spacing-unit );
 775          @include nestedSubMenuPadding();
 776      }
 777  
 778      li ul {
 779          list-style: none;
 780          padding-left: 0;
 781          margin-bottom: ( -.75 * $size__spacing-unit );
 782      }
 783  
 784  }
 785  
 786  .wp-block[data-align="center"] > .wp-block-archives,
 787  .wp-block[data-align="center"] > .wp-block-categories {
 788      text-align: center;
 789  }
 790  
 791  .wp-block[data-align="center"] .wp-block-file__button {
 792      margin-left: auto;
 793      margin-right: auto;
 794  }
 795  
 796  .wp-block[data-align="right"] .wp-block-file__button {
 797      margin-left: auto;
 798      margin-right: 0;
 799  }
 800  
 801  /** === Latest Posts === */
 802  .wp-block-latest-posts {
 803  
 804      .wp-block-latest-posts__post-date {
 805          @include font-family( $font__heading );
 806          font-size: $font__size-xs;
 807          color: $color__text-light;
 808          line-height: 1.2;
 809      }
 810  
 811      .wp-block-latest-posts__post-full-content,
 812      .wp-block-latest-posts__post-excerpt {
 813          margin-top: $font__size_base;
 814          margin-bottom: $font__size_base;
 815  
 816          > div > p:first-child {
 817              margin-top: $font__size_base;
 818          }
 819      }
 820  
 821      li {
 822          padding-bottom: ( .5 * $size__spacing-unit );
 823  
 824          &.menu-item-has-children,
 825          &:last-child {
 826              padding-bottom: 0;
 827          }
 828  
 829          :not(:last-child) .wp-block-latest-posts__post-excerpt {
 830              padding-bottom: ( .5 * $size__spacing-unit );
 831          }
 832      }
 833  
 834      &.is-grid {
 835          li {
 836              border-top: 2px solid $color__border;
 837              padding-top: (1 * $size__spacing-unit);
 838              margin-bottom: (2 * $size__spacing-unit);
 839              a {
 840                  &:after {
 841                      content: '';
 842                  }
 843              }
 844              &:last-child {
 845                  margin-bottom: auto;
 846                  a:after {
 847                      content: '';
 848                  }
 849              }
 850          }
 851      }
 852  }
 853  
 854  /** === Latest Comments === */
 855  
 856  .wp-block-latest-comments {
 857  
 858      .wp-block-latest-comments__comment-meta {
 859          @include font-family( $font__heading );
 860          font-weight: bold;
 861  
 862          .wp-block-latest-comments__comment-date {
 863              font-weight: normal;
 864          }
 865      }
 866  
 867      .wp-block-latest-comments__comment,
 868      .wp-block-latest-comments__comment-date,
 869      .wp-block-latest-comments__comment-excerpt p {
 870          font-size: inherit;
 871      }
 872  
 873      .wp-block-latest-comments__comment-date {
 874          font-size: $font__size-xs;
 875      }
 876  }
 877  
 878  /** === Classic Editor === */
 879  
 880  /* Properly center-align captions in the classic-editor block */
 881  .wp-caption {
 882      dd {
 883          color: $color__text-light;
 884           font-size: $font__size-xs;
 885           @include font-family( $font__heading );
 886           line-height: $font__line-height-pre;
 887           margin: 0;
 888           padding: ( $size__spacing-unit * .5 );
 889           text-align: left;
 890          text-align: center;
 891          -webkit-margin-start: 0;
 892          margin-inline-start: 0;
 893      }
 894  }
 895  
 896  .wp-block-freeform {
 897  
 898      blockquote {
 899          border-left: 2px solid $color__link;
 900  
 901          cite {
 902              @include font-family( $font__heading );
 903              font-size: $font__size-xs;
 904              font-style: normal;
 905              line-height: 1.6;
 906              color: $color__text-light;
 907          }
 908      }
 909  }
 910  
 911  /** === Group Block === */
 912  
 913  // This matches the 22px value for 1rem that used on the front end.
 914  // It must be specified in pixels for the editor, since the root font
 915  // size is different here.
 916  $group-block-background__padding: $font__size_base;
 917  
 918  .wp-block-group {
 919  
 920      // Child: Full alignment
 921      > .wp-block-group__inner-container > .wp-block[data-align="full"],
 922      > .wp-block-group__inner-container > .wp-block.alignfull {
 923          margin-left: 0;
 924          margin-right: 0;
 925          left: 0;
 926      }
 927  
 928      // Group block with background color
 929      &.has-background {
 930          padding: $group-block-background__padding;
 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: -$group-block-background__padding;
 936              width: calc(100% + #{$group-block-background__padding * 2});
 937              max-width: calc(100% + #{$group-block-background__padding * 2});
 938          }
 939      }
 940  }
 941  
 942  // Wide and full alignments
 943  .wp-block[data-align="wide"] > .wp-block-group {
 944  
 945      > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
 946          @include media(tablet) {
 947              width: calc(8 * (100vw / 12));
 948          }
 949  
 950          @include media(desktop) {
 951              width: calc(6 * (100vw / 12 ));
 952          }
 953      }
 954  
 955      // Child blocks: Full alignment
 956      > .wp-block-group__inner-container > .wp-block[data-align="full"],
 957      > .wp-block-group__inner-container > .wp-block.alignfull {
 958          padding-left: 0;
 959          padding-right: 0;
 960      }
 961  
 962  
 963      // Group block with background color
 964      &.has-background {
 965  
 966          // Child blocks: Default alignments
 967          > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
 968              @include media(tablet) {
 969                  width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
 970              }
 971  
 972              @include media(desktop) {
 973                  width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
 974              }
 975          }
 976      }
 977  }
 978  
 979  // Full alignment
 980  .wp-block[data-align="full"] > .wp-block-group {
 981  
 982          // Margins & padding are added to this container to mimic
 983          // the style + spacing of the .editor-writing-flow global
 984          // container. This way, child items sync up with the placement
 985          // and size of other top-level blocks.
 986          > .wp-block-group__inner-container {
 987  
 988              // 2px of extra padding are added to each side here
 989              // To better match up with the spacing of the whole
 990              // document.
 991              @include media(tablet) {
 992                  width: 80%;
 993                  margin-left: 10%;
 994                  margin-right: 10%;
 995                  padding-left: 10px;
 996                  padding-right: 10px;
 997              }
 998  
 999              // Child blocks: Normal Alignments
1000              > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
1001  
1002                  @include media(tablet) {
1003                      max-width: calc(8 * (100vw / 12));
1004                  }
1005  
1006                  @include media(desktop) {
1007                      max-width: calc(6 * (100vw / 12));
1008                  }
1009              }
1010  
1011              // Child blocks: Not Full Alignments
1012              > .wp-block:not([data-align="full"]):not(.alignfull) {
1013                  padding-left: 10px;
1014                  padding-right: 10px;
1015  
1016                  @include media(tablet) {
1017                      padding-left: 0;
1018                      padding-right: 0;
1019                  }
1020              }
1021  
1022              // Child blocks: Right alignments
1023              > .wp-block[data-align="right"] {
1024  
1025                  @include media(tablet) {
1026                      max-width: 125%;
1027                  }
1028              }
1029  
1030              // Child blocks: Wide alignments
1031              > .wp-block[data-align="wide"],
1032              > .wp-block.alignwide {
1033  
1034                  @include media(tablet) {
1035                      width: 100%;
1036                      max-width: 100%;
1037                  }
1038              }
1039  
1040              // Child blocks: Full alignments
1041              > .wp-block[data-align=full],
1042              > .wp-block.alignfull {
1043  
1044                  @include media(tablet) {
1045                      left: calc( -12.5% - 13px );
1046                      width: calc( 125% + 26px );
1047                      max-width: calc( 125% + 25px );
1048                  }
1049              }
1050          }
1051  
1052          // Group block with background color
1053          &.has-background {
1054  
1055              // When the Group block is full width, we can remove the left/right padding.
1056              padding: $group-block-background__padding 0;
1057  
1058              @include media(mobile) {
1059                  padding-left: 0;
1060                  padding-right: 0;
1061              }
1062  
1063              // Child blocks: Full alignment
1064              > .wp-block-group__inner-container > .wp-block[data-align="full"],
1065              > .wp-block-group__inner-container > .wp-block.alignfull {
1066                  margin-left: 0;
1067                  width: 100%;
1068  
1069                  @include media(mobile) {
1070                      width: calc(100% + 92px);
1071                  }
1072  
1073                  @include media(tablet) {
1074                      width: calc(125% + 120px);
1075                  }
1076              }
1077          }
1078      }
1079  
1080  .wp-block-post-template {
1081  
1082      .wp-block[data-align="full"],
1083      .wp-block.alignfull {
1084          left: 0;
1085          max-width: 100%;
1086          padding-left: 0;
1087          padding-right: 0;
1088          width: 100%;
1089      }
1090  }
1091  
1092  /** === Post Author Block === */
1093  
1094  .avatar,
1095  .wp-block-post-author__avatar img {
1096      border-radius: 100%;
1097  }
1098  
1099  /** === Calendar Block === */
1100  
1101  .wp-calendar-table {
1102      @include font-family( $font__heading );
1103  }