// Fix pattern inserter preview for fullwidth container blocks .block-editor-block-list__layout.is-root-container>.fullwidth { max-width: none !important; } /* Alignments and block widths */ .wp-site-blocks>*+* { margin-top: 0; } .alignfull .alignwide, .wp-block-ainoblocks-accordion-faq-block.alignfull { padding-left: var(--global--content--padding--left); padding-right: var(--global--content--padding--right); } .wp-block-group.alignfull .alignwide .alignwide, .wp-block-ainoblocks-accordion-faq-block.alignfull .alignwide { padding-left: 0; padding-right: 0; } .wp-block-group.alignfull>.alignfull, *[class*="wp-container-"]>.alignfull, .wp-block-ainoblocks-accordion-faq-block.alignfull .wp-block-separator.alignfull { width: calc(100% + var(--global--content--padding--left) + var(--global--content--padding--right)) !important; margin-left: calc(-1 * var(--global--content--padding--left)) !important; margin-right: calc(-1 * var(--global--content--padding--right)) !important; } .alignfull { .default-content-width { @include push--auto; padding-left: 0; padding-right: 0; } .alignwide { max-width: var(--global--wide-content-width); margin-left: auto; margin-right: auto; } } .entry-content>* { .aligncenter { clear: both; @include push--auto; } } // Default post width .entry-content.post-width>*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { @include push--auto; max-width: var(--global--default-content-width); } // Outer content padding .content-gap, .wp-block-group.has-background.content-gap, .site-header, .site-footer { padding-left: var(--global--content--padding--left); padding-right: var(--global--content--padding--right); } /* Centered elements */ .push-center, .center { @include push--auto; } /* Padding top and padding bottom for blocks */ .has-padding-top { @include s-r-14 (padding-top); } .has-padding-bottom { @include s-r-14 (padding-bottom); } /* Default wide page width */ .site-main .site-content, .site-footer .footer-content, .archive-header { max-width: var(--global--wide-content-width); @include push--auto; } /* Default content width */ .single-post .entry-content>*, .page-template-default .entry-content>*, .single .entry-tags, .comment-list, .comment-respond, .authorbox__details, .author-pic-link, .default-content-width { max-width: var(--global--default-content-width); } /* Grid Columns */ .posts-container { @include flexbox; flex-wrap: wrap; flex-direction: row; align-items: flex-start; } .col, .posts-container .type-page, .posts-container .type-post { position: relative; } /* Blog Post Columns */ /* 1-Column */ .blog-1-column .posts-container .type-page, .blog-1-column .posts-container .type-post, .footer-1-column .footer-widget { width: 100%; flex-grow: 0; flex-basis: 100%; // 1-column on mobile clear: both; float: none; } .blog-1-column .posts-container .hentry { width: 100%; float: none; } /* 2-Column grid tablet */ @include breakpoint(sm) { .two-col-grid-tablet { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; } } @include breakpoint(lg) { .two-col-grid-tablet { display: block; } } // Flexbox Container (under development) .flexbox { display: flex; .flex-direction { &__row { flex-direction: row; } &__row-reverse { flex-direction: row-reverse; } &__column { flex-direction: column; } &__column-reverse { flex-direction: column-reverse; } } .justify-content { &__flexstart { justify-content: flex-start; } &__flexend { justify-content: flex-end; } &__center { justify-content: center; } &__space-between { justify-content: space-between; } &__space-around { justify-content: space-around; } &__space-evenly { justify-content: space-evenly; } } } // Width classes for flex items, workaround @include breakpoint(lg) { .desktop__width__50 { width: 50%; } .desktop__width__55 { width: 55%; } .desktop__width__60 { width: 60%; } .desktop__width__40 { width: 40%; } .desktop__width__45 { width: 45%; } } // Small, medium, lager grid gap .gap-s { .wp-block-post-template { @include gap-s; } } .gap-m { .wp-block-post-template { @include gap-m; } } .gap-l { .wp-block-post-template { @include gap-l; } } .relative { position: relative; } .absolute { position: absolute; } .zindex100 { z-index: 100; }