Add "under construction" panel

Embed bg canvas style to Svelte component
Migrate background animation to a Svelte component
2025-03-10 12:07:42 -07:00 · 2025-03-10 11:29:27 -07:00 · 2025-03-10 11:25:36 -07:00 · 2025-02-22 17:31:58 -08:00 · 2025-02-22 14:51:30 -08:00 · 2025-02-19 21:44:45 -08:00
16 changed files with 692 additions and 2512 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 node_modules
+package-lock.json

 # Output
 .output
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/app.html
+++ b/src/app.html
@ -5,7 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
+  <body>
+    %sveltekit.body%
  </body>
 </html>
--- a/src/component/bg.svelte
+++ b/src/component/bg.svelte
@ -0,0 +1,278 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let canvas: HTMLCanvasElement;
+  let ctx: CanvasRenderingContext2D;
+
+  let dark_theme = false;
+
+  let particlesArray: Array<Particle> = [];
+  let gradientsArray: Array<Gradient> = [];
+
+  onMount(() => {
+    canvas = document.getElementById("bg-canvas") as HTMLCanvasElement;
+    ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+
+    if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      dark_theme = true;
+    }
+
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (event) => {
+        dark_theme = event.matches;
+        gradientsArray.forEach((gradient: Gradient) => {
+          gradient.color = getRandomColor();
+        });
+      });
+
+    resize();
+    init();
+    animate();
+
+    window.addEventListener("resize", resize);
+  });
+
+  function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+
+  const clamp = (val: number, min: number, max: number) =>
+    Math.min(Math.max(val, min), max);
+
+  class Entity {
+    x: number;
+    y: number;
+    size: number;
+    originalSize: number;
+    speedX: number;
+    speedY: number;
+    growthSpeed: number;
+    constructor() {
+      this.x = Math.random() * canvas.width;
+      this.y = Math.random() * canvas.height;
+      this.size = (Math.random() * 5 + 1) * 1.5;
+      this.originalSize = this.size;
+      this.speedX = (Math.random() - 0.5) * 0.2;
+      this.speedY = (Math.random() - 0.5) * 0.2;
+      this.growthSpeed = Math.random() * 0.02 + 0.01;
+    }
+
+    update() {
+      this.x += this.speedX;
+      this.y += this.speedY;
+
+      // Reverse direction if particle hits edge
+      if (this.x <= 0 || this.x >= canvas.width) {
+        this.speedX = -this.speedX;
+      }
+      this.x = clamp(0, this.x, canvas.width);
+      if (this.y <= 0 || this.y >= canvas.height) {
+        this.speedY = -this.speedY;
+      }
+      this.y = clamp(0, this.y, canvas.height);
+
+      // Breathing effect: oscillate size
+      this.size += this.growthSpeed;
+      if (
+        this.size >= this.originalSize * 1.5 ||
+        this.size <= this.originalSize * 0.5
+      ) {
+        this.growthSpeed = -this.growthSpeed; // Reverse growth direction
+      }
+    }
+  }
+
+  function roundRect(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+  ) {
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+  }
+
+  function roundTriangle(size: number, radius: number) {
+    const x1 = 0,
+      y1 = 0;
+    const x2 = size,
+      y2 = 0;
+    const x3 = size / 2,
+      y3 = size / 1.375;
+    const midX1 = (x1 + x2) / 2;
+    const midY1 = (y1 + y2) / 2;
+    const midX2 = (x2 + x3) / 2;
+    const midY2 = (y2 + y3) / 2;
+    const midX3 = (x3 + x1) / 2;
+    const midY3 = (y3 + y1) / 2;
+    ctx.arcTo(x2, y2, midX2, midY2, radius);
+    ctx.arcTo(x3, y3, midX3, midY3, radius);
+    ctx.arcTo(x1, y1, midX1, midY1, radius);
+  }
+
+  class Shape {
+    draw(angle: number, size: number) {
+      return;
+    }
+  }
+
+  class Circle extends Shape {
+    draw(angle: number, size: number) {
+      ctx.beginPath();
+      ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+      ctx.closePath();
+    }
+  }
+
+  class Square extends Shape {
+    draw(angle: number, size: number) {
+      ctx.rotate((angle * Math.PI) / 180);
+      ctx.beginPath();
+      roundRect(-size / 2, -size / 2, size, size, size / 5);
+      ctx.closePath();
+    }
+  }
+
+  class Triangle extends Shape {
+    draw(angle: number, size: number) {
+      ctx.rotate((angle * Math.PI) / 180);
+      ctx.beginPath();
+      roundTriangle(size * 2, size / 5);
+      ctx.closePath();
+    }
+  }
+
+  class Particle extends Entity {
+    shape: Shape;
+    angle: number;
+    rotationSpeed: number;
+    constructor() {
+      super();
+      this.shape = new [Circle, Square, Triangle][
+        Math.floor(Math.random() * 3)
+      ](); // A very strange but effective way to pick a random shape
+      this.angle = Math.random() * 360;
+      this.rotationSpeed = Math.random() * 2 - 1;
+    }
+
+    update() {
+      super.update();
+      this.angle += this.rotationSpeed;
+    }
+
+    draw() {
+      ctx.fillStyle = dark_theme ? "#333" : "#bbb";
+      ctx.save();
+      ctx.translate(this.x, this.y);
+      this.shape.draw(this.angle, this.size);
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  function getRandomColor() {
+    if (dark_theme) {
+      const r = Math.floor(Math.random() * 255 - 100);
+      const b = Math.floor(Math.random() * 255 - 100);
+      const g = Math.floor(Math.random() * 255 - 100);
+      return `rgb(${r}, ${g}, ${b})`;
+    } else {
+      const r = Math.floor(Math.random() * 100 + 155);
+      const g = Math.floor(Math.random() * 100 + 155);
+      const b = Math.floor(Math.random() * 100 + 155);
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+  }
+
+  class Gradient extends Entity {
+    radius: number;
+    color: string;
+    alpha: number;
+    dAlpha: number;
+    constructor() {
+      super();
+      this.radius = Math.random() * 500 + 300;
+      this.color = getRandomColor();
+      this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
+      this.dAlpha = (Math.random() - 0.5) * 0.01;
+    }
+
+    draw() {
+      const gradient = ctx.createRadialGradient(
+        this.x,
+        this.y,
+        0,
+        this.x,
+        this.y,
+        this.radius,
+      );
+      gradient.addColorStop(0, this.color);
+      if (dark_theme) {
+        gradient.addColorStop(1, `rgba(0, 0, 0, 0)`);
+      } else {
+        gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+      }
+
+      ctx.globalAlpha = this.alpha;
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+      ctx.closePath();
+      ctx.fill();
+      ctx.globalAlpha = 1.0;
+    }
+  }
+
+  function init() {
+    particlesArray = [];
+    for (let i = 0; i < 100; i++) {
+      particlesArray.push(new Particle());
+    }
+    gradientsArray = [];
+    for (let i = 0; i < 10; i++) {
+      gradientsArray.push(new Gradient());
+    }
+  }
+
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let i_gradient = 0; i_gradient < gradientsArray.length; i_gradient++) {
+      let gradient = gradientsArray[i_gradient];
+      gradient.update();
+      gradient.draw();
+    }
+
+    for (let i_particle = 0; i_particle < particlesArray.length; i_particle++) {
+      let particle = particlesArray[i_particle];
+      particle.update();
+      particle.draw();
+    }
+
+    requestAnimationFrame(animate);
+  }
+</script>
+
+<canvas id="bg-canvas"></canvas>
+
+<style>
+  canvas#bg-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+</style>
--- a/src/component/footer.svelte
+++ b/src/component/footer.svelte
@ -1,4 +1,7 @@
 <footer>
  <p>© 2025 Colormatic Studios, All Rights Reserved.</p>
-  <p><a href="mailto:support@colormatic.org">support@colormatic.org</a></p>
+  <p>
+    <a href="mailto:support@colormatic.org">support@colormatic.org</a> |
+    <a href="mailto:support@colormatic.org">contact@colormatic.org</a>
+  </p>
 </footer>
--- a/src/component/navbar.svelte
+++ b/src/component/navbar.svelte
@ -3,6 +3,12 @@
    var pages = document.getElementById("pages") as HTMLElement;
    pages.classList.toggle("hidden");
  }
+  function modalMenuProcessClick(e: MouseEvent) {
+    var pages = document.getElementById("pages") as HTMLElement;
+    if (e.target == pages) {
+      pages.classList.toggle("hidden");
+    }
+  }
 </script>

 <nav>
@ -25,30 +31,42 @@
      rel="noopener noreferrer"
      aria-label="Colormatic Git"><i class="bi bi-git"></i></a
    >
-    <button
-      on:click={toggleModalMenu}
-      class="responsive menu-button"
-      aria-label="menu"><i class="bi bi-list"></i></button
+    <button on:click={toggleModalMenu} class="menu-button" aria-label="menu"
+      ><i class="bi bi-list"></i></button
    >
  </div>
 </nav>
-<span id="pages" class="modalbg hidden">
-  <script>
-    // A dirty way to close the modal when the user clicks outside
-    var pages = document.getElementById("pages");
-    pages.addEventListener("click", (e) => {
-      if (e.target == pages) {
-        pages.classList.toggle("hidden");
-      }
-    });
-  </script>
+
+<!--
+The following Svelte ignore statements aren't ideal, but it seems to be
+the only way to achieve a proper modal. They even do this in the
+Svelte modal example, https://svelte.dev/playground/modal
+-->
+
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<span on:click={modalMenuProcessClick} id="pages" class="modalbg hidden">
  <div>
    <button on:click={toggleModalMenu} class="close" aria-label="Close"
      ><i class="bi bi-x"></i></button
    >
    <ul>
