Updates workshop banner styles

Co-authored-by: Chris Griffing <[email protected]>

Author: d13

src/webviews/apps/welcome/welcome.html

@@ -49,21 +49,21 @@ <h1 class="welcome__brand"><gitlens-logo></gitlens-logo> <small>Git Supercharged
 			</p>
 		</header>
 		<main class="welcome__main">
-			<div class="workshop-banner" id="workshop-banner">
-				<p class="workshop-banner__date"><strong>April 30th 1PM ET</strong></p>
-
-				<p class="workshop-banner__content">
-					<span>Discover faster, easier onboarding with GitLens</span>
-					<span><strong>Free Workshop</strong></span>
-				</p>
-				<gl-button
-					href="https://event.sessions.us/gitkraken/fast-easy-onboarding-with-gitlens-in-vs-code?utm_campaign=GitKraken%20Workshops&utm_source=twitter&utm_medium=social&utm_term=GitLens%20Workshop"
-					class="workshop-banner__register-button"
-				>
-					Register Now
-				</gl-button>
-			</div>
 			<section class="welcome__section">
+				<div class="workshop-banner" id="workshop-banner">
+					<p class="workshop-banner__date"><strong>April 30th 1PM ET</strong></p>
+
+					<p class="workshop-banner__content">
+						<span>Discover faster, easier onboarding with GitLens</span>
+						<span><strong>Free Workshop</strong></span>
+					</p>
+					<gl-button
+						href="https://event.sessions.us/gitkraken/fast-easy-onboarding-with-gitlens-in-vs-code?utm_campaign=GitKraken%20Workshops&utm_source=twitter&utm_medium=social&utm_term=GitLens%20Workshop"
+						class="workshop-banner__register-button"
+					>
+						Register Now
+					</gl-button>
+				</div>
 				<p class="t-feature">
 					Supercharge Git and unlock <strong>untapped knowledge</strong> within your repository to better
 					<strong>understand</strong>, <strong>write</strong>, and <strong>review</strong> code. Focus,

src/webviews/apps/welcome/welcome.scss

@@ -278,55 +278,12 @@ gk-card p {
 		grid-template-columns: 1fr;
 		grid-template-rows: min-content;
 		gap: 1.6rem 3rem;
-
-		.workshop-banner {
-			border: thin solid #c64eff;
-			border-radius: 3px;
-			display: flex;
-			flex-direction: row;
-			margin: 1rem;
-			align-items: center;
-			justify-content: space-between;
-			padding: 1rem 2rem;
-			gap: 1rem;
-			margin-right: 6rem;
-
-			&__date {
-				margin-bottom: 0;
-			}
-
-			&__content {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				gap: 0.5rem;
-				margin-bottom: 0;
-			}
-
-			&__register-button {
-				--button-foreground: white;
-				--button-background: #c64eff;
-				--button-hover-background: #d98ffb;
-				font-weight: bold;
-				border-radius: 2px;
-				padding: 0.5rem 2rem;
-			}
-
-			@media screen and (width < 1000px) {
-				flex-direction: column;
-				margin-right: 0;
-				text-align: center;
-				padding: 1rem 1rem;
-			}
-		}
 	}
 
 	&__section {
 		& + & {
 			// border-top: 1px solid var(--vscode-editorWidget-border);
 			padding-top: 0.5rem;
-			max-width: 692px;
 		}
 
 		> *:last-child {
@@ -439,6 +396,7 @@ gk-card p {
 		}
 		&__section {
 			grid-column: 1;
+			max-width: 692px;
 
 			&:nth-child(3) {
 				grid-column: 2;
@@ -583,3 +541,46 @@ body {
 		border-left-color: var(--color-alert-errorBorder);
 	}
 }
+
+.workshop-banner {
+	border: thin solid #c64eff;
+	border-radius: 3px;
+	display: flex;
+	flex-direction: row;
+	margin: 1rem;
+	align-items: center;
+	justify-content: space-between;
+	padding: 1rem 2rem;
+	gap: 1rem;
+	text-align: center;
+
+	&__date {
+		flex: none;
+		margin-bottom: 0;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		margin-bottom: 0;
+	}
+
+	&__register-button {
+		flex: none;
+		--button-foreground: white;
+		--button-background: #c64eff;
+		--button-hover-background: #d98ffb;
+		font-weight: bold;
+		border-radius: 2px;
+		padding: 0.5rem 2rem;
+	}
+
+	@media screen and (width < 1000px) {
+		flex-direction: column;
+		text-align: center;
+		padding-inline: 1rem;
+	}
+}