Revamps GitLens Welcome page

Moves Support GitLens up in README
Removes Support GitLens from Settings page

Author: eamodio

README.md

@@ -12,6 +12,15 @@
 
 <br />
 
+# Support GitLens
+
+While GitLens is generously offered to everyone free of charge, if you find it useful, please consider [**supporting**](https://gitlens.amod.io/#support-gitlens) it.
+
+- [**Become a Sponsor**](https://www.patreon.com/eamodio 'Become a sponsor on Patreon') &mdash; join the growing group of generous [backers](https://github.com/eamodio/vscode-gitlens/blob/master/BACKERS.md)
+- [**Donate via PayPal**](https://www.paypal.me/eamodio 'Donate via PayPal') or [**Donate via Cash App**](https://cash.me/$eamodio 'Donate via Cash App')
+
+Also please [write a review](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#review-details 'Write a review'), [star or fork me on GitHub](https://github.com/eamodio/vscode-gitlens 'Star or fork me on GitHub'), and [follow me on Twitter](https://twitter.com/eamodio 'Follow me on Twitter')
+
 # What's new in GitLens 9
 
 ## 9.0 &mdash; November 2018
@@ -55,60 +64,42 @@ See the [release notes](https://github.com/eamodio/vscode-gitlens/blob/master/CH
 # GitLens
 
 [GitLens](http://gitlens.amod.io 'Learn more about GitLens') is an [open-source](https://github.com/eamodio/vscode-gitlens 'Open GitLens on GitHub') extension for [Visual Studio Code](https://code.visualstudio.com) created by [Eric Amodio](http://www.amod.io 'Learn more about Eric').
-While GitLens is generously offered to everyone free of charge, if you find it useful please consider [supporting](#support-gitlens 'Support GitLens') it. &#x2764;
 
-GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Explore the history and evolution of a codebase.
+GitLens simply helps you **better understand code**. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to **gain further insights** as to how and why the code evolved. Explore the history and evolution of a codebase.
 
-Here are just some of the features that GitLens provides,
+While GitLens is **powerful and feature rich**, it is also [highly customizable](#gitlens-settings- 'Jump to the GitLens settings docs') to meet your specific needs &mdash; find code lens intrusive or the current line blame annotation distracting &mdash; no problem, it is quick and easy to turn them off or change how they behave via the built-in [_GitLens Settings_ editor](#configuration 'Jump to Configuration'), an **interactive editor** covering many of GitLens' powerful settings. While for more advanced customizations, refer to the [GitLens settings docs](#gitlens-settings- 'Jump to the GitLens settings docs') and edit your vscode [user settings](https://code.visualstudio.com/docs/getstarted/settings 'Open User settings').
 
-- an unobtrusive [current line blame](#current-line-blame- 'Jump to the Current Line Blame') annotation at the end of the line with detailed blame information accessible via [hovers](#hovers- 'Jump to Hovers')
-- on-demand [gutter blame](#gutter-blame- 'Jump to the Gutter Blame') annotations, including a heatmap, for the whole file
-- [authorship code lens](#code-lens- 'Jump to the Code Lens') showing the most recent commit and # of authors to the top of files and/or on code blocks
-- on-demand [gutter heatmap](#gutter-heatmap- 'Jump to the Gutter Heatmap') annotations to show how recently lines were changed, relative to all the other changes in the file and to now (hot vs. cold)
-- on-demand [recent changes](#recent-changes- 'Jump to the Recent Changes') annotations to highlight lines changed by the most recent commit
-- a [status bar blame](#status-bar-blame- 'Jump to the Status Bar Blame') annotation showing author and date for the current line
-- many rich Side Bar views
-  - a [_Repositories_ view](#repositories-view- 'Jump to the Repositories view') to visualize, navigate, and explore Git repositories
-  - a [_File History_ view](#file-history-view- 'Jump to the File History view') to visualize, navigate, and explore the revision history of the current file
-  - a [_Line History_ view](#line-history-view- 'Jump to the Line History view') to visualize, navigate, and explore the revision history of the selected lines of current file
-  - a [_Search Commits_ view](#search-commits-view- 'Jump to the Search Commits view') to search and explore commit histories by message, author, files, id, etc
-  - a [_Compare_ view](#compare-view- 'Jump to the Compare view') to visualize comparisons between branches, tags, commits, and more
-- many [powerful commands](#navigate-and-explore- 'Jump to the Navigate and Explorer') for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc
-- user-defined [modes](#modes- 'Jump to the Modes') for quickly toggling between sets of settings
-- and so much [more](#and-more- 'Jump to More')
+Here are just some of the **features** that GitLens provides,
 
-GitLens is powerful, feature rich, and also [highly customizable](#gitlens-settings- 'Jump to the GitLens settings docs') to meet your specific needs &mdash; find code lens intrusive or the current line blame annotation distracting &mdash; no problem, it is quick and easy to turn them off or change how they behave via the built-in [_GitLens Settings_ editor](#configuration 'Jump to Configuration'), an interactive editor covering many of GitLens' powerful settings. While for more advanced customizations, refer to the [GitLens settings docs](#gitlens-settings- 'Jump to the GitLens settings docs') and edit your vscode [user settings](https://code.visualstudio.com/docs/getstarted/settings 'Open User settings').
+- an unobtrusive [**current line blame**](#current-line-blame- 'Jump to the Current Line Blame') annotation at the end of the line with detailed blame information accessible via [**hovers**](#hovers- 'Jump to Hovers')
+- on-demand [**gutter blame**](#gutter-blame- 'Jump to the Gutter Blame') annotations, including a heatmap, for the whole file
+- [**authorship code lens**](#code-lens- 'Jump to the Code Lens') showing the most recent commit and # of authors to the top of files and/or on code blocks
+- on-demand [**gutter heatmap**](#gutter-heatmap- 'Jump to the Gutter Heatmap') annotations to show how recently lines were changed, relative to all the other changes in the file and to now (hot vs. cold)
+- on-demand [**recent changes**](#recent-changes- 'Jump to the Recent Changes') annotations to highlight lines changed by the most recent commit
+- a [**status bar blame**](#status-bar-blame- 'Jump to the Status Bar Blame') annotation showing author and date for the current line
+- many rich Side Bar views
+  - a [**_Repositories_ view**](#repositories-view- 'Jump to the Repositories view') to visualize, navigate, and explore Git repositories
+  - a [**_File History_ view**](#file-history-view- 'Jump to the File History view') to visualize, navigate, and explore the revision history of the current file
+  - a [**_Line History_ view**](#line-history-view- 'Jump to the Line History view') to visualize, navigate, and explore the revision history of the selected lines of current file
+  - a [**_Search Commits_ view**](#search-commits-view- 'Jump to the Search Commits view') to search and explore commit histories by message, author, files, id, etc
+  - a [**_Compare_ view**](#compare-view- 'Jump to the Compare view') to visualize comparisons between branches, tags, commits, and more
+- many [**powerful commands**](#navigate-and-explore- 'Jump to the Navigate and Explorer') for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc
+- user-defined [**modes**](#modes- 'Jump to the Modes') for quickly toggling between sets of settings
+- and so much [**more**](#and-more- 'Jump to More')
 
 <p align="center">
   <br />
   <img src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/develop/images/docs/gitlens-preview.gif" alt="GitLens Preview" />
   <br />
 </p>
 
-# Support GitLens
-
-While GitLens is generously offered to everyone free of charge, if you find it useful please consider supporting it.
-
-I've been building GitLens in my spare time<sup><a title="nights and weekends, i.e. trading sleep for time">1</a></sup> for over 2 years now.
-From its very humble beginnings, GitLens has grown wildly beyond my expectations &mdash; in both its reach as well as its demands on my time and attention.
-
-To my incredible backers &mdash; thank you so much for your contributions. I am truly humbled by your generosity and support.
-
-### Show Your Support &#x2764;
-
-Please join in supporting GitLens by considering the following:
-
-- [Become a Sponsor](https://www.patreon.com/eamodio 'Become a sponsor on Patreon') &mdash; join the growing group of generous [backers](https://github.com/eamodio/vscode-gitlens/blob/master/BACKERS.md)
-- [Donate via PayPal](https://www.paypal.me/eamodio 'Donate via PayPal') or [Donate via Cash App](https://cash.me/$eamodio 'Donate via Cash App')
-- [Write a review](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#review-details 'Write a review'), [Star or Fork me on GitHub](https://github.com/eamodio/vscode-gitlens 'Star or fork me on GitHub'), and [Follow me on Twitter](https://twitter.com/eamodio 'Follow me on Twitter')
-
 # Configuration
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/develop/images/docs/settings.png" alt="GitLens Interactive Settings" />
 </p>
 
-GitLens has a built-in interactive settings editor which provides an easy-to-use interface to configure many of GitLens' powerful features. It can be accessed via the _Open Settings_ (`gitlens.showSettingsPage`) command from the [_Command Palette_](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).
+GitLens has a built-in **interactive settings editor** which provides an easy-to-use interface to configure many of GitLens' powerful features. It can be accessed via the _Open Settings_ (`gitlens.showSettingsPage`) command from the [_Command Palette_](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).
 
 For more advanced customizations, refer to the [settings documentation](#gitlens-settings- 'Jump to the GitLens settings docs') below.
 

src/ui/scss/main.scss

@@ -370,17 +370,29 @@ ul {
 }
 
 .button-group--support-gitlens-sidebar {
-    font-size: 0.8em;
+    margin-bottom: 1em;
 
     & .button {
         font-weight: 400;
         margin: 0.75em 0;
+        text-align: center;
+        width: 100%;
+    }
+}
+
+.about {
+    font-size: 1em;
+    color: var(--color--75);
+    margin: 3em 1em;
+
+    b {
+        color: var(--color--85);
     }
 }
 
 .changelog {
     border-radius: 1em;
-    margin: 2em 4em 2em 2em;
+    margin: 2em;
 
     .vscode-light & {
         background-color: var(--background-color--darken-05);
@@ -401,6 +413,7 @@ ul {
     display: inline-block;
     font-size: 11px;
     font-weight: 600;
+    line-height: 1.7;
     margin-right: 1.25em;
     padding: 2px 5px;
     text-align: center;
@@ -424,7 +437,7 @@ ul {
 }
 
 .changelog__date {
-    font-size: 0.8em;
+    font-size: 0.9em;
     font-variant: small-caps;
     font-weight: 600;
     margin-left: -7px;
@@ -435,8 +448,9 @@ ul {
 .changelog__details {
     align-items: center;
     display: flex;
+    font-size: 0.9em;
     justify-content: center;
-    padding: 0 7em;
+    padding-left: 8em;
     position: relative;
 
     &:before {
@@ -468,20 +482,19 @@ ul {
 }
 
 .changelog__image {
-    margin: 1em 0;
+    margin: 1em 0 0 0;
     max-width: 65%;
 }
 
 .changelog__list {
     flex: 100% 0 1;
-    font-size: 1.2em;
+    font-size: 1.1em;
     font-weight: 200;
-    line-height: 1.7;
     list-style-type: none;
     margin: 1em;
 
     & li {
-        margin-bottom: 0.5em;
+        margin-bottom: 1em;
     }
 
     & code {
@@ -502,23 +515,9 @@ ul {
     }
 }
 
-.changelog__scroller {
-    flex: 100% 0 0;
-    margin: 1.5em 0 0 0;
-    max-height: 400px;
-    overflow-y: auto;
-
-    .vscode-dark & {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-    }
-
-    .vscode-light & {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    }
-}
-
 .changelog__title {
     flex: 100% 0 0;
+    font-size: 2em;
     text-align: center;
 }
 
@@ -557,7 +556,7 @@ ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    margin-bottom: 3em;
+    margin: 3em 0;
 
     & p {
         margin-top: -1em;
@@ -785,7 +784,7 @@ ul {
     display: flex;
     flex: 1 1 100%;
     justify-content: flex-end;
-    margin: 1.5em 208px 0 0; // 208px ~ the width of the sidebar
+    margin: 1.5em 174px 0 0; // 174px ~ the width of the sidebar
     white-space: nowrap;
 
     @media all and (max-width: 860px) {
@@ -878,14 +877,15 @@ ul {
 
 .section-group__content {
     flex: auto 1 1;
-    margin-bottom: 100%;
     min-width: 0;
 }
 
+.section-group__content--full-scroll {
+    margin-bottom: 100%;
+}
+
 .section-group__sidebar {
     align-self: flex-start;
-    margin: -6.4em 0 0 3em;
-    max-width: 179px;
     position: sticky;
     top: 0;
     z-index: 2;
@@ -896,13 +896,17 @@ ul {
 }
 
 .section-group__sidebar--settings {
+    flex: 145px 0 0;
+    margin: -4em 0 0 3em;
+
     @media all and (max-width: 860px) {
         display: none;
     }
 }
 
 .section-group__sidebar--welcome {
-    margin-right: 3em;
+    flex: 196px 0 0;
+    margin: 1em 0 0 0.5em;
 
     @media all and (max-width: 560px) {
         display: none;
@@ -914,7 +918,7 @@ ul {
     font-weight: 200;
 
     p {
-        margin: 1em 0.25em;
+        margin: 0.5em 0.25em 1em 0.25em;
     }
 }
 
@@ -999,6 +1003,21 @@ ul {
     }
 }
 
+.settings-group__setting--small {
+    color: var(--color--75);
+    font-size: 0.8em;
+    margin-top: -0.75em;
+
+    input[type='checkbox'] {
+        flex: 12px 0 0;
+        height: 12px;
+        margin: 0 0.75em 0 0;
+        position: relative;
+        top: 3px;
+        width: 12px;
+    }
+}
+
 .setting__hint {
     color: var(--color--50);
     font-size: 0.9em;
@@ -1013,6 +1032,12 @@ ul {
     margin-top: 1em;
 }
 
+.sidebar-group__message {
+    font-weight: 400;
+    opacity: 0.5;
+    text-align: center;
+}
+
 .sponsors {
     font-size: 0.8em;
 }

src/ui/settings/index.html

@@ -53,7 +53,7 @@ <h2 class="page-header__title">Settings</h2>
                         <a
                             title="See the GitLens settings docs"
                             href="https://github.com/eamodio/vscode-gitlens/tree/develop/#gitlens-settings-"
-                            >GitLens settings docs</a
+                            >GitLens docs</a
                         >
                         and edit your
                         <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
@@ -63,7 +63,7 @@ <h2 class="page-header__title">Settings</h2>
                 </div>
 
                 <div class="section-groups">
-                    <div class="section-group__content">
+                    <div class="section-group__content section-group__content--full-scroll">
                         <section id="general">
                             <div class="section__header">
                                 <h2 class="section__title">
@@ -2780,53 +2780,6 @@ <h2>Jump to</h2>
                                 <li><a class="jump-to" href="#modes" title="Jump to Modes settings">Modes</a></li>
                             </ul>
                         </div>
-                        <div class="sidebar-group">
-                            <h2>Show Your Support</h2>
-                            <div class="button-group button-group--support-gitlens-sidebar">
-                                <a
-                                    class="button button--flat-primary"
-                                    title="Become a sponsor on Patreon"
-                                    href="https://www.patreon.com/eamodio"
-                                    target="_blank"
-                                    >Become a Sponsor</a
-                                >
-                                <a
-                                    class="button button--flat-primary"
-                                    title="Donate via PayPal"
-                                    href="https://www.paypal.me/eamodio"
-                                    target="_blank"
-                                    >Donate via PayPal</a
-                                >
-                                <a
-                                    class="button button--flat-primary"
-                                    title="Donate via Cash App"
-                                    href="https://cash.me/$eamodio"
-                                    target="_blank"
-                                    >Donate via Cash App</a
-                                >
-                            </div>
-                            <ul>
-                                <li>
-                                    <a
-                                        title="Write a review"
-                                        href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#review-details"
-                                        >Write a Review</a
-                                    >
-                                </li>
-                                <li>
-                                    <a
-                                        title="Star or fork me on GitHub"
-                                        href="https://github.com/eamodio/vscode-gitlens"
-                                        >Star or Fork me on GitHub</a
-                                    >
-                                </li>
-                                <li>
-                                    <a title="Follow me on Twitter" href="https://twitter.com/eamodio"
-                                        >Follow me on Twitter</a
-                                    >
-                                </li>
-                            </ul>
-                        </div>
                         <div class="sidebar-group">
                             <h2>Help</h2>
                             <ul>

src/ui/shared/app-base.ts

@@ -308,6 +308,7 @@ export abstract class App<TBootstrap extends Bootstrap> {
 
             const bodyStyle = body.style;
             let color = computedStyle.getPropertyValue('--color').trim();
+            bodyStyle.setProperty('--color--85', opacity(color, 85));
             bodyStyle.setProperty('--color--75', opacity(color, 75));
             bodyStyle.setProperty('--color--50', opacity(color, 50));