Adjust banners to match heights

THis removes some padding and margins at smaller sizes in order to keep the banners at a consistent height. Ticket: https://phabricator.wikimedia.org/T380274
wmde · Nov 22, 2024 · 9866f6c · 9866f6c
1 parent 9fca948
commit 9866f6c
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBanner.scss
@@ -30,7 +30,7 @@ $form-width: 300px !default;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		padding: 16px;
+		padding: 11px;
 		color: var( --message-color );
 		background-color: var( --message-background );
 		border: none;

diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBannerVar.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBannerVar.scss
@@ -30,7 +30,7 @@ $form-width: 300px !default;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		padding: 16px;
+		padding: 11px;
 	}
 
 	&-column-left {

diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/styles_var.scss
@@ -35,7 +35,9 @@
 @use 'src/themes/Treedip/Footer/SelectionInput';
 @use 'src/themes/Treedip/Message/Message';
 @use 'src/themes/Treedip/SoftClose/SoftClose';
-@use 'src/themes/Treedip/Slider/KeenSlider';
+@use 'src/themes/Treedip/Slider/KeenSlider' with (
+	$slider-padding: 0
+);
 
 /**
  * Fallback banner with "Fijitiv" theme

diff --git a/src/themes/Svingle/Message/Message.scss b/src/themes/Svingle/Message/Message.scss
@@ -66,7 +66,11 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default;
 	&-message-header {
 		font-family: $font;
 		text-align: center;
-		padding-bottom: 15px;
+		padding-bottom: 0;
+
+		@include breakpoints.small-up {
+			padding-bottom: 15px;
+		}
 
 		h2 {
 			font-family: $font;
@@ -76,9 +80,14 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default;
 			max-height: 62px;
 			margin: 0 0 4px;
 			padding: 0;
-			font-size: 25px;
+			font-size: 18px;
 			font-weight: 800;
-			line-height: 24px;
+			line-height: 18px;
+
+			@include breakpoints.small-up {
+				font-size: 25px;
+				line-height: 24px;
+			}
 		}
 
 		svg {

diff --git a/src/themes/Treedip/Message/Message.scss b/src/themes/Treedip/Message/Message.scss
@@ -31,7 +31,11 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default;
 	&-message-header {
 		font-family: $font;
 		text-align: center;
-		padding-bottom: 15px;
+		padding-bottom: 10px;
+
+		@include breakpoints.small-up {
+			padding-bottom: 15px;
+		}
 
 		h2 {
 			font-family: $font;
@@ -41,9 +45,14 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default;
 			max-height: 62px;
 			margin: 0 0 4px;
 			padding: 0;
-			font-size: 25px;
+			font-size: 18px;
 			font-weight: 800;
-			line-height: 24px;
+			line-height: 18px;
+
+			@include breakpoints.small-up {
+				font-size: 25px;
+				line-height: 24px;
+			}
 		}
 
 		svg {