From 2281c5a52ce7cbb6cf54934c2d1ef5b1dfea968a Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 11 Jul 2019 21:32:14 -0700 Subject: [PATCH] Update the Friendly Business theme to support the full site editing site header template part. --- .../sass/site/header/_site-header.scss | 16 +- .../sass/typography/_headings.scss | 6 + friendly-business/style-editor.css | 845 ++++++++++++++++++ friendly-business/style-editor.scss | 13 + friendly-business/style-rtl.css | 42 +- friendly-business/style.css | 40 +- 6 files changed, 944 insertions(+), 18 deletions(-) diff --git a/friendly-business/sass/site/header/_site-header.scss b/friendly-business/sass/site/header/_site-header.scss index 022ba7fcd..2e91c86f7 100755 --- a/friendly-business/sass/site/header/_site-header.scss +++ b/friendly-business/sass/site/header/_site-header.scss @@ -29,7 +29,7 @@ .site-branding { - align-items: center; + align-items: flex-start; color: $color__text-dark; display: flex; flex-wrap: wrap; @@ -67,8 +67,9 @@ // Site title -.site-title { - +.site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus { color: $color__text-main; flex: 1 1 auto; margin: 0 #{0.7 * $size__spacing-unit} 0 0; @@ -89,11 +90,16 @@ // Site description -.site-description { - +.site-description, +.wp-block-a8c-site-description, +.wp-block-a8c-site-description:focus { flex: initial; color: $color__text-dark; font-size: $font__size-xs; font-weight: normal; margin: 14px 0 0; + + @include media(tablet) { + text-align: right; + } } diff --git a/friendly-business/sass/typography/_headings.scss b/friendly-business/sass/typography/_headings.scss index 9562fb59e..5b4dc61a8 100755 --- a/friendly-business/sass/typography/_headings.scss +++ b/friendly-business/sass/typography/_headings.scss @@ -16,6 +16,8 @@ .pagination .nav-links, .sticky-post, .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, .site-info, #cancel-comment-reply-link, img:after, @@ -39,6 +41,8 @@ h6 { .comment-author .fn, .no-comments, .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, h1, h2, h3, @@ -86,6 +90,8 @@ h2 { } .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, .has-regular-font-size, .has-large-font-size, .comments-title, diff --git a/friendly-business/style-editor.css b/friendly-business/style-editor.css index 777382369..e971bbcf5 100644 --- a/friendly-business/style-editor.css +++ b/friendly-business/style-editor.css @@ -9,6 +9,846 @@ Friendly Business Editor Styles /* Fallback for non-latin fonts */ /* Calculates maximum width for post content */ /* Nested sub-menu padding: 10 levels deep */ +.site-header { + padding: 1.5em 1em 1em; +} + +.site-header.featured-image { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 90vh; +} + +.site-header.featured-image .site-branding-container { + margin-bottom: auto; +} + +@media only screen and (min-width: 768px) { + .site-header { + margin: 0; + padding: 3rem 0 2rem; + } + .site-header.featured-image { + min-height: 100vh; + margin-bottom: 2rem; + } +} + +.site-branding { + align-items: flex-start; + color: #0d1b24; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + position: relative; +} + +@media only screen and (min-width: 768px) { + .site-branding { + margin: 0 calc(10% + 60px); + } +} + +.site-logo { + display: inherit; + margin-right: 0.7rem; +} + +.site-logo .custom-logo-link { + box-sizing: content-box; + overflow: hidden; +} + +.site-logo .custom-logo-link .custom-logo { + display: block; + width: auto; + max-height: 64px; +} + +@media only screen and (min-width: 768px) { + .site-logo .custom-logo-link .custom-logo { + max-height: 90px; + } +} + +.site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus { + color: #3c2323; + flex: 1 1 auto; + margin: 0 0.7rem 0 0; +} + +.site-title a, +.wp-block-a8c-site-title a, +.wp-block-a8c-site-title:focus a { + color: #0d1b24; +} + +.site-title a:link, .site-title a:visited, +.wp-block-a8c-site-title a:link, +.wp-block-a8c-site-title a:visited, +.wp-block-a8c-site-title:focus a:link, +.wp-block-a8c-site-title:focus a:visited { + color: #0d1b24; +} + +.site-title a:hover, +.wp-block-a8c-site-title a:hover, +.wp-block-a8c-site-title:focus a:hover { + color: #4a4a4a; +} + +.site-description, +.wp-block-a8c-site-description, +.wp-block-a8c-site-description:focus { + flex: initial; + color: #0d1b24; + font-size: 0.71111em; + font-weight: normal; + margin: 14px 0 0; +} + +@media only screen and (min-width: 768px) { + .site-description, + .wp-block-a8c-site-description, + .wp-block-a8c-site-description:focus { + text-align: right; + } +} + +/** === Main menu === */ +.main-navigation { + display: block; + margin-top: 0.9rem; + width: 100%; + /* Un-style buttons */ + /* + * Sub-menu styles + * + * :focus-within needs its own selector so other similar + * selectors don’t get ignored if a browser doesn’t recognize it + */ + /** + * Fade-in animation for top-level submenus + */ + /** + * Off-canvas touch device styles + */ +} + +body.page .main-navigation { + display: block; +} + +.main-navigation > div { + display: inline; +} + +.main-navigation button { + display: inline-block; + border: none; + padding: 0; + margin: 0; + font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; + font-weight: 700; + line-height: 1.2; + text-decoration: none; + background: transparent; + color: inherit; + cursor: pointer; + transition: background 250ms ease-in-out, transform 150ms ease; + -webkit-appearance: none; + -moz-appearance: none; +} + +.main-navigation button:hover, .main-navigation button:focus { + background: transparent; +} + +.main-navigation button:focus { + outline: 1px solid transparent; + outline-offset: -4px; +} + +.main-navigation button:active { + transform: scale(0.99); +} + +.main-navigation .main-menu { + display: inline-block; + margin: 0; + padding: 0; +} + +.main-navigation .main-menu > li { + color: #20603c; + display: inline; + position: relative; +} + +.main-navigation .main-menu > li > a { + font-weight: 700; + color: #20603c; + margin-right: 0.5rem; +} + +.main-navigation .main-menu > li > a + svg { + margin-right: 0.5rem; +} + +.main-navigation .main-menu > li > a:hover, +.main-navigation .main-menu > li > a:hover + svg { + color: #133a24; +} + +.main-navigation .main-menu > li.menu-item-has-children { + display: inline-block; + position: inherit; +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu > li.menu-item-has-children { + position: relative; + } +} + +.main-navigation .main-menu > li.menu-item-has-children > a { + margin-right: 0.125rem; +} + +.main-navigation .main-menu > li.menu-item-has-children > a:after, +.main-navigation .main-menu > li.menu-item-has-children .menu-item-has-children > a:after { + content: ""; + display: none; +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand { + display: inline-block; + margin-right: 0.25rem; + /* Priority+ Menu */ +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand.main-menu-more-toggle { + position: relative; + height: 24px; + line-height: 1.2; + width: 24px; + padding: 0; + margin-left: 0.5rem; +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand.main-menu-more-toggle svg { + height: 24px; + width: 24px; + top: -0.125rem; + vertical-align: text-bottom; +} + +.wp-customizer-unloading .main-navigation .main-menu > li.menu-item-has-children .submenu-expand, .main-navigation .main-menu > li.menu-item-has-children .submenu-expand.is-empty { + display: none; +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand svg { + position: relative; + top: 0.2rem; +} + +.main-navigation .main-menu > li:last-child > a, +.main-navigation .main-menu > li:last-child.menu-item-has-children .submenu-expand { + margin-right: 0; +} + +.main-navigation .sub-menu { + background-color: #20603c; + color: #fffdf6; + list-style: none; + padding-left: 0; + position: absolute; + opacity: 0; + left: -9999px; + z-index: 99999; +} + +@media only screen and (min-width: 768px) { + .main-navigation .sub-menu { + width: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + } +} + +.main-navigation .sub-menu > li { + display: block; + float: none; + position: relative; +} + +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand { + display: inline-block; + position: absolute; + width: calc( 24px + 1rem); + right: 0; + top: calc( .125 * 1rem); + bottom: 0; + color: white; + line-height: 1; + padding: calc( .5 * 1rem); +} + +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand svg { + top: 0; +} + +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand { + margin-right: 0; +} + +@media only screen and (min-width: 768px) { + .main-navigation .sub-menu > li.menu-item-has-children .menu-item-has-children > a:after { + content: "\203a"; + } +} + +.main-navigation .sub-menu > li > a, +.main-navigation .sub-menu > li > .menu-item-link-return { + color: #fffdf6; + display: block; + line-height: 1.2; + text-shadow: none; + padding: calc( .5 * 1rem) calc( 24px + 1rem) calc( .5 * 1rem) 1rem; + white-space: nowrap; +} + +.main-navigation .sub-menu > li > a:hover, .main-navigation .sub-menu > li > a:focus, +.main-navigation .sub-menu > li > .menu-item-link-return:hover, +.main-navigation .sub-menu > li > .menu-item-link-return:focus { + background: #133a24; +} + +.main-navigation .sub-menu > li > a:hover:after, .main-navigation .sub-menu > li > a:focus:after, +.main-navigation .sub-menu > li > .menu-item-link-return:hover:after, +.main-navigation .sub-menu > li > .menu-item-link-return:focus:after { + background: #133a24; +} + +.main-navigation .sub-menu > li > .menu-item-link-return { + width: 100%; + font-size: 22px; + font-weight: normal; + text-align: left; +} + +.main-navigation .sub-menu > li > a:empty { + display: none; +} + +.main-navigation .sub-menu > li.mobile-parent-nav-menu-item { + display: none; + font-size: 0.88889em; + font-weight: normal; +} + +.main-navigation .sub-menu > li.mobile-parent-nav-menu-item svg { + position: relative; + top: 0.2rem; + margin-right: calc( .25 * 1rem); +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + /* Non-mobile position */ + /* Nested sub-menu dashes */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { + display: block; + margin-top: 0; + opacity: 1; + position: absolute; + left: 0; + right: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links { + right: 0; + left: auto; + display: block; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand { + display: none; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + /* Non-mobile position */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu { + float: none; + max-width: 100%; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu { + counter-reset: submenu; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a::before { + font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; + font-weight: normal; + content: "– " counters(submenu, "– ", none); + counter-increment: submenu; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + /* Non-mobile position */ + /* Nested sub-menu dashes */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + display: block; + float: none; + margin-top: 0; + opacity: 1; + position: absolute; + left: 0; + right: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu.hidden-links, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu.hidden-links, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu.hidden-links, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu.hidden-links, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu.hidden-links { + right: 0; + left: auto; + display: table; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .submenu-expand, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .submenu-expand, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .submenu-expand { + display: none; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + /* Non-mobile position */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu { + float: none; + max-width: 100%; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu { + counter-reset: submenu; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu > li > a::before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu > li > a::before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu > li > a::before { + font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; + font-weight: normal; + content: "– " counters(submenu, "– ", none); + counter-increment: submenu; +} + +.main-navigation .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu { + animation: fade_in 0.1s forwards; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu .submenu-expand .svg-icon { + transform: rotate(270deg); +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu .sub-menu { + opacity: 0; + position: absolute; + z-index: 0; + transform: translateX(-100%); +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li:hover, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li:focus, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li > a:hover, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li > a:focus { + background-color: transparent; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu > li > a, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu > li > .menu-item-link-return { + white-space: inherit; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { + display: table; + margin-top: 0; + opacity: 1; + padding-left: 0; + /* Mobile position */ + left: 0; + top: 0; + right: 0; + bottom: 0; + position: fixed; + z-index: 100000; + /* Make sure appears above mobile admin bar */ + width: 100vw; + height: 100vh; + max-width: 100vw; + transform: translateX(100%); + animation: slide_in_right 0.3s forwards; + /* Prevent menu from being blocked by admin bar */ +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true > .mobile-parent-nav-menu-item { + display: block; +} + +.admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { + top: 46px; + height: calc( 100vh - 46px); + /* WP core breakpoint */ +} + +.admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true .sub-menu.expanded-true { + top: 0; +} + +@media only screen and (min-width: 782px) { + .admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { + top: 32px; + height: calc( 100vh - 32px); + } + .admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true .sub-menu.expanded-true { + top: 0; + } +} + +.main-navigation .main-menu-more:nth-child(n+3) { + display: none; +} + +/* Menu animation */ +@keyframes slide_in_right { + 100% { + transform: translateX(0%); + } +} + +@keyframes fade_in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.author-description .author-link, +.comment-metadata, +.comment-reply-link, +.comments-title, +.comment-author .fn, +.discussion-meta-info, +.entry-meta, +.entry-footer, +.main-navigation, +.no-comments, +.not-found .page-title, +.error-404 .page-title, +.post-navigation .post-title, +.page-links, +.page-description, +.pagination .nav-links, +.sticky-post, +.site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, +.site-info, +#cancel-comment-reply-link, +img:after, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; +} + +.main-navigation, +.page-description, +.author-description .author-link, +.not-found .page-title, +.error-404 .page-title, +.post-navigation .post-title, +.pagination .nav-links, +.comments-title, +.comment-author .fn, +.no-comments, +.site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 700; + line-height: 1.2; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.page-title { + font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; +} + +.site-branding, +.main-navigation ul.main-menu > li, +.social-navigation, +.author-description .author-bio, +.nav-links { + line-height: 1.25; +} + +h1 { + font-size: 1.6875em; +} + +@media only screen and (min-width: 768px) { + h1 { + font-size: 2.8125em; + } +} + +.entry-title, +.not-found .page-title, +.error-404 .page-title, +.has-larger-font-size, +.wp-block-cover-image h2, +.wp-block-cover h2, +h2 { + font-size: 1.125em; +} + +@media only screen and (min-width: 768px) { + .entry-title, + .not-found .page-title, + .error-404 .page-title, + .has-larger-font-size, + .wp-block-cover-image h2, + .wp-block-cover h2, + h2 { + font-size: 2.25em; + } +} + +.site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, +.has-regular-font-size, +.has-large-font-size, +.comments-title, +h3 { + font-size: 22px; +} + +@media only screen and (min-width: 768px) { + .site-title, + .wp-block-a8c-site-title, + .wp-block-a8c-site-title:focus, + .has-regular-font-size, + .has-large-font-size, + .comments-title, + h3 { + font-size: 1.6875em; + } +} + +.main-navigation, +.nav-links, +.page-title, +.page-description, +.comment-author .fn, +.no-comments, +h2.author-title, +p.author-bio, +h4 { + font-size: 0.88889em; +} + +@media only screen and (min-width: 768px) { + .main-navigation, + .nav-links, + .page-title, + .page-description, + .comment-author .fn, + .no-comments, + h2.author-title, + p.author-bio, + h4 { + font-size: 1.125em; + } +} + +.pagination .nav-links, +.comment-content, +h5 { + font-size: 0.71111em; +} + +@media only screen and (min-width: 768px) { + .pagination .nav-links, + .comment-content, + h5 { + font-size: 22px; + } +} + +.site-description, +.entry-meta, +.entry-footer, +.discussion-meta-info, +.site-info, +.has-small-font-size, +.comment-reply-link, +.comment-metadata, +.comment-notes, +.sticky-post, +#cancel-comment-reply-link, +img:after, +h6 { + font-size: 0.59259em; +} + +@media only screen and (min-width: 768px) { + .site-description, + .entry-meta, + .entry-footer, + .discussion-meta-info, + .site-info, + .has-small-font-size, + .comment-reply-link, + .comment-metadata, + .comment-notes, + .sticky-post, + #cancel-comment-reply-link, + img:after, + h6 { + font-size: 0.88889em; + } +} + +.page-description, +.page-links a { + font-weight: bold; +} + +.post-navigation .post-title, +.entry-title, +.not-found .page-title, +.error-404 .page-title, +.comments-title, +blockquote { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + word-break: break-word; +} + +/* Do not hyphenate entry title on tablet view and bigger. */ +@media only screen and (min-width: 768px) { + .entry-title { + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + } +} + /** === Editor Frame === */ body { background: #fffdf6; @@ -882,6 +1722,11 @@ ul.wp-block-archives li ul, font-size: 0.71111em; } +/** === Site Header Block == **/ +.wp-block-columns.site-branding .editor-inner-blocks { + width: 100%; +} + /** === Classic Editor === */ /* Properly center-align captions in the classic-editor block */ .wp-caption dd { diff --git a/friendly-business/style-editor.scss b/friendly-business/style-editor.scss index 228bb2cda..f9c2ff108 100755 --- a/friendly-business/style-editor.scss +++ b/friendly-business/style-editor.scss @@ -6,6 +6,9 @@ Friendly Business Editor Styles @import "sass/variables-site/variables-site"; @import "sass/mixins/mixins-master"; +@import "sass/site/header/site-header"; +@import "sass/navigation/menu-main-navigation"; +@import "sass/typography/headings"; /** === Editor Frame === */ @@ -870,6 +873,16 @@ ul.wp-block-archives, } } +/** === Site Header Block == **/ + +.wp-block-columns.site-branding { + + .editor-inner-blocks { + width: 100%; + } + +} + /** === Classic Editor === */ /* Properly center-align captions in the classic-editor block */ diff --git a/friendly-business/style-rtl.css b/friendly-business/style-rtl.css index f7b6ddc47..28a21e764 100644 --- a/friendly-business/style-rtl.css +++ b/friendly-business/style-rtl.css @@ -7,7 +7,7 @@ Author URI: https://wordpress.org/ Template: twentynineteen Description: Simple, approachable, with bold, handsome typography, Friendly Business conveys quality and sustainability, which makes it especially good fit for education, agriculture and family-run businesses. Requires at least: WordPress 4.9.6 -Version: 1.3 +Version: 1.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: friendly-business @@ -441,6 +441,8 @@ textarea { .pagination .nav-links, .sticky-post, .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, .site-info, #cancel-comment-reply-link, img:after, @@ -464,6 +466,8 @@ h6 { .comment-author .fn, .no-comments, .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, h1, h2, h3, @@ -521,6 +525,8 @@ h2 { } .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, .has-regular-font-size, .has-large-font-size, .comments-title, @@ -530,6 +536,8 @@ h3 { @media only screen and (min-width: 768px) { .site-title, + .wp-block-a8c-site-title, + .wp-block-a8c-site-title:focus, .has-regular-font-size, .has-large-font-size, .comments-title, @@ -1953,7 +1961,7 @@ body.page .main-navigation { } .site-branding { - align-items: center; + align-items: flex-start; color: #0d1b24; display: flex; flex-wrap: wrap; @@ -1989,25 +1997,37 @@ body.page .main-navigation { } } -.site-title { +.site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus { color: #3c2323; flex: 1 1 auto; margin: 0 0 0 0.7rem; } -.site-title a { +.site-title a, +.wp-block-a8c-site-title a, +.wp-block-a8c-site-title:focus a { color: #0d1b24; } -.site-title a:link, .site-title a:visited { +.site-title a:link, .site-title a:visited, +.wp-block-a8c-site-title a:link, +.wp-block-a8c-site-title a:visited, +.wp-block-a8c-site-title:focus a:link, +.wp-block-a8c-site-title:focus a:visited { color: #0d1b24; } -.site-title a:hover { +.site-title a:hover, +.wp-block-a8c-site-title a:hover, +.wp-block-a8c-site-title:focus a:hover { color: #4a4a4a; } -.site-description { +.site-description, +.wp-block-a8c-site-description, +.wp-block-a8c-site-description:focus { flex: initial; color: #0d1b24; font-size: 0.71111em; @@ -2015,6 +2035,14 @@ body.page .main-navigation { margin: 14px 0 0; } +@media only screen and (min-width: 768px) { + .site-description, + .wp-block-a8c-site-description, + .wp-block-a8c-site-description:focus { + text-align: left; + } +} + .site-header.featured-image { /* Hide overflow for overflowing featured image */ overflow: hidden; diff --git a/friendly-business/style.css b/friendly-business/style.css index 39fab3b67..0b7100be0 100644 --- a/friendly-business/style.css +++ b/friendly-business/style.css @@ -441,6 +441,8 @@ textarea { .pagination .nav-links, .sticky-post, .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, .site-info, #cancel-comment-reply-link, img:after, @@ -464,6 +466,8 @@ h6 { .comment-author .fn, .no-comments, .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, h1, h2, h3, @@ -521,6 +525,8 @@ h2 { } .site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus, .has-regular-font-size, .has-large-font-size, .comments-title, @@ -530,6 +536,8 @@ h3 { @media only screen and (min-width: 768px) { .site-title, + .wp-block-a8c-site-title, + .wp-block-a8c-site-title:focus, .has-regular-font-size, .has-large-font-size, .comments-title, @@ -1959,7 +1967,7 @@ body.page .main-navigation { } .site-branding { - align-items: center; + align-items: flex-start; color: #0d1b24; display: flex; flex-wrap: wrap; @@ -1995,25 +2003,37 @@ body.page .main-navigation { } } -.site-title { +.site-title, +.wp-block-a8c-site-title, +.wp-block-a8c-site-title:focus { color: #3c2323; flex: 1 1 auto; margin: 0 0.7rem 0 0; } -.site-title a { +.site-title a, +.wp-block-a8c-site-title a, +.wp-block-a8c-site-title:focus a { color: #0d1b24; } -.site-title a:link, .site-title a:visited { +.site-title a:link, .site-title a:visited, +.wp-block-a8c-site-title a:link, +.wp-block-a8c-site-title a:visited, +.wp-block-a8c-site-title:focus a:link, +.wp-block-a8c-site-title:focus a:visited { color: #0d1b24; } -.site-title a:hover { +.site-title a:hover, +.wp-block-a8c-site-title a:hover, +.wp-block-a8c-site-title:focus a:hover { color: #4a4a4a; } -.site-description { +.site-description, +.wp-block-a8c-site-description, +.wp-block-a8c-site-description:focus { flex: initial; color: #0d1b24; font-size: 0.71111em; @@ -2021,6 +2041,14 @@ body.page .main-navigation { margin: 14px 0 0; } +@media only screen and (min-width: 768px) { + .site-description, + .wp-block-a8c-site-description, + .wp-block-a8c-site-description:focus { + text-align: right; + } +} + .site-header.featured-image { /* Hide overflow for overflowing featured image */ overflow: hidden;