diff options
| author | Fuwn <[email protected]> | 2024-02-19 16:34:21 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-02-19 16:34:21 -0800 |
| commit | 153741eb3d8a164651b6c29b6bde99cf191e2ba6 (patch) | |
| tree | e9df035301460e4d581ae25b40daf6f76400d08d /src | |
| parent | feat(user): fade separator (diff) | |
| download | due.moe-153741eb3d8a164651b6c29b6bde99cf191e2ba6.tar.xz due.moe-153741eb3d8a164651b6c29b6bde99cf191e2ba6.zip | |
feat(user): seperate hololive badges section
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/user/[user]/+page.svelte | 57 |
1 files changed, 29 insertions, 28 deletions
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte index 26f4b35a..89c3f4bb 100644 --- a/src/routes/user/[user]/+page.svelte +++ b/src/routes/user/[user]/+page.svelte @@ -143,34 +143,36 @@ {:catch} {displayBadges(userData.name, '?')} {/await} - - {#if schedule && preferences && preferences.pinned_hololive_streams.length > 0} - <p /> - - <div class="hololive-badges"> - {#each preferences.pinned_hololive_streams as stream} - {@const avatar = schedule.dict[stream]} - - {#if avatar} - <a href={root(`/hololive/${encodeURIComponent(stream)}`)}> - <img - src={avatar} - alt="Avatar" - class="user-grid-hololive-badges" - title={stream} - use:tooltip - /> - </a> - {/if} - {/each} - </div> - {/if} </div> </div> </div> {/if} </div> + {#if schedule && preferences && preferences.pinned_hololive_streams.length > 0} + <p /> + + <div class="card"> + <div class="hololive-badges"> + {#each preferences.pinned_hololive_streams as stream} + {@const avatar = schedule.dict[stream]} + + {#if avatar} + <a href={root(`/hololive/${encodeURIComponent(stream)}`)}> + <img + src={avatar} + alt="Avatar" + class="user-grid-hololive-badges" + title={stream} + use:tooltip + /> + </a> + {/if} + {/each} + </div> + </div> + {/if} + {#if preferences} <p /> @@ -231,8 +233,9 @@ } .user-grid-hololive-badges { - $transition: transform 0.3s ease, box-shadow 0.3s ease; - $size: 2.25em; + $transitionDuration: 0.35s; + $transition: transform $transitionDuration ease, box-shadow $transitionDuration ease; + $size: 5.25em; border-radius: 8px; width: $size; @@ -243,17 +246,15 @@ &:hover { z-index: 2; transition: $transition; - transform: scale(1.1); + transform: scale(1.15); box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base02), 0 4px 30px var(--base01); } } .hololive-badges { display: flex; - gap: 0.75em; - box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base02), 0 4px 30px var(--base01); + gap: 1rem; border-radius: 8px; - padding: 0.25em; justify-content: space-evenly; } |