Procházet zdrojové kódy

align social icons and tagline better

Maggie před 3 roky
rodič
revize
39816d970c

+ 12 - 0
skatepark/assets/theme.css

@@ -582,6 +582,12 @@ header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-
 	margin-right: calc( -1 * ( 8px + 0.25em ));
 }
 
+@media (min-width: 600px) {
+	header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
+		margin-top: calc( -1 * ( 8px + 0.25em ));
+	}
+}
+
 @media (max-width: 599px) {
 	header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
 		margin-left: -0.25em;
@@ -626,6 +632,12 @@ header.wp-block-template-part .site-brand .wp-block-site-title {
 	margin: 0 0 0.5em;
 }
 
+@media (max-width: 599px) {
+	header.wp-block-template-part .site-brand .wp-block-site-title {
+		margin: 0 0 0.25em;
+	}
+}
+
 header.wp-block-template-part .site-brand .wp-block-site-tagline {
 	grid-area: tagline;
 	margin: 0;

+ 6 - 0
skatepark/sass/templates/_header.scss

@@ -30,6 +30,9 @@ header.wp-block-template-part {
 
 		.wp-block-social-links.is-style-logos-only {
 			margin-right: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the right
+			@include break-small(){
+				margin-top: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the tagline
+			}
 			@include break-small-only(){
 				margin-left: -0.25em;
 				margin-right: 0;
@@ -67,6 +70,9 @@ header.wp-block-template-part {
 		.wp-block-site-title {
 			grid-area: title;
 			margin: 0 0 0.5em;
+			@include break-small-only(){
+				margin: 0 0 0.25em;
+			}
 		}
 		.wp-block-site-tagline {
 			grid-area: tagline;