LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-07 04:22:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change tutorials to follow design

Browse Source
This commit is contained in:
Vincent (Wen Yu) Ge
2024-01-11 20:30:58 +00:00
parent 2bb5302786
commit 9b3f0234b4
11 changed files with 74 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/routes/docs/tutorials/+page.svelte
View File

@@ -52,58 +52,57 @@
<header class="aw-article-header">
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
<div class="u-position-relative u-flex u-cross-center">
<h1 class="aw-title">Platforms</h1>
<h1 class="aw-title">Tutorials</h1>
</div>
</div>
<div class="aw-article-header-end" />
</header>
<div class="aw-article-content aw-u-gap-80">
<section class="u-flex-vertical u-gap-24">
<h2 class="aw-eyebrow">Client</h2>
<ul class="tutorial-grid">
{#each data.tutorials as tutorial}
<li>
<a href={tutorial.href} class="aw-card is-normal">
<header>
<span
class="{getIcon(tutorial)} aw-u-font-size-24"
aria-hidden="true"
/>
<h3 class="aw-sub-body-500 aw-u-color-text-primary">
{tutorial.framework}
</h3>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">
{tutorial.title}
</p>
</a>
</li>
{/each}
</ul>
<ul class="tutorial-grid">
{#each data.drafts as draft}
<li>
<a
href={draft.href}
class="aw-card is-normal draft"
aria-disabled="true"
tabindex="-1"
>
<header>
<span
class="{getIcon(draft)} aw-u-font-size-24"
aria-hidden="true"
/>
<h3 class="aw-sub-body-500 aw-u-color-text-primary">
{draft.framework}
</h3>
<span class="badge aw-caption-400">Coming Soon</span>
</header>
</a>
</li>
{/each}
</ul>
</section>
{#each data.tutorials as category}
<section class="u-flex-vertical u-gap-24">
<h2 class="aw-eyebrow">{category.title}</h2>
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
{#each category.tutorials as tutorial}
<li>
{#if tutorial.draft === true}
<a
href={tutorial.href}
class="aw-card is-normal draft"
aria-disabled="true"
tabindex="-1"
>
<header class="u-flex u-cross-baseline u-gap-4">
<span
class="{getIcon(tutorial)} aw-u-font-size-24"
aria-hidden="true"
/>
<h3 class="aw-sub-body-500 aw-u-color-text-primary">
{tutorial.framework}
</h3>
<span class="badge aw-caption-400">Coming Soon</span>
</header>
</a>
{:else}
<a href={tutorial.href} class="aw-card is-normal">
<header class="u-flex u-cross-baseline u-gap-4">
<span
class="{getIcon(tutorial)} aw-u-font-size-24"
aria-hidden="true"
/>
<h3 class="aw-sub-body-500 aw-u-color-text-primary">
{tutorial.framework}
</h3>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">
{tutorial.title}
</p>
</a>
{/if}
</li>
{/each}
</ul>
</section>
{/each}
</div>
</article>
@@ -111,35 +110,6 @@
</main>
<style lang="scss">
.tutorial-grid {
display: grid;
gap: 1.5rem; // 24px
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
.aw-card {
padding: 1.25rem;
header {
display: flex;
gap: 0.25rem;
align-items: center;
> [class*='icon'] {
position: relative;
width: 1.5rem;
height: 1.5rem;
&::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50%));
}
}
}
}
}
.badge {
border-radius: 0.25rem;
background: rgba(253, 54, 110, 0.24);