From bda00b51b321b46e07f7053987d964b41c5bf01b Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 24 Nov 2023 01:11:10 +0100
Subject: [PATCH] style(site): spacing, colors, hover

---
 site/src/components/awesome-header.html |  2 +-
 site/src/components/call-to-action.html | 10 +++++++---
 site/src/components/my-head.html        |  1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/site/src/components/awesome-header.html b/site/src/components/awesome-header.html
index 08452c2..9fd5d41 100644
--- a/site/src/components/awesome-header.html
+++ b/site/src/components/awesome-header.html
@@ -9,7 +9,7 @@
     background: linear-gradient(45deg, #3054bf, #416fff);
     color: white;
     margin: 1em 0;
-    padding: 1em;
+    padding: 1.5em;
 
     & a {
       color: white;
diff --git a/site/src/components/call-to-action.html b/site/src/components/call-to-action.html
index 219972d..36466f8 100644
--- a/site/src/components/call-to-action.html
+++ b/site/src/components/call-to-action.html
@@ -3,7 +3,7 @@
     href="https://www.npmjs.com/package/web-component-base#readme">
     Learn More
   </a>
-  <a href="https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010">Playground</a>
+  <a href="https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010">Playground &rarr;</a>
 </div>
 
 <style>
@@ -15,15 +15,19 @@
   width: 100%;
 
   & a {
-    border: 1px solid var(--color-primary);
+    border: 3px solid var(--color-fade);
     padding: 0.75em;
     border-radius: 5px;
     text-align: center;
+    text-decoration: none;
+
+    &:hover {
+      box-shadow: 0 0 0 3px var(--color-fade);
+    }
 
     &#primary {
         background: #3054bf;
         color: white;
-        text-decoration: none;
         width: 40%;
     }
   }
diff --git a/site/src/components/my-head.html b/site/src/components/my-head.html
index ab35641..ef89f1f 100644
--- a/site/src/components/my-head.html
+++ b/site/src/components/my-head.html
@@ -24,6 +24,7 @@
   <style>
     :root {
       --color-primary: #3054bf;
+      --color-fade: #416fff;
     }
     body {
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;