+      <li><a href="/">Home</a></li>
      <li><a href="/zakarya">Zakarya</a></li>
      <li><a href="/studios">Colormatic Studios</a></li>
+      <li>
+        <a
+          href="https://git.colormatic.org"
+          target="_blank"
+          rel="noopener noreferrer">Colormatic Git</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://auth.colormatic.org"
+          target="_blank"
+          rel="noopener noreferrer">Colormatic ID</a
+        >
+      </li>
      <li><a href="/about">About</a></li>
    </ul>
  </div>
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@ -0,0 +1,11 @@
+<script lang="ts">
+  import { page } from "$app/state";
+</script>
+
+<main>
+  <spacer></spacer>
+
+  <div class="heading">{page.status} {(page.error as App.Error).message}</div>
+
+  <spacer></spacer>
+</main>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,20 +1,18 @@
 <script lang="ts">
  import "../style/main.scss";
+  import "../style/nav.scss";
  import "bootstrap-icons/font/bootstrap-icons.css";
  import Navbar from "../component/navbar.svelte";
  import Footer from "../component/footer.svelte";
-
-  import { createBackground } from "../script/bg.ts";
-  import { onMount } from "svelte";
-
-  onMount(createBackground);
+  import Bg from "../component/bg.svelte";
 </script>

 <svelte:head>
  <link rel="icon" href="/img/colormatic_logo.svg" />
-  <!--<link rel="stylesheet" href="../style/main.scss" />-->
 </svelte:head>

+<Bg />
+
 <Navbar />

 <slot />
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,10 +1,40 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    var arrow = document.getElementById("scroll-arrow");
+    if (arrow) {
+      // Arrow is not null
+      window.addEventListener("scroll", (e: Event) => {
+        if (window.scrollY != 0) {
+          if (!(arrow as HTMLElement).classList.contains("scroll-arrow-hide")) {
+            (arrow as HTMLElement).classList.add("scroll-arrow-hide");
+          }
+        } else {
+          if ((arrow as HTMLElement).classList.contains("scroll-arrow-hide")) {
+            (arrow as HTMLElement).classList.remove("scroll-arrow-hide");
+          }
+        }
+      });
+    }
+  });
+</script>
+
 <svelte:head>
  <title>Colormatic</title>
 </svelte:head>

-<spacer></spacer>
-
 <main>
+  <div class="brand-heading">
+    <h1>Colormatic: A non-profit project for creation.</h1>
+  </div>
+
+  <div id="scroll-arrow">
+    <i class="bi bi-arrow-down-circle-fill"></i>
+  </div>
+
+  <div style="margin-top:25vh"></div>
+
  <div class="heading">Featured Colormatic Studios Projects:</div>
  <div class="hero panel">
    <h1>
@ -15,19 +45,33 @@
      >
    </h1>
    <p>An actually good first person controller for the Godot Engine.</p>
-  </div>
-  <div class="hero panel">
-    <h1>ColorQuest</h1>
-    <p>A simple MMORPG in your browser.</p>
-    <p>
-      Currently in
+
+    <div class="divider"></div>
+
+    <h1>
      <a
-        href="https://en.wikipedia.org/wiki/Software_release_life_cycle#Pre-alpha"
+        href="https://git.colormatic.org/ColormaticStudios/godot-bson"
        target="_blank"
-        rel="noopener noreferrer">pre-alpha.</a
+        rel="noopener noreferrer">BSON for Godot</a
      >
+    </h1>
+    <p>A BSON serializer/deserializer for the Godot Engine</p>
+  </div>
+
+  <spacer></spacer>
+
+  <div class="hero panel">
+    <h1>
+      <i class="bi bi-tools" style="padding-right: 12px;"></i>This website is
+      under construction.
+    </h1>
+    <p>
+      Check up on progress and changes at <a
+        href="https://git.colormatic.org/ColormaticStudios/Colormatic-Website"
+        target="_blank"
+        rel="noopener noreferrer">ColormaticStudios/Colormatic-Website</a
+      >.
    </p>
-    <p>Not yet public.</p>
  </div>
 </main>

