diff options
Diffstat (limited to 'src/routes/tools/+page.svelte')
| -rw-r--r-- | src/routes/tools/+page.svelte | 106 |
1 files changed, 53 insertions, 53 deletions
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte index 01a73877..97e27e0e 100644 --- a/src/routes/tools/+page.svelte +++ b/src/routes/tools/+page.svelte @@ -1,10 +1,10 @@ <script lang="ts"> - import HeadTitle from '$lib/Home/HeadTitle.svelte'; - import Picker from '$lib/Tools/Picker.svelte'; - import { tools } from '$lib/Tools/tools.js'; - import root from '$lib/Utility/root'; + import HeadTitle from '$lib/Home/HeadTitle.svelte'; + import Picker from '$lib/Tools/Picker.svelte'; + import { tools } from '$lib/Tools/tools.js'; + import root from '$lib/Utility/root'; - let tool = 'default'; + let tool = 'default'; </script> <Picker {tool} /> @@ -12,63 +12,63 @@ <HeadTitle route={tools[tool].name()} path={`/tools?tool=${tool}`} /> <div class="card"> - <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> + <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 /> + <p /> - {#if tools[t].description} - <span class="description"> - {tools[t].description?.()} - </span> - {/if} - </div> - </a> - {/each} - </div> + {#if tools[t].description} + <span class="description"> + {tools[t].description?.()} + </span> + {/if} + </div> + </a> + {/each} + </div> - <p /> + <p /> - <blockquote style="margin: 0 0 0 1.5rem;"> - Have any requests for cool tools that you think others might find useful? Send a private message - to - <a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a> on AniList! - </blockquote> + <blockquote style="margin: 0 0 0 1.5rem;"> + Have any requests for cool tools that you think others might find useful? Send a private message + to + <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(250px, 1fr)); - grid-gap: 1rem; - } + .tool-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-gap: 1rem; + } - .tool-grid-tool { - display: flex; - flex-direction: column; - height: 100%; - $delay: 0.25s; - transition: transform $delay ease; + .tool-grid-tool { + display: flex; + flex-direction: column; + height: 100%; + $delay: 0.25s; + transition: transform $delay ease; - .description { - // font-size: 0.9rem; - color: var(--fg); - } + .description { + // font-size: 0.9rem; + color: var(--fg); + } - &:hover { - transform: scale(1.05); - position: relative; - z-index: 2; - transition: transform $delay ease; - } - } + &:hover { + transform: scale(1.05); + position: relative; + z-index: 2; + transition: transform $delay ease; + } + } - .title { - font-weight: 500; - } + .title { + font-weight: 500; + } </style> |