Updates welcome font size & spacing

src/webviews/apps/welcome/welcome.html

@@ -75,7 +75,7 @@
 					</g>
 				</svg>
 
-				<p>
+				<p style="margin: 0.5rem 1rem 0 1rem">
 					<strong>Want more control?</strong>
 					Use the interactive
 					<a
@@ -275,74 +275,6 @@
 				</g>
 				</svg>
 
-				<h3>Side Bar Views</h3>
-				<p>Powerful views into Git that don't come with VS Code</p>
-				<nav class="welcome__views-nav" aria-label="Sidebar view links">
-					<a href="command:gitlens.showCommitsView" title="Show Commits view" aria-label="Show Commits view"
-						><code-icon icon="gl-commits-view" size="24"></code-icon>Commits</a
-					>
-					<a
-						href="command:gitlens.showCommitDetailsView"
-						title="Show Commit Details view"
-						aria-label="Show Commit Details view"
-						><code-icon icon="gl-commit-view" size="24"></code-icon>Commit Details</a
-					>
-					<a
-						href="command:gitlens.showRepositoriesView"
-						title="Show Repositories view"
-						aria-label="Show Repositories view"
-						><code-icon icon="gl-repositories-view" size="24"></code-icon>Repositories</a
-					>
-					<a
-						href="command:gitlens.showFileHistoryView"
-						title="Show File History view"
-						aria-label="Show File History view"
-						><code-icon icon="gl-history-view" size="24"></code-icon>File History</a
-					>
-					<a
-						href="command:gitlens.showTimelineView"
-						title="Show Visual File History view"
-						aria-label="Show Visual File History view"
-						><code-icon icon="graph-scatter" size="24"></code-icon>Visual File History ✨</a
-					>
-					<a
-						href="command:gitlens.showLineHistoryView"
-						title="Show Line History view"
-						aria-label="Show Line History view"
-						><code-icon icon="gl-history-view" size="24"></code-icon>Line History</a
-					>
-					<a
-						href="command:gitlens.showBranchesView"
-						title="Show Branches view"
-						aria-label="Show Branches view"
-						><code-icon icon="gl-branches-view" size="24"></code-icon>Branches</a
-					>
-					<a href="command:gitlens.showRemotesView" title="Show Remotes view" aria-label="Show Remotes view"
-						><code-icon icon="gl-remotes-view" size="24"></code-icon>Remotes</a
-					>
-					<a href="command:gitlens.showStashesView" title="Show Stashes view" aria-label="Show Stashes view"
-						><code-icon icon="gl-stashes-view" size="24"></code-icon>Stashes</a
-					>
-					<a href="command:gitlens.showTagsView" title="Show Tags view" aria-label="Show Tags view"
-						><code-icon icon="gl-tags-view" size="24"></code-icon>Tags</a
-					>
-					<a
-						href="command:gitlens.showWorktreesView"
-						title="Show Worktrees view"
-						aria-label="Show Worktrees view"
-						><code-icon icon="gl-worktrees-view" size="24"></code-icon>Worktrees ✨</a
-					>
-					<a href="command:gitlens.showContributorsView"
-						><code-icon icon="gl-contributors-view" size="24"></code-icon>Contributors</a
-					>
-					<a
-						href="command:gitlens.showSearchAndCompareView"
-						title="Show Search &amp; Compare view"
-						aria-label="Show Search &amp; Compare view"
-						><code-icon icon="gl-search-view" size="24"></code-icon>Search &amp; Compare</a
-					>
-				</nav>
-
 				<h3>Commit Graph ✨</h3>
 				<p>
 					The
@@ -418,7 +350,73 @@
 					</g>
 				</svg>
 
