Dalston: Improving header layout and removing site-description from customizer logo options

dalston/functions.php

@@ -99,6 +99,22 @@ if ( ! function_exists( 'dalston_setup' ) ) :
 				),
 			)
 		);
+
+		/**
+		 * Add support for core custom logo.
+		 *
+		 * @link https://codex.wordpress.org/Theme_Logo
+		 */
+		add_theme_support(
+			'custom-logo',
+			array(
+				'height'      => 96,
+				'width'       => 100,
+				'flex-width'  => true,
+				'flex-height' => false,
+				'header-text' => array( 'site-title' ),
+			)
+		);
 	}
 endif;
 add_action( 'after_setup_theme', 'dalston_setup', 12 );

dalston/sass/_config-child-theme-deep.scss

@@ -298,7 +298,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "primary"),
-				"size": map-deep-get($config-global, "font", "size", "xl"),
+				"size": map-deep-get($config-global, "font", "size", "xxl"),
 				"weight": 600,
 				"line-height": 1,
 			),
@@ -308,7 +308,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "secondary"),
-				"size": map-deep-get($config-global, "font", "size", "xl"),
+				"size": map-deep-get($config-global, "font", "size", "xxl"),
 			),
 		),
 	),

dalston/sass/_extra-child-theme.scss

@@ -6,6 +6,7 @@
 $spacing_unit: map-deep-get($config-global, "spacing", "unit");
 $spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
 $spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
+$header-css-grid-width: calc( 0.5 * (100vw - #{$content-width-lg} - #{4 * $spacing_unit}) );
 
 a {
 	text-decoration: none;
@@ -155,13 +156,13 @@ a {
 
 @include media(desktop) {
 	.site-header {
-		grid-template-columns: calc( 0.5 * (100vw - #{$content-width-lg} - #{4 * $spacing_unit}) ) auto 15%;
+		grid-template-columns: $header-css-grid-width auto $header-css-grid-width;
 		grid-template-rows: auto;
 		grid-auto-flow: row;
 		grid-column-gap: $spacing_unit;
 		grid-template-areas:
 			". main-navigation social-navigation"
-			"site-branding site-description .";
+			"site-branding site-description social-navigation";
 
 	}
 }
@@ -176,6 +177,10 @@ a {
 /**
  * Site Title
  */
+.site-title {
+	font-style: italic;
+}
+
 .site-description {
 	color: #{map-deep-get($config-header, "branding", "color", "text")};
 }

dalston/style-rtl.css

@@ -2292,7 +2292,7 @@ table th,
 .site-title {
 	color: #000000;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.42383rem;
+	font-size: 1.60181rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2313,7 +2313,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.42383rem;
+	font-size: 1.60181rem;
 }
 
 .main-navigation {
@@ -3536,11 +3536,11 @@ a {
 
 @media only screen and (min-width: 1024px) {
 	.site-header {
-		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto 15%;
+		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 64px));
 		grid-template-rows: auto;
 		grid-auto-flow: row;
 		grid-column-gap: 16px;
-		grid-template-areas: ". main-navigation social-navigation" "site-branding site-description .";
+		grid-template-areas: ". main-navigation social-navigation" "site-branding site-description social-navigation";
 	}
 }
 
@@ -3551,6 +3551,10 @@ a {
 /**
  * Site Title
  */
+.site-title {
+	font-style: italic;
+}
+
 .site-description {
 	color: #000000;
 }

dalston/style.css

@@ -2309,7 +2309,7 @@ table th,
 .site-title {
 	color: #000000;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.42383rem;
+	font-size: 1.60181rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2330,7 +2330,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.42383rem;
+	font-size: 1.60181rem;
 }
 
 .main-navigation {
@@ -3565,11 +3565,11 @@ a {
 
 @media only screen and (min-width: 1024px) {
 	.site-header {
-		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto 15%;
+		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 64px));
 		grid-template-rows: auto;
 		grid-auto-flow: row;
 		grid-column-gap: 16px;
-		grid-template-areas: ". main-navigation social-navigation" "site-branding site-description .";
+		grid-template-areas: ". main-navigation social-navigation" "site-branding site-description social-navigation";
 	}
 }
 
@@ -3580,6 +3580,10 @@ a {
 /**
  * Site Title
  */
+.site-title {
+	font-style: italic;
+}
+
 .site-description {
 	color: #000000;
 }