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>

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

@ -25,24 +25,25 @@
<span slot="description">{{ project.description }}</span> <span slot="description">{{ project.description }}</span>
</awesome-header> </awesome-header>
<main> <main>
<p> <section style="font-size: larger;">
Our <p>
<a href="https://www.npmjs.com/package/web-component-base"> Our
tiny package <a href="https://www.npmjs.com/package/web-component-base">
</a> tiny package
provides zero-dependency, ~600 Bytes (minified & gzipped), JS base class </a>
for creating reactive custom elements easily. provides zero-dependency, ~600 Bytes (minified & gzipped), JS base class
</p> for creating reactive custom elements easily.
<call-to-action /> </p>
<p> <call-to-action />
When you extend the WebComponent class for your component, you only have </section>
to define the template and properties. Any change in any property value <section>
will automatically cause just the component UI to render. <p>
</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> <p>The result is a reactive UI on property changes: <my-counter></my-counter></p>
<code-block language="js"> <code-block language="js">
<pre> <pre>
import WebComponent from &quot;https://unpkg.com/web-component-base@1.13.0/WebComponent.min.js&quot;; import WebComponent from &quot;https://unpkg.com/web-component-base@1.13.0/WebComponent.min.js&quot;;
export class Counter extends WebComponent { export class Counter extends WebComponent {
@ -57,17 +58,18 @@ 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>