genki/banii.cafe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added link page and a link component

Browse source
This commit is contained in:
genki_angel 2025-11-01 17:54:37 +00:00
parent 2ad9b39542
commit b8acf5a26c
3 changed files with 127 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/lib/components/link.svelte Normal file
View file

@ -0,0 +1,87 @@
<script lang="ts">
let {
name,
link,
img,
redirect = true,
children
}: { name?: string; link: string; img: string; redirect?: boolean; children?: any } = $props();
</script>
<div class="link grow">
{#if redirect}
<a href={link} target="_blank">
<h2 class="noselect">
{#if name}
{name}
{:else}
{link}
{/if}
</h2>
<div class="desc">
<img class="noselect" src={img} alt="" />
<p>{@render children?.()}</p>
</div>
</a>
{:else}
<h2 class="noselect">
{#if name}
{name}
{:else}
{link}
{/if}
</h2>
<div class="desc">
<img class="noselect" src={img} alt="" />
<p>{@render children?.()}</p>
</div>
{/if}
</div>
<style lang="scss">
@use '$lib/styles/variables' as vars;
a {
text-decoration: none;
color: white;
}
img {
padding: 1em;
}
h2 {
background: linear-gradient(-90deg, #dede6c, #dede6c 25%, #00d4ff00);
color: black;
line-height: 28px;
padding: 0.3em 0 0 0.3em;
text-align: right;
}
.link {
border: 1px solid vars.$base-colour;
}
.desc {
img {
width: 100px;
height: 100px;
}
p {
text-align: center;
flex-grow: 1;
font-size: 1.5em;
}
display: flex;
align-items: center;
}
.grow {
transition: all 0.2s ease-in-out;
}
.grow:hover {
transform: scale(1.03);
border: 1px solid vars.$highlight;
}
</style>

19
src/lib/components/pet.svelte
View file

@ -7,7 +7,7 @@
}: { name: string; species?: string; img: string; children?: any } = $props();
</script>
<div class="pet grow">
<div class="grow pet">
<img src={img} alt="" />
<div class="info">
<h2>{name}</h2>
@ -22,7 +22,7 @@
@use '$lib/styles/variables' as vars;
.pet {
// margin: 1em;
border: 1px solid vars.$highlight;
border: 1px solid vars.$base-colour;
display: flex;
// align-items: center;
gap: 1em;
@ -32,21 +32,24 @@
line-height: 1em;
padding-top: 0.2em;
}
h3 {
// text-decoration: underline;
color: vars.$base-colour;
margin-bottom: .2em;
}
h3 {
// text-decoration: underline;
color: vars.$base-colour;
margin-bottom: 0.2em;
}
img {
width: 200px;
min-width: 200px;
min-width: 200px;
height: 200px;
}
}
.grow {
transition: all 0.2s ease-in-out;
}
.grow:hover {
transform: scale(1.03);
border: 1px solid vars.$highlight;
}
</style>

30
src/routes/links/+page.svelte
View file

@ -1,10 +1,33 @@
<script lang="ts">
import Window from '$lib/components/window.svelte';
import Link from '$lib/components/link.svelte';
//social links
import discord from '$lib/assets/img/socials/discord.svg';
import roblox from "$lib/assets/img/socials/roblox.svg";
import git from "$lib/assets/img/socials/git.svg";
import github from "$lib/assets/img/socials/github.svg";
</script>
<div class="container">
<h1>Links</h1>
<Window name="socials">
<div class="links">
<Link link="discord" img="{discord}" redirect={false}>genki_angel</Link>
<!-- <Link link="" img="">fediverse</Link> -->
<Link link="https://www.roblox.com/users/1757381" name="https://roblox.com" img="{roblox}">
i play roblox sometimes...
</Link>
</div>
</Window>
<Window name="repos">
<div class="links">
<Link link="https://git.banii.cafe" img="{git}">all my latest repos are<br>saved here ^w^</Link>
<Link link="https://github.com/genki-angel" name="https://github.com" img="{github}"
>very inactive</Link
>
</div>
</Window>
</div>
<style lang="scss">
@ -21,4 +44,9 @@
padding: 1em;
gap: 1em;
}
.links {
display: flex;
flex-direction: column;
gap: 1em;
}
</style>