Bladeren bron

Mayland: Update the header layout to horizontal

Danny Dudzic 5 jaren geleden
bovenliggende
commit
82d59a56be
3 gewijzigde bestanden met toevoegingen van 28 en 31 verwijderingen
  1. 11 11
      mayland/sass/_extra-child-theme.scss
  2. 8 10
      mayland/style-rtl.css
  3. 9 10
      mayland/style.css

+ 11 - 11
mayland/sass/_extra-child-theme.scss

@@ -37,6 +37,12 @@ a {
 	@include media(mobile) {
 		padding: #{1.5 * $spacing_unit} $spacing_vertical;
 	}
+
+	.site-branding {
+		.site-description {
+			display: none;
+		}
+	}
 }
 
 /**
@@ -44,13 +50,7 @@ a {
  */
 @include media(mobile) {
 	.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";
+		display: flex;
 
 		&:before,
 		&:after {
@@ -64,8 +64,9 @@ a {
 		}
 
 		.site-branding {
-			grid-area: site-branding;
 			align-self: center;
+			flex: 1 1 auto;
+			padding-right: #{map-deep-get($config-global, "spacing", "unit")};
 		}
 
 		.site-logo {
@@ -82,8 +83,6 @@ a {
 
 		.main-navigation {
 			align-self: center;
-			grid-area: main-navigation;
-			justify-self: flex-end;
 
 			& > div > ul {
 				justify-content: flex-end;
@@ -91,7 +90,7 @@ a {
 				margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
 
 				& > li > a {
-					padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
+					padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} #{map-deep-get($config-header, "main-nav", "link-padding")};
 				}
 
 				& > .menu-item-has-children > a::after {
@@ -141,6 +140,7 @@ a {
 		.social-navigation {
 			align-self: center;
 			justify-self: flex-end;
+			padding-left: #{map-deep-get($config-global, "spacing", "unit")};
 		}
 	}
 }

+ 8 - 10
mayland/style-rtl.css

@@ -3448,17 +3448,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.site-header .site-branding .site-description {
+	display: none;
+}
+
 /**
  * CSS-grid Desktop Menu
  */
 @media only screen and (min-width: 560px) {
 	.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";
+		display: flex;
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3469,8 +3468,8 @@ p:not(.site-title) a:hover {
 		margin-bottom: 0;
 	}
 	.site-header .site-branding {
-		grid-area: site-branding;
 		align-self: center;
+		flex: 1 1 auto;
 	}
 	.site-header .site-logo + .site-title {
 		margin-top: 16px;
@@ -3480,8 +3479,6 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .main-navigation {
 		align-self: center;
-		grid-area: main-navigation;
-		justify-self: flex-end;
 	}
 	.site-header .main-navigation > div > ul {
 		justify-content: flex-end;
@@ -3489,7 +3486,7 @@ p:not(.site-title) a:hover {
 		margin-left: -8px;
 	}
 	.site-header .main-navigation > div > ul > li > a {
-		padding: 0 16px;
+		padding: 8px 16px;
 	}
 	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
@@ -3536,6 +3533,7 @@ p:not(.site-title) a:hover {
 	.site-header .social-navigation {
 		align-self: center;
 		justify-self: flex-end;
+		padding-right: 16px;
 	}
 }
 

+ 9 - 10
mayland/style.css

@@ -3477,17 +3477,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.site-header .site-branding .site-description {
+	display: none;
+}
+
 /**
  * CSS-grid Desktop Menu
  */
 @media only screen and (min-width: 560px) {
 	.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";
+		display: flex;
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3498,8 +3497,9 @@ p:not(.site-title) a:hover {
 		margin-bottom: 0;
 	}
 	.site-header .site-branding {
-		grid-area: site-branding;
 		align-self: center;
+		flex: 1 1 auto;
+		padding-right: 16px;
 	}
 	.site-header .site-logo + .site-title {
 		margin-top: 16px;
@@ -3509,8 +3509,6 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .main-navigation {
 		align-self: center;
-		grid-area: main-navigation;
-		justify-self: flex-end;
 	}
 	.site-header .main-navigation > div > ul {
 		justify-content: flex-end;
@@ -3518,7 +3516,7 @@ p:not(.site-title) a:hover {
 		margin-right: -8px;
 	}
 	.site-header .main-navigation > div > ul > li > a {
-		padding: 0 16px;
+		padding: 8px 16px;
 	}
 	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
@@ -3565,6 +3563,7 @@ p:not(.site-title) a:hover {
 	.site-header .social-navigation {
 		align-self: center;
 		justify-self: flex-end;
+		padding-left: 16px;
 	}
 }