@turnipxenon/pineapple 1.1.2 → 2.2.1

package/src/lib/theme.postcss

@@ -1,107 +1,116 @@
+@tailwind variants;
+
 :root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: var(--color-text-500);
-	--theme-font-color-dark: var(--color-text-900);
-	--theme-rounded-base: 24px;
-	--theme-rounded-container: 16px;
-	--theme-border-base: 2px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: var(--color-text-900);
-	--on-secondary: var(--color-surface-500);
-	--on-tertiary: var(--color-text-900);
-	--on-success: var(--color-text-900);
-	--on-warning: var(--color-text-900);
-	--on-error: var(--color-surface-500);
-	--on-surface: var(--color-text-900);
-	/* =~= Theme Colors  =~= */
-	/* primary | #b9a26e */
-	--color-primary-50: 245 241 233; /* ⬅ #f5f1e9 */
-	--color-primary-100: 241 236 226; /* ⬅ #f1ece2 */
-	--color-primary-200: 238 232 219; /* ⬅ #eee8db */
-	--color-primary-300: 227 218 197; /* ⬅ #e3dac5 */
-	--color-primary-400: 206 190 154; /* ⬅ #cebe9a */
-	--color-primary-500: 185 162 110; /* ⬅ #b9a26e */
-	--color-primary-600: 167 146 99; /* ⬅ #a79263 */
-	--color-primary-700: 139 122 83; /* ⬅ #8b7a53 */
-	--color-primary-800: 111 97 66; /* ⬅ #6f6142 */
-	--color-primary-900: 91 79 54; /* ⬅ #5b4f36 */
-	/* secondary | #b55639 */
-	--color-secondary-50: 244 230 225; /* ⬅ #f4e6e1 */
-	--color-secondary-100: 240 221 215; /* ⬅ #f0ddd7 */
-	--color-secondary-200: 237 213 206; /* ⬅ #edd5ce */
-	--color-secondary-300: 225 187 176; /* ⬅ #e1bbb0 */
-	--color-secondary-400: 203 137 116; /* ⬅ #cb8974 */
-	--color-secondary-500: 181 86 57; /* ⬅ #b55639 */
-	--color-secondary-600: 163 77 51; /* ⬅ #a34d33 */
-	--color-secondary-700: 136 65 43; /* ⬅ #88412b */
-	--color-secondary-800: 109 52 34; /* ⬅ #6d3422 */
-	--color-secondary-900: 89 42 28; /* ⬅ #592a1c */
-	/* tertiary | #cd7949 */
-	--color-tertiary-50: 248 235 228; /* ⬅ #f8ebe4 */
-	--color-tertiary-100: 245 228 219; /* ⬅ #f5e4db */
-	--color-tertiary-200: 243 222 210; /* ⬅ #f3ded2 */
-	--color-tertiary-300: 235 201 182; /* ⬅ #ebc9b6 */
-	--color-tertiary-400: 220 161 128; /* ⬅ #dca180 */
-	--color-tertiary-500: 205 121 73; /* ⬅ #cd7949 */
-	--color-tertiary-600: 185 109 66; /* ⬅ #b96d42 */
-	--color-tertiary-700: 154 91 55; /* ⬅ #9a5b37 */
-	--color-tertiary-800: 123 73 44; /* ⬅ #7b492c */
-	--color-tertiary-900: 100 59 36; /* ⬅ #643b24 */
-	/* success | #7cab36 */
-	--color-success-50: 235 242 225; /* ⬅ #ebf2e1 */
-	--color-success-100: 229 238 215; /* ⬅ #e5eed7 */
-	--color-success-200: 222 234 205; /* ⬅ #deeacd */
-	--color-success-300: 203 221 175; /* ⬅ #cbddaf */
-	--color-success-400: 163 196 114; /* ⬅ #a3c472 */
-	--color-success-500: 124 171 54; /* ⬅ #7cab36 */
-	--color-success-600: 112 154 49; /* ⬅ #709a31 */
-	--color-success-700: 93 128 41; /* ⬅ #5d8029 */
-	--color-success-800: 74 103 32; /* ⬅ #4a6720 */
-	--color-success-900: 61 84 26; /* ⬅ #3d541a */
-	/* warning | #b8993a */
-	--color-warning-50: 244 240 225; /* ⬅ #f4f0e1 */
-	--color-warning-100: 241 235 216; /* ⬅ #f1ebd8 */
-	--color-warning-200: 237 230 206; /* ⬅ #ede6ce */
-	--color-warning-300: 227 214 176; /* ⬅ #e3d6b0 */
-	--color-warning-400: 205 184 117; /* ⬅ #cdb875 */
-	--color-warning-500: 184 153 58; /* ⬅ #b8993a */
-	--color-warning-600: 166 138 52; /* ⬅ #a68a34 */
-	--color-warning-700: 138 115 44; /* ⬅ #8a732c */
-	--color-warning-800: 110 92 35; /* ⬅ #6e5c23 */
-	--color-warning-900: 90 75 28; /* ⬅ #5a4b1c */
-	/* error | #b53977 */
-	--color-error-50: 244 225 235; /* ⬅ #f4e1eb */
-	--color-error-100: 240 215 228; /* ⬅ #f0d7e4 */
-	--color-error-200: 237 206 221; /* ⬅ #edcedd */
-	--color-error-300: 225 176 201; /* ⬅ #e1b0c9 */
-	--color-error-400: 203 116 160; /* ⬅ #cb74a0 */
-	--color-error-500: 181 57 119; /* ⬅ #b53977 */
-	--color-error-600: 163 51 107; /* ⬅ #a3336b */
-	--color-error-700: 136 43 89; /* ⬅ #882b59 */
-	--color-error-800: 109 34 71; /* ⬅ #6d2247 */
-	--color-error-900: 89 28 58; /* ⬅ #591c3a */
-	/* surface | #fff7e3 */
-	--color-surface-50: 255 254 251; /* ⬅ #fffefb */
-	--color-surface-100: 255 253 249; /* ⬅ #fffdf9 */
-	--color-surface-200: 255 253 248; /* ⬅ #fffdf8 */
-	--color-surface-300: 255 252 244; /* ⬅ #fffcf4 */
-	--color-surface-400: 255 249 235; /* ⬅ #fff9eb */
-	--color-surface-500: 255 247 227; /* ⬅ #fff7e3 */
-	--color-surface-600: 230 222 204; /* ⬅ #e6decc */
-	--color-surface-700: 191 185 170; /* ⬅ #bfb9aa */
-	--color-surface-800: 153 148 136; /* ⬅ #999488 */
-	--color-surface-900: 125 121 111; /* ⬅ #7d796f */
-	/* text color | #3f312f */
-	--color-text-50: 226 224 224; /* ⬅ #e2e0e0 */
-	--color-text-100: 217 214 213; /* ⬅ #d9d6d5 */
-	--color-text-200: 207 204 203; /* ⬅ #cfcccb */
-	--color-text-300: 178 173 172; /* ⬅ #b2adac */
-	--color-text-400: 121 111 109; /* ⬅ #796f6d */
-	--color-text-500: 63 49 47; /* ⬅ #3f312f */
-	--color-text-600: 57 44 42; /* ⬅ #392c2a */
-	--color-text-700: 47 37 35; /* ⬅ #2f2523 */
-	--color-text-800: 38 29 28; /* ⬅ #261d1c */
-	--color-text-900: 31 24 23; /* ⬅ #1f1817 */
+    /* =~= Theme Properties =~= */
+    --theme-font-family-base: system-ui;
+    --theme-font-family-heading: system-ui;
+    --theme-font-color-base: var(--color-primary-900);
+    --theme-font-color-dark: var(--color-primary-100);
+    --theme-rounded-base: 24px;
+    --theme-rounded-container: 16px;
+    --theme-border-base: 2px;
+    /* =~= Theme On-X Colors =~= */
+    --on-primary: var(--color-text-900);
+    --on-secondary: var(--color-surface-500);
+    --on-tertiary: var(--color-text-900);
+    --on-success: var(--color-text-900);
+    --on-warning: var(--color-text-900);
+    --on-error: var(--color-surface-500);
+    --on-surface: var(--color-text-900);
+    /* =~= Theme Colors  =~= */
+    /* primary | #b9a26e */
+    --color-primary-50: 245 241 233; /* ⬅ #f5f1e9 */
+    --color-primary-100: 241 236 226; /* ⬅ #f1ece2 */
+    --color-primary-200: 238 232 219; /* ⬅ #eee8db */
+    --color-primary-300: 227 218 197; /* ⬅ #e3dac5 */
+    --color-primary-400: 206 190 154; /* ⬅ #cebe9a */
+    --color-primary-500: 185 162 110; /* ⬅ #b9a26e */
+    --color-primary-600: 167 146 99; /* ⬅ #a79263 */
+    --color-primary-700: 139 122 83; /* ⬅ #8b7a53 */
+    --color-primary-800: 111 97 66; /* ⬅ #6f6142 */
+    --color-primary-900: 91 79 54; /* ⬅ #5b4f36 */
+    --color-primary-1000: 66 54 29; /* ⬅ #42361d */
+    /* secondary | #b55639 */
+    --color-secondary-50: 244 230 225; /* ⬅ #f4e6e1 */
+    --color-secondary-100: 240 221 215; /* ⬅ #f0ddd7 */
+    --color-secondary-200: 237 213 206; /* ⬅ #edd5ce */
+    --color-secondary-300: 225 187 176; /* ⬅ #e1bbb0 */
+    --color-secondary-350: 214 162 146; /* ⬅ #D6A292 */
+    --color-secondary-400: 203 137 116; /* ⬅ #cb8974 */
+    --color-secondary-450: 192 112 87; /* ⬅ #C07057 */
+    --color-secondary-500: 181 86 57; /* ⬅ #b55639 */
+    --color-secondary-600: 163 77 51; /* ⬅ #a34d33 */
+    --color-secondary-700: 136 65 43; /* ⬅ #88412b */
+    --color-secondary-800: 109 52 34; /* ⬅ #6d3422 */
+    --color-secondary-900: 89 42 28; /* ⬅ #592a1c */
+    /* tertiary | #cd7949 */
+    --color-tertiary-50: 248 235 228; /* ⬅ #f8ebe4 */
+    --color-tertiary-100: 245 228 219; /* ⬅ #f5e4db */
+    --color-tertiary-200: 243 222 210; /* ⬅ #f3ded2 */
+    --color-tertiary-300: 235 201 182; /* ⬅ #ebc9b6 */
+    --color-tertiary-400: 220 161 128; /* ⬅ #dca180 */
+    --color-tertiary-500: 205 121 73; /* ⬅ #cd7949 */
+    --color-tertiary-600: 185 109 66; /* ⬅ #b96d42 */
+    --color-tertiary-700: 154 91 55; /* ⬅ #9a5b37 */
+    --color-tertiary-800: 123 73 44; /* ⬅ #7b492c */
+    --color-tertiary-900: 100 59 36; /* ⬅ #643b24 */
+    /* success | #7cab36 */
+    --color-success-50: 235 242 225; /* ⬅ #ebf2e1 */
+    --color-success-100: 229 238 215; /* ⬅ #e5eed7 */
+    --color-success-200: 222 234 205; /* ⬅ #deeacd */
+    --color-success-300: 203 221 175; /* ⬅ #cbddaf */
+    --color-success-400: 163 196 114; /* ⬅ #a3c472 */
+    --color-success-500: 124 171 54; /* ⬅ #7cab36 */
+    --color-success-600: 112 154 49; /* ⬅ #709a31 */
+    --color-success-700: 93 128 41; /* ⬅ #5d8029 */
+    --color-success-800: 74 103 32; /* ⬅ #4a6720 */
+    --color-success-900: 61 84 26; /* ⬅ #3d541a */
+    /* warning | #b8993a */
+    --color-warning-50: 244 240 225; /* ⬅ #f4f0e1 */
+    --color-warning-100: 241 235 216; /* ⬅ #f1ebd8 */
+    --color-warning-200: 237 230 206; /* ⬅ #ede6ce */
+    --color-warning-300: 227 214 176; /* ⬅ #e3d6b0 */
+    --color-warning-400: 205 184 117; /* ⬅ #cdb875 */
+    --color-warning-500: 184 153 58; /* ⬅ #b8993a */
+    --color-warning-600: 166 138 52; /* ⬅ #a68a34 */
+    --color-warning-700: 138 115 44; /* ⬅ #8a732c */
+    --color-warning-800: 110 92 35; /* ⬅ #6e5c23 */
+    --color-warning-900: 90 75 28; /* ⬅ #5a4b1c */
+    /* error | #b53977 */
+    --color-error-50: 244 225 235; /* ⬅ #f4e1eb */
+    --color-error-100: 240 215 228; /* ⬅ #f0d7e4 */
+    --color-error-200: 237 206 221; /* ⬅ #edcedd */
+    --color-error-300: 225 176 201; /* ⬅ #e1b0c9 */
+    --color-error-400: 203 116 160; /* ⬅ #cb74a0 */
+    --color-error-500: 181 57 119; /* ⬅ #b53977 */
+    --color-error-600: 163 51 107; /* ⬅ #a3336b */
+    --color-error-700: 136 43 89; /* ⬅ #882b59 */
+    --color-error-800: 109 34 71; /* ⬅ #6d2247 */
+    --color-error-900: 89 28 58; /* ⬅ #591c3a */
+    /* surface | #fff7e3 */
+    --color-surface-50: 255 254 251; /* ⬅ #fffefb */
+    --color-surface-100: 255 253 249; /* ⬅ #fffdf9 */
+    --color-surface-200: 255 253 248; /* ⬅ #fffdf8 */
+    --color-surface-300: 255 252 244; /* ⬅ #fffcf4 */
+    --color-surface-400: 255 249 235; /* ⬅ #fff9eb */
+    --color-surface-500: 255 247 227; /* ⬅ #fff7e3 */
+    --color-surface-600: 230 222 204; /* ⬅ #e6decc */
+    --color-surface-700: 191 185 170; /* ⬅ #bfb9aa */
+    --color-surface-800: 153 148 136; /* ⬅ #999488 */
+    --color-surface-900: 125 121 111; /* ⬅ #7d796f */
+    /* text color | #3f312f */
+    --color-text-50: 226 224 224; /* ⬅ #e2e0e0 */
+    --color-text-100: 217 214 213; /* ⬅ #d9d6d5 */
+    --color-text-200: 207 204 203; /* ⬅ #cfcccb */
+    --color-text-300: 178 173 172; /* ⬅ #b2adac */
+    --color-text-400: 121 111 109; /* ⬅ #796f6d */
+    --color-text-500: 63 49 47; /* ⬅ #3f312f */
+    --color-text-600: 57 44 42; /* ⬅ #392c2a */
+    --color-text-700: 47 37 35; /* ⬅ #2f2523 */
+    --color-text-800: 38 29 28; /* ⬅ #261d1c */
+    --color-text-900: 31 24 23; /* ⬅ #1f1817 */
+}
+
+.app-shell-token {
+    @apply bg-surface-600 dark:bg-surface-900;
 }

