mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-12 04:14:24 +02:00
43 lines
957 B
Svelte
43 lines
957 B
Svelte
<script>
|
|
import SocialButton from './SocialButton.svelte';
|
|
import { queries } from '$data/api';
|
|
import { createQuery } from '@tanstack/svelte-query';
|
|
import Query from '$lib/components/Query.svelte';
|
|
|
|
const query = createQuery(['socials'], queries.socials);
|
|
</script>
|
|
|
|
<div class="social-host">
|
|
<Query {query} let:data>
|
|
{#if data}
|
|
<SocialButton social="github" data={data.socials}/>
|
|
<SocialButton social="discord" data={data.socials}/>
|
|
<SocialButton social="reddit" data={data.socials}/>
|
|
<SocialButton social="telegram" data={data.socials}/>
|
|
{/if}
|
|
</Query>
|
|
</div>
|
|
|
|
<style>
|
|
.social-host {
|
|
width: min(87%, 100rem);
|
|
padding: 0 max(6.5%, calc(50vw - 50rem));
|
|
align-items: center;
|
|
user-select: none;
|
|
position: absolute;
|
|
display: flex;
|
|
bottom: 2rem;
|
|
gap: 1rem;
|
|
left: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.social-host {
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|