--- a/src/routes/studios/+page.svelte
+++ b/src/routes/studios/+page.svelte
@ -26,11 +26,31 @@
        <p>An actually good first person controller for the Godot Engine.</p>
      </div>
    </div>
+    <div class="project-grid-box panel">
+      <h1>
+        <a
+          href="https://git.colormatic.org/ColormaticStudios/godot-bson"
+          target="_blank"
+          rel="noopener noreferrer">BSON for Godot</a
+        >
+      </h1>
+      <div class="project-grid-box-contents">
+        <img
+          src="https://git.colormatic.org/ColormaticStudios/godot-bson/raw/branch/main/icon.svg"
+          alt="Godot BSON Logo"
+        />
+        <p>A BSON serializer/deserializer for the Godot Engine.</p>
+      </div>
+    </div>
    <div class="project-grid-box panel">
      <h1>A Silly Game</h1>
      <div class="project-grid-box-contents">
        <img src="/img/studios/hatcat.webp" alt="HatCat" />
-        <p>This is a silly little game project to get us started.</p>
+        <p>
+          This is a silly little game project to get us started.
+          <br />
+          Currently in closed pre-alpha.
+        </p>
      </div>
    </div>
    <div class="project-grid-box panel">
@ -41,7 +61,11 @@
          class="pixelart"
          alt="ColorQuest"
        />
-        <p>A simple MMORPG in your browser.</p>
+        <p>
+          A simple browser MMORPG focused on social features.
+          <br />
+          Currently in closed pre-alpha.
+        </p>
      </div>
    </div>
  </div>
@ -73,6 +97,13 @@
        </li>
      </ul>
      <ul class="linktree">
+        <li>
+          <a
+            href="https://git.colormatic.org/ColormaticStudios"
+            target="_blank"
+            rel="noopener noreferrer">Colormatic Git</a
+          >
+        </li>
        <li>
          <a
            href="https://github.com/ColormaticStudios"
@ -87,13 +118,6 @@
            rel="noopener noreferrer">Bluesky</a
          >
        </li>
-        <li>
-          <a
-            href="https://x.com/ColormaticStudy"
-            target="_blank"
-            rel="noopener noreferrer">X/Twitter</a
-          >
-        </li>
      </ul>
    </div>
  </div>
--- a/src/routes/video/+page.svelte
+++ b/src/routes/video/+page.svelte
@ -22,6 +22,8 @@

 <main>
  <div class="video container">
+    <!-- Video elements are set by a script -->
+    <!-- svelte-ignore a11y_media_has_caption -->
    <video id="videoplayer" controls></video>
    <div class="videoobjects">
      <div class="videodetails">