package/src/lib/util/create_go_to_function.ts

@@ -0,0 +1,5 @@
+export const createGoToFunction = (path: string): (() => void) => {
+    return (() => {
+        location.href = path;
+    });
+};

package/src/routes/+layout.svelte

@@ -1,23 +1,19 @@
 <script lang="ts">
-	import PinyaBaseLayout from "$lib/components/PineappleBaseLayout.svelte";
-	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
-</script>
+	// The ordering of these imports is critical to your app working properly
+	import "$lib/theme.postcss";
+	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+	// import "@skeletonlabs/skeleton/styles/all.css";
+	// Most of your app wide CSS should be put in this file
+	import "$lib/app.postcss";
+
 
-<svelte:head>
-	<title>{PUBLIC_CRINGE_USERNAME}</title>
-	<meta content="summary" name="Turnip time!" />
-	<meta content="@{PUBLIC_CRINGE_USERNAME}" name="twitter:site" />
-	<meta content="@{PUBLIC_CRINGE_USERNAME}" name="twitter:creator" />
-	<meta content="https://www.{PUBLIC_CRINGE_USERNAME}.com/" name="og:url" />
-	<meta content="{PUBLIC_CRINGE_USERNAME} | Home" name="og:title" />
-	<meta
-		content="I have no idea! Anyway... Hi! I don't know what I'm doing! Also check out my games!"
-		name="og:description"
-	/>
-	<meta content="https://www.{PUBLIC_CRINGE_USERNAME}.com/default-card.png" property="og:image" />
-</svelte:head>
+	import { initializeStores } from "@skeletonlabs/skeleton";
+	import { Modal } from "@skeletonlabs/skeleton";
+	import "$lib/styles/global.css";
+
+	initializeStores();
+</script>
 
