style(site): spacing, colors, hover

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;

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

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;