ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(site): adjust sizes and spaces

Browse source
This commit is contained in:
Ayo 2023-11-23 08:21:37 +01:00
parent 851df8da14
commit 1b297859db
3 changed files with 27 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
site/src/components/call-to-action.html
View file

@ -8,7 +8,7 @@
style=" style="
background-color: var(--color-primary); background-color: var(--color-primary);
color: white; color: white;
padding: 1em; padding: 0.75em;
border-radius: 5px; border-radius: 5px;
text-decoration: none; text-decoration: none;
" "

3
site/src/components/my-footer.html
View file

@ -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 /> <slot />
</footer> </footer>

16
site/src/pages/index.html
View file

@ -25,6 +25,7 @@
<span slot="description">{{ project.description }}</span> <span slot="description">{{ project.description }}</span>
</awesome-header> </awesome-header>
<main> <main>
<section style="font-size: larger;">
<p> <p>
Our Our
<a href="https://www.npmjs.com/package/web-component-base"> <a href="https://www.npmjs.com/package/web-component-base">
@ -34,10 +35,10 @@
for creating reactive custom elements easily. for creating reactive custom elements easily.
</p> </p>
<call-to-action /> <call-to-action />
</section>
<section>
<p> <p>
When you extend the WebComponent class for your component, you only have 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.
to define the template and properties. Any change in any property value
will automatically cause just the component UI to render.
</p> </p>
<p>The result is a reactive UI on property changes: <my-counter></my-counter></p> <p>The result is a reactive UI on property changes: <my-counter></my-counter></p>
@ -59,15 +60,16 @@ export class Counter extends WebComponent {
customElements.define(&quot;my-counter&quot;, Counter); customElements.define(&quot;my-counter&quot;, Counter);
</pre> </pre>
</code-block> </code-block>
</section>
</main> </main>
<my-footer> <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> --> <!-- <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 <a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework framework
</small><br /> </span><br />
<small> <span>
A project by <a href="{{ author.url }}">{{ author.name }}</a> A project by <a href="{{ author.url }}">{{ author.name }}</a>
</small> </span>
</my-footer> </my-footer>
</body> </body>
</html> </html>