aboutsummaryrefslogtreecommitdiff
path: root/src/routes/tools/+page.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes/tools/+page.svelte')
-rw-r--r--src/routes/tools/+page.svelte106
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>