-<PinyaBaseLayout>
-	<slot />
-</PinyaBaseLayout>
+<Modal />
 
+<slot />

package/src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script>
     import {PUBLIC_CRINGE_USERNAME} from "$env/static/public";
-    import TestImage from "$lib/assets/characters/ares/ares_happy.webp"
-    import LazyAsset from "$lib/components/LazyAsset.svelte";
+
+    import {createGoToFunction} from "$lib/util/create_go_to_function";
+    import PineappleBaseLayout from "$lib/components/layouts/PineappleBaseLayout.svelte";
 </script>
 
 <svelte:head>
@@ -13,20 +14,16 @@
 	/>
 </svelte:head>
 
-<div class="card default-card">
-<!--	<LazyAsset src={TestImage} alt="test" width="100" height="100">-->
-<!--	</LazyAsset>-->
-
+<PineappleBaseLayout>
+	<div class="card default-card">
 		<h1 class="mb-8">Directory</h1>
 
 		<div class="btn-group-vertical variant-filled-secondary">
-			<button onclick="location.href='/about'"><h2>About</h2></button>
-			<button onclick="location.href='/socials'"><h2>Socials</h2></button>
-			<button onclick="location.href='/game-dev'"><h2>Game development</h2></button>
-			<button onclick="location.href='/blogs'"><h2>Blogs</h2></button>
-			<button onclick="location.href='/misc'"><h2>Miscellaneous</h2></button>
+			<button on:click={createGoToFunction("personal")}><h2>Personal</h2></button>
+			<button on:click={createGoToFunction("portfolio")}><h2>Portfolio</h2></button>
 		</div>
