Update docs

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>
         `;

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;
 }

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.