-				<p>✨ Requires a trial or subscription to use this on privately hosted repos</p>
+				<h3>Side Bar Views</h3>
+				<p>Powerful views into Git that don't come with VS Code</p>
+				<nav class="welcome__views-nav" aria-label="Sidebar view links">
+					<a href="command:gitlens.showCommitsView" title="Show Commits view" aria-label="Show Commits view"
+						><code-icon icon="gl-commits-view" size="24"></code-icon>Commits</a
+					>
+					<a
+						href="command:gitlens.showCommitDetailsView"
+						title="Show Commit Details view"
+						aria-label="Show Commit Details view"
+						><code-icon icon="gl-commit-view" size="24"></code-icon>Commit Details</a
+					>
+					<a
+						href="command:gitlens.showRepositoriesView"
+						title="Show Repositories view"
+						aria-label="Show Repositories view"
+						><code-icon icon="gl-repositories-view" size="24"></code-icon>Repositories</a
+					>
+					<a
+						href="command:gitlens.showFileHistoryView"
+						title="Show File History view"
+						aria-label="Show File History view"
+						><code-icon icon="gl-history-view" size="24"></code-icon>File History</a
+					>
+					<a
+						href="command:gitlens.showTimelineView"
+						title="Show Visual File History view"
+						aria-label="Show Visual File History view"
+						><code-icon icon="graph-scatter" size="24"></code-icon>Visual File History ✨</a
+					>
+					<a
+						href="command:gitlens.showLineHistoryView"
+						title="Show Line History view"
+						aria-label="Show Line History view"
+						><code-icon icon="gl-history-view" size="24"></code-icon>Line History</a
+					>
+					<a
+						href="command:gitlens.showBranchesView"
+						title="Show Branches view"
+						aria-label="Show Branches view"
+						><code-icon icon="gl-branches-view" size="24"></code-icon>Branches</a
+					>
+					<a href="command:gitlens.showRemotesView" title="Show Remotes view" aria-label="Show Remotes view"
+						><code-icon icon="gl-remotes-view" size="24"></code-icon>Remotes</a
+					>
+					<a href="command:gitlens.showStashesView" title="Show Stashes view" aria-label="Show Stashes view"
+						><code-icon icon="gl-stashes-view" size="24"></code-icon>Stashes</a
+					>
+					<a href="command:gitlens.showTagsView" title="Show Tags view" aria-label="Show Tags view"
+						><code-icon icon="gl-tags-view" size="24"></code-icon>Tags</a
+					>
+					<a
+						href="command:gitlens.showWorktreesView"
+						title="Show Worktrees view"
+						aria-label="Show Worktrees view"
+						><code-icon icon="gl-worktrees-view" size="24"></code-icon>Worktrees ✨</a
+					>
+					<a href="command:gitlens.showContributorsView"
+						><code-icon icon="gl-contributors-view" size="24"></code-icon>Contributors</a
+					>
+					<a
+						href="command:gitlens.showSearchAndCompareView"
+						title="Show Search &amp; Compare view"
+						aria-label="Show Search &amp; Compare view"
+						><code-icon icon="gl-search-view" size="24"></code-icon>Search &amp; Compare</a
+					>
+				</nav>
 
 				<h3>Focus ✨</h3>
 				<p>
@@ -434,8 +432,10 @@
 					Rich integrations with GitHub & GitLab provide more detailed hover information for auto-linked
 					issues and pull requests, pull requests associated with branches and commits, and avatars.
 				</p>
+
+				<p>✨ Requires a trial or subscription to use this on privately hosted repos</p>
 			</section>
-			<section class="welcome__section">
+			<section class="welcome__section welcome__section-bar">
 				<h2>Get Started</h2>
 				<p>
 					GitLens is <strong>powerful</strong>, <strong>feature rich</strong>, and highly

src/webviews/apps/welcome/welcome.scss

@@ -38,14 +38,14 @@ p {
 }
 
 h2 {
-	font-size: 1.6rem;
+	font-size: 1.8rem;
 }
 
 h3 {
 	margin-top: 2rem;
 	margin-bottom: 0.4rem;
-	font-size: 1.4rem;
-	font-weight: normal;
+	font-size: 1.6rem;
+	font-weight: 600;
 }
 
 h4 {
@@ -244,10 +244,6 @@ gk-card p {
 	}
 
 	&__section {
-		&:first-child {
-			margin: 0 3rem;
-		}
-
 		& + & {
 			// border-top: 1px solid var(--vscode-editorWidget-border);
 			padding-top: 0.5rem;
@@ -273,8 +269,9 @@ gk-card p {
 
 	&__illustration {
 		max-width: 69.2rem;
-		width: 100%;
+		width: calc(100% - 2rem);
 		height: auto;
+		margin: 0 1rem;
 
 		&--graph {
 			object-fit: cover;
@@ -305,6 +302,7 @@ gk-card p {
 		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
 		gap: 0.8rem 2rem;
 		// width: min-content;
+		margin: 0 1rem;
 
 		> * {
 			white-space: nowrap;