/** * Extra Child Theme Styles */ // @import ""; 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; } } } /** * Wide Header & Footer */ body:not(.fse-enabled) { #masthead, #colophon { padding-left: 16px; padding-right: 16px; position: relative; @extend %responsive-alignwide; @include media(mobile) { padding-left: 0; padding-right: 0; } } } #masthead { padding-bottom: 0; } #colophon { margin-left: auto; margin-right: auto; } /** * Mobile-Menu */ .site-header { margin-left: 0; margin-right: 0; } /** * CSS-grid Desktop Menu */ @include media(mobile) { .site-header { align-items: center; display: grid; margin-left: auto; margin-right: auto; grid-template-columns: auto; grid-template-rows: auto; grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")}; grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation"; &:before, &:after { content: none; display: none; } & > * { margin-top: 0; margin-bottom: 0; } &.has-logo:not(.has-title-and-tagline) { grid-template-areas: "site-logo main-navigation" "site-logo social-navigation"; } .site-logo { grid-area: site-logo; margin-bottom: #{map-deep-get($config-global, "spacing", "unit")}; } .site-title { align-self: flex-end; grid-area: site-title; & + .site-description { margin-top: 0; } } .site-description { align-self: center; grid-area: site-description; } .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 { padding: #{map-deep-get($config-header, "main-nav", "link-padding")}; & > a { padding: 0; } } & > .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; grid-area: social-navigation; justify-self: flex-end; } } } // Main Menu @include media(mobile-only) { .main-navigation > div > ul > li > a { line-height: inherit; } } // Social Menu .social-navigation { & > div > ul { flex-wrap: wrap; } } /** * Site Title */ .site-description { color: #{map-deep-get($config-header, "branding", "color", "text")}; } .site-title + .site-description { margin-top: -#{map-deep-get($config-global, "spacing", "unit")}; } /** * Footer Menu */ .footer-navigation .footer-menu > li:first-of-type { margin-left: 0; } .footer-navigation .footer-menu > li:last-of-type { margin-right: 0; } /** * Blocks */ // Cover & Hero block .wp-block-cover .wp-block-cover__inner-container, .wp-block-coblocks-hero .wp-block-coblocks-hero__box { & > * { margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") }; margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") }; @include media(mobile) { margin-top: map-deep-get($config-global, "spacing", "vertical"); margin-bottom: map-deep-get($config-global, "spacing", "vertical"); } &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } // Table block table, .wp-block-table { td, th { border-color: #{map-deep-get($config-global, "color", "border", "default")}; } } .wp-block-newspack-blocks-homepage-articles { article { .cat-links a, .entry-title a:hover, .entry-meta a { text-decoration: none; } } &.image-alignbehind article { .cat-links a:hover, .entry-title a:hover, .entry-meta a:hover { text-decoration: underline; } } } .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 { .cat-links a:hover, .entry-title a:hover, .entry-meta a:hover { text-decoration: underline; } } } /** * Hentry */ // Entry Title .singular .hentry .entry-header .entry-title, .page-title { text-align: center; &:before, &:after { background: map-deep-get($config-global, "color", "border", "light");; height: 1px; content: ""; display: block; margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")}; @include media(mobile) { margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")}; } @extend %responsive-alignfull; } &:after { margin-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")}; @include media(mobile) { margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")}; } } } // Entry Meta .entry-header { .entry-meta { display: none; } } // Entry Title Link article .entry-header .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")}; } } } // Remove margin if alignfull is first element .home.hide-homepage-title { .hentry .entry-content { & > *:first-child { &.alignfull { margin-top: 0; @include media(mobile) { margin-top: 0; } } } } } /** * Comments */ .comment { .avatar { border-radius: 50%; } } .comment-respond { .form-submit { display: flex; justify-content: flex-end; } } /** * Widgets */ .widget-area { max-width: 100%; width: 100%; & > *:last-child { margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")}; } .widget-title, .widgettitle { font-size: #{map-deep-get($config-global, "font", "size", "md")}; margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")}; &:empty { display: none; } } @include media(laptop) { display: flex; flex-wrap: wrap; justify-content: space-between; .widget { width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")}) } & > *:nth-child(2) { margin-top: 0; } } @include media(desktop) { .widget { width: calc(33.3333% - #{1.333 * map-deep-get($config-global, "spacing", "horizontal")}) } & > *:nth-child(3) { margin-top: 0; } } } .widget_calendar, .widget_calendar { caption { font-weight: bold; } td, th { text-align: center; } } .widget_archive, .widget_categories, .widget_links, .widget_meta, .widget_nav_menu, .widget_pages, .widget_recent_comments, .widget_recent_entries, .widget_rss, .widget_rss_links, .widget_top-posts, .widget_authors, .widget_jp_blogs_i_follow, .widget_top-click, .widget_upcoming_events_widget { ul { border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default"); list-style: none; padding-left: 0; } li { border-top: 1px solid map-deep-get($config-global, "color", "border", "default"); padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0; } } .widget_categories .children, .widget_nav_menu .sub-menu, .widget_pages .children { border-bottom: 0; margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")}; margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")}; padding-left: map-deep-get($config-global, "spacing", "horizontal"); } .widget_recent_entries .post-date { display: block; } .widget_rss { cite, .rssSummary, .rss-date { display: block; } } .widget_search { input[type="search"] { display: block; margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")}; width: 100%; } } // Updates the Mobile Navigation to be next to the site title. @import "../../varia/sass/components/header/_site-mobile-nav-side";