added link page and a link component
This commit is contained in:
genki_angel
parent
2ad9b39542
commit
b8acf5a26c
3 changed files with 127 additions and 9 deletions
87
src/lib/components/link.svelte
Normal file
87
src/lib/components/link.svelte
Normal 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>
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
}: { name: string; species?: string; img: string; children?: any } = $props();
|
}: { name: string; species?: string; img: string; children?: any } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="pet grow">
|
<div class="grow pet">
|
||||||
<img src={img} alt="" />
|
<img src={img} alt="" />
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<h2>{name}</h2>
|
<h2>{name}</h2>
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
@use '$lib/styles/variables' as vars;
|
@use '$lib/styles/variables' as vars;
|
||||||
.pet {
|
.pet {
|
||||||
// margin: 1em;
|
// margin: 1em;
|
||||||
border: 1px solid vars.$highlight;
|
border: 1px solid vars.$base-colour;
|
||||||
display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
h3 {
|
h3 {
|
||||||
// text-decoration: underline;
|
// text-decoration: underline;
|
||||||
color: vars.$base-colour;
|
color: vars.$base-colour;
|
||||||
margin-bottom: .2em;
|
margin-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
@ -43,10 +43,13 @@
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grow {
|
.grow {
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grow:hover {
|
.grow:hover {
|
||||||
transform: scale(1.03);
|
transform: scale(1.03);
|
||||||
|
border: 1px solid vars.$highlight;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,33 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Window from '$lib/components/window.svelte';
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Links</h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -21,4 +44,9 @@
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
.links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue