turn things into components
This commit is contained in:
parent
b648ada5ba
commit
3a6da0bfb1
5 changed files with 50 additions and 57 deletions
7
src/lib/components/Home/HeroContainer.svelte
Normal file
7
src/lib/components/Home/HeroContainer.svelte
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
export let className = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg {className}">
|
||||||
|
<slot />
|
||||||
|
</div>
|
12
src/lib/components/Home/SocialIcon.svelte
Normal file
12
src/lib/components/Home/SocialIcon.svelte
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<script>
|
||||||
|
export let href = '',
|
||||||
|
color = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a class="flex text-xl group" {href}>
|
||||||
|
<div
|
||||||
|
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:{color} group-focus:{color}"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div></a
|
||||||
|
>
|
|
@ -3,6 +3,6 @@ export default {
|
||||||
LASTFM: 'RAAAAAAAAAAAH',
|
LASTFM: 'RAAAAAAAAAAAH',
|
||||||
BLUESKY: 'cirroskais.xyz',
|
BLUESKY: 'cirroskais.xyz',
|
||||||
TWITTER: '@cirroskais',
|
TWITTER: '@cirroskais',
|
||||||
FEDIVERSE: '@cirroskais@chadthundercock.com',
|
FEDIVERSE: 'https://chadthundercock.com/@cirroskais',
|
||||||
GITHUB: 'cirroskais'
|
GITHUB: 'cirroskais'
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,7 +2,9 @@
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import config from '$lib/config';
|
import config from '$lib/config';
|
||||||
|
|
||||||
import ImgButton from '$lib/components/ImgButton.svelte';
|
import SocialIcon from '$lib/components/Home/SocialIcon.svelte';
|
||||||
|
import HeroContainer from '$lib/components/Home/HeroContainer.svelte';
|
||||||
|
import ImgButton from '$lib/components/Home/Button.svelte';
|
||||||
import Image from '$lib/components/Image.svelte';
|
import Image from '$lib/components/Image.svelte';
|
||||||
|
|
||||||
import Discord from '$lib/components/Icons/Discord.svelte';
|
import Discord from '$lib/components/Icons/Discord.svelte';
|
||||||
|
@ -19,8 +21,8 @@
|
||||||
|
|
||||||
<div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
|
<div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
|
||||||
<div class="flex p-4 h-full rounded-lg">
|
<div class="flex p-4 h-full rounded-lg">
|
||||||
<div class="my-auto md:w-fit md:mx-auto min-h-max">
|
<div class="gap-1 my-auto space-y-1 md:w-fit md:mx-auto">
|
||||||
<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg">
|
<HeroContainer>
|
||||||
<Image
|
<Image
|
||||||
style="mr-2 h-20 w-20 rounded-full md:h-24 md:w-24"
|
style="mr-2 h-20 w-20 rounded-full md:h-24 md:w-24"
|
||||||
src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
|
src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
|
||||||
|
@ -30,56 +32,30 @@
|
||||||
<p class="my-auto text-3xl md:text-4xl text-neutral-300">
|
<p class="my-auto text-3xl md:text-4xl text-neutral-300">
|
||||||
{$page.data.discord?.username}
|
{$page.data.discord?.username}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</HeroContainer>
|
||||||
|
|
||||||
<div
|
<HeroContainer className="place-content-center space-x-2">
|
||||||
class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1 shadow-lg"
|
<SocialIcon href="https://www.last.fm/user/{config.LASTFM}" color="text-red-500">
|
||||||
>
|
<Lastfm />
|
||||||
<a class="flex group" href="https://www.last.fm/user/{config.LASTFM}">
|
</SocialIcon>
|
||||||
<div
|
<SocialIcon href="https://github.com/{config.GITHUB}" color="text-black">
|
||||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-focus:text-red-500 group-hover:text-red-500"
|
<GitHub />
|
||||||
>
|
</SocialIcon>
|
||||||
<Lastfm />
|
<SocialIcon href={config.FEDIVERSE} color="text-indigo-700">
|
||||||
</div>
|
<Mastodon />
|
||||||
</a>
|
</SocialIcon>
|
||||||
<a class="flex group" href="https://github.com/{config.GITHUB}">
|
<SocialIcon href="https://discord.com/users/{config.DISCORD}" color="text-blue-600">
|
||||||
<div
|
<Discord />
|
||||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
|
</SocialIcon>
|
||||||
>
|
<SocialIcon href="https://x.com/{config.TWITTER}" color="text-black">
|
||||||
<GitHub />
|
<X />
|
||||||
</div>
|
</SocialIcon>
|
||||||
</a>
|
<SocialIcon href="https://bsky.app/profile/{config.BLUESKY}" color="text-blue-400">
|
||||||
<a class="flex group" href="https://mastodon.social/{config.FEDIVERSE}">
|
<Bluesky />
|
||||||
<div
|
</SocialIcon>
|
||||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-indigo-700 group-focus:text-indigo-700"
|
</HeroContainer>
|
||||||
>
|
|
||||||
<Mastodon />
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="flex group" href="https://discord.com/users/{config.DISCORD}">
|
|
||||||
<div
|
|
||||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-600 group-focus:text-blue-600"
|
|
||||||
>
|
|
||||||
<Discord />
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="flex group" href="https://x.com/{config.TWITTER}">
|
|
||||||
<div
|
|
||||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
|
|
||||||
>
|
|
||||||
<X />
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="flex group" href="https://bsky.app/profile/{config.BLUESKY}">
|
|
||||||
<div
|
|
||||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-400 group-focus:text-blue-400"
|
|
||||||
>
|
|
||||||
<Bluesky />
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
|
<HeroContainer>
|
||||||
<div class="flex space-x-2.5">
|
<div class="flex space-x-2.5">
|
||||||
<Image
|
<Image
|
||||||
style="w-16 h-16 md:w-24 md:h-24"
|
style="w-16 h-16 md:w-24 md:h-24"
|
||||||
|
@ -97,11 +73,9 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</HeroContainer>
|
||||||
|
|
||||||
<div
|
<HeroContainer className="justify-center flex-wrap gap-2 ">
|
||||||
class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-2 shadow-lg"
|
|
||||||
>
|
|
||||||
<ImgButton href="https://cirroskais.xyz" src="/img/buttons/cirro.png"></ImgButton>
|
<ImgButton href="https://cirroskais.xyz" src="/img/buttons/cirro.png"></ImgButton>
|
||||||
<ImgButton href="https://twitter.com/Porpss1" src="/img/buttons/rovin.png"></ImgButton>
|
<ImgButton href="https://twitter.com/Porpss1" src="/img/buttons/rovin.png"></ImgButton>
|
||||||
<ImgButton href="https://split.pet" src="/img/buttons/split.png"></ImgButton>
|
<ImgButton href="https://split.pet" src="/img/buttons/split.png"></ImgButton>
|
||||||
|
@ -112,7 +86,7 @@
|
||||||
<ImgButton src="/img/buttons/lol.gif"></ImgButton>
|
<ImgButton src="/img/buttons/lol.gif"></ImgButton>
|
||||||
<ImgButton src="/img/buttons/twopaws.png"></ImgButton>
|
<ImgButton src="/img/buttons/twopaws.png"></ImgButton>
|
||||||
<ImgButton src="/img/buttons/flag-gaymen.png"></ImgButton>
|
<ImgButton src="/img/buttons/flag-gaymen.png"></ImgButton>
|
||||||
</div>
|
</HeroContainer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue