瀏覽代碼

Merge pull request #1061 from Automattic/add/elegant-business-fse-header-support

Update the Elegant Business theme to support FSE header
Andy Peatling 6 年之前
父節點
當前提交
93de92222a

+ 7 - 2
elegant-business/sass/site/header/_site-header.scss

@@ -2,6 +2,7 @@
 
 .site-header {
 	padding: 1.5em 1em 1em;
+	text-align: center;
 
 	&.featured-image {
 		display: flex;
@@ -59,7 +60,9 @@
 
 // Site title
 
-.site-title {
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus {
 	margin: auto;
 	display: inline;
 	color: $color__text-main;
@@ -93,7 +96,9 @@
 
 // Site description
 
-.site-description {
+.site-description, 
+.wp-block-a8c-site-description,
+.wp-block-a8c-site-description:focus {
 	color: $color__text-main;
 	display: block;
 	font-size: $font__size-xs;

+ 4 - 0
elegant-business/sass/typography/_headings.scss

@@ -16,6 +16,7 @@
 .pagination .nav-links,
 .sticky-post,
 .site-title,
+.site-title:focus,
 .site-info,
 #cancel-comment-reply-link,
 img:after,
@@ -39,6 +40,7 @@ h6 {
 .comment-author .fn,
 .no-comments,
 .site-title,
+.site-title:focus,
 h1,
 h2,
 h3,
@@ -78,6 +80,7 @@ h2 {
 }
 
 .site-title,
+.site-title:focus,
 .not-found .page-title,
 .error-404 .page-title {
 	font-size: $font__size-base;
@@ -96,6 +99,7 @@ h3 {
 }
 
 .site-description,
+.site-description:focus,
 .main-navigation,
 .nav-links,
 .page-title,

+ 795 - 0
elegant-business/style-editor.css

@@ -12,6 +12,790 @@ Twenty Nineteen 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;
+  text-align: center;
+}
+
+.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 {
+  color: #767676;
+  position: relative;
+  text-align: center;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-branding {
+    margin: 0 calc(10% + 60px);
+  }
+}
+
+.site-logo {
+  position: relative;
+  z-index: 999;
+  margin-bottom: calc(.66 * 1rem);
+}
+
+.site-logo .custom-logo-link .custom-logo {
+  max-height: 64px;
+  min-height: inherit;
+  vertical-align: top;
+  width: auto;
+}
+
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus {
+  margin: auto;
+  display: inline;
+  color: #111;
+  /* When there is no description set, make sure navigation appears below title. */
+}
+
+.site-title a,
+.wp-block-a8c-site-title a,
+.wp-block-a8c-site-title:focus a {
+  color: #111;
+}
+
+.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: #111;
+}
+
+.site-title a:hover,
+.wp-block-a8c-site-title a:hover,
+.wp-block-a8c-site-title:focus a:hover {
+  color: #4a4a4a;
+}
+
+.featured-image .site-title, .featured-image
+.wp-block-a8c-site-title, .featured-image
+.wp-block-a8c-site-title:focus {
+  margin: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .featured-image .site-title, .featured-image
+  .wp-block-a8c-site-title, .featured-image
+  .wp-block-a8c-site-title:focus {
+    display: inline-block;
+  }
+}
+
+.site-title + .main-navigation,
+.wp-block-a8c-site-title + .main-navigation,
+.wp-block-a8c-site-title:focus + .main-navigation {
+  display: block;
+}
+
+.site-description,
+.wp-block-a8c-site-description,
+.wp-block-a8c-site-description:focus {
+  color: #111;
+  display: block;
+  font-size: 0.71111em;
+  font-weight: normal;
+  margin: 8px 0 0;
+}
+
+/** === Main menu === */
+.main-navigation {
+  display: block;
+  margin-top: 1rem;
+  /* 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: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", 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: #c43d80;
+  display: inline;
+  position: relative;
+}
+
+.main-navigation .main-menu > li > a {
+  font-weight: 700;
+  color: #c43d80;
+  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: #9e3067;
+}
+
+.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: #c43d80;
+  color: #fff;
+  list-style: none;
+  padding-left: 0;
+  position: absolute;
+  opacity: 0;
+  text-align: left;
+  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: #fff;
+  display: block;
+  line-height: 1.2;
+  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: #9e3067;
+}
+
+.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: #9e3067;
+}
+
+.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: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", 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: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", 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,
+.site-title:focus,
+.site-info,
+#cancel-comment-reply-link,
+img:after,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", 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,
+.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: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+}
+
+.site-branding,
+.main-navigation ul.main-menu > li,
+.social-navigation,
+.author-bio .author-description,
+.nav-links {
+  line-height: 1.25;
+}
+
+.has-huge-font-size {
+  font-size: 2.25em;
+}
+
+.entry-title,
+.has-large-font-size,
+h1 {
+  font-size: 1.6875em;
+}
+
+h2 {
+  font-size: 1.125em;
+}
+
+.site-title,
+.site-title:focus,
+.not-found .page-title,
+.error-404 .page-title {
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-title,
+  .site-title:focus,
+  .not-found .page-title,
+  .error-404 .page-title {
+    font-size: 1.125em;
+  }
+}
+
+.has-regular-font-size,
+.comments-title,
+h2.author-title,
+.author-description,
+h3 {
+  font-size: 22px;
+}
+
+.site-description,
+.site-description:focus,
+.main-navigation,
+.nav-links,
+.page-title,
+.page-description,
+.has-small-font-size,
+.comment-author .fn,
+.no-comments,
+p.author-bio,
+h4 {
+  font-size: 0.88889em;
+}
+
+.site-info,
+.pagination .nav-links,
+.comment-content,
+h5 {
+  font-size: 0.71111em;
+}
+
+.entry-meta,
+.entry-footer,
+.discussion-meta-info,
+.comment-reply-link,
+.comment-metadata,
+.comment-notes,
+.sticky-post,
+#cancel-comment-reply-link,
+img:after,
+h6 {
+  font-size: 0.59259em;
+}
+
+.page-title {
+  font-weight: normal;
+}
+
+.page-description,
+.page-links a {
+  font-weight: bold;
+}
+
+.page-id-3669 .entry .entry-header {
+  display: none;
+}
+
+.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 .wp-block[data-align="full"] {
   width: 100%;
@@ -834,6 +1618,17 @@ ul.wp-block-archives li ul,
   font-size: 0.71111em;
 }
 
+/** === Site Title Block === */
+.wp-block-a8c-site-title {
+  text-align: center;
+}
+
+/** === Site Description Block === */
+.wp-block-a8c-site-description {
+  text-align: center;
+  margin: 0;
+}
+
 /** === Classic Editor === */
 /* Properly center-align captions in the classic-editor block */
 .wp-caption dd {

+ 16 - 0
elegant-business/style-editor.scss

@@ -6,6 +6,9 @@ Twenty Nineteen 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 === */
 
@@ -800,6 +803,19 @@ ul.wp-block-archives,
 	}
 }
 
+/** === Site Title Block === */
+
+.wp-block-a8c-site-title {
+	text-align: center;
+}
+
+/** === Site Description Block === */
+
+.wp-block-a8c-site-description {
+	text-align: center;
+	margin: 0;
+}
+
 /** === Classic Editor === */
 
 /* Properly center-align captions in the classic-editor block */

+ 33 - 9
elegant-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, yet sophisticated, with subtle, beautiful typography, Elegant Business conveys quality and integrity, which makes it especially good fit for coffee shops, pop-up shops, and brick & mortar store fronts.
 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: elegant-business
@@ -444,6 +444,7 @@ textarea {
 .pagination .nav-links,
 .sticky-post,
 .site-title,
+.site-title:focus,
 .site-info,
 #cancel-comment-reply-link,
 img:after,
@@ -467,6 +468,7 @@ h6 {
 .comment-author .fn,
 .no-comments,
 .site-title,
+.site-title:focus,
 h1,
 h2,
 h3,
@@ -506,6 +508,7 @@ h2 {
 }
 
 .site-title,
+.site-title:focus,
 .not-found .page-title,
 .error-404 .page-title {
   font-size: 22px;
@@ -513,6 +516,7 @@ h2 {
 
 @media only screen and (min-width: 768px) {
   .site-title,
+  .site-title:focus,
   .not-found .page-title,
   .error-404 .page-title {
     font-size: 1.125em;
@@ -528,6 +532,7 @@ h3 {
 }
 
 .site-description,
+.site-description:focus,
 .main-navigation,
 .nav-links,
 .page-title,
@@ -1916,6 +1921,7 @@ body.page .main-navigation {
 --------------------------------------------------------------*/
 .site-header {
   padding: 1.5em 1em 1em;
+  text-align: center;
 }
 
 .site-header.featured-image {
@@ -1965,40 +1971,58 @@ body.page .main-navigation {
   width: auto;
 }
 
-.site-title {
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus {
   margin: auto;
   display: inline;
   color: #111;
   /* When there is no description set, make sure navigation appears below title. */
 }
 
-.site-title a {
+.site-title a,
+.wp-block-a8c-site-title a,
+.wp-block-a8c-site-title:focus a {
   color: #111;
 }
 
-.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: #111;
 }
 
-.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;
 }
 
-.featured-image .site-title {
+.featured-image .site-title, .featured-image
+.wp-block-a8c-site-title, .featured-image
+.wp-block-a8c-site-title:focus {
   margin: 0;
 }
 
 @media only screen and (min-width: 768px) {
-  .featured-image .site-title {
+  .featured-image .site-title, .featured-image
+  .wp-block-a8c-site-title, .featured-image
+  .wp-block-a8c-site-title:focus {
     display: inline-block;
   }
 }
 
-.site-title + .main-navigation {
+.site-title + .main-navigation,
+.wp-block-a8c-site-title + .main-navigation,
+.wp-block-a8c-site-title:focus + .main-navigation {
   display: block;
 }
 
-.site-description {
+.site-description,
+.wp-block-a8c-site-description,
+.wp-block-a8c-site-description:focus {
   color: #111;
   display: block;
   font-size: 0.71111em;

+ 32 - 8
elegant-business/style.css

@@ -444,6 +444,7 @@ textarea {
 .pagination .nav-links,
 .sticky-post,
 .site-title,
+.site-title:focus,
 .site-info,
 #cancel-comment-reply-link,
 img:after,
@@ -467,6 +468,7 @@ h6 {
 .comment-author .fn,
 .no-comments,
 .site-title,
+.site-title:focus,
 h1,
 h2,
 h3,
@@ -506,6 +508,7 @@ h2 {
 }
 
 .site-title,
+.site-title:focus,
 .not-found .page-title,
 .error-404 .page-title {
   font-size: 22px;
@@ -513,6 +516,7 @@ h2 {
 
 @media only screen and (min-width: 768px) {
   .site-title,
+  .site-title:focus,
   .not-found .page-title,
   .error-404 .page-title {
     font-size: 1.125em;
@@ -528,6 +532,7 @@ h3 {
 }
 
 .site-description,
+.site-description:focus,
 .main-navigation,
 .nav-links,
 .page-title,
@@ -1922,6 +1927,7 @@ body.page .main-navigation {
 --------------------------------------------------------------*/
 .site-header {
   padding: 1.5em 1em 1em;
+  text-align: center;
 }
 
 .site-header.featured-image {
@@ -1971,40 +1977,58 @@ body.page .main-navigation {
   width: auto;
 }
 
-.site-title {
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus {
   margin: auto;
   display: inline;
   color: #111;
   /* When there is no description set, make sure navigation appears below title. */
 }
 
-.site-title a {
+.site-title a,
+.wp-block-a8c-site-title a,
+.wp-block-a8c-site-title:focus a {
   color: #111;
 }
 
-.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: #111;
 }
 
-.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;
 }
 
-.featured-image .site-title {
+.featured-image .site-title, .featured-image
+.wp-block-a8c-site-title, .featured-image
+.wp-block-a8c-site-title:focus {
   margin: 0;
 }
 
 @media only screen and (min-width: 768px) {
-  .featured-image .site-title {
+  .featured-image .site-title, .featured-image
+  .wp-block-a8c-site-title, .featured-image
+  .wp-block-a8c-site-title:focus {
     display: inline-block;
   }
 }
 
-.site-title + .main-navigation {
+.site-title + .main-navigation,
+.wp-block-a8c-site-title + .main-navigation,
+.wp-block-a8c-site-title:focus + .main-navigation {
   display: block;
 }
 
-.site-description {
+.site-description,
+.wp-block-a8c-site-description,
+.wp-block-a8c-site-description:focus {
   color: #111;
   display: block;
   font-size: 0.71111em;