From 6cb279333d31d40201d13d7142db6dd7e4d9d6ca Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 7 Jul 2020 17:51:13 -0400
Subject: [PATCH] Update docs

---
 docs/assets/plugins/metadata/metadata.js |  6 +++---
 docs/assets/styles/docs.css              | 13 +++++++------
 docs/getting-started/overview.md         |  9 +++++++--
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index c5b936594..28bcb81d2 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -238,13 +238,13 @@
         const buttons = document.createElement('div');
         buttons.classList.add('sidebar-buttons');
         buttons.innerHTML = `
-          <a class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
+          <a class="repo-button repo-button--small repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
             <sl-icon name="heart"></sl-icon> Sponsor
           </a>
-          <a class="repo-button" href="https://github.com/claviska/shoelace" rel="noopener" target="_blank">
+          <a class="repo-button repo-button--small" href="https://github.com/claviska/shoelace" rel="noopener" target="_blank">
             <sl-icon name="star"></sl-icon> Star
           </a>
-          <a class="repo-button" href="https://twitter.com/shoelaceui" rel="noopener" target="_blank">
+          <a class="repo-button repo-button--small" href="https://twitter.com/shoelaceui" rel="noopener" target="_blank">
             <sl-icon src="/assets/images/twitter.svg" style="transform: scale(1.5);"></sl-icon> Follow
           </a>
         `;
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 233df79e8..c9e65c567 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -202,11 +202,11 @@ html .repo-button {
   border: solid 1px var(--sl-color-gray-85);
   border-radius: var(--sl-border-radius-medium);
   box-shadow: var(--sl-shadow-x-small);
-  font-size: var(--sl-font-size-x-small);
+  font-size: var(--sl-font-size-small);
   font-weight: var(--sl-font-weight-semibold);
   text-decoration: none;
   color: var(--sl-color-gray-30);
-  padding: var(--sl-spacing-xxx-small) var(--sl-spacing-x-small);
+  padding: var(--sl-spacing-xx-small) var(--sl-spacing-small);
   transition: 0.25s all;
 }
 
@@ -226,10 +226,6 @@ html .repo-button:not(:last-of-type) {
   margin-right: .125rem;
 }
 
-html .repo-button {
-  margin-right: 0.25rem;
-}
-
 html .repo-button sl-icon {
   position: relative;
   top: -1px;
@@ -241,6 +237,11 @@ html .repo-button sl-icon[name="star"] {
   top: -2px;
 }
 
+html .repo-button--small {
+  font-size: var(--sl-font-size-x-small);
+  padding: var(--sl-spacing-xxx-small) var(--sl-spacing-x-small);
+}
+
 html .repo-button--sponsor sl-icon {
   color: #ea4aaa;
 }
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 7a8a3334f..de64c9c00 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -52,10 +52,15 @@ Components are tested to work in the last two versions of the following browsers
 
 If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using Shoelace in such a browser, you're gonna have a bad time. ⛷
 
-## Attribution
+
+## License
 
 Shoelace was designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the MIT license.
 
+Designing, developing, and supporting this library requires a lot of time, effort, and skill. I'd like to keep it open source so anyone can use it, but that doesn't provide me with an income.
+
+**If you're using my software to make profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with  benefits at various levels, including prioritized support, bug fixes, feature requests, and advertising.
+
 <a class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
   <sl-icon name="heart"></sl-icon> Become a sponsor
 </a>
@@ -68,7 +73,7 @@ Shoelace was designed in New Hampshire by [Cory LaViska](https://twitter.com/cla
   <sl-icon src="/assets/images/twitter.svg" style="transform: scale(1.5);"></sl-icon> Follow
 </a>
 
-?> If you enjoy using this software, [please sponsor me](https://github.com/sponsors/claviska) so I can continue working on it!
+## Attribution
 
 Special thanks to the following projects and individuals that helped make Shoelace possible.