/** * Extra Child Theme Styles * * 1. General Helper Styles * 2. Header * 3. Main Wrapper and Content * 4. Navigation Menu * 5. Archive Pagination and Post Navigation * 6. Block Specific Styles * 6.1. Column Block * 6.2. Quote Block * 6.3. Hero Block and Cover Block * 6.4. File Block * 6.5. Latest Comments Block * 6.6. Button Block * 6.7. Posts List Block * 6.8. Search Block * 7. Widgets */ /** * 1. General Helper Styles */ body { font-weight: 300; } b, strong { font-weight: 700; } .home.page.hide-homepage-title { .site-main { padding: 0; article { .entry-content { margin-top: 0; } } } } a { text-decoration: none; } .entry-content a:link, .entry-content a:active { text-decoration: underline; } .entry-content a:hover, .entry-content a:active { text-decoration: none; } .main-navigation { text-transform: uppercase; } .main-navigation > div > ul, .social-navigation > div > ul, .pagination .nav-links { justify-content: center; } /** * 2. Header */ #masthead { background-color: #{map-deep-get($config-global, "color", "background", "default")}; padding: 0; .site-branding { text-align: center; background: #{map-deep-get($config-global, "color", "background", "default")}; background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; height: 100%; min-height: 72px; padding: 3em 0 36px; } margin: 0 auto; .social-navigation { margin-bottom: #{map-deep-get($config-global, "spacing", "unit")}; ul { li { a { color: #{map-deep-get($config-global, "color", "secondary", "default")}; &:hover { color: #{map-deep-get($config-global, "color", "secondary", "hover")}; } } } } } } body:not(.fse-enabled) { .site-title { font-size: #{map-deep-get($config-global, "font", "size", "xxl")}; } .site-description { color: #{map-deep-get($config-global, "color", "foreground", "default")}; } } /** * 3. Main Wrapper and Content */ .site { margin: 0 auto; padding: 0; } .site-content { background-color: #{map-deep-get($config-global, "color", "background", "default")}; } #page { .entry-header, .page-header, .entry-footer, .a8c-posts-list { text-align: center; } .a8c-posts-list-item__excerpt { text-align: left; } } /** * 4. Navigation */ /** * 4.1 Main Navigation */ body:not(.fse-enabled) { #site-navigation, .main-navigation { background-color: #{map-deep-get($config-global, "color", "secondary", "default")}; border-bottom: 2px solid rgba(0, 0, 0, 0.15); margin-left: 0; margin-right: 0; text-align: center; & > div { text-align: left; } &.main-navigation { & > div { padding-left: #{map-deep-get($config-global, "spacing", "unit")}; padding-right: #{map-deep-get($config-global, "spacing", "unit")}; } ul { li { &.current-menu-item { a { color: #{map-deep-get($config-global, "color", "primary", "default")}; } } a { color: #{map-deep-get($config-global, "color", "background", "default")}; text-decoration: none; &:hover { color: #{map-deep-get($config-global, "color", "primary", "default")}; } } @include media(mobile) { padding-left: 0; padding-right: 0; list-style-type: disc; &.current-menu-item { a { color: #{map-deep-get($config-global, "color", "primary", "default")}; } } a { color: #{map-deep-get($config-global, "color", "background", "default")}; font-size: #{map-deep-get($config-global, "font", "size", "sm")}; &:hover { color: #{map-deep-get($config-global, "color", "primary", "default")}; } &::after { color: #{map-deep-get($config-global, "color", "background", "default")}; content: " \2022"; margin-left: #{map-deep-get($config-global, "spacing", "unit")}; display: inline; font-size: #{map-deep-get($config-global, "font", "size", "base")}; opacity: 0.58; } } &:last-child { a { &::after { content: ""; margin-left: 0; } } } } } ul { @include media(mobile) { background-color: #{map-deep-get($config-global, "color", "background", "default")}; li { &.current-menu-item { a { color: #{map-deep-get($config-global, "color", "secondary", "default")}; } } a { color: #{map-deep-get($config-global, "color", "primary", "default")}; &::after { content: ""; } &:hover { color: #{map-deep-get($config-global, "color", "primary", "hover")}; } } &:hover { background: #{map-deep-get($config-global, "color", "background", "light")}; } } } } } .main-menu { & > li > a { padding-left: 0; } } #toggle-menu { border-radius: 0; width: 100% !important; text-align: center; font-size: map-deep-get($config-header, "main-nav", "font", "size"); } } } } /** * 4.2 Social Navigation */ .social-navigation > div > ul { margin-left: 0; margin-right: 0; } /** * 5. Archive Pagination and Post Navigation */ .pagination .nav-links > *, .post-navigation .post-title { font-weight: normal; } /** * 6. Block Specific Styles */ /** * 6.1. Column Block */ .wp-block-coblocks-column { h1, h2, h3, h4, h5, h6 { margin-bottom: 0.857em; } a { color: #{map-deep-get($config-global, "color", "secondary", "default")}; &:hover { color: #{map-deep-get($config-global, "color", "secondary", "hover")}; } } } /** * 6.2. Quote Block */ .wp-block-quote, .wp-block-quote[style*="text-align:center"], .wp-block-quote[style*="text-align:right"] { border: 1px solid #f2f2f2; padding: #{map-deep-get($config-global, "spacing", "horizontal")}; p { @include font-family( map-deep-get($config-global, "font", "family", "secondary") ); } cite { color: #{map-deep-get($config-global, "color", "secondary", "default")}; } } /** * 6.3. Hero Block and Cover Block */ .wp-block-coblocks-hero__box, .wp-block-cover__inner-container { padding: #{map-deep-get($config-global, "spacing", "vertical")}; h1, h2, h3, h4, h5, h6 { padding: #{map-deep-get($config-global, "spacing", "horizontal")}; } p { padding: #{map-deep-get($config-global, "spacing", "horizontal")}; } } /** * 6.4. File Block */ .wp-block-file { a { &.wp-block-file__button { text-transform: uppercase; line-height: #{map-deep-get($config-button, "font", "line-height")}; color: #{map-deep-get($config-button, "color", "text")}; cursor: pointer; font-weight: #{map-deep-get($config-button, "font", "weight")}; @include font-family( map-deep-get($config-button, "font", "family") ); font-size: #{map-deep-get($config-button, "font", "size")}; background-color: #{map-deep-get($config-button, "color", "background")}; border-radius: #{map-deep-get($config-button, "border-radius")}; border-width: #{map-deep-get($config-button, "border-width")}; padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")}; display: inline-block; &:focus, &:hover, &:visited { color: #{map-deep-get($config-button, "color", "text-hover")}; background-color: #{map-deep-get($config-button, "color", "background-hover")}; opacity: 1; } } } } /** * 6.5. Latest Comments Block */ .wp-block-latest-comments { .wp-block-latest-comments__comment-meta { @include font-family( map-deep-get($config-global, "font", "family", "secondary") ); .wp-block-latest-comments__comment-date { font-size: #{map-deep-get($config-global, "font", "size", "xs")}; } } } /** * 6.6. Button Block * 6.7. Posts List Block * 6.8. Search Block */ .wp-block-button a.wp-block-button__link, .a8c-posts-list a.a8c-posts-list__view-all, .wp-block-search .wp-block-search__button { text-transform: uppercase; } /** * 7. Widgets */ .site-footer { .widget-area { .widget-title { margin-bottom: 0.857em; } } } /** * 6.1. Blog Posts (Newspack) Block */ .wp-block-newspack-blocks-homepage-articles { article { .entry-title a { &:active, &:focus, &:hover { text-decoration: none; } } .more-link { &:active, &:focus, &:hover { color: #{map-deep-get($config-global, "color", "primary", "hover")}; } } .cat-links a, .more-link, .entry-meta a { text-decoration: none; &:active, &:focus, &:hover { text-decoration: underline; } } } &.image-alignbehind article { .entry-title a { &:active, &:focus, &:hover { color: inherit; text-decoration: underline; } } .more-link { &:active, &:focus, &:hover { color: inherit; } } } } .has-background:not(.has-background-background-color), [class*="background-color"]:not(.has-background-background-color), [style*="background-color"] { .wp-block-newspack-blocks-homepage-articles article { .entry-title a { &:active, &:focus, &:hover { text-decoration: underline; } } .more-link { &:active, &:focus, &:hover { color: inherit; } } } } /** * Search block */ .wp-block-search { &.wp-block-search__button-inside { .wp-block-search__inside-wrapper { border-radius: #{map-deep-get($config-button, "border-radius")}; } .wp-block-search__input { background: transparent; } } .wp-block-search__input { margin-right: calc(0.1 * #{map-deep-get($config-button, "padding", "horizontal")}); border-radius: #{map-deep-get($config-button, "border-radius")}; } }