--- a/src/script/bg.ts
+++ b/src/script/bg.ts
@ -1,271 +0,0 @@
-/*/
- * Wrapping this entire program into a function isn't ideal,
- * but it's the only way I can figure out how to start this
- * when the page finishes loading. (svelte onMount function)
-/*/
-export function createBackground() {
-	var canvas = document.createElement("canvas") as HTMLCanvasElement;
-	var ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-	canvas.classList.add("bg-canvas");
-	document.body.appendChild(canvas);
-
-	function resize() {
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-	}
-
-	var dark_theme = false;
-
-	if (
-		window.matchMedia &&
-		window.matchMedia("(prefers-color-scheme: dark)").matches
-	) {
-		dark_theme = true;
-	}
-
-	window
-		.matchMedia("(prefers-color-scheme: dark)")
-		.addEventListener("change", (event) => {
-			dark_theme = event.matches;
-			gradientsArray.forEach((gradient: Gradient) => {
-				gradient.color = getRandomColor();
-			});
-		});
-
-	let particlesArray: Array<Particle> = [];
-
-	const clamp = (val: number, min: number, max: number) =>
-		Math.min(Math.max(val, min), max);
-
-	class Entity {
-		x: number;
-		y: number;
-		size: number;
-		originalSize: number;
-		speedX: number;
-		speedY: number;
-		growthSpeed: number;
-		constructor() {
-			this.x = Math.random() * canvas.width;
-			this.y = Math.random() * canvas.height;
-			this.size = (Math.random() * 5 + 1) * 1.5;
-			this.originalSize = this.size;
-			this.speedX = (Math.random() - 0.5) * 0.2;
-			this.speedY = (Math.random() - 0.5) * 0.2;
-			this.growthSpeed = Math.random() * 0.02 + 0.01;
-		}
-
-		update() {
-			this.x += this.speedX;
-			this.y += this.speedY;
-
-			// Reverse direction if particle hits edge
-			if (this.x <= 0 || this.x >= canvas.width) {
-				this.speedX = -this.speedX;
-			}
-			this.x = clamp(0, this.x, canvas.width);
-			if (this.y <= 0 || this.y >= canvas.height) {
-				this.speedY = -this.speedY;
-			}
-			this.y = clamp(0, this.y, canvas.height);
-
-			// Breathing effect: oscillate size
-			this.size += this.growthSpeed;
-			if (
-				this.size >= this.originalSize * 1.5 ||
-				this.size <= this.originalSize * 0.5
-			) {
-				this.growthSpeed = -this.growthSpeed; // Reverse growth direction
-			}
-		}
-	}
-
-	function roundRect(
-		x: number,
-		y: number,
-		width: number,
-		height: number,
-		radius: number,
-	) {
-		ctx.moveTo(x + radius, y);
-		ctx.lineTo(x + width - radius, y);
-		ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-		ctx.lineTo(x + width, y + height - radius);
-		ctx.quadraticCurveTo(
-			x + width,
-			y + height,
-			x + width - radius,
-			y + height,
-		);
-		ctx.lineTo(x + radius, y + height);
-		ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-		ctx.lineTo(x, y + radius);
-		ctx.quadraticCurveTo(x, y, x + radius, y);
-	}
-
-	function roundTriangle(size: number, radius: number) {
-		const x1 = 0,
-			y1 = 0;
-		const x2 = size,
-			y2 = 0;
-		const x3 = size / 2,
-			y3 = size / 1.375;
-		const midX1 = (x1 + x2) / 2;
-		const midY1 = (y1 + y2) / 2;
-		const midX2 = (x2 + x3) / 2;
-		const midY2 = (y2 + y3) / 2;
-		const midX3 = (x3 + x1) / 2;
-		const midY3 = (y3 + y1) / 2;
-		ctx.arcTo(x2, y2, midX2, midY2, radius);
-		ctx.arcTo(x3, y3, midX3, midY3, radius);
-		ctx.arcTo(x1, y1, midX1, midY1, radius);
-	}
-
-	class Shape {
-		draw(angle: number, size: number) {
-			return;
-		}
-	}
-
-	class Circle extends Shape {
-		draw(angle: number, size: number) {
-			ctx.beginPath();
-			ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
-			ctx.closePath();
-		}
-	}
-
-	class Square extends Shape {
-		draw(angle: number, size: number) {
-			ctx.rotate((angle * Math.PI) / 180);
-			ctx.beginPath();
-			roundRect(-size / 2, -size / 2, size, size, size / 5);
-			ctx.closePath();
-		}
-	}
-
-	class Triangle extends Shape {
-		draw(angle: number, size: number) {
-			ctx.rotate((angle * Math.PI) / 180);
-			ctx.beginPath();
-			roundTriangle(size * 2, size / 5);
-			ctx.closePath();
-		}
-	}
-
-	class Particle extends Entity {
-		shape: Shape;
-		angle: number;
-		rotationSpeed: number;
-		constructor() {
-			super();
-			this.shape = new [Circle, Square, Triangle][
-				Math.floor(Math.random() * 3)
-			](); // A very strange but effective way to pick a random shape
-			this.angle = Math.random() * 360;
-			this.rotationSpeed = Math.random() * 2 - 1;
-		}
-
-		update() {
-			super.update();
-			this.angle += this.rotationSpeed;
-		}
-
-		draw() {
-			ctx.fillStyle = dark_theme ? "#333" : "#bbb";
-			ctx.save();
-			ctx.translate(this.x, this.y);
-			this.shape.draw(this.angle, this.size);
-			ctx.fill();
-			ctx.restore();
-		}
-	}
-
-	function getRandomColor() {
-		if (dark_theme) {
-			const r = Math.floor(Math.random() * 255 - 100);
-			const b = Math.floor(Math.random() * 255 - 100);
-			const g = Math.floor(Math.random() * 255 - 100);
-			return `rgb(${r}, ${g}, ${b})`;
-		} else {
-			const r = Math.floor(Math.random() * 100 + 155);
-			const g = Math.floor(Math.random() * 100 + 155);
-			const b = Math.floor(Math.random() * 100 + 155);
-			return `rgb(${r}, ${g}, ${b})`;
-		}
-	}
-
-	class Gradient extends Entity {
-		radius: number;
-		color: string;
-		alpha: number;
-		dAlpha: number;
-		constructor() {
-			super();
-			this.radius = Math.random() * 500 + 300;
-			this.color = getRandomColor();
-			this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
-			this.dAlpha = (Math.random() - 0.5) * 0.01;
-		}
-
-		draw() {
-			const gradient = ctx.createRadialGradient(
-				this.x,
-				this.y,
-				0,
-				this.x,
-				this.y,
-				this.radius,
-			);
-			gradient.addColorStop(0, this.color);
-			if (dark_theme) {
-				gradient.addColorStop(1, `rgba(0, 0, 0, 0)`);
-			} else {
-				gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
-			}
-
-			ctx.globalAlpha = this.alpha;
-			ctx.fillStyle = gradient;
-			ctx.beginPath();
-			ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-			ctx.closePath();
-			ctx.fill();
-			ctx.globalAlpha = 1.0;
-		}
-	}
-
-	let gradientsArray: Array<Gradient> = [];
-
-	function init() {
-		particlesArray = [];
-		for (let i = 0; i < 100; i++) {
-			particlesArray.push(new Particle());
-		}
-		gradientsArray = [];
-		for (let i = 0; i < 10; i++) {
-			gradientsArray.push(new Gradient());
-		}
-	}
-
-	function animate() {
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-		gradientsArray.forEach((gradient) => {
-			gradient.update();
-			gradient.draw();
-		});
-
-		particlesArray.forEach((particle) => {
-			particle.update();
-			particle.draw();
-		});
-
-		requestAnimationFrame(animate);
-	}
-
-	resize();
-	init();
-	animate();
-
-	window.addEventListener("resize", resize);
-}
--- a/src/style/main.scss
+++ b/src/style/main.scss
@ -4,11 +4,6 @@
  --text-color: #383c3f;
 }

