.gitignore

@@ -1,34 +1,26 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
 node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
 .DS_Store
-dist
-dist-ssr
-coverage
-*.local
+Thumbs.db
 
-/cypress/videos/
-/cypress/screenshots/
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
 
-*.tsbuildinfo
-
-/public
-/src/assets/fonts
-/src/assets/images
+# db
+*.sqlite

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}

README.md

@@ -1,29 +1,38 @@
-# banii-cafe
+# sv
 
-basic setup for my site, very messy and not finished yet
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 
-## Recommended IDE Setup
+## Creating a project
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Project Setup
+If you're seeing this, you've probably already done this step. Congrats!
 
 ```sh
-bun install
+# create a new project in the current directory
+bun sv create
+
+# create a new project in my-app
+bun sv create my-app
 ```
 
-### Compile and Hot-Reload for Development
+## Developing
+
+Once you've created a project and installed dependencies with `bun install` , start a development server:
 
 ```sh
-bun dev
+bun run dev
+
+# or start the server and open the app in a new browser tab
+bun run dev -- --open
 ```
 
-### Type-Check, Compile and Minify for Production
+## Building
+
+To create a production version of your app:
 
 ```sh
 bun run build
 ```
+
+You can preview the production build with `bun run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

eslint.config.js

@@ -0,0 +1,41 @@
+import prettier from 'eslint-config-prettier';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default defineConfig(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		},
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="/site.webmanifest">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>banii cafe</title>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>

package.json

@@ -1,28 +1,41 @@
 {
-  "name": "banii-cafe",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build"
-  },
-  "dependencies": {
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
-  },
-  "devDependencies": {
-    "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.13.9",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/tsconfig": "^0.7.0",
-    "npm-run-all2": "^7.0.2",
-    "typescript": "~5.8.0",
-    "vite": "^6.2.1",
-    "vite-plugin-vue-devtools": "^7.7.2",
-    "vue-tsc": "^2.2.8"
-  }
+	"name": "banii.cafe",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.22.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@types/node": "^22",
+		"@types/sqlite3": "^5.1.0",
+		"eslint": "^9.22.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"sass-embedded": "^1.93.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^7.0.4"
+	},
+	"dependencies": {
+		"sqlite": "^5.1.1",
+		"sqlite3": "^5.1.7"
+	}
 }

src/App.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import Welcometitle from './components/welcometitle.vue';
-import Quotebanner from './components/quotebanner.vue';
-import Blinkiebar from './components/blinkiebar.vue';
-import Navbar from './components/navbar.vue';
-import Bannerbar from './components/bannerbar.vue';
-import Marqueebar from './components/marqueebar.vue';
-
-const name = "BANII.CAFE"
-
-const bannerFolder = "banners"
-</script>
-
-<template>
-  <header>
-    <Welcometitle :title="name" />
-    <Quotebanner :quote="'meaaaooooowwww x3'" />
-    <Blinkiebar />
-  </header>
-  <main>
-    <Navbar />
-    <div id="view">
-      <RouterView />
-    </div>
-  </main>
-
-  <footer>
-    <Bannerbar />
-  </footer>
-
-</template>
-
-<style scoped>
-main {
-  margin-top: .2em;
-  font-size: 32px;
-  display: flex;
-  gap: .2em;
-  @media screen and (max-width: 1250px) {
-    flex-direction: column;
-  }
-}
-
-#view {
-  border: 2px solid rgba(222, 222, 108, 1);
-  flex-grow: 1;
-  height: fit-content;
-  padding: .5em;
-}
-
-footer {
-  position: fixed;
-  width: 100%;
-  height: fit-content;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-</style>

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<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">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/assets/main.css

@@ -1,68 +0,0 @@
-@font-face {
-    font-family: 'vcr_osd_mono';
-    src: url('./fonts/vcr_osd_mono-webfont.woff2') format('woff2'),
-        url('./fonts/vcr_osd_mono-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'easvhsregular';
-    src: url('./fonts/easvhs-webfont.woff2') format('woff2'),
-        url('./fonts/easvhs-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-body {
-    background-image: url(/bg.webp);
-    background-size: 256px;
-
-    font-family: "easvhsregular";
-    color: #fefefe;
-
-    padding: 2em;
-    padding-bottom: 4em;
-}
-
-@keyframes marquee {
-    0% {
-        transform: translate3d(0, 0, 0);
-    }
-
-    100% {
-        transform: translate3d(-50%, 0, 0);
-    }
-}
-
-@keyframes billboard {
-    0% {
-        transform: translate3d(100%, 0, 0);
-    }
-
-    25% {
-        transform: translate3d(0%, 0, 0);
-    }
-
-    75% {
-        transform: translate3d(0%, 0, 0);
-    }
-
-    100% {
-        transform: translate3d(-100%, 0, 0);
-    }
-}
-
-.highlight {
-    color: rgba(222, 222, 108, 1);
-}
-.warning {
-    color: #cc4c4c;
-}
-.info {
-    color: #00fffa;
-}
-
-.font {
-    font-family: "vcr_osd_mono";
-}

src/components/bannerbar.vue

@@ -1,37 +0,0 @@
-<template>
-    <div id="holder">
-        <div id="marquee">
-            <img v-for="(item, path) in banners" :src="getBannerUrl(path)" />
-            <img v-for="(item, path) in banners" :src="getBannerUrl(path)" />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const banners = import.meta.glob("@/assets/images/banners/*")
-function getBannerUrl(path: string) {
-    // return new URL(`${path}`, import.meta.url).href
-    const modules = import.meta.glob("/src/assets/images/banners/*", { eager: true });
-    const mod = modules[path] as { default: string };
-    return mod.default;
-}
-</script>
-
-<style lang="css" scoped>
-#holder {
-    overflow: hidden;   
-    font-size: 0;
-}
-
-#marquee {
-    animation: marquee 60s linear infinite;
-    white-space: nowrap;
-    display: inline-block;
-}
-
-img {
-    width: 88px;
-    height: 31px;
-    margin-right: 5px;
-}
-</style>

src/components/blinkiebar.vue

@@ -1,37 +0,0 @@
-<template>
-    <div id="holder">
-        <div id="marquee">
-            <img v-for="(item, path) in blinkies" :src="getBlinkieUrl(path)" />
-            <img v-for="(item, path) in blinkies" :src="getBlinkieUrl(path)" />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const blinkies = import.meta.glob("@/assets/images/blinkies/*")
-function getBlinkieUrl(path: string) {
-    // return new URL(`${path}`, import.meta.url).href
-    const modules = import.meta.glob("/src/assets/images/blinkies/*", { eager: true });
-    const mod = modules[path] as { default: string };
-    return mod.default;
-}
-</script>
-
-<style lang="css" scoped>
-#holder {
-    overflow: hidden;   
-    font-size: 0;
-}
-
-#marquee {
-    animation: marquee 60s linear infinite;
-    white-space: nowrap;
-    display: inline-block;
-}
-
-img {
-    width: 150px;
-    height: 20px;
-    margin-right: 5px;
-}
-</style>

src/components/link.vue

@@ -1,109 +0,0 @@
-<template>
-    <a :href="props.url" target="_blank">
-        <div class="link highlight">
-            <div class="linkTitle">
-                <h3>{{ title }}</h3>
-            </div>
-            <div class="linkImage">
-                <img :src="getSocialUrl()">
-            </div>
-            <div class="linkDesc">
-                <p>{{ desc }}</p>
-            </div>
-        </div>
-    </a>
-</template>
-<script setup lang="ts">
-const props = defineProps({
-    title: String,
-    url: String,
-    image: String,
-    desc: String
-})
-
-function getSocialUrl() {
-    return new URL(`../assets/images/socials/${props.image}.svg`, import.meta.url).href
-}
-</script>
-<style scoped>
-h3 {
-    margin: 0;
-    color: black;
-    font-size: 24px;
-}
-
-p {
-    text-align: center;
-    margin: 0;
-    color: #efefef;
-}
-
-a {
-    /* color: #efefef; */
-    width: 100%;
-    max-width: 800px;
-    text-decoration: none;
-}
-
-img {
-    width: 100%;
-    height: 100%;
-    color: #efefef;
-}
-
-.link {
-    display: grid;
-    grid-template-columns: 150px 1fr;
-    grid-template-rows: 1fr 150px;
-    gap: 0px 0px;
-    grid-template-areas:
-        "linkTitle linkTitle"
-        "linkImage linkDesc";
-
-    @media screen and (max-width: 600px) {
-        grid-template-columns: 75px 1fr;
-        grid-template-rows: 1fr 75px;
-
-        .linkImage {
-            padding: 6px;
-        }
-        .linkTitle {
-            padding: 4px;
-            background-color: rgba(222, 222, 108, 1);
-            text-align: left;
-        }
-
-        h3,
-        p {
-            font-size: 16px;
-        }
-    }
-}
-
-.linkTitle {
-    grid-area: linkTitle;
-    border: 2px solid;
-    /* padding: .5em; */
-    padding-right: .5em;
-    text-align: right;
-    background: linear-gradient(-90deg, rgba(222, 222, 108, 1) 0%, rgba(222, 222, 108, 1) 25%, rgba(0, 212, 255, 0) 100%);
-    /* color: black; */
-}
-
-.linkImage {
-    grid-area: linkImage;
-    border: 2px solid;
-    padding: .5em;
-
-    background-color: black;
-}
-
-.linkDesc {
-    grid-area: linkDesc;
-    border: 2px solid;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-</style>

src/components/marqueebar.vue

@@ -1,38 +0,0 @@
-<template>
-    <div id="holder">
-        <div id="marquee" :style="{'animation': 'marquee ' + props.time + 's ' + 'linear infinite'}">
-            <img :style="{'height': props.height + 'px', 'width': props.width + 'px' }" v-for="(item, path) in images" :src="path" />
-            <img :style="{'height': props.height + 'px', 'width': props.width + 'px' }" v-for="(item, path) in images" :src="path" />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-    image: String,
-    width: Number,
-    height: Number,
-    time: Number
-})
-
-const path = ``
-
-let images: Record<string, () => Promise<unknown>>;
-switch(props.image) {
-    case "blinkies": images = import.meta.glob("@/assets/images/blinkies/*")
-    case "banners": images = import.meta.glob("@/assets/images/banners/*")
-}
-</script>
-
-<style lang="css" scoped>
-#holder {
-    overflow: hidden;   
-    font-size: 0;
-}
-
-#marquee {
-    /* animation: marquee 60s linear infinite; */
-    white-space: nowrap;
-    display: inline-block;
-}
-</style>

src/components/navbar.vue

@@ -1,197 +0,0 @@
-<template>
-    <nav>
-        <h1>set destination</h1>
-        <div>
-            <input type="checkbox" id="navmenu" class="navmenu">
-            <ul>
-                <li v-for="link in Links">
-                    <!-- <img src="../assets/images/star.gif"><RouterLink :to="link.url">{{ link.name }}</RouterLink><img src="../assets/images/star.gif"> -->
-                    <RouterLink :to="link.url"><img src="../assets/images/star.gif"><span class="font">></span> {{
-                        link.name
-                    }} <img src="../assets/images/star.gif"></RouterLink>
-                    <!-- <RouterLink :to="link.url">> {{ link.name }}</RouterLink> -->
-                </li>
-            </ul>
-            <div id="toggle" class="info">
-                <label for="navmenu"><span id="openmenu">
-                        <div class="burger"></div>
-                        <div class="burger"></div>
-                        <div class="burger"></div>
-                    </span><span class="font" id="closemenu">X</span></label>
-            </div>
-        </div>
-    </nav>
-</template>
-<script setup lang="ts">
-const Links = [
-    { name: "home", url: "/" },
-    { name: "pets", url: "/pets" },
-    { name: "links", url: "/links" },
-    { name: "portfolio", url: "/portfolio" }
-]
-</script>
-<style scoped>
-nav {
-    border: 2px solid rgba(222, 222, 108, 1);
-    min-width: 20%;
-    height: fit-content;
-    padding: .5em;
-
-    @media screen and (max-width: 600px) {
-        padding: 2px;
-    }
-}
-
-h1 {
-    text-align: center;
-    font-size: 40px;
-    text-decoration: underline;
-    margin-bottom: 1em;
-
-    @media screen and (max-width: 600px) {
-        font-size: 24px;
-    }
-}
-
-ul {
-    list-style-type: none;
-    padding: 0;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-
-    @media screen and (max-width: 1250px) {
-        flex-direction: row;
-        justify-content: center;
-        flex-wrap: wrap;
-        gap: .5em;
-
-        li {
-            border: rgba(222, 222, 108, 1) solid 2px;
-            width: fit-content;
-            height: fit-content;
-            /* padding: 1em; */
-            margin: 0;
-
-            a {
-                width: 250px;
-                height: 100px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background-color: black;
-            }
-
-            @media screen and (max-width: 600px) {
-                a {
-                    width: 175px;
-                    height: 50px;
-                    font-size: 20px;
-                }
-
-                span {
-                    font-size: 28px;
-                    margin-right: .5em;
-                }
-            }
-        }
-    }
-}
-
-li {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: .5em 0;
-
-    height: 32px;
-}
-
-#toggle {
-    text-align: center;
-    border: 2px solid;
-    margin: .5em;
-
-    @media screen and (min-width: 451px) {
-        display: none;
-    }
-}
-
-label {
-    text-align: center;
-}
-
-input {
-    display: none;
-}
-
-@media screen and (max-width: 450px) {
-    ul {
-        display: none;
-    }
-}
-
-#closemenu {
-    display: none;
-}
-
-#openmenu {
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    user-select: none;
-
-    justify-content: space-evenly;
-    align-items: center;
-}
-
-.burger {
-    height: 2px;
-    width: 32px;
-    background-color: #fefefe;
-}
-
-.navmenu:checked~* #openmenu {
-    display: none;
-}
-
-.navmenu:checked~* #closemenu {
-    display: block;
-    cursor: pointer;
-    user-select: none;
-    color: #fefefe;
-}
-
-.navmenu:checked+ul {
-    display: flex;
-}
-
-span {
-    height: 32px;
-}
-
-a {
-    text-decoration: none;
-    color: #fefefe;
-
-    img {
-        display: none;
-    }
-}
-
-a:hover {
-    text-decoration: underline;
-
-    img {
-        display: inline;
-    }
-
-    span {
-        display: none;
-    }
-}
-
-a:active {
-    color: rgba(222, 222, 108, 1);
-}
-</style>

src/components/pet.vue

@@ -1,87 +0,0 @@
-<template>
-    <div class="pet">
-        <div>
-            <h3>{{ props.name }}</h3>
-            <img class="info" :src="getPetUrl()">
-        </div>
-        <slot></slot>
-    </div>
-</template>
-<script setup lang="ts">
-const props = defineProps({
-    name: String,
-    image: String,
-    desc: String
-})
-
-function getPetUrl() {
-    return new URL(`../assets/images/pets/${props.image}.webp`, import.meta.url).href
-}
-</script>
-<style scoped>
-.pet {
-    border: 2px dotted rgba(222, 222, 108, 1);
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 1em;
-    background-color: black;
-    box-sizing: border-box;
-
-    padding: .5em;
-
-    justify-content: flex-start;
-
-    div {
-        display: flex;
-        flex-direction: column;
-
-        justify-content: center;
-        align-items: center;
-
-        width: fit-content;
-    }
-
-    /* @media screen and (max-width: 1250px) {
-        div {
-            width: 100%;
-        }
-    } */
-}
-
-.small {
-    width: fit-content;
-}
-
-h3 {
-    margin: 0;
-}
-
-p {
-    margin: 0;
-}
-
-img {
-    width: 256px;
-    height: 256px;
-    margin: .5em;
-
-    border: 2px solid;
-}
-
-@media screen and (max-width: 800px) {
-    .pet {
-        flex-direction: column;
-    }
-    h3 {
-        font-size: 22px;
-        text-align: center;
-    }
-}
-@media screen and (max-width: 500px) {
-    img {
-        width: 128px;
-        height: 128px;
-    }
-}
-</style>

src/components/quotebanner.vue

@@ -1,41 +0,0 @@
-<template>
-    <div id="billboard">
-        <div id="quote">
-            <img src="../assets/images/star.gif">
-            {{ props.quote || "oops, something has gone wrong x3" }}
-            <img src="../assets/images/star.gif">
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-    quote: String
-})
-</script>
-
-<style scoped>
-#billboard {
-    border: solid 2px rgba(222, 222, 108, 1);
-    text-align: center;
-    padding: .2em;
-
-    margin-top: .2em;
-    margin-bottom: .2em;
-
-    font-size: 32px;
-    @media screen and (max-width: 500px) {
-        font-size: 16px;
-    }
-    overflow: hidden;
-}
-
-#quote {
-    animation: billboard 20s linear infinite;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: .5em;
-}
-</style>

src/components/stamps.vue

@@ -1,34 +0,0 @@
-<template>
-    <div>
-        <h2>stampbook</h2>
-        <div id="stamp">
-            <img v-for="(item, path) in stamps" :src="getStampUrl(path)" />
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-const stamps = import.meta.glob("@/assets/images/stamps/*")
-function getStampUrl(path: string) {
-    // return new URL(`${path}`, import.meta.url).href
-    const modules = import.meta.glob("/src/assets/images/stamps/*", { eager: true });
-    const mod = modules[path] as { default: string };
-    return mod.default;
-}
-</script>
-<style scoped>
-h2 {
-    margin: 0;
-    text-align: center;
-}
-
-img {
-    height: 56px;
-    width: 99px;
-}
-
-#stamp {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-</style>

src/components/underconstruction.vue

@@ -1,29 +0,0 @@
-<template>
-    <div>
-        <img src="../assets/images/construction/barraconstruction.gif">
-        <h1>UNDER CONSTRUCTION</h1>
-        <img src="../assets/images/construction/ICONE_EN_CONSTRUCTION.GIF">
-        <p>come back soon!!!</p>
-    </div>
-</template>
-<style scoped>
-
-div {
-    display: flex;
-    flex-direction: column;
-
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}
-
-@media screen and (max-width: 800px) {
-    img {
-        width: 100%;
-    }
-    h1 {
-        font-size: 32px;
-    }
-}
-
-</style>

src/components/wantedposter.vue

@@ -1,146 +0,0 @@
-<template>
-    <div id="poster">
-        <h1 class="warning"><span class="font">$$</span> FBI's most wanted <span class="font">$$</span></h1>
-        <div id="profile">
-            <img class="info" src="../assets/images/pfp.png">
-            <table>
-                <tbody>
-                    <tr>
-                        <td>name:</td>
-                        <td>genki</td>
-                    </tr>
-                    <tr>
-                        <td>height:</td>
-                        <td>mouse-sized</td>
-                    </tr>
-                    <tr>
-                        <td>species:</td>
-                        <td><span class="info">space cabbit</span></td>
-                    </tr>
-                    <tr>
-                        <td><span class="warning">wanted</span> for:</td>
-                        <td>being too silly :3</td>
-                    </tr>
-                    <tr>
-                        <td>last seen:</td>
-                        <td><span class="warning">inside your walls...</span></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <p><span class="info">!INFO</span><br> likes to smell plants and imprison bugs... can be found eating plastic
-            from your bins and
-            drinking kerosene at your nearest airport </p>
-        <p><span class="warning">!CAUTION</span><br> <img src="../assets/images/warningsign.gif"> will <span
-                class="highlight">bark</span> very loud if approached <img src="../assets/images/warningsign.gif"></p>
-        <div id="reward">
-            <img src="../assets/images/missile.gif">
-            <div>
-                <h1 class="highlight">!REWARD!</h1>
-                <p>second-hand <span class="highlight">Hwasong-18</span> ICBM<br>[fuel not included] </p>
-            </div>
-            <img src="../assets/images/missile.gif">
-        </div>
-    </div>
-</template>
-<script setup lang="ts"></script>
-<style scoped>
-h1 {
-    text-decoration: underline;
-    text-align: center;
-    margin: 0;
-    @media screen and (max-width: 900px) {
-        font-size: 32px;
-    }
-    @media screen and (max-width: 600px) {
-        font-size: 24px;
-    }
-    @media screen and (max-width: 400px) {
-        font-size: 20px;
-    }
-}
-
-p {
-    /* width: 100%; */
-    margin: 0;
-    text-align: center;
-}
-
-#poster {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 1em;
-    @media screen and (max-width: 600px) {
-        font-size: 24px;
-    }
-    @media screen and (max-width: 500px) {
-        font-size: 16px;
-    }
-}
-
-#profile {
-    display: flex;
-    gap: 1em;
-
-    align-items: center;
-
-    img {
-        height: 256px;
-        border: solid 2px;
-        background-color: black;
-    }
-
-    @media screen and (max-width: 900px) {
-        flex-direction: column;
-        img {
-            height: 128px;
-        }
-    }
-}
-
-#reward {
-    display: flex;
-    height: fit-content;
-    align-items: center;
-    gap: .5em;
-
-    border: 2px solid rgba(222, 222, 108, 1);
-    padding: 1em;
-
-    background-color: black;
-    img {
-        height: 64px;
-    }
-    @media screen and (max-width: 600px) {
-        img {
-        height: 32px;
-    }
-    }
-    
-}
-
-td {
-    text-align: center;
-    padding: .2em;
-}
-
-table,
-th,
-td {
-    border: 2px solid white;
-    border-collapse: collapse;
-    background-color: black;
-    @media screen and (max-width: 600px) {
-        font-size: 24px;
-    }
-    @media screen and (max-width: 500px) {
-        font-size: 16px;
-    }
-}
-
-td:nth-child(odd) {
-    text-align: right;
-}
-</style>

src/components/welcometitle.vue

@@ -1,35 +0,0 @@
-<template>
-    <p>welcome to...</p>
-    <h1>{{ props.title }}</h1>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const props = defineProps({
-    title: String
-})
-</script>
-
-<style scoped>
-h1 {
-    margin: 0;
-    padding-top: .25em;
-    padding-left: .25em;
-
-    color: black;
-    font-size: 72px;
-
-    @media screen and (max-width: 500px) {
-        font-size: 32px;
-    }
-
-    background: linear-gradient(90deg, rgba(222, 222, 108, 1) 0%, rgba(222, 222, 108, 1) 25%, rgba(0, 212, 255, 0) 100%);
-}
-
-p {
-    margin: 0;
-
-    font-size: 32px;
-}
-</style>