style(site): adjust sizes and spaces

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;
     "

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>

site/src/pages/index.html

@@ -25,6 +25,7 @@
       <span slot="description">{{ project.description }}</span>
     </awesome-header>
     <main>
+      <section style="font-size: larger;">
         <p>
           Our
           <a href="https://www.npmjs.com/package/web-component-base">
@@ -34,10 +35,10 @@
           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.
+          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>
@@ -57,17 +58,18 @@ export class Counter extends WebComponent {
 }
 
 customElements.define(&quot;my-counter&quot;, Counter);
-</pre>
+          </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>