-body {
-  font-family: "Noto Sans", sans-serif;
-  margin: 0;
-}
-
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: white;
@ -18,195 +13,10 @@ body {
  }
 }

-canvas.bg-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-}
-
-nav {
-  display: grid;
-  grid-template-columns: 1fr min-content 1fr;
-  align-items: center;
-  padding: 12px;
-  border-bottom: solid 1px global.$text-color;
-  z-index: 1;
-
-  margin: 0 auto;
-  width: 95%;
-  box-sizing: border-box;
-  overflow-wrap: anywhere;
-}
-
-nav .nav-left {
-  justify-self: left;
-  grid-column: 1;
-}
-
-nav .nav-center {
-  justify-self: center;
-  grid-column: 2;
-}
-
-nav .nav-right {
-  justify-self: right;
-  grid-column: 3;
-}
-
-nav ul {
-  list-style-type: none;
+body {
+  font-family: "Noto Sans", sans-serif;
  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-}
-
-nav ul li {
-  display: grid;
-  justify-items: center;
-}
-
-nav a,
-nav button {
-  padding: 8px;
  color: global.$text-color;
-  text-decoration: none;
-
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-}
-
-nav a.title {
-  font-size: 140%;
-  font-weight: bold;
-}
-
-nav img.colormatic-logo {
-  width: auto;
-  height: 40px;
-}
-
-nav button.menu-button {
-  background: none;
-  border: none;
-}
-
-nav .menu-button i {
-  font-size: 230%;
-  transform: translateY(-1px);
-  /*/
-   * Ugly hack to account for the fact that the menu icon is off-center
-   * (Bootstrap please fix)
-  /*/
-}
-
-nav .git-icon i {
-  font-size: 140%;
-}
-
-nav div.inline {
-  display: flex;
-}
-
-nav .responsive {
-  display: none;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  nav {
-    padding: 6px 0;
-  }
-  nav .git-icon i {
-    font-size: 150%;
-  }
-  nav .responsive {
-    display: flex;
-  }
-  nav ul.responsive-hidden {
-    display: none;
-  }
-  nav a.responsive {
-    display: initial;
-  }
-}
-
-span.modalbg.hidden {
-  display: none;
-}
-
-span.modalbg {
-  position: fixed;
-  z-index: 1;
-  padding: 0;
-  margin: auto;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-span.modalbg div {
-  width: 60%;
-  margin: 100px auto;
-  padding: 16px;
-
-  color: global.$text-color;
-  border-radius: 8px;
-  box-shadow: 1px 1px 8px #00000033;
-  background-color: #ffffffbb;
-  backdrop-filter: blur(5px);
-
-  animation-name: modal-animate-in;
-  animation-duration: 0.4s;
-}
-
-@keyframes modal-animate-in {
-  from {
-    transform: translate(0px, -300px);
-    opacity: 0;
-  }
-  to {
-    transform: translate(0px, 0px);
-    opacity: 1;
-  }
-}
-
-span.modalbg div button.close {
-  float: right;
-  width: min-content;
-  background: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
-
-  font-size: 200%;
-  color: global.$text-color;
-}
-
-span.modalbg div ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-span.modalbg div ul li {
-  margin: 12px;
-}
-
-span.modalbg div ul li a {
-  color: global.$text-color;
-  padding: 8px;
-  text-decoration: none;
-  font-size: 120%;
-}
-
-@media (prefers-color-scheme: dark) {
-  span.modalbg div {
-    background-color: #000000bb;
-  }
 }

 spacer {
@ -214,6 +24,32 @@ spacer {
  margin-top: 8%;
 }

+a.btn,
+button.btn {
+  padding: 8px 18px;
+  border-radius: 6px;
+  font-size: 100px;
+  text-decoration: none;
+  margin: 8px;
+}
+
+a.btn.lg,
+button.btn.lg {
+  font-size: 120%;
+}
+
+a.btn.blue,
+button.btn.blue {
+  background-color: #2194ff;
+  border: 1px solid #21afff;
+  color: white;
+}
+
+div.divider {
+  margin: 38px;
+  border-top: 1px solid global.$text-color;
+}
+
 div.panel {
  color: global.$text-color;
  border: solid 1px #00000033;
@ -223,29 +59,64 @@ div.panel {
  backdrop-filter: blur(5px);
 }

-main div.heading {
-  color: global.$text-color;
+main div.brand-heading {
+  padding: 12%;
+  width: 60%;
+}
+
+main div.brand-heading h1 {
  font-size: 300%;
+}
+
+main div.heading {
+  font-size: 250%;
  text-align: center;
+  padding: 12px;
 }

 main span.name-title {
  display: block;
-  color: global.$text-color;
  font-size: 550%;
  text-align: center;
 }

 main div.hero {
  width: 60%;
-  margin: 16px auto 16px auto;
+  margin: 16px auto;
  padding: 16px;
  text-align: center;
 }

+main div#scroll-arrow {
+  text-align: center;
+  font-size: 200%;
+  width: 100%;
+  position: fixed;
+  bottom: 64px;
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.25s ease-in;
+}
+
+main div#scroll-arrow.scroll-arrow-hide {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    visibility 0s 0.25s,
+    opacity 0.25s ease-out;
+}
+
@media screen and (max-width: global.$mobile-width) {
+  spacer {
+    margin-top: 24%;
+  }
+  main div.brand-heading {
+    padding: 38% 12px;
+    text-align: center;
+    width: initial;
+  }
  main div.heading {
-    font-size: 250%;
+    font-size: 200%;
  }
  main div.hero {
    width: 80%;
@ -254,7 +125,6 @@ main div.hero {

 main div.hero h1 a {
  color: global.$text-color;
-  text-decoration: none;
 }

 p.justify {
@ -301,15 +171,18 @@ ul.linktree {
  width: 30%;
 }

+ul.linktree li {
+  margin: 12px;
+  text-align: center;
+}
+
@media screen and (max-width: global.$mobile-width) {
  ul.linktree {
    width: 60%;
  }
-}
-
-ul.linktree li {
-  margin: 12px;
-  text-align: center;
+  ul.linktree li {
+    margin: 12px 0;
+  }
 }

 ul.linktree li a {
--- a/src/style/nav.scss
+++ b/src/style/nav.scss
@ -0,0 +1,186 @@
+@use "global.scss";
+
+nav {
+  display: grid;
+  grid-template-columns: 1fr min-content 1fr;
+  align-items: center;
+  padding: 12px;
+  border-bottom: solid 1px global.$text-color;
+  z-index: 1;
+
+  margin: 0 auto;
+  width: 95%;
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+}
+
+nav .nav-left {
+  justify-self: left;
+  grid-column: 1;
+}
+
+nav .nav-center {
+  justify-self: center;
+  grid-column: 2;
+}
+
+nav .nav-right {
+  justify-self: right;
+  grid-column: 3;
+}
+
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+nav ul li {
+  display: grid;
+  justify-items: center;
+}
+
+nav a,
+nav button {
+  padding: 0 8px;
+  color: global.$text-color;
+  text-decoration: none;
+
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+}
+
+nav a.title {
+  font-size: 140%;
+  font-weight: bold;
+}
+
+nav img.colormatic-logo {
+  width: auto;
+  height: 40px;
+  padding: 4px;
+}
+
+nav button.menu-button {
+  background: none;
+  border: none;
+}
+
+nav .menu-button i {
+  font-size: 230%;
+  transform: translateY(-1px);
+  /*/
+   * Ugly hack to account for the fact that the menu icon is off-center
+   * (Bootstrap please fix)
+  /*/
+}
+
+nav .git-icon i {
+  font-size: 140%;
+}
+
+nav div.inline {
+  display: flex;
+}
+
+@media screen and (max-width: global.$mobile-width) {
+  nav {
+    padding: 6px 0;
+  }
+  nav .git-icon i {
+    font-size: 150%;
+  }
+  nav ul.responsive-hidden {
+    display: none;
+  }
+}
+
+/*/
+ * Navigation modal section
+/*/
+
+span.modalbg.hidden {
+  display: none;
+}
+
+span.modalbg {
+  position: fixed;
+  z-index: 1;
+  padding: 0;
+  margin: auto;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+span.modalbg div {
+  width: 50ch;
+  margin: 100px auto;
+  padding: 16px;
+
+  color: global.$text-color;
+  border-radius: 8px;
+  box-shadow: 1px 1px 8px #00000033;
+  background-color: #ffffffbb;
+  backdrop-filter: blur(5px);
+
+  animation-name: modal-animate-in;
+  animation-duration: 0.4s;
+}
+
+@keyframes modal-animate-in {
+  from {
+    transform: translate(0px, -300px);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0px, 0px);
+    opacity: 1;
+  }
+}
+
+span.modalbg div button.close {
+  float: right;
+  width: min-content;
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  font-size: 200%;
+  color: global.$text-color;
+}
+
+span.modalbg div ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+span.modalbg div ul li {
+  margin: 18px 12px;
+}
+
+span.modalbg div ul li a {
+  color: global.$text-color;
+  padding: 8px;
+  text-decoration: none;
+  font-size: 120%;
+}
+
+@media screen and (max-width: global.$mobile-width) {
+  span.modalbg div {
+    width: 30ch;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  span.modalbg div {
+    background-color: #000000bb;
+  }
+}
--- a/src/style/studios.scss
+++ b/src/style/studios.scss
@ -1,9 +1,5 @@
@use "global.scss";

-div.no-margin nav {
-  margin: 0 auto; /* Remove navbar bottom margin */
-}
-
 div.cs-title {
  background-image: url("/img/colormatic_banner.svg");
  background-size: cover;
@ -55,7 +51,6 @@ div.project-grid-container div.project-grid-box {
  border-radius: 8px;
  box-shadow: 1px 1px 8px #00000033;
  padding: 16px;
-  text-align: center;
  color: global.$text-color;
  min-width: 40%;
  max-width: 50%;
@ -63,20 +58,22 @@ div.project-grid-container div.project-grid-box {
  backdrop-filter: blur(3px);
 }

+div.project-grid-container div.project-grid-box h1 {
+  text-align: center;
+}
+
 div.project-grid-container div.project-grid-box h1 a {
  color: global.$text-color;
-  text-decoration: none;
 }

 div.project-grid-container div.project-grid-box div.project-grid-box-contents {
  /* Yes, this absurdly long element selector is a joke */
  display: flex;
-  justify-content: center;
 }

 div.project-grid-container div.project-grid-box img {
-  max-width: 150px;
-  max-height: 100px;
+  max-width: 120px;
+  max-height: 150px;
  margin: 12px;
  border-radius: 8px;
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -9,7 +9,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
Author	SHA1	Message	Date
Zakarya	1a81d748df	Add "under construction" panel	2025-03-10 12:07:42 -07:00
Zakarya	514b413281	Embed bg canvas style to Svelte component	2025-03-10 11:29:27 -07:00
Zakarya	6cbbe07371	Migrate background animation to a Svelte component	2025-03-10 11:25:36 -07:00
Zakarya	50d1ab00ca	Big website changes (see full commit message for details) - Moved navbar and footer styling to a seperate file - New error page (only for dev server) - Added BSON for Godot and set it as a featured project - Changed featured projects layout - Added header to homepage - Added a scroll indicator to homepage - Made links underlined - Removed Twitter from Colormatic Studios links and added Colormatic Git	2025-02-22 17:31:58 -08:00
Zakarya	d3624273d7	Footer: Add contact email	2025-02-22 14:51:30 -08:00
Zakarya	513fe9ad94	Video player: Add svelte ignore comment to video element	2025-02-19 21:44:45 -08:00
Zakarya	43999779a0	Set allowImportingTsExtensions to true in tsconfig	2025-02-19 21:41:58 -08:00
Zakarya	0571f83a8e	Revamp navbar and navigation menu	2025-02-19 21:37:55 -08:00
Zakarya	ab1a95b611	Add package-lock.json to gitignore	2025-01-29 18:13:41 -08:00
Zakarya	47e00f7a3c	Remove gitea action, deployment will happen a different way	2025-01-29 17:47:17 -08:00
Zakarya	42f7d148b4	Change "var" to "let" in bg.ts	2025-01-29 17:43:40 -08:00
Zakarya	4ffb51e330	Deploy action: clean up release archive when finished	2025-01-29 16:10:19 -08:00
Zakarya	4fbf47d26e	Add deployment action	2025-01-29 15:52:46 -08:00