style(site): spacing, colors, responsiveness

site/src/components/awesome-header.html

@@ -1,14 +1,31 @@
-<header
+<header class="my-header">
-  style="
+  <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 {
-  <a style="color: white" href="/">
+      color: white;
-    <h1><slot /></h1>
+    }
-  </a>
+  }
-  <slot name="description" />
+
-</header>
+  @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>

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>

site/src/pages/index.html

@@ -27,16 +27,12 @@
     <main>
       <section style="font-size: larger;">
         <p>
-          Our
+          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.
-          <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.
         </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>