From 8c221f33a892c0392dac0bbff548b1bdc582ccbe Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 18 Aug 2021 09:52:51 -0400
Subject: [PATCH] docs styles

---
 docs/assets/plugins/code-block/code-block.css | 10 ++--
 docs/assets/plugins/metadata/metadata.js      | 20 +++----
 docs/assets/styles/docs.css                   | 56 +++----------------
 docs/getting-started/overview.md              | 12 ++--
 4 files changed, 28 insertions(+), 70 deletions(-)

diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index 31858021..1d8e1590 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -5,10 +5,6 @@
   margin-bottom: 1.5rem;
 }
 
-.sl-theme-dark .code-block {
-  background-color: rgb(var(--sl-color-neutral-200));
-}
-
 .code-block__preview {
   position: relative;
   border: solid 1px rgb(var(--sl-color-neutral-200));
@@ -170,11 +166,13 @@
 .markdown-section .docsify-copy-code-button {
   top: 4px;
   right: 4px;
-  background-color: rgb(var(--sl-color-neutral-500));
+  background-color: rgb(var(--sl-color-neutral-600));
   border-radius: var(--sl-border-radius-medium);
   font-family: var(--sl-font-sans);
-  font-size: var(--sl-font-size-small);
+  font-size: var(--sl-font-size-x-small);
   font-weight: var(--sl-font-weight-semibold);
+  text-transform: uppercase;
+  padding: 8px;
   user-select: none;
 }
 
diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 2e232d74..6e5385bc 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -289,16 +289,16 @@
       const buttons = document.createElement('div');
       buttons.classList.add('sidebar-buttons');
       buttons.innerHTML = `
-          <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 repo-button--small repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" rel="noopener" target="_blank">
-            <sl-icon name="github"></sl-icon> <span class="github-star-count">Star</span>
-          </a>
-          <a class="repo-button repo-button--small repo-button--twitter" href="https://twitter.com/shoelace_style" rel="noopener" target="_blank">
-            <sl-icon name="twitter"></sl-icon> Follow
-          </a>
-        `;
+        <sl-button size="small" class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" target="_blank">
+          <sl-icon name="heart"></sl-icon> Sponsor
+        </sl-button>
+        <sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
+          <sl-icon name="github"></sl-icon> <span class="github-star-count">Star</span>
+        </sl-button>
+        <sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
+          <sl-icon name="twitter"></sl-icon> Follow
+        </sl-button>
+      `;
       target.appendChild(buttons);
     });
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index f5fbc87f..08736c69 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -22,6 +22,10 @@ a {
   color: rgb(var(--sl-color-primary-600));
 }
 
+a:hover {
+  color: rgb(var(--sl-color-primary-700));
+}
+
 strong {
   font-weight: var(--sl-font-weight-bold);
 }
@@ -567,59 +571,15 @@ strong {
 }
 
 /* Repo buttons */
-html .repo-button {
-  display: inline-flex;
-  align-items: center;
-  background-color: rgb(var(--sl-color-neutral-1000));
-  border: solid 1px rgb(var(--sl-color-neutral-200));
-  border-radius: var(--sl-border-radius-medium);
-  box-shadow: var(--sl-shadow-x-small);
-  font-size: var(--sl-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-  line-height: 2;
-  text-decoration: none;
-  color: rgb(var(--sl-color-neutral-700));
-  padding: var(--sl-spacing-xx-small) var(--sl-spacing-small);
-  margin-bottom: var(--sl-spacing-xx-small);
-  transition: 0.25s all;
-}
-
-html .repo-button:hover {
-  text-decoration: none;
-  background-color: rgb(var(--sl-color-neutral-50));
-  border: solid 1px rgb(var(--sl-color-neutral-200));
-}
-
-html .repo-button:focus {
-  outline: none;
-  border-color: rgb(var(--sl-color-primary-500));
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
-}
-
-html .repo-button:not(:last-of-type) {
-  margin-right: 0.125rem;
-}
-
-html .repo-button sl-icon {
-  position: relative;
-  vertical-align: middle;
-  margin-right: 0.35rem;
-}
-
-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 {
+.repo-button--sponsor sl-icon {
   color: rgb(var(--sl-color-pink-500));
 }
 
-html .repo-button--github sl-icon {
-  color: rgb(var(--sl-color-neutral-600));
+.repo-button--github sl-icon {
+  color: rgb(var(--sl-color-neutral-700));
 }
 
-html .repo-button--twitter sl-icon {
+.repo-button--twitter sl-icon {
   color: rgb(var(--sl-color-sky-500));
 }
 
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 61872f11..e5ccf95d 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -99,17 +99,17 @@ Designing, developing, and supporting this library requires a lot of time, effor
 
 👇 Your support is very much appreciated! 👇
 
-<a class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
+<sl-button class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" target="_blank">
   <sl-icon name="heart"></sl-icon> Become a sponsor
-</a>
+</sl-button>
 
-<a class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" rel="noopener" target="_blank">
+<sl-button class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
   <sl-icon name="github"></sl-icon> <span class="github-star-count">Star</span>
-</a>
+</sl-button>
 
-<a class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" rel="noopener" target="_blank">
+<sl-button class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
   <sl-icon name="twitter"></sl-icon> Follow
-</a>
+</sl-button>
 
 ## Attribution