From 0e01b8f7b45d6069b0e99587a2dd727af96e28f3 Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Thu, 1 Jun 2023 15:45:51 -0400
Subject: [PATCH] Updates welcome font size & spacing
---
src/webviews/apps/welcome/welcome.html | 142 ++++++++++++++++-----------------
src/webviews/apps/welcome/welcome.scss | 14 ++--
2 files changed, 77 insertions(+), 79 deletions(-)
diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html
index 09351a3..ebaaf38 100644
--- a/src/webviews/apps/welcome/welcome.html
+++ b/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 & Compare view"
- aria-label="Show Search & Compare view"
- ><code-icon icon="gl-search-view" size="24"></code-icon>Search & 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 & Compare view"
+ aria-label="Show Search & Compare view"
+ ><code-icon icon="gl-search-view" size="24"></code-icon>Search & 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
diff --git a/src/webviews/apps/welcome/welcome.scss b/src/webviews/apps/welcome/welcome.scss
index 120e292..a6ff05d 100644
--- a/src/webviews/apps/welcome/welcome.scss
+++ b/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;