:root { --heroContentSpacing: 20px; } @import 'type-1'; @import 'type-2'; .entry-header { .avatar-container { width: 25px; height: 25px; flex: 0 0 25px; } .entry-title, .page-title { word-wrap: break-word; } } // alignment .hero-section { &[data-alignment="center"] { text-align: center; .entry-meta { justify-content: center; } } &[data-alignment="right"] { text-align: right; .entry-meta { justify-content: flex-end; } } } // when transparent header is enabled body[data-transparent-header] { @include media-breakpoint-up (lg) { &.header-type-1 { .hero-section[data-type="type-2"] { padding-top: calc(var(--topBarHeight) + var(--headerHeight)); } } &.header-type-2 { .hero-section[data-type="type-2"] { padding-top: calc(var(--topBarHeight) + var(--headerLogoContainerHeight) + var(--navSectionHeight)); } } } // when no top bar @include media-breakpoint-down (md) { .site-header { + .site-main .hero-section[data-type="type-2"] { padding-top: calc( var(--topBarHeight) + var(--mobileHeaderHeight)); } } } @include media-breakpoint-down (sm) { .site-header { &[data-top-bar-stack*="mobile"] { + .site-main .hero-section[data-type="type-2"] { padding-top: calc(var(--topBarHeight) * 2 + var(--mobileHeaderHeight)); } } } } @include media-breakpoint-only (md) { .site-header { &[data-top-bar-stack*="tablet"] { + .site-main .hero-section[data-type="type-2"] { padding-top: calc(var(--topBarHeight) * 2 + var(--mobileHeaderHeight)); } } } } }