/** * Extra Child Theme Styles */ $color_background: map-deep-get($config-global, "color", "background", "default"); $color_foreground: map-deep-get($config-global, "color", "foreground", "default"); $color_foreground_light: map-deep-get($config-global, "color", "foreground", "light"); $color_primary: map-deep-get($config-global, "color", "primary", "default"); $color_primary_hover: map-deep-get($config-global, "color", "primary", "hover"); $spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal"); $spacing_vertical: map-deep-get($config-global, "spacing", "vertical"); $spacing_unit: map-deep-get($config-global, "spacing", "unit"); /** * Elements */ b, strong { font-weight: 600; } a { text-decoration: none; .wp-block-cover &, .wp-block-cover-image &, .wp-block-media-text &, p:not(.site-title) & { text-decoration: underline; &.wp-block-button__link, &:hover { text-decoration: none; } } } /** * Header */ .site-header { max-width: 100%; padding-left: $spacing_unit; padding-right: $spacing_unit; position: relative; @include media(mobile) { padding: #{1.5 * $spacing_unit} $spacing_vertical; } } /** * CSS-grid Desktop Menu */ @include media(mobile) { .site-header { align-items: center; display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")}; grid-template-areas: "site-branding main-navigation"; &:before, &:after { content: none; display: none; } & > * { margin-top: 0; margin-bottom: 0; } .site-branding { grid-area: site-branding; align-self: center; } .site-logo { & + .site-title { margin-top: #{map-deep-get($config-global, "spacing", "unit")}; } } .site-title { & + .site-description { margin-top: #{0.5 * $baseline-unit}; } } .main-navigation { align-self: center; grid-area: main-navigation; justify-self: flex-end; & > div > ul { justify-content: flex-end; margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")}; margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")}; & > li > a { padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")}; } & > .menu-item-has-children > a::after { font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")}; } } & > div > ul > li:hover, & > div > ul > li:focus-within, & > div > ul > li.current-menu-item { & > a { color: #{map-deep-get($config-global, "color", "primary", "default")}; } & > ul { box-shadow: none; overflow: hidden; &:before { border-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid #{map-deep-get($config-global, "color", "primary", "default")}; border-left: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent; border-right: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent; content: ""; display: block; margin-left: #{map-deep-get($config-global, "spacing", "unit")}; width: #{map-deep-get($config-global, "spacing", "unit")}; } } & li { & > a { background: #{map-deep-get($config-global, "color", "primary", "default")}; color: #{map-deep-get($config-global, "color", "background", "default")}; } &:hover > a, &.focus > a, &.current-menu-item > a { background: #{map-deep-get($config-global, "color", "primary", "hover")}; } } } } .social-navigation { align-self: center; justify-self: flex-end; } } } /** * Main */ .site-main { padding-top: 0; } .site-main > article > .entry-header, .site-main > .page-header, .site-main > .not-found > .page-header { margin-top: #{0.666 * $spacing_vertical}; @include media(mobile) { margin-top: #{2 * $spacing_vertical}; } } /** * Content */ // Entry Title Link .entry-title, .page-title, .a8c-posts-list .a8c-posts-list-item__title, .wp-block-newspack-blocks-homepage-articles article .entry-title { a { color: inherit; text-decoration: none; &:active, &:focus, &:hover { color: map-deep-get($config-global, "color", "primary", "default"); } } } // Sticky tag .sticky-post, .a8c-posts-list .a8c-posts-list-item__featured span { padding: #{0.5 * $baseline-unit} #{0.66 * $spacing_unit}; } /** * Next/Previous navigation */ // Singular navigation .post-navigation { .meta-nav { color: map-deep-get($config-global, "color", "foreground", "light"); } .post-title { font-size: #{map-deep-get($config-heading, "font", "size", "h4")}; line-height: #{map-deep-get($config-global, "font", "line-height", "heading")}; } } /** * Comments */ .logged-in-as, .comment-notes, .comment-form-cookies-consent { font-size: map-deep-get($config-global, "font", "size", "sm"); } .comment-form-cookies-consent input[type=checkbox] + label { line-height: #{map-deep-get($config-global, "font", "line-height", "body")}; } .comment-notes { color: map-deep-get($config-global, "color", "foreground", "light"); } .comment-form > p:not(.comment-form-cookies-consent) label { font-weight: 600; } /** * Blocks */ // Cover .wp-block-cover, .wp-block-cover-image { h1, h2, h3, h4, h5, h6 { font-weight: 700; } @include media(desktop) { min-height: #{20 * map-deep-get($config-global, "spacing", "vertical")}; h1 { font-size: map-deep-get($config-global, "font", "size", "xxxxl") } h2 { font-size: map-deep-get($config-global, "font", "size", "xxxl"); } h3 { font-size: map-deep-get($config-global, "font", "size", "xxl"); } h4 { font-size: map-deep-get($config-global, "font", "size", "xl"); } h5 { font-size: map-deep-get($config-global, "font", "size", "lg"); } h6 { font-size: map-deep-get($config-global, "font", "size", "md"); } } } // Column .wp-block-columns.alignfull { @include media(mobile) { padding-right: $spacing_vertical; padding-left: $spacing_vertical; } } .jetpack-business-hours { dd { padding-left: 0; } } .wp-block-newspack-blocks-homepage-articles { article { .entry-title a{ &:active, &:focus, &:hover { text-decoration: none; } } .more-link { } .cat-links a, .more-link, .entry-meta a { text-decoration: none; &:active, &:focus, &:hover { color: $color_primary_hover; text-decoration: underline; } } } &.image-alignbehind article { .entry-title a{ &:active, &:focus, &:hover { 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:hover { text-decoration: underline; } } } /** * Widgets */ .widget { select { max-width: 100%; } } .widget-title { font-size: #{map-deep-get($config-heading, "font", "size", "h3")}; margin-bottom: #{0.5 * $spacing_vertical}; } .widget_archive, .widget_categories, .widget_meta, .widget_nav_menu, .widget_pages, .widget_recent_comments, .widget_recent_entries, .widget_rss { ul { padding-left: 0; list-style: none; li { color: map-deep-get($config-global, "color", "foreground", "light"); font-weight: 600; } ul { counter-reset: submenu; } ul > li > a::before { font-weight: normal; content: "\2013\00a0" counters(submenu, "\2013\00a0", none); counter-increment: submenu } } } .widget_tag_cloud { .tagcloud { font-weight: 600; } } .widget_search { .search-field { width: 100%; @include media(mobile) { width: auto; } } .search-submit { display: block; margin-top: $typescale-base; } } .widget_calendar .calendar_wrap { text-align: center; table td, table th { border: none; } a { text-decoration: underline; } } .widget_links li, .widget_jp_blogs_i_follow li, .widget_rss_links li { font-family: inherit; font-family: var( --font-base, inherit ); } /** * Footer */ @include media(mobile-only) { .site-info { text-align: center; } } //Social Navigation .social-navigation { flex: 1 0 50%; order: 2; margin-bottom: 0; } .social-links-menu { flex-wrap: wrap; justify-content: flex-end; } @include media(mobile-only) { .social-links-menu { justify-content: center; } } // Updates the Mobile Navigation to be next to the site title. @import "../../varia/sass/components/header/_site-mobile-nav-side"; @include media(mobile-only) { .mobile-nav-side { .site-header.has-menu { .site-branding { display: contents; } } } } /** * 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( .1 * #{map-deep-get($config-button, "padding", "horizontal")} ); border-radius: #{map-deep-get($config-button, "border-radius")}; } }