Quadrat: Add navigation styles

quadrat/assets/theme.css

@@ -40,6 +40,24 @@
 	text-align: right;
 }
 
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	border: 2px solid var(--wp--custom--color--primary);
+	padding: 0.667em 1.333em;
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	border: none;
+	color: var(--wp--custom--color--background);
+	background: var(--wp--custom--color--primary);
+	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+}
+
 .wp-block-cover.is-style-quadrat-cover-diamond::after {
 	background-image: url(rotated.svg);
 	background-position: center;
@@ -89,6 +107,15 @@ ul ul {
 	}
 }
 
+.wp-block-navigation-link a:hover {
+	background: transparent;
+}
+
+.wp-block-navigation .wp-block-pages-list__item .wp-block-pages-list__item__link:hover,
+.wp-block-navigation .wp-block-navigation-link__content:hover {
+	text-decoration: underline;
+}
+
 .wp-block-post-navigation-link {
 	border-top: 1px solid;
 	display: flex;
@@ -127,6 +154,23 @@ ul ul {
 	border-bottom-width: 1px;
 }
 
+@media (max-width: 479px) {
+	.headlines-pattern {
+		padding-top: 50px !important;
+		padding-bottom: 50px !important;
+	}
+}
+
+a:hover {
+	background: var(--wp--custom--color--primary);
+	color: var(--wp--custom--color--background);
+}
+
+a:active,
+a:focus {
+	background: var(--wp--custom--color--secondary);
+}
+
 .site-header .wp-block-group {
 	display: flex;
 	justify-content: space-between;

quadrat/sass/blocks/_navigation.scss

@@ -0,0 +1,10 @@
+.wp-block-navigation-link a:hover {
+	background: transparent;
+}
+
+.wp-block-navigation .wp-block-pages-list__item .wp-block-pages-list__item__link,
+.wp-block-navigation .wp-block-navigation-link__content {
+	&:hover {
+		text-decoration: underline;
+	}
+}

quadrat/sass/theme.scss

@@ -1,11 +1,15 @@
 @import "../../blank-canvas-blocks/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
 @import "block-patterns/headlines";
 @import "block-patterns/join";
+@import "blocks/buttons";
 @import "blocks/cover";
 @import "blocks/list";
 @import "blocks/media-text";
+@import "blocks/navigation";
 @import "blocks/post-navigation-link";
 @import "blocks/table";
+@import "block-patterns/headlines";
+@import "elements/links";
 @import "header";
 
 .wp-block-post-featured-image {