Adds sponsor cta

src/webviews/apps/scss/settings.scss

@@ -40,10 +40,10 @@ header {
 
 .container {
 	display: grid;
-	grid-template-areas: 'header header' 'hero hero' 'content sidebar';
+	grid-template-areas: 'header header' 'cta cta' 'hero sidebar' 'content sidebar';
 	grid-template-columns: repeat(1, 1fr min-content);
-	margin: 1em auto;
 	grid-gap: 1em 3em;
+	margin: 1em auto;
 	max-width: 1200px;
 	min-width: 450px;
 
@@ -52,6 +52,10 @@ header {
 	}
 }
 
+.cta {
+	grid-area: cta;
+}
+
 .content__area {
 	grid-area: content;
 	font-size: 1.4rem;
@@ -598,6 +602,14 @@ section {
 	}
 }
 
+.is-sidebar-hidden {
+	display: none;
+
+	@media all and (max-width: 768px) {
+		display: initial;
+	}
+}
+
 .sidebar__group {
 	margin-top: 1em;
 

src/webviews/apps/settings/settings.html

@@ -136,6 +136,17 @@
 				</p>
 			</header>
 
+			<div class="cta is-sidebar-hidden center">
+				<div class="cta--primary">
+					<a
+						class="button button--flat-primary button--big"
+						title="Sponsor GitLens"
+						href="https://gitlens.amod.io/#sponsor"
+						>Sponsor GitLens &#x2764;</a
+					>
+				</div>
+			</div>
+
 			<div class="hero__area hero__area--sticky">
 				<div class="hero__row">
 					<h2 class="hero__title">Settings</h2>
@@ -217,6 +228,14 @@
 
 			<div class="sidebar">
 				<div class="sidebar__group">
+					<a
+						class="button button--flat-primary mt-1"
+						title="Sponsor GitLens"
+						href="https://gitlens.amod.io/#sponsor"
+						>Sponsor GitLens &#x2764;
+					</a>
+				</div>
+				<div class="sidebar__group">
 					<h2>Jump to</h2>
 					<ul>
 						<li>
@@ -432,14 +451,6 @@
 					</ul>
 				</div>
 				<div class="sidebar__group">
-					<a
-						class="button button--flat-primary mt-1"
-						title="Sponsor GitLens"
-						href="https://gitlens.amod.io/#sponsor"
-						>&#x2764; GitLens
-					</a>
-				</div>
-				<div class="sidebar__group">
 					<h2>Help</h2>
 					<ul>
 						<li>