Merge pull request #1058 from Automattic/add/friendly-business-header-support
Update the Friendly Business theme to support FSE header
This commit is contained in:
Andy Peatling
GitHub
commit
2140fc0207
6 changed files with 943 additions and 17 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue