Make cards clickable

This commit is contained in:
Vincent (Wen Yu) Ge
2023-09-27 16:16:05 -04:00
parent 21574cde5b
commit d5c47eb2af
3 changed files with 8 additions and 10 deletions

View File

@@ -140,7 +140,7 @@
<div class="u-flex u-gap-4 u-margin-inline-start-auto"> <div class="u-flex u-gap-4 u-margin-inline-start-auto">
<span class="aw-kbd" aria-label="command"></span> <span class="aw-kbd" aria-label="command"></span>
<span class="aw-kbd">k</span> <span class="aw-kbd">K</span>
</div> </div>
</button> </button>
</div> </div>

View File

@@ -115,13 +115,11 @@
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2"> <ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
{#each category.quickStarts as quickStart} {#each category.quickStarts as quickStart}
<li class="is-mobile-col-span-2"> <li class="is-mobile-col-span-2">
<a href={`/docs/quick-starts/${quickStart.href}`}> <a href={`/docs/quick-starts/${quickStart.href}`} class="aw-card is-normal">
<article class="aw-card is-full-color">
<header class="u-flex u-cross-baseline u-gap-4"> <header class="u-flex u-cross-baseline u-gap-4">
<span class="{quickStart.icon} aw-u-font-size-24" aria-hidden="true" /> <span class="{quickStart.icon} aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">{quickStart.title}</h4> <h4 class="aw-sub-body-500 aw-u-color-text-primary">{quickStart.title}</h4>
</header> </header>
</article>
</a> </a>
</li> </li>
{/each} {/each}

View File

@@ -17,7 +17,7 @@
<h2 class="aw-eyebrow">Client</h2> <h2 class="aw-eyebrow">Client</h2>
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2"> <ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
<li class="is-mobile-col-span-2"> <li class="is-mobile-col-span-2">
<article class="aw-card is-full-color"> <a href="/docs/tutorials/react" class="aw-card is-normal">
<header class="u-flex u-cross-baseline u-gap-4"> <header class="u-flex u-cross-baseline u-gap-4">
<span class="icon-react aw-u-font-size-24" aria-hidden="true" /> <span class="icon-react aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">React</h4> <h4 class="aw-sub-body-500 aw-u-color-text-primary">React</h4>
@@ -25,10 +25,10 @@
<p class="aw-sub-body-400 u-margin-block-start-4"> <p class="aw-sub-body-400 u-margin-block-start-4">
Learn Appwrite Auth, Databases, and more with React. Learn Appwrite Auth, Databases, and more with React.
</p> </p>
</article> </a>
</li> </li>
<li class="is-mobile-col-span-2"> <li class="is-mobile-col-span-2">
<article class="aw-card is-full-color"> <a href="/docs/tutorials/vue" class="aw-card is-normal">
<header class="u-flex u-cross-baseline u-gap-4"> <header class="u-flex u-cross-baseline u-gap-4">
<span class="icon-vue aw-u-font-size-24" aria-hidden="true" /> <span class="icon-vue aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Vue</h4> <h4 class="aw-sub-body-500 aw-u-color-text-primary">Vue</h4>
@@ -36,10 +36,10 @@
<p class="aw-sub-body-400 u-margin-block-start-4"> <p class="aw-sub-body-400 u-margin-block-start-4">
Learn Appwrite Auth, Databases, and more with Vue. Learn Appwrite Auth, Databases, and more with Vue.
</p> </p>
</article> </a>
</li> </li>
<li class="is-mobile-col-span-2"> <li class="is-mobile-col-span-2">
<article class="aw-card is-full-color"> <a href="/docs/tutorials/sveltekit" class="aw-card is-normal">
<header class="u-flex u-cross-baseline u-gap-4"> <header class="u-flex u-cross-baseline u-gap-4">
<span class="icon-svelte aw-u-font-size-24" aria-hidden="true" /> <span class="icon-svelte aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">SvelteKit</h4> <h4 class="aw-sub-body-500 aw-u-color-text-primary">SvelteKit</h4>
@@ -47,7 +47,7 @@
<p class="aw-sub-body-400 u-margin-block-start-4"> <p class="aw-sub-body-400 u-margin-block-start-4">
Learn Appwrite Auth, Databases, and more with SvelteKit. Learn Appwrite Auth, Databases, and more with SvelteKit.
</p> </p>
</article> </a>
</li> </li>
<li class="is-mobile-col-span-2"> <li class="is-mobile-col-span-2">
<article class="aw-card is-full-color"> <article class="aw-card is-full-color">