Makes header of the welcome page responsive to the panel width

(#4769, #4773, PLG-138)

Author: sergeibbb

src/webviews/apps/welcome/welcome.css.ts

@@ -3,6 +3,22 @@ import { css } from 'lit';
 const colorScheme = css`
 	:host {
 		--accent-color: #cb64ff;
+
+		--hero-gradient: radial-gradient(76.32% 76.32% at 50% 7.24%, #7b00ff 29.72%, rgba(255, 0, 242, 0) 100%);
+	}
+`;
+
+const typography = css`
+	:host {
+		--h1-font-size: 1.4rem;
+		--p-font-size: 1rem;
+	}
+
+	@media (max-width: 640px) {
+		:host {
+			--h1-font-size: 0.75rem;
+			--p-font-size: 0.7rem;
+		}
 	}
 `;
 
@@ -15,14 +31,20 @@ const heroGradient = css`
 		transform: translateX(-50%) translateY(-40%);
 		z-index: -1;
 
-		width: 620px;
-		height: 517px;
-
+		background: var(--hero-gradient);
 		border-radius: 100%;
-		background: radial-gradient(76.32% 76.32% at 50% 7.24%, #7b00ff 29.72%, rgba(255, 0, 242, 0) 100%);
 		opacity: 0.25;
-		mix-blend-mode: color;
 		filter: blur(53px);
+
+		width: 620px;
+		height: 517px;
+	}
+
+	@media (max-width: 640px) {
+		.welcome::before {
+			width: 328px;
+			height: 273px;
+		}
 	}
 `;
 
@@ -33,17 +55,29 @@ const section = css`
 		justify-content: center;
 		align-items: center;
 		text-align: center;
+		font-size: var(--p-font-size);
 	}
 	.section p {
-		font-size: larger;
-		max-width: calc(620px * 0.75);
+		max-width: 30em;
+	}
+	.section .accent {
+		color: var(--accent-color);
 	}
 `;
 
 const header = css`
+	.logo {
+		transform: scale(0.7);
+	}
+	@media (max-width: 640px) {
+		.logo {
+			transform: scale(0.5);
+		}
+	}
+
 	.header {
-		margin-top: 5rem;
-		margin-bottom: 2rem;
+		margin-top: 3em;
+		margin-bottom: 1em;
 		max-width: 620px;
 		margin-left: auto;
 		margin-right: auto;
@@ -53,16 +87,15 @@ const header = css`
 	}
 	.header h1 {
 		margin-bottom: 0;
-	}
-`;
 
-const typography = css`
-	.accent {
-		color: var(--accent-color);
+		font-size: var(--h1-font-size);
+	}
+	.header p {
+		color: var(--vscode-descriptionForeground);
 	}
 `;
 
 export const welcomeStyles = css`
-	${colorScheme}
-	${heroGradient} ${section} ${header} ${typography}
+	${colorScheme} ${typography}
+	${heroGradient} ${section} ${header}
 `;

src/webviews/apps/welcome/welcome.ts

@@ -31,7 +31,7 @@ export class GlWelcomeApp extends GlAppHost<State> {
 		return html`
 			<div class="welcome scrollable">
 				<div class="section header">
-					<gitlens-logo></gitlens-logo>
+					<div class="logo"><gitlens-logo></gitlens-logo></div>
 					<h1>GitLens is now installed in Cursor</h1>
 					<p>
 						Understand every line of code — instantly. GitLens reveals authorship, activity, and history