From 1b297859db5b75569166aa916c9145fa729a88d2 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 23 Nov 2023 08:21:37 +0100
Subject: [PATCH] style(site): adjust sizes and spaces

---
 site/src/components/call-to-action.html |  2 +-
 site/src/components/my-footer.html      |  3 +-
 site/src/pages/index.html               | 48 +++++++++++++------------
 3 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/site/src/components/call-to-action.html b/site/src/components/call-to-action.html
index 6796be1..4626820 100644
--- a/site/src/components/call-to-action.html
+++ b/site/src/components/call-to-action.html
@@ -8,7 +8,7 @@
     style="
         background-color: var(--color-primary);
         color: white;
-        padding: 1em;
+        padding: 0.75em;
         border-radius: 5px;
         text-decoration: none;
     "
diff --git a/site/src/components/my-footer.html b/site/src/components/my-footer.html
index b9461db..08b91ac 100644
--- a/site/src/components/my-footer.html
+++ b/site/src/components/my-footer.html
@@ -1,4 +1,3 @@
-<footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
-
+<footer style="text-align: right; font-style: italic; padding:0.5em 1em 1em;">
     <slot />
 </footer>
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 0fd479c..31e131c 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -25,24 +25,25 @@
       <span slot="description">{{ project.description }}</span>
     </awesome-header>
     <main>
-      <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.
-      </p>
-      <call-to-action />
-      <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>
+      <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.
+        </p>
+        <call-to-action />
+      </section>
+      <section>
+        <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>
 
-      <p>The result is a reactive UI on property changes: <my-counter></my-counter></p>
-      <code-block language="js">
-        <pre>
+        <p>The result is a reactive UI on property changes: <my-counter></my-counter></p>
+        <code-block language="js">
+          <pre>
 import WebComponent from &quot;https://unpkg.com/web-component-base@1.13.0/WebComponent.min.js&quot;;
 
 export class Counter extends WebComponent {
@@ -57,17 +58,18 @@ export class Counter extends WebComponent {
 }
 
 customElements.define(&quot;my-counter&quot;, Counter);
-</pre>
-      </code-block>
+          </pre>
+        </code-block>
+      </section>
     </main>
     <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> -->
-      <small>This site is built with
+      <span>This site is built with
         <a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework framework
-      </small><br />
-      <small>
+      </span><br />
+      <span>
         A project by <a href="{{ author.url }}">{{ author.name }}</a>
-      </small>
+      </span>
     </my-footer>
   </body>
 </html>