-</div>
+	</div>
+</PineappleBaseLayout>
 
 <style lang="postcss">
     .btn-group-vertical button {

package/src/routes/personal/+layout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import PinyaBaseLayout from "$lib/components/layouts/PineappleBaseLayout.svelte";
+	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
+</script>
+
+<svelte:head>
+	<title>{PUBLIC_CRINGE_USERNAME}</title>
+	<meta content="summary" name="Turnip time!" />
+	<meta content="@{PUBLIC_CRINGE_USERNAME}" name="twitter:site" />
+	<meta content="@{PUBLIC_CRINGE_USERNAME}" name="twitter:creator" />
+	<meta content="https://www.{PUBLIC_CRINGE_USERNAME}.com/" name="og:url" />
+	<meta content="{PUBLIC_CRINGE_USERNAME} | Home" name="og:title" />
+	<meta
+		content="I have no idea! Anyway... Hi! I don't know what I'm doing! Also check out my games!"
+		name="og:description"
+	/>
+	<meta content="https://www.{PUBLIC_CRINGE_USERNAME}.com/default-card.png" property="og:image" />
+</svelte:head>
+
+<PinyaBaseLayout>
+	<slot />
+</PinyaBaseLayout>
+

package/src/routes/personal/+page.svelte

@@ -0,0 +1,37 @@
+<script>
+    import {PUBLIC_CRINGE_USERNAME} from "$env/static/public";
+</script>
+
+<svelte:head>
+	<title>Welcome to {PUBLIC_CRINGE_USERNAME}'s Home</title>
+	<meta content="Welcome to {PUBLIC_CRINGE_USERNAME}'s Home" name="og:title"/>
+	<meta
+			content="Welcome to {PUBLIC_CRINGE_USERNAME}'s home! It's a neat place to be at if you're feeling lost. Come hang around!"
+			name="og:description"
+	/>
+</svelte:head>
+
+<div class="card default-card">
+
+		<h1 class="mb-8">Directory</h1>
+
+		<div class="btn-group-vertical variant-filled-secondary">
+			<button onclick="location.href='/about'"><h2>About</h2></button>
+			<button onclick="location.href='/socials'"><h2>Socials</h2></button>
+			<button onclick="location.href='/game-dev'"><h2>Game development</h2></button>
+			<button onclick="location.href='/blogs'"><h2>Blogs</h2></button>
+			<button onclick="location.href='/misc'"><h2>Miscellaneous</h2></button>
+		</div>
+</div>
+
+<style lang="postcss">
+    .btn-group-vertical button {
+        padding: 2em;
+    }
+
+    .default-card {
+        text-align: center;
+        padding-inline-end: 0;
+        @apply p-16;
+    }
+</style>

package/src/routes/portfolio/+page.server.ts

@@ -0,0 +1,44 @@
+import type {PageLoad} from './$types';
+import * as htmlparser2 from "htmlparser2";
+import {DomUtils} from "htmlparser2";
+
+export const prerender = true;
+
+export interface ItchMeta {
+    title: string; // title
+    thumbnailLink: string; // meta content name=twitter:image
+    description: string; // class: user_profile formatted
+}
+
+export interface PageData {
+    itchMeta?: ItchMeta;
+}
+
+// todo: save for webscraping for dynamic content during compile time
+export const load: PageLoad = async (): Promise<PageData> => {
+    return {};
+    // return fetch("https://turnipxenon.itch.io/", {}).then(r => {
+    //     return r.text().then(htmlString => {
+    //         const dom = htmlparser2.parseDocument(htmlString);
+    //         const imageChild = DomUtils.findOne(el => {
+    //             return DomUtils.getAttributeValue(el, "name") === "twitter:image";
+    //         }, dom.childNodes);
+    //         const titleChild = DomUtils.findOne(el => {
+    //             return el.tagName === "title";
+    //         }, dom.childNodes);
+    //         return {
+    //             itchMeta: {
+    //                 title: titleChild ? DomUtils.textContent(titleChild) : "",
+    //                 thumbnailLink: imageChild !== null ? DomUtils.getAttributeValue(imageChild, "content")! : "",
+    //                 description: "",
+    //             }
+    //         };
+    //     }).catch(e => {
+    //         console.error(e);
+    //         return {};
+    //     });
+    // }).catch(e => {
+    //     console.error(e);
+    //     return {};
+    // });
+};

package/src/routes/portfolio/+page.svelte

@@ -0,0 +1,19 @@
+<script>
+	import SeaweedTemplate from "$lib/template/SeaweedTemplate.svelte";
+	import WebThumbnailImage from "$pkg/assets/placeholder/placeholder_circle.png";
+
+	export let metaWebsite = "https://www.crouton.com/test/portfolio-base-layout";
+
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>Welcome to my portfolio</title>
+	<meta name="twitter:card" content="summary" />
+	<meta property="og:url" content={metaWebsite} />
+	<meta property="og:title" content="Turnip" />
+	<meta property="og:description" content="Welcome to Turnip's test portfolio website" />
+	<meta property="og:image" content={WebThumbnailImage} />
+</svelte:head>
+
+<SeaweedTemplate ></SeaweedTemplate>

package/src/routes/portfolio/SocialSection.svelte

@@ -0,0 +1,93 @@
+<script>
+	import MailIcon from "$pkg/assets/icons/mail.svg";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+	import { ItchLogoHotLink } from "$pkg/consts";
+	import LinkedinIcon from "$pkg/assets/icons/linkedin.svg";
+	import { onMount } from "svelte";
+
+	export let isSmallVersion = false;
+	export let email = "turnipxenon@gmail.com";
+	export let linkedinSlug = "turnip-xenon";
+	export let isSlot = false;
+
+	let shouldShowExtra = false;
+	const style = `
+		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
+		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
+	`;
+
+	onMount(() => {
+		shouldShowExtra = window.screen.availWidth >= 440;
+	});
+</script>
+
+<div class="socials" class:isSmall={isSmallVersion} style={style}>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title="https://github.com/TurnipXenon"
+	        on:click={() => window.open("https://github.com/TurnipXenon")}>
+		<img src={GithubIcon} alt="github icon">
+		{#if (!isSmallVersion)}
+			<span>TurnipXenon</span>
+		{/if}
+	</button>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title={`https://www.linkedin.com/in/${linkedinSlug}/`}
+	        on:click={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
+		<img src={LinkedinIcon} alt="linkedikn icon">
+		{#if (!isSmallVersion)}
+			<span>{linkedinSlug}</span>
+		{/if}
+	</button>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title={`mailto:${email}`}
+	        on:click={() => window.open(`mailto:${email}`)}>
+		<img src={MailIcon} alt="mail icon" />
+		{#if (!isSmallVersion)}
+			<span>{email}</span>
+		{/if}
+	</button>
+	{#if (shouldShowExtra)}
+		<button type="button" class="social-button turnip-button"
+		        role="link"
+		        title="https://turnipxenon.itch.io/"
+		        on:click={() => window.open("https://turnipxenon.itch.io/")}>
+			<img src={ItchLogoHotLink} alt="itch icon">
+			{#if (!isSmallVersion)}
+				<span>TurnipXenon</span>
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style lang="postcss">
+    .social-button {
+        @apply btn variant-filled-primary;
+    }
+
+    button > img {
+        max-height: 1lh;
+    }
+
+    button {
+        min-width: 0;
+        min-height: 0;
+    }
+
+    .socials {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: var(--preferred-justify-content);
+    }
+
+    .socials > button {
+        margin: 0 0.5em var(--preferred-overall-margin-bottom);
+    }
+
+    .socials.isSmall > button {
+        margin-left: 0.25em;
+        margin-right: 0.25em;
+    }
+</style>

package/src/routes/portfolio/actual/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+	import SeaweedTemplate from "$lib/template/SeaweedTemplate.svelte";
+</script>
+
+<SeaweedTemplate name="Allan Manuba"
+                 email="allanmanuba@gmail.com"
+                 linkedinSlug="allan-manuba"
+                 metaWebsite="https://www.allanmanuba.com">
+
+</SeaweedTemplate>

package/dist/app.postcss

@@ -1,94 +0,0 @@
-/*place global styles here */
-:root {
-	--default-card-max-width: calc(4rem + 4rem + 40rem);
-}
-
-html,
-body {
-	@apply h-full overflow-hidden;
-	@apply bg-surface-400-500-token;
-	background-color: transparent;
-}
-
-/*
-
-//for reference left here
-
-.bg-surface-custom-token {
-    @apply bg-surface-200 dark:bg-surface-700;
-}
-
-.app-bar {
-    @apply bg-surface-custom-token;
-}
-*/
-
-.card {
-	--tw-ring-offset-color: rgb(var(--color-text-300));
-	--tw-ring-offset-width: var(--theme-border-base);
-}
-
-.dark .card {
-	--tw-ring-offset-color: rgb(var(--color-text-600));
-}
-
-.variant-ghost-primary {
-	background-color: rgb(var(--color-primary-500) / 0.8);
-}
-
-.dark .variant-ghost-primary {
-	background-color: rgb(var(--color-primary-400) / 0.8);
-}
-
-.default-card {
-	@apply variant-ghost-primary text-center p-16;
-	text-align: start;
-	padding-inline-end: clamp(0rem, 10vw, 8rem);
-	max-width: var(--default-card-max-width);
-}
-
-h1,
-h2,
-p {
-	margin-bottom: 0.5em;
-}
-
-ul {
-	list-style-type: circle;
-	padding-left: 1em;
-}
-
-a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(
-		a.card
-	):not(.list-nav a) {
-	color: rgb(var(--color-secondary-500) / var(--tw-text-opacity));
-}
-
-.dark
-	a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(
-		a.card
-	):not(.list-nav a) {
-	color: rgb(var(--color-secondary-700) / var(--tw-text-opacity));
-}
-
-.default-page-container {
-	@apply flex justify-center items-center;
-	margin-top: 4em;
-	margin-left: clamp(1em, 15vw, 10em);
-	margin-right: 1em;
-	flex-direction: column;
-	z-index: 0;
-}
-
-.footer-space {
-	width: 100%;
-	height: calc(var(--dialog-box-height) + 4em);
-}
-
-a.dialog-choice {
-    cursor: url("$lib/assets/icons/chat_cursor.svg"), auto;
-}
-
-a.external-link {
-    cursor: url("$lib/assets/icons/external_link.svg"), auto;
-}