diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/tools/+page.svelte | 57 |
1 files changed, 47 insertions, 10 deletions
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte index 6dac37ec..6f503aec 100644 --- a/src/routes/tools/+page.svelte +++ b/src/routes/tools/+page.svelte @@ -12,20 +12,25 @@ <HeadTitle route={tools[tool].name()} path={`/tools?tool=${tool}`} /> <div class="card"> - <p>Select a tool to continue.</p> + <div class="tool-grid"> + {#each Object.keys(tools).filter((t) => t !== 'default') as t} + <a href={root(`/tools/${tools[t].id}`)} on:click={() => (tool = t)}> + <div class="tool-grid-tool card"> + <span class="title"> + {tools[t].name()} + </span> + + <p /> - <ul> - {#each Object.keys(tools) as t} - {#if t !== 'default'} - <li> - <a href={root(`/tools/${tools[t].id}`)} on:click={() => (tool = t)}>{tools[t].name()}</a> {#if tools[t].description} - <blockquote>{tools[t].description}</blockquote> + <blockquote style="margin: 0 0 0 1.5rem;"> + {tools[t].description} + </blockquote> {/if} - </li> - {/if} + </div> + </a> {/each} - </ul> + </div> <p /> @@ -35,3 +40,35 @@ <a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a> on AniList! </blockquote> </div> + +<style lang="scss"> + .tool-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-gap: 1rem; + } + + .tool-grid-tool { + display: flex; + flex-direction: column; + height: 100%; + $delay: 0.25s; + transition: transform $delay ease; + + blockquote { + font-size: 0.9rem; + color: var(--fg); + } + + &:hover { + transform: scale(1.05); + position: relative; + z-index: 2; + transition: transform $delay ease; + } + } + + .title { + font-weight: 500; + } +</style> |