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