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',
|
||||
BLUESKY: 'cirroskais.xyz',
|
||||
TWITTER: '@cirroskais',
|
||||
FEDIVERSE: '@cirroskais@chadthundercock.com',
|
||||
FEDIVERSE: 'https://chadthundercock.com/@cirroskais',
|
||||
GITHUB: 'cirroskais'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
import { page } from '$app/stores';
|
||||
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 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="flex p-4 h-full rounded-lg">
|
||||
<div class="my-auto md:w-fit md:mx-auto min-h-max">
|
||||
<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg">
|
||||
<div class="gap-1 my-auto space-y-1 md:w-fit md:mx-auto">
|
||||
<HeroContainer>
|
||||
<Image
|
||||
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
|
||||
|
|
@ -30,56 +32,30 @@
|
|||
<p class="my-auto text-3xl md:text-4xl text-neutral-300">
|
||||
{$page.data.discord?.username}
|
||||
</p>
|
||||
</div>
|
||||
</HeroContainer>
|
||||
|
||||
<div
|
||||
class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1 shadow-lg"
|
||||
>
|
||||
<a class="flex group" href="https://www.last.fm/user/{config.LASTFM}">
|
||||
<div
|
||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-focus:text-red-500 group-hover:text-red-500"
|
||||
>
|
||||
<HeroContainer className="place-content-center space-x-2">
|
||||
<SocialIcon href="https://www.last.fm/user/{config.LASTFM}" color="text-red-500">
|
||||
<Lastfm />
|
||||
</div>
|
||||
</a>
|
||||
<a class="flex group" href="https://github.com/{config.GITHUB}">
|
||||
<div
|
||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
|
||||
>
|
||||
</SocialIcon>
|
||||
<SocialIcon href="https://github.com/{config.GITHUB}" color="text-black">
|
||||
<GitHub />
|
||||
</div>
|
||||
</a>
|
||||
<a class="flex group" href="https://mastodon.social/{config.FEDIVERSE}">
|
||||
<div
|
||||
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-indigo-700 group-focus:text-indigo-700"
|
||||
>
|
||||
</SocialIcon>
|
||||
<SocialIcon href={config.FEDIVERSE} color="text-indigo-700">
|
||||
<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"
|
||||
>
|
||||
</SocialIcon>
|
||||
<SocialIcon href="https://discord.com/users/{config.DISCORD}" color="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"
|
||||
>
|
||||
</SocialIcon>
|
||||
<SocialIcon href="https://x.com/{config.TWITTER}" color="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"
|
||||
>
|
||||
</SocialIcon>
|
||||
<SocialIcon href="https://bsky.app/profile/{config.BLUESKY}" color="text-blue-400">
|
||||
<Bluesky />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</SocialIcon>
|
||||
</HeroContainer>
|
||||
|
||||
<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
|
||||
<HeroContainer>
|
||||
<div class="flex space-x-2.5">
|
||||
<Image
|
||||
style="w-16 h-16 md:w-24 md:h-24"
|
||||
|
|
@ -97,11 +73,9 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HeroContainer>
|
||||
|
||||
<div
|
||||
class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-2 shadow-lg"
|
||||
>
|
||||
<HeroContainer className="justify-center flex-wrap gap-2 ">
|
||||
<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://split.pet" src="/img/buttons/split.png"></ImgButton>
|
||||
|
|
@ -112,7 +86,7 @@
|
|||
<ImgButton src="/img/buttons/lol.gif"></ImgButton>
|
||||
<ImgButton src="/img/buttons/twopaws.png"></ImgButton>
|
||||
<ImgButton src="/img/buttons/flag-gaymen.png"></ImgButton>
|
||||
</div>
|
||||
</HeroContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue