Leven: Cleaning up Header styles, fix link underline behavior

leven/sass/_extra-child-theme.scss

@@ -1,7 +1,6 @@
 /**
  * Extra Child Theme Styles
  */
-// @import "";
 
 html {
 	letter-spacing: -0.02em;
@@ -15,9 +14,12 @@ a {
 	text-decoration: none;
 
 	.wp-block-cover &,
-	.wp-block-cover-image & {
+	.wp-block-cover-image &,
+	.wp-block-media-text &,
+	p:not(.site-title) & {
 		text-decoration: underline;
 
+		&.wp-block-button__link,
 		&:hover {
 			text-decoration: none;
 		}
@@ -25,52 +27,80 @@ a {
 }
 
 /**
- * Mobile-Menu-Only
+ * Mobile-Menu
  */
 
-.site-header {
-	align-items: center;
-	display: grid;
-	grid-template-columns: auto;
-	grid-template-rows: auto;
-	grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
-	grid-template-areas:
-		"site-branding main-navigation"
-		" . social-navigation";
-
-	&:before,
-	&:after {
-		content: none;
-		display: none;
-	}
+#masthead {
+	position: relative;
+}
 
-	& > * {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
+#toggle-menu {
+	position: absolute;
+	right: #{map-deep-get($config-global, "spacing", "unit")};
+	top: #{map-deep-get($config-global, "spacing", "unit")};
+}
 
-	.site-logo {
-		display: block;
-	}
+.site-branding {
+	max-width: calc(100% - 100px - #{map-deep-get($config-global, "spacing", "unit")});
+}
+
+/**
+ * CSS-grid Desktop Menu
+ */
+
+@include media(mobile) {
 
-	.site-branding {
-		grid-area: site-branding;
+	#toggle-menu {
+		position: inherit;
+		right: auto;
+		top: auto;
 	}
 
-	.main-navigation {
-		grid-area: main-navigation;
-		justify-self: end;
+	.site-header {
+		align-items: center;
+		display: grid;
+		grid-template-columns: auto;
+		grid-template-rows: auto;
+		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
+		grid-template-areas:
+			"site-branding main-navigation"
+			" . social-navigation";
 
-		& > div > ul {
-			justify-content: flex-end;
+		&:before,
+		&:after {
+			content: none;
+			display: none;
 		}
-	}
-	.social-navigation {
-		grid-area: social-navigation;
-		justify-self: end;
 
-		& > div > ul {
-			justify-content: flex-end;
+		& > * {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+
+		.site-logo {
+			display: block;
+		}
+
+		.site-branding {
+			grid-area: site-branding;
+			max-width: unset;
+		}
+
+		.main-navigation {
+			grid-area: main-navigation;
+			justify-self: end;
+
+			& > div > ul {
+				justify-content: flex-end;
+			}
+		}
+		.social-navigation {
+			grid-area: social-navigation;
+			justify-self: end;
+
+			& > div > ul {
+				justify-content: flex-end;
+			}
 		}
 	}
 }

leven/style-rtl.css

@@ -1545,7 +1545,7 @@ img {
 
 ul,
 ol {
-	font-family: "Crimson Text", sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	margin: 0 16px 0 0;
 	padding: 0;
 }
@@ -3138,49 +3138,66 @@ a {
 }
 
 /**
- * Mobile-Menu-Only
+ * Mobile-Menu
  */
-.site-header {
-	align-items: center;
-	display: grid;
-	grid-template-columns: auto;
-	grid-template-rows: auto;
-	grid-column-gap: 16px;
-	grid-template-areas: "site-branding main-navigation" " . social-navigation";
-}
-
-.site-header:before, .site-header:after {
-	content: none;
-	display: none;
-}
-
-.site-header > * {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.site-header .site-logo {
-	display: block;
-}
-
-.site-header .site-branding {
-	grid-area: site-branding;
-}
-
-.site-header .main-navigation {
-	grid-area: main-navigation;
-	justify-self: end;
+#masthead {
+	position: relative;
 }
 
-.site-header .main-navigation > div > ul {
-	justify-content: flex-end;
+#toggle-menu {
+	position: absolute;
+	left: 16px;
+	top: 16px;
 }
 
-.site-header .social-navigation {
-	grid-area: social-navigation;
-	justify-self: end;
+.site-branding {
+	max-width: calc(100% - 100px - 16px);
 }
 
-.site-header .social-navigation > div > ul {
-	justify-content: flex-end;
+/**
+ * CSS-grid Desktop Menu
+ */
+@media only screen and (min-width: 560px) {
+	#toggle-menu {
+		position: inherit;
+		left: auto;
+		top: auto;
+	}
+	.site-header {
+		align-items: center;
+		display: grid;
+		grid-template-columns: auto;
+		grid-template-rows: auto;
+		grid-column-gap: 16px;
+		grid-template-areas: "site-branding main-navigation" " . social-navigation";
+	}
+	.site-header:before, .site-header:after {
+		content: none;
+		display: none;
+	}
+	.site-header > * {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+	.site-header .site-logo {
+		display: block;
+	}
+	.site-header .site-branding {
+		grid-area: site-branding;
+		max-width: unset;
+	}
+	.site-header .main-navigation {
+		grid-area: main-navigation;
+		justify-self: end;
+	}
+	.site-header .main-navigation > div > ul {
+		justify-content: flex-end;
+	}
+	.site-header .social-navigation {
+		grid-area: social-navigation;
+		justify-self: end;
+	}
+	.site-header .social-navigation > div > ul {
+		justify-content: flex-end;
+	}
 }

leven/style.css

@@ -3133,59 +3133,83 @@ a {
 }
 
 .wp-block-cover a,
-.wp-block-cover-image a {
+.wp-block-cover-image a,
+.wp-block-media-text a,
+p:not(.site-title) a {
 	text-decoration: underline;
 }
 
-.wp-block-cover a:hover,
-.wp-block-cover-image a:hover {
+.wp-block-cover a.wp-block-button__link, .wp-block-cover a:hover,
+.wp-block-cover-image a.wp-block-button__link,
+.wp-block-cover-image a:hover,
+.wp-block-media-text a.wp-block-button__link,
+.wp-block-media-text a:hover,
+p:not(.site-title) a.wp-block-button__link,
+p:not(.site-title) a:hover {
 	text-decoration: none;
 }
 
 /**
- * Mobile-Menu-Only
+ * Mobile-Menu
  */
-.site-header {
-	align-items: center;
-	display: grid;
-	grid-template-columns: auto;
-	grid-template-rows: auto;
-	grid-column-gap: 16px;
-	grid-template-areas: "site-branding main-navigation" " . social-navigation";
-}
-
-.site-header:before, .site-header:after {
-	content: none;
-	display: none;
-}
-
-.site-header > * {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.site-header .site-logo {
-	display: block;
-}
-
-.site-header .site-branding {
-	grid-area: site-branding;
-}
-
-.site-header .main-navigation {
-	grid-area: main-navigation;
-	justify-self: end;
+#masthead {
+	position: relative;
 }
 
-.site-header .main-navigation > div > ul {
-	justify-content: flex-end;
+#toggle-menu {
+	position: absolute;
+	right: 16px;
+	top: 16px;
 }
 
-.site-header .social-navigation {
-	grid-area: social-navigation;
-	justify-self: end;
+.site-branding {
+	max-width: calc(100% - 100px - 16px);
 }
 
-.site-header .social-navigation > div > ul {
-	justify-content: flex-end;
+/**
+ * CSS-grid Desktop Menu
+ */
+@media only screen and (min-width: 560px) {
+	#toggle-menu {
+		position: inherit;
+		right: auto;
+		top: auto;
+	}
+	.site-header {
+		align-items: center;
+		display: grid;
+		grid-template-columns: auto;
+		grid-template-rows: auto;
+		grid-column-gap: 16px;
+		grid-template-areas: "site-branding main-navigation" " . social-navigation";
+	}
+	.site-header:before, .site-header:after {
+		content: none;
+		display: none;
+	}
+	.site-header > * {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+	.site-header .site-logo {
+		display: block;
+	}
+	.site-header .site-branding {
+		grid-area: site-branding;
+		max-width: unset;
+	}
+	.site-header .main-navigation {
+		grid-area: main-navigation;
+		justify-self: end;
+	}
+	.site-header .main-navigation > div > ul {
+		justify-content: flex-end;
+	}
+	.site-header .social-navigation {
+		grid-area: social-navigation;
+		justify-self: end;
+	}
+	.site-header .social-navigation > div > ul {
+		justify-content: flex-end;
+	}
 }