.forgejo/workflows/signal-rebuild.yml

@@ -1,23 +0,0 @@
-name: Rebuild signaller for deprived.dev to rebuild site
-
-on: [push]
-
-jobs:
-  test_service:
-    runs-on: native
-
-    steps:
-      - name: Get branch
-        run: echo "BRANCH=$(echo "${{ gitea.ref }}" | cut -d'/' -f3)" >> $GITHUB_ENV
-      - name: Signal deprived.dev for rebuild
-        env:
-          SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
-        run: |
-          sshkey=$(mktemp)
-          trap "rm -rf $sshkey" exit
-          echo -e $SSH_PRIVATE_KEY > $sshkey
-          service="build-deprived-website-$BRANCH"
-          sshargs="-o LogLevel=ERROR -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no"
-          echo "Starting systemd oneshot service: $service"
-          ssh -i $sshkey -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no deprivedbuilder@deprived.dev -t "sudo /run/current-system/sw/bin/systemctl start $service"
-          echo "Build Log: $(ssh -i $sshkey $sshargs deprivedbuilder@deprived.dev "cat ~/latest_build.log")"

.gitignore

@@ -1,10 +1,26 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+temp

.npmrc

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

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

README.md

@@ -0,0 +1,47 @@
+# Svelte + Vite
+
+This template should help get you started developing with Svelte in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `checkJs` in the JS template?**
+
+It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```js
+// store.js
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

build.sh

@@ -1,16 +0,0 @@
-#!/usr/bin/env bash
-
-# motherfucking hate npm. Spent 3 hours debugging that when
-# NODE_ENV is set to production, npm won't install anything
-unset NODE_ENV
-
-git pull
-git reset --hard main
-
-npm ci
-
-echo "Ready to build, building..."
-
-npm run build
-
-echo "Done rebuilding!"

index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + balls</title>
+  </head>
+
+  <body>
+    <div id="app" style="margin: 0; padding: 0;"></div>
+    <script type="module" src="/src/main.js"></script>
+
+    <noscript>
+      <style type="text/css">
+          .pagecontainer {display:none;}
+      </style>
+      <div class="noscriptmsg">
+        You don't have javascript enabled. <br/>
+        Please visit this website without javascript: <a href="https://scriptless.deprived.dev/">link</a>
+      </div>
+    </noscript>
+  </body>
+
+</html>

jsconfig.json

@@ -1,24 +1,32 @@
-{
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-		"paths": {
-			"@images/*": ["./src/images/*"],
-			"@src/*": ["./src/*"],
-			"@static/*": ["./static/*"]
-		}
-	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
-}
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package.json

@@ -1,38 +1,17 @@
 {
-	"name": "deprived-main-website",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --compiler-warnings \"css-unused-selector:ignore,unused-export-let:ignore\" --threshold error",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch --threshold error"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.20.4",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@tailwindcss/typography": "^0.5.15",
-		"autoprefixer": "^10.4.20",
-		"daisyui": "^5.0.12",
-		"sass": "^1.77.4",
-		"svelte": "^5.25.7",
-		"svelte-check": "^3.8.6",
-		"svelte-highlight": "^7.6.0",
-		"tailwindcss": "^4.1.3",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.3",
-		"vite-plugin-svgr": "^4.2.0"
-	},
-	"type": "module",
-	"dependencies": {
-		"@lucide/svelte": "^0.487.0",
-		"@tailwindcss/vite": "^4.1.3",
-		"lucide-svelte": "^0.475.0",
-		"svelte-katex": "^0.1.2",
-		"svelte-media-queries": "^1.6.2",
-		"theme-change": "^2.5.0"
-	}
+  "name": "depriveddemowebsite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "svelte": "^4.2.8",
+    "svelte-parallax": "^0.6.0",
+    "vite": "^5.0.8"
+  }
 }

public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

run.bat

@@ -0,0 +1,3 @@
+@echo on
+call npm install
+call npm run dev

run.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Enable echoing of commands
+set -x
+
+# Install npm dependencies
+npm install
+
+# Run the development script
+npm run dev

src/App.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import svelteLogo from './assets/svelte.svg'
+  import StartVideo from './assets/StartVideo.gif'
+  import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
+  import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
+  import ZSpacer from './lib/Universal/ZSpacer.svelte';
+  import Cube3D from './lib/Cube3D.svelte';
+  import WeAreText from './lib/WeAreText.svelte';
+
+  window.onload = function() {
+    window.scrollTo(0, 100); // Real
+    //window.scrollTo(0, 3000); // debug
+  };
+
+  let scrollPos: number = 0;
+</script>
+
+<svelte:window bind:scrollY={scrollPos} />
+
+<main>
+  <div class="topnav">
+    <a class="active" href="#home">Home</a>
+    <a href="#news">News</a>
+    <a href="#contact">Contact</a>
+    <a href="#about">About</a>
+  </div> 
+
+  <Parallax sections={10} config={{stiffness: 0.2, damping: 0.3}}>
+    <ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
+
+    <StickyLayer class="align-center" offset={{ top: 1, bottom: 6.5 }}>
+      <div class="horizontal" style="padding: 200px;">    
+        <ZSpacer/>
+        <Cube3D/>
+      </div>
+    </StickyLayer>
+
+    <StickyLayer class="align-center" offset={{ top: 0, bottom: 6.5 }}>
+      <WeAreText/>
+    </StickyLayer>
+
+    <StickyLayer offset={{ top: 0, bottom: 10 }}>
+      <div>
+        {scrollPos}
+      </div>
+    </StickyLayer>
+
+    <StickyLayer offset={{ top: 5.4, bottom: 10 }} style="background-color: #242424;">
+      <div class="align-center" style="font-size: 100px; padding-top: 200px;">
+        The deprived devs
+      </div>
+    </StickyLayer>
+  </Parallax>
+
+  <!-- 
+  <ScrollTextComponent />
+  <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+    <ParallaxLayer rate={0} span={3} style="background-color: orange;" />
+  
+    <ParallaxLayer rate={-0.5}>
+      <img src={StartVideo} alt="Start video on main screen"/>
+    </ParallaxLayer>
+  
+    <ParallaxLayer rate={1} offset={1.75}>
+      <img src='bird.jpg' alt='a bird'>
+    </ParallaxLayer>
+  
+    <StickyLayer offset={{ top: 0.5, bottom: 2 }}>
+      <p>A description of a horse and a bird.</p>
+    </StickyLayer>
+  
+    <ParallaxLayer rate={2} offset={2} style="background-color: lightblue;" />
+  </Parallax>
+  -->
+
+</main>
+
+<style>
+
+</style>
+

src/app.css

@@ -1,223 +1,98 @@
-@import "tailwindcss";
-@plugin "daisyui";
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
 
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
 
-@plugin "daisyui/theme" {
-  name: "Deprived";
-  default: true;
-  prefersdark: true;
-  --color-base-100: oklch(14% 0 0);
-  --color-base-200: oklch(20% 0 0);
-  --color-base-300: oklch(26% 0 0);
-  --color-base-content: oklch(97% 0 0);
-  --color-primary: oklch(72% 0.219 149.579);
-  --color-primary-content: oklch(98% 0.018 155.826);
-  --color-secondary: oklch(58% 0.233 277.117);
-  --color-secondary-content: oklch(96% 0.018 272.314);
-  --color-accent: oklch(60% 0.25 292.717);
-  --color-accent-content: oklch(96% 0.016 293.756);
-  --color-neutral: oklch(20% 0 0);
-  --color-neutral-content: oklch(98% 0 0);
-  --color-info: oklch(58% 0.158 241.966);
-  --color-info-content: oklch(97% 0.013 236.62);
-  --color-success: oklch(64% 0.2 131.684);
-  --color-success-content: oklch(98% 0.031 120.757);
-  --color-warning: oklch(68% 0.162 75.834);
-  --color-warning-content: oklch(98% 0.026 102.212);
-  --color-error: oklch(57% 0.245 27.325);
-  --color-error-content: oklch(97% 0.013 17.38);
-  --radius-selector: 1rem;
-  --radius-field: 0.5rem;
-  --radius-box: 1rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-  --depth: 0;
-  --noise: 0;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-
-@plugin "daisyui/theme" {
-  name: "dark";
-  color-scheme: "dark";
-  --color-base-100: oklch(14% 0 0);
-  --color-base-200: oklch(20% 0 0);
-  --color-base-300: oklch(26% 0 0);
-  --color-base-content: oklch(97% 0 0);
-  --color-primary: oklch(90% 0.182 98.111);
-  --color-primary-content: oklch(28% 0.066 53.813);
-  --color-secondary: oklch(84% 0.143 164.978);
-  --color-secondary-content: oklch(26% 0.051 172.552);
-  --color-accent: oklch(87% 0.01 258.338);
-  --color-accent-content: oklch(13% 0.028 261.692);
-  --color-neutral: oklch(26% 0 0);
-  --color-neutral-content: oklch(98% 0 0);
-  --color-info: oklch(71% 0.143 215.221);
-  --color-info-content: oklch(98% 0.019 200.873);
-  --color-success: oklch(76% 0.233 130.85);
-  --color-success-content: oklch(98% 0.031 120.757);
-  --color-warning: oklch(70% 0.213 47.604);
-  --color-warning-content: oklch(98% 0.016 73.684);
-  --color-error: oklch(65% 0.241 354.308);
-  --color-error-content: oklch(97% 0.014 343.198);
-  --radius-selector: 0rem;
-  --radius-field: 0.5rem;
-  --radius-box: 1rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-  --depth: 0;
-  --noise: 1;
+body {
+  padding: 0;
+  margin: 0;
 }
 
-
-@plugin "daisyui/theme" {
-  name: "pink";
-  color-scheme: "light";
-  --color-base-100: oklch(96% 0.015 12.422);
-  --color-base-200: oklch(94% 0.03 12.58);
-  --color-base-300: oklch(89% 0.058 10.001);
-  --color-base-content: oklch(41% 0.159 10.272);
-  --color-primary: oklch(86% 0.127 207.078);
-  --color-primary-content: oklch(30% 0.056 229.695);
-  --color-secondary: oklch(0% 0 0);
-  --color-secondary-content: oklch(100% 0 0);
-  --color-accent: oklch(87% 0.169 91.605);
-  --color-accent-content: oklch(27% 0.077 45.635);
-  --color-neutral: oklch(51% 0.222 16.935);
-  --color-neutral-content: oklch(96% 0.015 12.422);
-  --color-info: oklch(74% 0.16 232.661);
-  --color-info-content: oklch(29% 0.066 243.157);
-  --color-success: oklch(77% 0.152 181.912);
-  --color-success-content: oklch(27% 0.046 192.524);
-  --color-warning: oklch(75% 0.183 55.934);
-  --color-warning-content: oklch(26% 0.079 36.259);
-  --color-error: oklch(70% 0.191 22.216);
-  --color-error-content: oklch(25% 0.092 26.042);
-  --radius-selector: 0.25rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.25rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-  --depth: 1;
-  --noise: 0;
+.typewriter h1 {
+  overflow: hidden; /* Ensures the content is not revealed until the animation */
+  border-right: .15em solid orange; /* The typwriter cursor */
+  white-space: nowrap; /* Keeps the content on a single line */
+  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
+  letter-spacing: .15em; /* Adjust as needed */
+  animation: 
+    typing 3.5s steps(40, end),
+    blink-caret .75s step-end infinite;
 }
 
-
-@plugin "daisyui/theme" {
-  name: "netherrack";
-  color-scheme: "dark";
-  --color-base-100: oklch(25% 0.092 26.042);
-  --color-base-200: oklch(39% 0.141 25.723);
-  --color-base-300: oklch(44% 0.177 26.899);
-  --color-base-content: oklch(93% 0.032 17.717);
-  --color-primary: oklch(83% 0.128 66.29);
-  --color-primary-content: oklch(26% 0.079 36.259);
-  --color-secondary: oklch(82% 0.111 230.318);
-  --color-secondary-content: oklch(29% 0.066 243.157);
-  --color-accent: oklch(78% 0.115 274.713);
-  --color-accent-content: oklch(25% 0.09 281.288);
-  --color-neutral: oklch(57% 0.245 27.325);
-  --color-neutral-content: oklch(97% 0.013 17.38);
-  --color-info: oklch(71% 0.143 215.221);
-  --color-info-content: oklch(98% 0.019 200.873);
-  --color-success: oklch(72% 0.219 149.579);
-  --color-success-content: oklch(98% 0.018 155.826);
-  --color-warning: oklch(76% 0.188 70.08);
-  --color-warning-content: oklch(98% 0.022 95.277);
-  --color-error: oklch(63% 0.237 25.331);
-  --color-error-content: oklch(97% 0.013 17.38);
-  --radius-selector: 2rem;
-  --radius-field: 2rem;
-  --radius-box: 2rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-  --depth: 1;
-  --noise: 1;
+/* The typing effect */
+@keyframes typing {
+  from { width: 0 }
+  to { width: 100% }
 }
 
-@plugin "daisyui/theme" {
-  name: "green";
-  color-scheme: "dark";
-  --color-base-100: oklch(26% 0.065 152.934);
-  --color-base-200: oklch(39% 0.095 152.535);
-  --color-base-300: oklch(44% 0.119 151.328);
-  --color-base-content: oklch(96% 0.044 156.743);
-  --color-primary: oklch(80% 0.105 251.813);
-  --color-primary-content: oklch(28% 0.091 267.935);
-  --color-secondary: oklch(80% 0.105 251.813);
-  --color-secondary-content: oklch(28% 0.091 267.935);
-  --color-accent: oklch(89% 0.196 126.665);
-  --color-accent-content: oklch(27% 0.072 132.109);
-  --color-neutral: oklch(52% 0.154 150.069);
-  --color-neutral-content: oklch(98% 0.018 155.826);
-  --color-info: oklch(78% 0.154 211.53);
-  --color-info-content: oklch(30% 0.056 229.695);
-  --color-success: oklch(79% 0.209 151.711);
-  --color-success-content: oklch(26% 0.065 152.934);
-  --color-warning: oklch(85% 0.199 91.936);
-  --color-warning-content: oklch(28% 0.066 53.813);
-  --color-error: oklch(71% 0.202 349.761);
-  --color-error-content: oklch(28% 0.109 3.907);
-  --radius-selector: 0.25rem;
-  --radius-field: 0.5rem;
-  --radius-box: 1rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-  --depth: 0;
-  --noise: 1;
+/* Add a black background color to the top navigation */
+.topnav {
+  background-color: #333;
+  overflow: hidden;
 }
 
-.bg-grid-100 {
-  background:
-    linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    #f2f2f2;
-  background-size:
-    4px 4px,
-    4px 4px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px;
-  background-color: var(--color-base-100);
+/* Style the links inside the navigation bar */
+.topnav a {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
 }
 
-.bg-grid-200 {
-  background:
-    linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    #f2f2f2;
-  background-size:
-    4px 4px,
-    4px 4px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px;
-  background-color: var(--color-base-200);
+/* Change the color of links on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
 }
 
-.bg-grid-300 {
-  background:
-    linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    #f2f2f2;
-  background-size:
-    4px 4px,
-    4px 4px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px,
-    80px 80px;
-  background-color: var(--color-base-300);
+/* Add a color to the active/current link */
+.topnav a.active {
+  background-color: #04AA6D;
+  color: white;
+}
+
+.horizontal{
+  display: flex;
+  justify-content: flex-start;
+}
+
+.big-text {
+  font-size: 125px;
+}
+
+.no-wrap {
+  text-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.no-interact {
+  pointer-events: none;
+}
+
+.hide{
+  visibility: hidden;
+}
+
+/* ================================================ */
+/* Aligning */
+/* ================================================ */
+.align-center {
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  text-align: center;
+  vertical-align: middle;
 }

src/app.d.ts

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

src/app.html

@@ -1,42 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="Deprived" style="overflow-x: hidden;">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="description" content="
-		We are the deprived devs, and we are a team of developers specializing in indie game development, full-stack development, and anything tech-related!">
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-
-        <!-- Change theme for site here -->
-        <link rel="stylesheet" href="/stylesheets/global.css" />
-		%sveltekit.head%
-
-		<script>
-			let theme = null;
-
-			if (typeof localStorage !== 'undefined') {
-				theme = localStorage.getItem('theme');
-			}
-
-			window.AvailableThemes =  ["green", "netherrack", "dark", "pink"];
-			
-			if (!theme) {
-				const randomNumber = Math.floor(Math.random() * 4);
-				console.log("Slecting: " + AvailableThemes[randomNumber]);
-				document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]);
-				localStorage.setItem('theme', AvailableThemes[randomNumber]);
-			} 
-			//else {
-			//	console.log("Slecting: " + theme);
-			//	document.documentElement.setAttribute('data-theme', theme);
-			//}
-		</script>
-
-	</head>
-
-	<body style="display: contents">
-		<div class="inline relative w-full h-full">
-			%sveltekit.body%
-		</div>
-	</body>
-</html>

src/assets/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

src/comps/Utils/HorizonalStack.svelte

@@ -1,12 +0,0 @@
-<div {...$$restProps}>
-    <slot></slot>
-</div>
-
-<style>
-    .centralize{
-        display: grid;
-        justify-content: center;
-        
-        padding: 0;
-    }
-</style>

src/comps/Utils/VerticalStack.svelte

@@ -1,4 +0,0 @@
-<!-- Just used for ease of read -->
-<div style="padding: 0;">
-    <slot></slot>
-</div>

src/comps/Utils/ZSpacer.svelte

@@ -1,8 +0,0 @@
-<div class="grow" />
-
-<style>
-    .grow{
-        display: flex;
-        flex-grow: 1;
-    }
-</style>

src/comps/timeline/timeline.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-    import HorizonalStack from "../Utils/HorizonalStack.svelte";
-    import TimelineItem from "./timelineItem.svelte";
-</script>
-
-<HorizonalStack {...$$restProps}>
-    <slot/>
-</HorizonalStack>
-
-<style>
-    :global(.JustifyStart){
-        display: flex;
-        justify-content: start;
-    }
-</style>

src/comps/timeline/timelineItem.svelte

@@ -1,99 +0,0 @@
-<script lang="ts">
-    import HorizonalStack from "../Utils/HorizonalStack.svelte";
-    import VerticalStack from "../Utils/VerticalStack.svelte";
-    import ZSpacer from "../Utils/ZSpacer.svelte";
-    import MediaQuery from 'svelte-media-queries';
-
-    // Set these when using the component
-    export let date: string = "null";
-    export let imagePath: string = "null";
-    export let title: string = "null";
-    export let desc: string = "null";
-
-    const timelineCollapseThreshhold : string = '1000px';
-    let timelineCollaped: boolean = false;
-</script>
-
-<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
-
-<div class="flexStart timelineItemContainer" style="overflow: auto;">
-    <div style="padding-top: 10px;">
-        {#if imagePath !== "null"}
-            <div class="imageContainer">
-                <img src={imagePath} class="image" alt="nothing"/>
-            </div>
-        {/if}
-    </div>
-    <div class="ItemStrip"/>
-    <div class="noPadding">
-        <div class="title">{@html title}</div>
-        <div class="DateText">{@html date}</div>
-        <div class="bodyText">{@html desc}</div>
-    </div>
-</div>
-
-<style>
-    .imageContainer {
-        position: relative;
-        z-index: -1;
-
-        width: 10vw;
-        height: 10vw;
-
-        overflow: hidden;
-    }
-
-    .imageContainer img{
-        position: absolute;
-
-        height: 100%;
-        width: 100%;
-
-        min-width: 100%;
-        min-height: 100%;
-    }
-
-    .timelineItemContainer{
-        column-gap: 3vw;
-        margin-top: 10px;
-    }
-
-    .noPadding{
-        padding: 0;
-    }
-
-    .flexStart{
-        display: flex;
-        justify-content: start;
-    }
-
-    .title {
-        font-size: 200%;
-
-        display: flex;
-        align-content: center;
-    }
-
-    .bodyText{
-        font-size: 1rem;
-    }
-
-    .DateText{
-        margin: 0;
-        margin-bottom: 0.5rem;
-
-        color: darkgray;
-
-        display: flex;
-        align-self: flex-start;
-    }
-
-    .ItemStrip{
-        min-width: 0.5%;
-        display: inline-flex;
-
-        position: relative;
-
-        background-color: rgb(178, 178, 178);
-    }
-</style>

src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  let count: number = 0
+  const increment = () => {
+    count += 10
+  }
+</script>
+
+<button on:scroll={increment}>
+  count is {count}
+</button>

src/lib/Cube3D.css

@@ -0,0 +1,86 @@
+/* .rotate1{
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+} */
+/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
+
+#cube-3d-container {
+  width: var(--cube-size);
+  height: var(--cube-size);
+  position: relative;
+  perspective: 500px;
+  -moz-perspective: 1000px;
+  padding: 25px;
+}
+
+#cube3d {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transform-style: preserve-3d;
+  transition: transform 1s cubic-bezier(0,1.32,0,.92);
+}
+
+#cube3d div {
+  display: block;
+  border: none;
+  line-height: var(--cube-size);
+  text-align: center;
+  font-size: 65px;
+}
+
+.cube-sides {
+  position: absolute;
+  width: var(--cube-size);
+  height: var(--cube-size);
+
+  text-decoration: underline;
+  text-underline-offset: 24px;
+}
+
+/* #front {
+} */
+/*
+#back {
+  background: var(--cube-color);
+}
+
+#right {
+  background: var(--cube-color);
+}
+
+#left {
+  background: var(--cube-color);
+}
+
+#top {
+  background: var(--cube-color);
+}
+
+#bottom {
+  background: var(--cube-color);
+} */
+
+#cube3d #front  {
+  transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #back {
+  transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
+  -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
+}
+#cube3d #right  {
+  transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #left   {
+  transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+/* #cube3d #top    {
+  transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #bottom {
+  transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+} */

src/lib/Cube3D.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+    import planeImg from './images/PlaneGrid.png';
+    import cubeSideImg from './images/CubeTexture.png';
+
+    // Hyperparameters (fine to change)
+    let startPosAnim: number = 1200; // Starts at scroll value
+    let endPosAnim: number = 4000; // Ends at scroll value
+    let parallexOutPadding = 700;
+    let parallaxOutLength = 400; // How long the exit anim is
+
+
+
+    // Define, don't touch
+    let scrollPos: number = 0;
+    let cubeRotY: number = 0;
+    let cubeRotX: number = 0;
+
+    // Total length of animation
+    let totalAnimLength: number = endPosAnim - startPosAnim;
+
+    // Front side text after fully scrolled
+    let frontSideText: string[] = ["overlooked", "DEPRIVED"];
+
+    function updateUI(){
+        // Calculates the cube roation
+        let time = (scrollPos - startPosAnim)/totalAnimLength;
+        cubeRotY = lerp(0, 360, clamp(time, 0, 1), true);
+
+        // Start exit anim after main anim
+        time = (scrollPos - (endPosAnim + parallexOutPadding))/(parallaxOutLength + parallexOutPadding);
+        cubeRotX = lerp(0, 15, clamp(time, 0, 1), true);
+
+        // if rotated cube 180deg then change text
+        let frontSide = document.getElementById('front');
+        if (!!frontSide) // if not null
+        {
+            if (scrollPos - startPosAnim < totalAnimLength / 2){
+                frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[1], frontSideText[0]);
+            }
+            else {
+                frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[0], frontSideText[1]);
+            }
+        }
+
+        // Hide plane3d if plane3d turned pass camera
+        let plane3d = document.getElementById('plane3D');
+        if (!!plane3d) // if not null
+        {
+            if (cubeRotX <= 10){
+                plane3d.classList.remove("hide");
+            }
+            else{
+                plane3d.classList.add("hide");
+            }
+        }
+    }
+
+    function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
+        const lerped: number = from + (to - from) * time;
+        
+        if (clamped) {
+        return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
+        }
+
+        return lerped;
+    }
+
+    function clamp(value: number, min: number, max: number): number {
+        return Math.min(Math.max(value, min), max);
+    }
+</script>
+
+<svelte:window bind:scrollY={scrollPos} on:scroll={updateUI}/>
+
+<style>
+  @import './Cube3D.css';
+
+    :root {
+        --cube-size: 400px;
+        --cube-color: rgba(125, 125, 125, 1);
+    }
+
+  #plane3D {
+    --plane-size: 2500px;
+
+    width: var(--plane-size);
+    height: var(--plane-size);
+
+    position: absolute;
+
+    transform: 
+        rotateX( -90deg ) 
+        translateZ(calc(var(--plane-size) * -0.34))
+        translateX(calc(var(--plane-size) * -0.45));
+    -moz-transform: 
+        rotateX( -90deg ) 
+        translateZ(calc(var(--plane-size) * -0.34))
+        translateX(calc(var(--plane-size) * -0.45));
+    }
+
+    .image {
+        transform: translateX(calc(var(--cube-size)*-0.5));
+    }
+
+    .text{
+        margin: 0;
+    }
+</style>
+
+<div id="cube-3d-container">
+    <div id="cube3d"style="transform: rotateY({cubeRotY}deg) rotateX({cubeRotX}deg);">
+        <div id="front" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                overlooked
+            </p>
+        </div>
+
+        <div id="back" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                constrained
+            </p>
+        </div>
+
+        <div id="right" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                drained
+            </p>
+        </div>
+
+        <div id="left" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                underfunded
+            </p>
+        </div>
+
+        <!-- <div id="top" class="cube-sides">
+            <img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
+            5
+        </div>
+
+        <div id="bottom" class="cube-sides">
+            <img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
+            6
+        </div> -->
+
+        
+
+        <img id="plane3D" src={planeImg} alt="3D ground plane"/>
+    </div>
+
+</div>

src/lib/IO/Button.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-    import { ButtonType } from "$lib/IO/ButtonType.ts";
-    import { onMount } from "svelte";
-
-    export let href : string = "#";
-    export let type : ButtonType = ButtonType.Primary;
-    let cssName : string;
-
-    const buttonTypeColors = {
-        [ButtonType.Primary]: '--primary',
-        [ButtonType.Secondary]: '--secondary',
-        [ButtonType.Accent]: '--accent',
-    };
-
-    onMount(() => {
-        cssName = buttonTypeColors[type];
-    });
-</script>
-
-<a href={href} class="button" style="--button-color: var({cssName});">
-    <div class="content">
-        <slot name="content">
-            Click Me!
-        </slot>
-    </div>
-</a>
-
-<style>
-    .button {
-        white-space: nowrap;
-        border-radius: 6px;
-        border: none;
-        background-color: var(--button-color);
-        text-decoration: none;
-
-        transition: transform 100ms ease-in-out;
-        transform: translate(0, 0);
-
-        display: flex;
-        justify-content: center;
-        font-size: 1.5em;
-
-        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
-        padding: 0.8em 4em;
-    }
-
-    .button:hover {
-        transition: transform 100ms ease-in-out;
-        transform: translate(0, -5px);
-
-        cursor: pointer;
-
-        filter: brightness(130%);
-    }
-
-    .content {
-        width: 100%;
-        height: 100%;
-
-        color: var(--text1);
-
-        display: flex;
-        justify-content: center;
-        align-content: center;
-    }
-</style>

src/lib/IO/ButtonType.ts

@@ -1,5 +0,0 @@
-export enum ButtonType {
-    Primary,
-    Secondary,
-    Accent
-}

src/lib/ScrollTextComponent.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    let chunkSize: number = 750;
+    let chunks: number = 3;
+
+
+
+    export let allChunkHeight: number = chunkSize * chunks;
+    let scrollPosition: number = 0;
+
+    function handleScroll() {
+        const divElement = document.getElementById('scrollContainer');
+        scrollPosition = divElement.scrollTop;
+
+        let currectChunk: number = scrollPosition / chunkSize;
+        let chunkProgress: number = scrollPosition % chunkSize;
+        
+        let typingIndex: number = (Math.ceil(currectChunk));
+
+        if (chunkSize * 0.2 < chunkProgress 
+        && chunkProgress < chunkSize * 0.65){
+            divElement.style.color = "pink";
+            document.getElementById('TypingIndex_' + typingIndex).classList.add('typewriter');
+        }
+        else{
+            divElement.style.color = "lightblue";
+            document.getElementById('TypingIndex_' + typingIndex).classList.remove('typewriter');
+        }
+
+        console.log(scrollPosition + ">" + (allChunkHeight - chunkSize - 150));
+        if (scrollPosition > allChunkHeight - chunkSize - 150){
+            document.getElementById('scrollContainer').classList.add('no-interact');
+        }
+        else{
+            document.getElementById('scrollContainer').classList.remove('no-interact');
+        }
+    }
+</script>
+
+<style>
+    .container {
+        width: 100%;    
+        height: 100vh;
+        overflow-y: scroll;
+        z-index: 0;
+    }
+
+    .scrollText {
+        width: 100%;
+        background-color: darkslateblue;
+        padding: 0;
+        margin: 0;
+        z-index: 0;
+    }
+
+    .center-screen {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 100vh;
+        position:absolute;
+        left:0;
+        right:0;
+        top: 0;
+        bottom: 0;
+        margin:auto;
+        z-index: 0;
+    }
+</style>
+
+<div style="height: 100vh;">
+    <div class="center-screen big-text no-wrap no-interact">
+        We are 
+    </div>
+
+    <div class="container" id="scrollContainer" on:scroll={handleScroll}>
+        <div class="scrollText" style="height: {allChunkHeight}px;">
+            {#each {length: chunks} as _, i}
+                <div id="ChunkIndex_{i}" class="chunk" style="height: {chunkSize}px; z-index: 0;">
+                    {scrollPosition}
+                    <div id="TypingIndex_{i}">
+                        <h1>{i} The cat and the hat.</h1>
+                    </div>
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>

src/lib/Universal/ZSpacer.svelte

@@ -0,0 +1,6 @@
+<!-- Short hand for spacing between components-->
+<div style="flex-grow: 1; {style}"/>
+
+<script>
+    export let style = "";
+</script>

src/lib/WeAreText.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import ZSpacer from "./Universal/ZSpacer.svelte";
+
+    // Hyperparams
+    let startExit = 4700;
+    let exitLength = 2000;
+    let exitScreenLength = 700;
+    let textMaxRotation = 30;
+    let parallaxOffset = 1.0125;
+
+    // Define, don't touch
+    let scrollPos: number = 0;
+    let extraPosY = 0;
+    let rotation = 0;
+    
+    // Define: Parallax text
+    let extraPosY2 = 0;
+    let rotation2 = 0;
+
+    $:{
+        let time = (scrollPos - startExit) / exitLength;
+        extraPosY = lerp(0, -exitScreenLength, time, true);
+        rotation = lerp(0, textMaxRotation, time, true);
+
+        extraPosY2 = lerp(0, -exitScreenLength, time * parallaxOffset, true);
+        rotation2 = lerp(0, textMaxRotation, time, true);
+    }
+
+    function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
+        const lerped: number = from + (to - from) * time;
+        
+        if (clamped) {
+        return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
+        }
+
+        return lerped;
+    }
+
+    function clamp(value: number, min: number, max: number): number {
+        return Math.min(Math.max(value, min), max);
+    }
+</script>
+
+<svelte:window bind:scrollY={scrollPos} />
+
+<div class="horizontal">
+    <div id="WeAreHolder" class="align-center" style="margin-right: 35vw; position: relative;">
+        <div class="no-wrap no-interact big-text align-center WeAreText"
+        style="color: #c9c9c9; transform: translate(0, {extraPosY}px) rotateX({rotation}deg); position: absolute;">
+            We are
+        </div>
+        <div class="no-wrap no-interact big-text align-center WeAreText"
+        style="color: #ffffff; transform: translate(0, {extraPosY2}px) rotateX({rotation2}deg); position: absolute;">
+            We are
+        </div>
+    </div>
+    <ZSpacer style="width: 10vw;"/>
+</div>
+
+<style>
+#WeAreHolder {
+    transition: transform 1s cubic-bezier(0,1.32,0,.92);
+    transform-style: preserve-3d;
+
+    perspective: 1000px;
+    -moz-perspective: 1000px;
+}
+
+.WeAreText {
+    padding: -10px 10px 0px 10px;
+}
+</style>

src/lib/images/HamburgerMenuIcon.svelte

@@ -1,18 +0,0 @@
-<script>
-    export let Class = '';
-    export let Style = '';
-  </script>
-  
-<svg
-    class={Class}
-    style={Style}
-    height="20"
-    id="Layer_1"
-    version="1.1"
-    viewBox="0 0 28 20"
-    width="28"
-    xml:space="preserve"><defs
-        id="defs1" /><path
-        d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
-        id="path1"
-        style="fill-opacity:1" /></svg>

src/lib/posts/NewsCard.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-    export let post_url : string = '404';
-    export let thumbnail_url : string = '/favicon.png';
-    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
-    export let title : string = '<title>';
-    export let summary : string = '<summary>';
-    export let creation_date : string = '<date>';
-
-    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
-                  "July", "August", "September", "October", "November", "December"];
-
-    $: human_creation_date = new Date(+creation_date * 1000);
-</script>
-
-<div class="news-card">
-    <a href=/post/{post_url}>
-        <div class="thumbnail">
-            <img src={thumbnail_url} alt={thumbnail_alt}/>
-        </div>
-        <div class="content">
-            <h3 id="title">{title}</h3>
-            <p id="summary-text">{summary}</p>
-            <p id="date">
-                {human_creation_date.getDate()}
-                {monthNames[human_creation_date.getMonth()]}
-                {human_creation_date.getFullYear()}
-            </p>
-        </div>
-    </a>
-</div>
-
-<style>
-    a {
-        text-decoration: none;
-
-        display: flex;
-        flex-direction: row;
-        gap: 15px;
-    }
-
-    .thumbnail > img {
-        object-fit: cover;
-
-        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
-        border-radius: 8px;
-
-        width: 150px;
-        height: auto;
-    }
-
-    .content {
-        flex-shrink: 2;
-
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    #title {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text2);
-    }
-
-    #summary-text {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text3);
-    }
-
-    #date {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text4);
-    }
-
-</style>

src/lib/posts/NewsVerticalCard.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-    export let post_url : string = '404';
-    export let thumbnail_url : string = '/favicon.png';
-    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
-    export let title : string = '<title>';
-    export let summary : string = '<summary>';
-    export let creation_date : string = '<date>';
-
-    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
-                  "July", "August", "September", "October", "November", "December"];
-
-    $: human_creation_date = new Date(+creation_date * 1000);
-</script>
-
-<div class="news-card">
-    <a href={post_url}>
-        <div class="thumbnail">
-            <img src={thumbnail_url} alt={thumbnail_alt}/>
-        </div>
-        <div class="content">
-            <p id="date">
-                {human_creation_date.getDate()}
-                {monthNames[human_creation_date.getMonth()]}
-                {human_creation_date.getFullYear()}
-            </p>
-            <h3 id="title">{title}</h3>
-            <p id="summary-text">{summary}</p>
-        </div>
-    </a>
-</div>
-
-<style>
-    .news-card {
-        flex: 0 0 300px;
-    }
-
-    a {
-        min-width: 100%;
-        text-decoration: none;
-
-        display: flex;
-        flex-direction: column;
-    }
-
-    .thumbnail > img {
-        object-fit: cover;
-
-        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
-        border-radius: 8px;
-
-        min-width: 100%;
-        aspect-ratio: 16 / 9;
-    }
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    #title {
-        font-size: 22px;
-        margin: 0;
-        text-decoration: none;
-        color: var(--text2);
-    }
-
-    #summary-text {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text3);
-    }
-
-    #date {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text4);
-    }
-</style>

src/lib/posts/ShowcaseNewsCard.svelte

@@ -1,78 +0,0 @@
-<script>
-    export let post_url = '404';
-    export let thumbnail_url = '/favicon.png';
-    export let thumbnail_alt = 'Picture describting the deprived devs logo';
-    export let title = '<title>';
-    export let summary = '<summary>';
-    export let creation_date = 1710006969;
-
-    const monthNames = ["January", "February", "March", "April", "May", "June",
-                  "July", "August", "September", "October", "November", "December"];
-
-    $: human_creation_date = new Date(+creation_date * 1000);
-</script>
-
-<div class="news-card">
-    <a href=/post/{post_url} >
-        <div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
-        </div>
-        <div class="content">
-            <h3 id="title">{title}</h3>
-            <p id="summary-text">{summary}</p>
-            <p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
-        </div>
-    </a>
-</div>
-
-<style>
-    a {
-        text-decoration: none;
-    }
-
-    .news-card {
-        display: inline-flex;
-        flex-direction: column;
-        gap: 15px;
-    }
-
-    .news-card h3 {
-        color: var(--text1);
-        margin: 0px;
-        font-size: 22px;
-    }
-
-    .thumbnail {
-        aspect-ratio: 16 / 9;
-        background-size: cover;
-        background-position: center;
-
-        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
-        border-radius: 8px;
-        margin-bottom: 15px;
-    }
-
-    .content {
-        display: flex;
-        flex-direction: column;
-
-        gap: 10px;
-    }
-
-    #title {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text1);
-    }
-
-    #summary-text {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text2);
-    }
-
-    #date {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text4);
-    }
-</style>

src/lib/svelteLogos/README.md

@@ -1,11 +0,0 @@
-# Svelte Branding Guidelines
-
-## Conditions of usage
-
-1. The term "Svelte logo" refers to the Svelte logo and other official artwork/mark. It also includes the official color scheme used by the project.
-
-2. The term "Svelte library" refers to the Svelte tooling, associated libraries and official projects in the Svelte ecosystem.
-
-3. Usage of the Svelte logo must not give the impression or implication that the Svelte project (or any contributor to the project) is sponsoring or endorsing any other project, service, product or organization.
-
-4. Usage of the Svelte logo, to indicate, imply or assert compatibility or operability with the Svelte library, must be accurate and done in good faith.

src/lib/svelteLogos/svelte-horizontal.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="519" height="139" viewBox="0 0 519 139"><title>svelte-horizontal</title><path d="M172.4428,100.3382a24.0793,24.0793,0,0,1-13.72-3.8769,19.8715,19.8715,0,0,1-8.0107-10.6094l8.3515-3.0683a15.4054,15.4054,0,0,0,5.4541,6.6044,14.3656,14.3656,0,0,0,8.2657,2.4288,12.1375,12.1375,0,0,0,7.8818-2.3858,8.2746,8.2746,0,0,0,2.94-6.8174,7.4559,7.4559,0,0,0-.8095-3.4511,10.325,10.325,0,0,0-1.8321-2.6,12.3611,12.3611,0,0,0-3.1533-2.0879q-2.1314-1.0635-3.5361-1.6192-1.4062-.5521-4.1328-1.4912-3.41-1.1924-5.1133-1.874a38.46,38.46,0,0,1-4.4737-2.2588,16.5385,16.5385,0,0,1-4.1757-3.1523,15.2908,15.2908,0,0,1-2.5137-4.1338,14.77,14.77,0,0,1,4.0049-16.7871q5.1138-4.5162,13.8906-4.5166,7.3272,0,12.0576,3.2382a15.6579,15.6579,0,0,1,6.3487,8.6075l-8.1807,2.7265a9.5238,9.5238,0,0,0-3.9629-4.3887,13.31,13.31,0,0,0-6.9443-1.6621,10.703,10.703,0,0,0-6.69,1.875,6.2891,6.2891,0,0,0-2.4287,5.2832,5.5132,5.5132,0,0,0,1.874,4.0909,12.885,12.885,0,0,0,3.92,2.6416q2.0464.8524,6.2217,2.3007,2.5547.939,3.791,1.4063t3.6221,1.5762a24.997,24.997,0,0,1,3.6641,2.0029,32.1346,32.1346,0,0,1,2.9824,2.4287,12.7235,12.7235,0,0,1,2.6,3.11,17.39,17.39,0,0,1,1.5332,3.8339,17.5828,17.5828,0,0,1,.64,4.8155q0,8.3524-5.71,13.08Q181.3892,100.3388,172.4428,100.3382Zm54.6221-1.0224L206.6128,39.6644h9.5449L229.7065,81.25a64.4659,64.4659,0,0,1,1.875,6.8173,64.0335,64.0335,0,0,1,1.875-6.8173l13.3789-41.586h9.459L235.9272,99.3158Zm47.294,0V39.6644h36.9843V48.016H283.2221V64.3773h18.15v8.3516h-18.15V90.9642h29.9952v8.3516Zm61.44,0V39.6644h8.8633v51.13h29.1435v8.5215Zm71.41-51.13v51.13h-8.8632v-51.13H381.4741V39.6644h42.6074v8.5215Zm35.1934,51.13V39.6644h36.9844V48.016H451.2661V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Z" style="fill:#4a4a55"/><path d="M110.2859,28.3189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L38.4118,35.1078A29.9232,29.9232,0,0,0,24.8931,55.1506a31.5143,31.5143,0,0,0,3.1076,20.2318,30.0059,30.0059,0,0,0-4.4761,11.1829,31.8885,31.8885,0,0,0,5.4472,24.1157c10.4022,14.8865,30.9424,19.2966,45.7915,9.8348l26.0826-16.6237a29.9182,29.9182,0,0,0,13.5187-20.0428,31.5276,31.5276,0,0,0-3.1057-20.2323,30.0012,30.0012,0,0,0,4.4742-11.1824,31.88,31.88,0,0,0-5.4472-24.1157" style="fill:#ff3e00"/><path d="M61.9463,112.0815A20.718,20.718,0,0,1,39.71,103.8389a19.173,19.173,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3362.9815a33.6466,33.6466,0,0,0,10.203,5.0978l.9694.2941-.0892.9675a5.8469,5.8469,0,0,0,1.052,3.8781,6.2388,6.2388,0,0,0,6.6952,2.485,5.7456,5.7456,0,0,0,1.602-.7041L85.3993,81.781A5.431,5.431,0,0,0,87.85,78.15a5.7944,5.7944,0,0,0-.9876-4.3712,6.2435,6.2435,0,0,0-6.6977-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9533,6.3449a19.0336,19.0336,0,0,1-5.2964,2.3259A20.7182,20.7182,0,0,1,41.078,72.4241a19.173,19.173,0,0,1-3.2766-14.5024,17.9892,17.9892,0,0,1,8.13-12.0513L72.0125,29.2472a19.0031,19.0031,0,0,1,5.3-2.3287A20.718,20.718,0,0,1,99.549,35.1611a19.1734,19.1734,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9693-.2942.0892-.9675a5.8576,5.8576,0,0,0-1.052-3.878,6.2388,6.2388,0,0,0-6.6952-2.485,5.7456,5.7456,0,0,0-1.602.7041L53.8592,57.219A5.422,5.422,0,0,0,51.41,60.85a5.7858,5.7858,0,0,0,.9857,4.3717,6.2435,6.2435,0,0,0,6.6977,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.952-6.3425a18.9787,18.9787,0,0,1,5.2958-2.3278,20.7183,20.7183,0,0,1,22.2369,8.2427,19.173,19.173,0,0,1,3.2766,14.5024,17.9982,17.9982,0,0,1-8.13,12.0532L67.246,109.7528a19.0031,19.0031,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

src/lib/svelteLogos/svelte-kit-horizontal.svg

@@ -1 +0,0 @@
-<svg id="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 688.774 139"><defs><style>.cls-1{fill:#8d8d93;}.cls-2{fill:#4a4a55;}.cls-3{fill:#ff3e00;}.cls-4{fill:#fff;}</style></defs><g id="horizontal"><path id="kit" class="cls-1" d="M547.528,99.316,530.741,68.127,520.173,80.91V99.316h-8.862V39.664h8.862V68.553l23.009-28.889h10.226l-16.7,20.964,21.218,38.688Zm29.569,0V39.664h8.862V99.316Zm55.049-51.13v51.13h-8.863V48.186H606.411V39.664h42.607v8.522Z"/><path id="svelte-2" data-name="svelte" class="cls-2" d="M172.442,100.338a24.076,24.076,0,0,1-13.719-3.877,19.876,19.876,0,0,1-8.011-10.609l8.351-3.068a15.41,15.41,0,0,0,5.455,6.6,14.366,14.366,0,0,0,8.266,2.429,12.137,12.137,0,0,0,7.882-2.386,8.277,8.277,0,0,0,2.94-6.817,7.461,7.461,0,0,0-.81-3.452,10.314,10.314,0,0,0-1.832-2.6,12.342,12.342,0,0,0-3.153-2.088q-2.132-1.063-3.537-1.619t-4.133-1.491q-3.408-1.193-5.112-1.874a38.492,38.492,0,0,1-4.474-2.259,16.522,16.522,0,0,1-4.176-3.153,15.277,15.277,0,0,1-2.513-4.133,14.766,14.766,0,0,1,4-16.787q5.113-4.516,13.889-4.517,7.329,0,12.059,3.238a15.658,15.658,0,0,1,6.348,8.608l-8.18,2.726a9.521,9.521,0,0,0-3.963-4.388,13.306,13.306,0,0,0-6.945-1.663,10.706,10.706,0,0,0-6.69,1.875,6.29,6.29,0,0,0-2.428,5.284,5.511,5.511,0,0,0,1.874,4.09,12.869,12.869,0,0,0,3.92,2.642q2.048.852,6.222,2.3,2.554.939,3.791,1.406t3.622,1.576a25.1,25.1,0,0,1,3.664,2,32.066,32.066,0,0,1,2.983,2.429,12.706,12.706,0,0,1,2.6,3.11,17.342,17.342,0,0,1,1.533,3.834,17.58,17.58,0,0,1,.64,4.816q0,8.352-5.71,13.08T172.442,100.338Zm54.623-1.022L206.613,39.664h9.545L229.707,81.25a64.791,64.791,0,0,1,1.875,6.818,63.829,63.829,0,0,1,1.875-6.818l13.378-41.586h9.459L235.927,99.316Zm47.294,0V39.664h36.984v8.352H283.222V64.377h18.151v8.352H283.222V90.964h30v8.352Zm61.44,0V39.664h8.864v51.13h29.143v8.522Zm71.41-51.13v51.13h-8.863V48.186H381.474V39.664h42.608v8.522ZM442.4,99.316V39.664h36.984v8.352H451.266V64.377h18.15v8.352h-18.15V90.964h30v8.352Z"/><g id="logo"><path id="orange" class="cls-3" d="M110.286,28.319c-10.4-14.885-30.941-19.3-45.792-9.835L38.412,35.108A29.921,29.921,0,0,0,24.893,55.151,31.514,31.514,0,0,0,28,75.382a29.987,29.987,0,0,0-4.476,11.183,31.888,31.888,0,0,0,5.447,24.116c10.4,14.887,30.942,19.3,45.791,9.835l26.083-16.624a29.92,29.92,0,0,0,13.519-20.043,31.529,31.529,0,0,0-3.106-20.232,30,30,0,0,0,4.474-11.182,31.878,31.878,0,0,0-5.447-24.116"/><path id="white" class="cls-4" d="M61.946,112.082a20.72,20.72,0,0,1-22.237-8.243,19.176,19.176,0,0,1-3.276-14.5,18.143,18.143,0,0,1,.623-2.435l.491-1.5,1.337.981a33.633,33.633,0,0,0,10.2,5.1l.969.294-.089.968a5.844,5.844,0,0,0,1.052,3.878,6.24,6.24,0,0,0,6.7,2.485,5.748,5.748,0,0,0,1.6-.7L85.4,81.781A5.43,5.43,0,0,0,87.85,78.15a5.794,5.794,0,0,0-.988-4.371,6.244,6.244,0,0,0-6.7-2.487,5.737,5.737,0,0,0-1.6.7l-9.954,6.345a19.047,19.047,0,0,1-5.3,2.326,20.72,20.72,0,0,1-22.237-8.243,19.171,19.171,0,0,1-3.277-14.5A17.992,17.992,0,0,1,45.932,45.87L72.013,29.247a19.011,19.011,0,0,1,5.3-2.329,20.719,20.719,0,0,1,22.237,8.243,19.176,19.176,0,0,1,3.277,14.5A18.453,18.453,0,0,1,102.2,52.1l-.491,1.5-1.336-.979a33.616,33.616,0,0,0-10.2-5.1l-.97-.294.09-.968a5.859,5.859,0,0,0-1.052-3.878,6.24,6.24,0,0,0-6.695-2.485,5.742,5.742,0,0,0-1.6.7L53.859,57.219a5.425,5.425,0,0,0-2.449,3.63,5.79,5.79,0,0,0,.986,4.372,6.245,6.245,0,0,0,6.7,2.487,5.773,5.773,0,0,0,1.6-.7l9.952-6.342a18.978,18.978,0,0,1,5.3-2.328A20.718,20.718,0,0,1,98.18,66.576a19.171,19.171,0,0,1,3.277,14.5,18,18,0,0,1-8.13,12.054L67.246,109.753a19,19,0,0,1-5.3,2.329"/></g></g></svg>

src/lib/svelteLogos/svelte-kit-logotype.svg

@@ -1,4 +0,0 @@
-<svg viewBox="30 31 400 50" xmlns="http://www.w3.org/2000/svg">
-<path d="M348.645 80.0599L335.205 55.1536L326.745 65.3616V80.0599H319.648V32.4241H326.745V55.4938L345.169 32.4241H353.356L339.986 49.1652L356.974 80.0599H348.645ZM372.319 80.0599V32.4241H379.416V80.0599H372.319ZM416.394 39.2295V80.0599H409.3V39.2295H395.789V32.4241H429.902V39.2295H416.394Z" fill="#8D8D93"/>
-<path d="M48.3359 80.876C44.4451 80.9736 40.6159 79.8942 37.3519 77.78C34.3023 75.7742 32.0378 72.7827 30.9387 69.3081L37.6241 66.8581C38.5518 68.991 40.066 70.8183 41.9916 72.1286C43.9468 73.4367 46.2574 74.1149 48.6113 74.0715C50.8732 74.1893 53.1053 73.5154 54.9219 72.1661C55.7123 71.5043 56.3367 70.6675 56.7454 69.7223C57.1541 68.7772 57.3357 67.7499 57.2758 66.7223C57.2852 65.7649 57.063 64.8193 56.6281 63.9657C56.2495 63.2023 55.7547 62.5019 55.1613 61.8894C54.4103 61.2078 53.5586 60.6454 52.6361 60.222C51.4981 59.6561 50.5542 59.2252 49.8042 58.9292C49.0543 58.6332 47.9513 58.2363 46.4952 57.7385C44.6761 57.1034 43.3118 56.6046 42.4023 56.242C41.1703 55.719 39.9737 55.1164 38.8202 54.4381C37.579 53.7813 36.4506 52.9313 35.4776 51.9202C34.6349 50.9339 33.9554 49.8197 33.4647 48.6198C32.5217 46.3326 32.3235 43.8075 32.8983 41.4018C33.473 38.9961 34.7915 36.8316 36.6673 35.2143C39.3991 32.8106 43.1066 31.6085 47.7898 31.608C51.7018 31.608 54.9201 32.4699 57.4448 34.1937C59.8955 35.819 61.695 38.2524 62.528 41.0678L55.9772 43.2446C55.3192 41.7704 54.2079 40.5431 52.8042 39.7406C51.1067 38.8008 49.184 38.3416 47.2438 38.4125C45.3411 38.3039 43.4564 38.8307 41.8875 39.9098C41.247 40.4053 40.7359 41.0476 40.3976 41.7822C40.0593 42.5168 39.9038 43.322 39.9443 44.1294C39.95 44.7485 40.0866 45.3594 40.3452 45.9222C40.6037 46.485 40.9784 46.987 41.4447 47.3956C42.3512 48.2863 43.4153 49.0016 44.5833 49.5054C45.6753 49.9589 47.3356 50.5712 49.5641 51.342C50.9278 51.8419 51.9396 52.2162 52.5993 52.4648C53.259 52.7134 54.2249 53.1332 55.4968 53.7242C56.5174 54.1744 57.4987 54.7086 58.4304 55.3213C59.2647 55.9196 60.0622 56.5673 60.8187 57.261C61.6416 57.9722 62.3444 58.8107 62.9003 59.7445C63.4302 60.7128 63.8425 61.7406 64.1285 62.8062C64.4763 64.0584 64.6485 65.3527 64.6401 66.6521C64.6401 71.0984 63.1162 74.5802 60.0685 77.0972C57.0207 79.6143 53.1098 80.8739 48.3359 80.876ZM92.0693 80.0599L75.6946 32.4241H83.3367L94.1846 65.6331C94.784 67.4193 95.2852 69.2369 95.6858 71.0777C96.085 69.2366 96.5861 67.4189 97.187 65.6331L107.899 32.4241H115.472L99.1646 80.0599H92.0693ZM129.935 80.0599V32.4241H159.546V39.0937H137.031V52.159H151.563V58.8286H137.031V73.3903H161.05V80.0599H129.935ZM179.126 80.0599V32.4241H186.223V73.2546H209.556V80.0599H179.126ZM236.301 39.2295V80.0599H229.204V39.2295H215.696V32.4241H249.813V39.2295H236.301ZM264.478 80.0599V32.4241H294.088V39.0937H271.574V52.159H286.106V58.8286H271.574V73.3903H295.593V80.0599H264.478Z" fill="#4A4A55"/>
-</svg>

src/lib/svelteLogos/svelte-kit-vertical.svg

@@ -1 +0,0 @@
-<svg id="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.69 300"><defs><style>.cls-1{fill:#8d8d93;}.cls-2{fill:#4a4a55;}.cls-3{fill:#ff3e00;}.cls-4{fill:#fff;}</style></defs><g id="vertical"><path id="kit" class="cls-1" d="M262.738,265.277l-9.776-18.162-6.154,7.443v10.719h-5.161V230.539h5.161v16.824l13.4-16.824h5.955l-9.727,12.209,12.357,22.529Zm17.22,0V230.539h5.161v34.738ZM312.016,235.5v29.775h-5.162V235.5h-9.826v-4.963h24.813V235.5Z"/><path id="svelte-2" data-name="svelte" class="cls-2" d="M44.3,265.873a14.021,14.021,0,0,1-7.989-2.258,11.575,11.575,0,0,1-4.665-6.178l4.863-1.787A8.979,8.979,0,0,0,39.69,259.5,8.364,8.364,0,0,0,44.5,260.91a7.068,7.068,0,0,0,4.59-1.389,4.818,4.818,0,0,0,1.713-3.97,4.342,4.342,0,0,0-.472-2.01,6.011,6.011,0,0,0-1.067-1.514,7.214,7.214,0,0,0-1.836-1.216q-1.24-.62-2.06-.943T42.964,249q-1.984-.695-2.977-1.091a22.434,22.434,0,0,1-2.605-1.316,9.6,9.6,0,0,1-2.432-1.836,8.917,8.917,0,0,1-1.464-2.407,8.6,8.6,0,0,1,2.333-9.776,11.785,11.785,0,0,1,8.088-2.63,12.178,12.178,0,0,1,7.023,1.885,9.122,9.122,0,0,1,3.7,5.013l-4.764,1.588a5.548,5.548,0,0,0-2.308-2.556,7.751,7.751,0,0,0-4.045-.968A6.235,6.235,0,0,0,39.615,236a3.662,3.662,0,0,0-1.414,3.077,3.21,3.21,0,0,0,1.091,2.382A7.489,7.489,0,0,0,41.575,243q1.192.5,3.623,1.34,1.488.547,2.208.819t2.109.918a14.553,14.553,0,0,1,2.134,1.167,18.647,18.647,0,0,1,1.737,1.414,7.419,7.419,0,0,1,1.514,1.811,10.557,10.557,0,0,1,1.265,5.037,9.356,9.356,0,0,1-3.325,7.618A12.935,12.935,0,0,1,44.3,265.873Zm31.81-.6L64.2,230.539h5.558l7.891,24.218a37.7,37.7,0,0,1,1.092,3.97,37.217,37.217,0,0,1,1.092-3.97l7.791-24.218h5.508L81.275,265.277Zm27.542,0V230.539h21.538V235.4H108.818v9.528h10.57v4.863h-10.57v10.62h17.468v4.863Zm35.78,0V230.539H144.6v29.776H161.57v4.962ZM181.023,235.5v29.775h-5.162V235.5h-9.826v-4.963h24.813V235.5Zm20.5,29.775V230.539h21.538V235.4H206.679v9.528h10.57v4.863h-10.57v10.62h17.468v4.863Z"/><g id="logo"><path id="orange" class="cls-3" d="M240.635,52.089C224.292,28.7,192.014,21.765,168.677,36.634L127.69,62.757a47.02,47.02,0,0,0-21.244,31.5,49.527,49.527,0,0,0,4.883,31.793,47.178,47.178,0,0,0-7.034,17.573,50.113,50.113,0,0,0,8.56,37.9c16.347,23.393,48.624,30.323,71.958,15.455L225.8,170.847a47.015,47.015,0,0,0,21.244-31.5,49.549,49.549,0,0,0-4.88-31.794A47.162,47.162,0,0,0,249.2,89.985a50.1,50.1,0,0,0-8.56-37.9"/><path id="white" class="cls-4" d="M164.672,183.716a32.556,32.556,0,0,1-34.943-12.953,30.13,30.13,0,0,1-5.149-22.789,28.58,28.58,0,0,1,.979-3.828l.772-2.354,2.1,1.543a52.89,52.89,0,0,0,16.033,8.011l1.524.462-.141,1.52a9.188,9.188,0,0,0,1.654,6.094,9.8,9.8,0,0,0,10.521,3.905,9.018,9.018,0,0,0,2.517-1.106l40.988-26.12a8.534,8.534,0,0,0,3.851-5.706,9.1,9.1,0,0,0-1.552-6.869,9.81,9.81,0,0,0-10.525-3.907,9.006,9.006,0,0,0-2.514,1.105L175.146,130.7a29.912,29.912,0,0,1-8.323,3.655A32.557,32.557,0,0,1,131.879,121.4a30.129,30.129,0,0,1-5.149-22.789A28.268,28.268,0,0,1,139.507,79.67l40.984-26.122a29.851,29.851,0,0,1,8.328-3.66,32.556,32.556,0,0,1,34.943,12.953,30.126,30.126,0,0,1,5.149,22.789,28.92,28.92,0,0,1-.979,3.828l-.772,2.354-2.1-1.54a52.846,52.846,0,0,0-16.034-8.014L207.5,81.8l.14-1.52a9.21,9.21,0,0,0-1.653-6.094,9.8,9.8,0,0,0-10.521-3.905,9.011,9.011,0,0,0-2.518,1.106L151.964,97.5a8.52,8.52,0,0,0-3.848,5.7,9.1,9.1,0,0,0,1.549,6.87,9.81,9.81,0,0,0,10.525,3.907,9.036,9.036,0,0,0,2.517-1.106l15.639-9.967a29.823,29.823,0,0,1,8.322-3.658,32.557,32.557,0,0,1,34.944,12.953A30.13,30.13,0,0,1,226.761,135a28.28,28.28,0,0,1-12.776,18.94L173,180.056a29.838,29.838,0,0,1-8.328,3.66"/></g></g></svg>

src/lib/svelteLogos/svelte-logo-cutout.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.8.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 93.2 112" style="enable-background:new 0 0 93.2 112;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FF3E00;}
-</style>
-<path class="st0" d="M87.3,14.8L87.3,14.8C76.9-0.1,56.3-4.5,41.5,5L15.4,21.6c-7.1,4.5-12,11.8-13.5,20c-1.2,6.9-0.2,14,3.1,20.2
-	c-2.2,3.4-3.8,7.2-4.5,11.2C-1,81.5,1,90.2,5.9,97.2c10.4,14.9,30.9,19.3,45.8,9.8l26.1-16.6c7.1-4.5,12-11.8,13.5-20
-	c1.2-6.9,0.2-14-3.1-20.2c2.2-3.4,3.8-7.2,4.5-11.2C94.2,30.5,92.2,21.8,87.3,14.8z M79.8,36.2c-0.2,0.8-0.4,1.6-0.6,2.4l-0.5,1.5
-	l-1.3-1c-3.1-2.3-6.5-4-10.2-5.1l-1-0.3l0.1-1c0.1-1.4-0.3-2.7-1.1-3.9c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7
-	L30.8,43.7c-1.3,0.8-2.2,2.1-2.4,3.6c-0.3,1.5,0.1,3.1,1,4.4c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l10-6.3
-	c1.6-1,3.4-1.8,5.3-2.3c8.4-2.2,17.3,1.1,22.2,8.2c3,4.2,4.2,9.4,3.3,14.5c-0.9,5-3.8,9.4-8.1,12.1L44.2,96.3
-	c-1.6,1-3.4,1.8-5.3,2.3h0c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.3-14.5c0.2-0.8,0.4-1.6,0.6-2.4l0.5-1.5l1.3,1
-	c3.1,2.3,6.5,4,10.2,5.1l1,0.3l-0.1,1c-0.1,1.4,0.3,2.8,1.1,3.9c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l26.1-16.6
-	c1.3-0.8,2.2-2.1,2.5-3.6c0.3-1.5-0.1-3.1-1-4.4c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7l-10,6.3c-1.6,1-3.4,1.8-5.3,2.3
-	C31.9,69.4,23,66.1,18,58.9c-3-4.2-4.2-9.4-3.3-14.5c0.9-5,3.8-9.4,8.1-12.1L49,15.7c1.6-1,3.4-1.8,5.3-2.3
-	c8.4-2.2,17.3,1.1,22.2,8.2C79.5,25.9,80.7,31.1,79.8,36.2z"/>
-</svg>

src/lib/svelteLogos/svelte-logo-square.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416.9 93.1c-41.1-58.9-122.4-76.3-181.2-38.9L132.5 120c-28.2 17.7-47.6 46.5-53.5 79.3-4.9 27.3-.6 55.5 12.3 80-8.8 13.4-14.9 28.5-17.7 44.2-5.9 33.4 1.8 67.8 21.6 95.4 41.2 58.9 122.4 76.3 181.2 38.9L379.6 392c28.2-17.7 47.6-46.5 53.5-79.3 4.9-27.3.6-55.5-12.3-80 8.8-13.4 14.9-28.4 17.7-44.2 5.8-33.4-1.9-67.8-21.6-95.4" style="fill:#ff3e00"/><path d="M225.6 424.5c-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4.6-3.3 1.4-6.5 2.5-9.6l1.9-5.9 5.3 3.9c12.2 9 25.9 15.8 40.4 20.2l3.8 1.2-.4 3.8c-.5 5.4 1 10.9 4.2 15.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8l103.2-65.8c5.1-3.2 8.6-8.4 9.7-14.4 1.1-6.1-.3-12.3-3.9-17.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8L252 291c-6.5 4.1-13.5 7.2-21 9.2-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4 3.5-19.7 15.2-37 32.2-47.7l103.2-65.8c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-.6 3.3-1.4 6.5-2.5 9.6L383 193l-5.3-3.9c-12.2-9-25.9-15.8-40.4-20.2l-3.8-1.2.4-3.8c.5-5.4-1-10.9-4.2-15.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8l-103.2 65.8c-5.1 3.2-8.6 8.4-9.7 14.4-1.1 6.1.3 12.3 3.9 17.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8L260 221c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-3.5 19.7-15.2 37-32.2 47.7l-103.2 65.8c-6.5 4.1-13.6 7.2-21 9.2" style="fill:#fff"/></svg>

src/lib/svelteLogos/svelte-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

src/lib/svelteLogos/svelte-logotype.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="406" height="139" viewBox="0 0 406 139"><title>svelte-logotype</title><path d="M59.4561,100.3382a24.08,24.08,0,0,1-13.72-3.8769,19.8715,19.8715,0,0,1-8.0107-10.6094l8.3515-3.0683a15.4054,15.4054,0,0,0,5.4541,6.6044,14.3656,14.3656,0,0,0,8.2657,2.4288,12.1373,12.1373,0,0,0,7.8818-2.3858,8.2746,8.2746,0,0,0,2.94-6.8174,7.4559,7.4559,0,0,0-.8095-3.4511,10.3225,10.3225,0,0,0-1.8321-2.6,12.3611,12.3611,0,0,0-3.1533-2.0879q-2.1314-1.0635-3.5361-1.6192-1.4062-.5521-4.1328-1.4912-3.41-1.1924-5.1133-1.874a38.4516,38.4516,0,0,1-4.4736-2.2588,16.5374,16.5374,0,0,1-4.1758-3.1523,15.2908,15.2908,0,0,1-2.5137-4.1338,14.77,14.77,0,0,1,4.0049-16.7871q5.1138-4.5162,13.8906-4.5166,7.3272,0,12.0576,3.2382a15.6575,15.6575,0,0,1,6.3487,8.6075L69,53.2142a9.5238,9.5238,0,0,0-3.9629-4.3887,13.31,13.31,0,0,0-6.9443-1.6621,10.703,10.703,0,0,0-6.6895,1.875,6.2891,6.2891,0,0,0-2.4287,5.2832,5.5132,5.5132,0,0,0,1.874,4.0909,12.8853,12.8853,0,0,0,3.92,2.6416q2.0463.8524,6.2216,2.3007,2.5548.939,3.791,1.4063t3.6221,1.5762A24.997,24.997,0,0,1,72.0674,68.34,32.1346,32.1346,0,0,1,75.05,70.7689a12.7235,12.7235,0,0,1,2.6,3.11,17.39,17.39,0,0,1,1.5332,3.8339,17.5828,17.5828,0,0,1,.64,4.8155q0,8.3524-5.71,13.08Q68.4024,100.3388,59.4561,100.3382Zm54.622-1.0224L93.626,39.6644h9.5449L116.72,81.25a64.4659,64.4659,0,0,1,1.875,6.8173A64.0335,64.0335,0,0,1,120.47,81.25l13.3789-41.586h9.459L122.94,99.3158Zm47.294,0V39.6644h36.9843V48.016h-28.121V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Zm61.44,0V39.6644h8.8633v51.13h29.1435v8.5215Zm71.41-51.13v51.13h-8.8633v-51.13H268.4873V39.6644h42.6074v8.5215Zm35.1933,51.13V39.6644H366.4V48.016H338.2793V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Z" style="fill:#4a4a55"/></svg>

src/lib/svelteLogos/svelte-vertical.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="300" viewBox="0 0 256 300"><title>svelte-vertical</title><path d="M44.4129,265.87a14.0218,14.0218,0,0,1-7.9891-2.2576,11.5714,11.5714,0,0,1-4.6647-6.178l4.8632-1.7867a8.97,8.97,0,0,0,3.1759,3.8459,8.3658,8.3658,0,0,0,4.8132,1.4142,7.068,7.068,0,0,0,4.59-1.3892,4.8185,4.8185,0,0,0,1.7122-3.97,4.3412,4.3412,0,0,0-.4714-2.01,6.0115,6.0115,0,0,0-1.0668-1.5138,7.2027,7.2027,0,0,0-1.8362-1.2158q-1.2411-.6192-2.0591-.9428-.819-.3216-2.4066-.8684-1.9858-.6943-2.9775-1.0912a22.4089,22.4089,0,0,1-2.6051-1.3153,9.6307,9.6307,0,0,1-2.4316-1.8357,8.9022,8.9022,0,0,1-1.4637-2.4071,8.6,8.6,0,0,1,2.3321-9.7753,11.7841,11.7841,0,0,1,8.0886-2.63,12.1677,12.1677,0,0,1,7.0213,1.8857,9.1177,9.1177,0,0,1,3.6969,5.0122l-4.7637,1.5877a5.546,5.546,0,0,0-2.3077-2.5556,7.7507,7.7507,0,0,0-4.0437-.9678,6.2321,6.2321,0,0,0-3.8953,1.0918,3.6619,3.6619,0,0,0-1.4143,3.0764,3.21,3.21,0,0,0,1.0913,2.3822,7.5015,7.5015,0,0,0,2.2826,1.5382q1.1916.4965,3.6229,1.34,1.4877.5468,2.2076.8188t2.1091.9179a14.5435,14.5435,0,0,1,2.1336,1.1663,18.7071,18.7071,0,0,1,1.7367,1.4142,7.4076,7.4076,0,0,1,1.5138,1.8112,10.1257,10.1257,0,0,1,.8928,2.2326,10.24,10.24,0,0,1,.3725,2.8041,9.3524,9.3524,0,0,1-3.325,7.6166A12.9325,12.9325,0,0,1,44.4129,265.87Zm31.807-.5954L64.31,230.5391h5.5581l7.89,24.2159a37.5389,37.5389,0,0,1,1.0919,3.97,37.2955,37.2955,0,0,1,1.0918-3.97l7.7907-24.2159h5.508l-11.86,34.7356Zm27.54,0V230.5391H125.296v4.8632H108.9208V244.93H119.49v4.8632H108.9208v10.6186h17.4665v4.8632Zm35.7774,0V230.5391h5.1612v29.7734h16.9706v4.9622ZM181.12,235.5012v29.7735h-5.1612V235.5012h-9.8248v-4.9621h24.8107v4.9621Zm20.4934,29.7735V230.5391H223.15v4.8632H206.7745V244.93h10.5691v4.8632H206.7745v10.6186h17.4664v4.8632Z" style="fill:#4a4a55"/><path d="M191.8716,52.1065c-16.3379-23.3845-48.6074-30.3158-71.9383-15.45L78.9574,62.7719A47.0092,47.0092,0,0,0,57.72,94.2591a49.5083,49.5083,0,0,0,4.882,31.7842,47.14,47.14,0,0,0-7.032,17.5683,50.097,50.097,0,0,0,8.5576,37.8858c16.3419,23.3867,48.61,30.3149,71.9383,15.45l40.9759-26.1158a47.001,47.001,0,0,0,21.2378-31.4872A49.5286,49.5286,0,0,0,193.4,107.56a47.13,47.13,0,0,0,7.0291-17.5676,50.0832,50.0832,0,0,0-8.5576-37.8857" style="fill:#ff3e00"/><path d="M115.93,183.6976A32.5485,32.5485,0,0,1,80.996,170.7485a30.1218,30.1218,0,0,1-5.1475-22.7834,28.582,28.582,0,0,1,.9792-3.8266l.7717-2.3529,2.0992,1.5418a52.8582,52.8582,0,0,0,16.029,8.0087l1.5229.4621-.14,1.52a9.1869,9.1869,0,0,0,1.6528,6.0925,9.8011,9.8011,0,0,0,10.5181,3.9039,9.0254,9.0254,0,0,0,2.5168-1.1062l40.9769-26.1128a8.5317,8.5317,0,0,0,3.85-5.7043,9.1034,9.1034,0,0,0-1.5515-6.8672,9.8084,9.8084,0,0,0-10.5221-3.9061,9.02,9.02,0,0,0-2.5138,1.1054l-15.6366,9.9678a29.8952,29.8952,0,0,1-8.3206,3.6539A32.5485,32.5485,0,0,1,83.146,121.3959a30.1208,30.1208,0,0,1-5.1475-22.7834A28.261,28.261,0,0,1,90.7712,79.68l40.9729-26.115a29.8528,29.8528,0,0,1,8.3258-3.6584A32.5482,32.5482,0,0,1,175.004,62.8556a30.1218,30.1218,0,0,1,5.1475,22.7834,28.9008,28.9008,0,0,1-.9792,3.8265l-.7717,2.353L176.3024,90.28a52.8164,52.8164,0,0,0-16.03-8.0117l-1.5229-.462.14-1.52a9.2036,9.2036,0,0,0-1.6528-6.0924A9.8011,9.8011,0,0,0,146.7189,70.29a9.0252,9.0252,0,0,0-2.5168,1.1061L103.2252,97.5085a8.5183,8.5183,0,0,0-3.847,5.7035,9.09,9.09,0,0,0,1.5485,6.8681,9.8085,9.8085,0,0,0,10.5221,3.9061,9.0586,9.0586,0,0,0,2.5168-1.1062L129.6,102.9159a29.8159,29.8159,0,0,1,8.32-3.6569,32.5484,32.5484,0,0,1,34.9341,12.9492,30.1207,30.1207,0,0,1,5.1475,22.7834A28.275,28.275,0,0,1,165.23,153.9271l-40.9738,26.112a29.8538,29.8538,0,0,1-8.3257,3.6585" style="fill:#fff"/></svg>

src/main.js

@@ -0,0 +1,8 @@
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app

src/routes/+layout.server.ts

@@ -1,19 +0,0 @@
-/*
-    * Provides post summaries to all pages. That means every page can access summaries
-    * for all posts on the website.
-*/
-
-import { type Post, posts } from './posts/posts_data';
-
-export function load() {
-    let summaries : Post[] = [];
-
-    // Sort by newest news first
-    posts.sort((a, b) => b.creation_date - a.creation_date);
-
-    posts.forEach((post) => {
-        summaries.push(post);
-    });
-
-    return { summaries };
-}

src/routes/+layout.svelte

@@ -1,319 +0,0 @@
-<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
-<script lang="ts">
-  import "../app.css";
-  import { fly } from "svelte/transition";
-  import MediaQuery from "svelte-media-queries";
-  import { Dices } from "@lucide/svelte";
-  let hideOnPrint: boolean;
-
-  let { children } = $props();
-
-  import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
-  import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
-
-  const footerCollapseThreshold: string = "1000px";
-  const headerCollapseThreshold: string = "1000px";
-  let footerCollapse: boolean;
-  let isMobile: boolean = $state(false);
-
-  let navbarHidden: boolean = $state(true);
-
-  function resetNavBar() {
-    navbarHidden = true;
-  }
-
-  import { afterNavigate } from "$app/navigation";
-  afterNavigate(() => {
-    const params = new URLSearchParams(window.location.search);
-    hideOnPrint = params.get("hideOnPrint") === "1";
-    //console.log(hideOnPrint);
-  });
-
-  import { onMount } from "svelte";
-  import Zooter from "./comps/Zooter.svelte";
-
-  onMount(async () => {
-    const lock = document.createElement("meta");
-    lock.name = "darkreader-lock";
-    document.head.appendChild(lock);
-  });
-
-  function nextTheme() {
-    let theme: string | null = null;
-
-    if (typeof localStorage !== "undefined") {
-      theme = localStorage.getItem("theme");
-    }
-
-    const themesArr = (window as any).AvailableThemes;
-    let nextTheme = "dark";
-    if (
-      theme == "null" ||
-      theme == "undefined" ||
-      theme == undefined ||
-      theme == null
-    ) {
-    } else {
-      nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
-    }
-
-    console.log("Slecting: " + nextTheme);
-    document.documentElement.setAttribute("data-theme", nextTheme);
-    localStorage.setItem("theme", nextTheme);
-  }
-</script>
-
-{#snippet SwitchThemeButton()}
-  <div
-    class="tooltip tooltip-bottom grid place-content-center"
-    data-tip="Switch theme"
-  >
-    <button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
-  </div>
-{/snippet}
-
-<!-- Detect mobile -->
-<MediaQuery
-  query="(max-width: {footerCollapseThreshold})"
-  bind:matches={footerCollapse}
-/>
-<MediaQuery
-  query="(max-width: {headerCollapseThreshold})"
-  bind:matches={isMobile}
-/>
-
-<!-- Nav bar -->
-<div class="bg-base-200 p-0">
-  <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
-    <div class="nav-bar pr-4">
-      {#if !isMobile}
-        <div class="desktop">
-          <a href="/" class="nav-head">
-            <DeprivedLogo
-              Class="fill-base-content p-2"
-              Style="width: 3.5rem; height: auto;"
-            />
-            <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
-          </a>
-          <div class="nav-spacer" />
-
-          <!-- <a href="/">Home</a> -->
-          <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
-
-          {@render SwitchThemeButton()}
-
-          <a
-            href="/zhen/cv/rev2?hideOnPrint=1"
-            target="_blank"
-            style="width: 7.5rem;">Zhen CV</a
-          >
-          <a href="/tools" style="width: 7.5rem;">Tools</a>
-          <a href="https://botalex.itch.io/" target="_blank">Games</a>
-          <!-- <a href="/posts">Blog</a>
-                    <a href="/about">About</a> -->
-        </div>
-      {:else}
-        <div class="collapsed shadow-xl">
-          <a onclick={resetNavBar} href="/" class="nav-head">
-            <DeprivedLogo
-              Class="fill-base-content p-2"
-              Style="width: 3.5rem; height: auto;"
-            />
-            <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
-          </a>
-          <div class="nav-spacer" />
-          {@render SwitchThemeButton()}
-          <div class="px-1"></div>
-          <button
-            id="toggle-nav"
-            onclick={() => {
-              navbarHidden = !navbarHidden;
-              console.log(navbarHidden);
-            }}
-          >
-            <HamburgerMenuIcon Class="fill-base-content" />
-          </button>
-        </div>
-        {#if !navbarHidden}
-          <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
-            <!-- <a onclick={resetNavBar} href="/">Home</a> -->
-            <a
-              onclick={resetNavBar}
-              href="https://botalex.itch.io/"
-              target="_blank">Games</a
-            >
-            <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
-            <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
-                        <a onclick={resetNavBar} href="/about">About</a> -->
-          </div>
-        {/if}
-      {/if}
-    </div>
-  </header>
-
-  <!-- Page content -->
-  {@render children?.()}
-
-  <Zooter bind:hideOnPrint />
-</div>
-
-{#if footerCollapse}
-  <style>
-    .about-container {
-      flex-direction: column;
-      justify-content: center !important;
-      gap: 25px;
-    }
-  </style>
-{/if}
-
-{#if isMobile}
-  <style>
-  </style>
-{/if}
-
-<style lang="scss">
-  /* Nav bar. */
-  header {
-    display: flex;
-    justify-content: center;
-  }
-
-  header a {
-    text-decoration: none;
-  }
-
-  .nav-bar {
-    width: 100%;
-    max-width: 1400px;
-  }
-
-  .desktop {
-    width: 100%;
-    display: flex;
-    gap: 30px;
-  }
-
-  .collapsed {
-    width: 100%;
-    display: flex;
-  }
-
-  #toggle-nav {
-    background: transparent;
-    border: none;
-  }
-
-  .nav-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    align-items: center;
-  }
-
-  .nav-head {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  #logo-link {
-    width: 64px;
-    aspect-ratio: 1 / 1;
-  }
-
-  #logo-text {
-    font-size: 24px;
-    color: oklch(var(--bc));
-    font-family: var(--title-font);
-    margin: 0;
-
-    min-width: 200px;
-  }
-
-  .nav-spacer {
-    width: 100%;
-  }
-
-  header a {
-    display: flex;
-    align-items: center;
-
-    font-size: 22px;
-    font-family: var(--title-font);
-    // Text color
-    color: oklch(var(--bc));
-  }
-
-  /* Footer. */
-  footer {
-    margin-top: 50px;
-    padding: 25px 0;
-    background-color: oklch(var(--b3));
-
-    height: 100%;
-
-    display: flex;
-    justify-content: center;
-  }
-
-  .about-container {
-    width: 80%;
-    height: 100%;
-
-    color: oklch(var(--bc));
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-
-    & h3 {
-      font-size: larger;
-    }
-  }
-
-  .about-container > div {
-    align-items: center;
-    text-align: center;
-  }
-
-  .credits {
-    line-height: 2;
-  }
-
-  .contact {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .social {
-    display: flex;
-    align-content: center;
-    gap: 10px;
-  }
-
-  .social > img {
-    width: 24px;
-  }
-
-  footer h3 {
-    margin-top: 0px;
-    color: var(--text2);
-  }
-
-  footer a {
-    color: var(--text2);
-    text-decoration-line: underline;
-  }
-
-  a:hover {
-    filter: brightness(130%);
-  }
-
-  @media print {
-    .hide-on-print {
-      display: none;
-    }
-  }
-</style>