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

added content to pet page

Browse source
This commit is contained in:
genki_angel 2025-10-02 02:25:08 +01:00
parent 4752ebc803
commit 28fc1a1113
14 changed files with 232 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app.html
View file

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>banii.cafe ₍ᐢ. .ᐢ₎ ₊˚⊹♡ 🐇</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

BIN
src/lib/assets/img/pets/baron.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 208 KiB

BIN
src/lib/assets/img/pets/fanger.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 288 KiB

BIN
src/lib/assets/img/pets/jessie.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 280 KiB

BIN
src/lib/assets/img/pets/tarantula3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 95 KiB

45
src/lib/components/banners.svelte
View file

@ -0,0 +1,45 @@
<script lang="ts">
const imported = import.meta.glob('$lib/assets/img/banners/*', { eager: true });
let banners: Array<string> = [];
for (const img in imported) {
banners.push(img);
}
</script>
<div class="holder noselect">
<div class="marquee">
{#each banners as banner}
<img src={banner} alt="" />
{/each}
{#each banners as banner}
<img src={banner} alt="" />
{/each}
</div>
</div>
<style>
img {
width: 88px;
height: 31px;
}
.holder {
font-family: none;
margin: .5em auto;
overflow: hidden;
height: 31px;
}
.marquee {
display: inline-flex;
gap: 5px;
animation: marquee 120s linear infinite;
}
@keyframes marquee {
0% {
transform: translateZ(0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
</style>

10
src/lib/components/nav.svelte
View file

@ -10,11 +10,11 @@
name: "home",
image: ""
},
{
destination: "/about",
name: "about",
image: ""
},
// {
// destination: "/about",
// name: "about",
// image: ""
// },
{
destination: "/pets",
name: "pets",

52
src/lib/components/pet.svelte Normal file
View file

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

7
src/lib/components/window.svelte
View file

@ -20,6 +20,7 @@
@use '$lib/styles/variables' as vars;
h2 {
color: black;
line-height: 32px;
}
.title {
font-family: easvhsregular;
@ -31,7 +32,7 @@
justify-content: space-between;
align-items: center;
background: vars.$base-colour;
background: linear-gradient(1deg,vars.$base-colour 35%, vars.$highlight 100%);
// background: linear-gradient(1deg,vars.$base-colour 35%, vars.$highlight 100%);
padding: 0 2px 0 1em;
gap: 1em;
}
@ -42,7 +43,7 @@
}
.minimise {
color: black;
background-color: #ac9b38;
background-color: vars.$base-colour;
border: 2px solid #53461f;
box-sizing: border-box;
line-height: 32px;
@ -52,7 +53,7 @@
margin-right: .4em;
}
.minimise:hover {
background-color: vars.$base-colour;
background-color: #ac9b38;
cursor: pointer;
}
</style>

1
src/lib/styles/base.scss
View file

@ -42,4 +42,5 @@ body {
display: flex;
gap: 1em;
align-items: center;
justify-content: center;
}

16
src/routes/+layout.svelte
View file

@ -6,6 +6,7 @@
import Title from '$lib/components/title.svelte';
import Billboard from '$lib/components/billboard.svelte';
import Blinkies from '$lib/components/blinkies.svelte';
import Banners from '$lib/components/banners.svelte';
import Nav from '$lib/components/nav.svelte';
@ -27,6 +28,13 @@
{@render children?.()}
</main>
<div class="invisible">
<Banners />
</div>
<footer>
<Banners />
</footer>
<style lang="scss">
@use '$lib/styles/variables' as vars;
@ -37,4 +45,12 @@
box-sizing: border-box;
padding: 1em;
}
footer {
position: fixed;
bottom: 0;
}
.invisible {
visibility: hidden;
}
</style>

9
src/routes/+page.svelte
View file

@ -13,9 +13,9 @@
<div class="container">
<!-- about -->
<Window name="about">
<Window name="hi :3">
<p>
hello!&nbsp;&nbsp; ^w^/<br />welcome to my site, feel free to look around and learn something
hello!&nbsp;&nbsp; ^w^/<br><br>welcome to my site, feel free to look around and learn something
your government doesn't want you to know :3
</p>
</Window>
@ -106,13 +106,10 @@
td {
padding: 0.5em;
padding-top: 0.8em;
border: 1px solid;
}
td:nth-child(odd) {
text-align: right;
border: 1px solid;
}
td:nth-child(even) {
border-bottom: 1px solid;
}
#mostwanted {
display: flex;

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

@ -0,0 +1,24 @@
<script lang="ts">
import Window from '$lib/components/window.svelte';
</script>
<div class="container">
<h1>Links</h1>
</div>
<style lang="scss">
@use '$lib/styles/variables' as vars;
h1 {
text-align: center;
font-size: 3em;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
padding: 1em;
gap: 1em;
}
</style>

81
src/routes/pets/+page.svelte
View file

@ -0,0 +1,81 @@
<script lang="ts">
import Window from '$lib/components/window.svelte';
import alert from '$lib/assets/img/alert.gif';
//pets
//cat
import jessie from '$lib/assets/img/pets/jessie.webp';
//spiders
import fanger from '$lib/assets/img/pets/fanger.webp';
import baron from '$lib/assets/img/pets/baron.webp';
import tarantula3 from '$lib/assets/img/pets/tarantula3.webp';
import Pet from '$lib/components/pet.svelte';
//isopods
//mantis
</script>
<div class="container">
<h1>My Creatures</h1>
<Window name="warning">
<div class="imgwrap">
<img src={alert} alt="" />
<p style="text-align: center;">
below are the creatures I currently have in my possession<br />they are mostly
<span class="warning">bugs</span> so you have been warned!!!
</p>
<img src={alert} alt="" />
</div>
</Window>
<Window name="cat">
<Pet name="jessie" img={jessie} species="Domestic Shorthair">
very silly kitty, loves to climb everywhere and scratch everything<br />
her favourite food is tuna
</Pet>
</Window>
<Window name="tarantulas">
<div class="pets">
<Pet name="fanger" img={fanger} species="Texas Tan">
my first tarantula!<br />
they like to hide a lot so i dont get to see them much, except for feeding.
</Pet>
<Pet name="baron" img={baron} species="Orange Baboon">
gotten shortly after fanger, they are very shy and spends almost all their time in their burrow.
</Pet>
<Pet name="???" img={tarantula3} species="Venezuelan Suntiger">
my biggest tarantula so far, they also like to hide a lot but sometimes can be quite feisty.<br>i have not decided on a name for them yet...
</Pet>
</div>
</Window>
<Window name="isopods"></Window>
<Window name="mantis">
<Pet name="???" img="" species="Budwing Mantis">
not much to say about this guy. the main reason i got them was because they were all black, which is also my favourite colour :p
</Pet>
</Window>
</div>
<style lang="scss">
@use '$lib/styles/variables' as vars;
h1 {
text-align: center;
font-size: 3em;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
padding: 1em;
gap: 1em;
}
.pets {
display: flex;
flex-direction: column;
gap: 1em;
}
.warning {
color: vars.$warning;
}
</style>