From 80b678da27392c379f2f3a11a4f1792b31ba206f Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 24 Nov 2023 00:29:12 +0100
Subject: [PATCH] style(site): spacing, colors, responsiveness

---
 site/src/components/awesome-header.html | 35 ++++++++++++++++++-------
 site/src/components/call-to-action.html | 18 +++++++++++--
 site/src/pages/index.html               | 12 +++------
 3 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/site/src/components/awesome-header.html b/site/src/components/awesome-header.html
index d11be20..371a2ee 100644
--- a/site/src/components/awesome-header.html
+++ b/site/src/components/awesome-header.html
@@ -1,14 +1,31 @@
-<header
-  style="
+<header class="my-header">
+  <h1><slot /></h1>
+  <slot name="description" />
+</header>
+
+<style>
+  .my-header {
     border-radius: 5px;
     background: linear-gradient(45deg, #3054bf, #416fff);
     color: white;
     margin: 1em 0;
     padding: 1em;
-  "
->
-  <a style="color: white" href="/">
-    <h1><slot /></h1>
-  </a>
-  <slot name="description" />
-</header>
+
+    & a {
+      color: white;
+    }
+  }
+
+  @media only screen and (max-device-width: 376px) {
+    .my-header {
+      & h1 {
+        font-size: 1.5em;
+        line-clamp: 1;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;  
+        overflow: hidden;
+      }
+    }
+  }
+</style>
diff --git a/site/src/components/call-to-action.html b/site/src/components/call-to-action.html
index bc3c1ba..4738cd5 100644
--- a/site/src/components/call-to-action.html
+++ b/site/src/components/call-to-action.html
@@ -11,7 +11,6 @@
   display: flex;
   gap: 1em;
   justify-content: center;
-  padding: 1em;
   margin: 1em 0;
   width: 100%;
 
@@ -19,12 +18,27 @@
     border: 1px solid var(--color-primary);
     padding: 0.75em;
     border-radius: 5px;
+    text-align: center;
 
     &#primary {
-        background-color: var(--color-primary);
+        background: #3054bf;
         color: white;
         text-decoration: none;
+        width: 40%;
     }
+
+
   }
+
 }
+
+    @media only screen and (max-device-width: 376px) {
+      .call-to-action {
+        flex-direction: column;
+        & a:not(#primary) {
+          padding: 0.5em;
+        }
+      }
+
+    }
 </style>
\ No newline at end of file
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 31e131c..3bf4438 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -27,16 +27,12 @@
     <main>
       <section style="font-size: larger;">
         <p>
-          Our
-          <a href="https://www.npmjs.com/package/web-component-base">
-            tiny package
-          </a>
-          provides zero-dependency, ~600 Bytes (minified & gzipped), JS base class
-          for creating reactive custom elements easily.
+          Our <a href="https://www.npmjs.com/package/web-component-base">tiny package</a> provides a zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily.
         </p>
         <call-to-action />
       </section>
-      <section>
+      <hr style="margin: 2em 0;" />
+      <section style="font-size: large;">
         <p>
           When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.
         </p>
@@ -65,7 +61,7 @@ customElements.define(&quot;my-counter&quot;, Counter);
     <my-footer>
       <!-- <p>View page <a href="https://github.com/ayoayco/web-component-base/blob/main/site/src/pages/index.html">source code</a></p> -->
       <span>This site is built with
-        <a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework framework
+        <a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework framework;
       </span><br />
       <span>
         A project by <a href="{{ author.url }}">{{ author.name }}</a>