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
Footer: Add contact email
2025-02-22 17:31:58 -08:00 · 2025-02-22 14:51:30 -08:00 · 2025-02-19 21:44:45 -08:00 · 2025-02-19 21:41:58 -08:00 · 2025-02-19 21:37:55 -08:00 · 2025-01-29 18:13:41 -08:00
15 changed files with 403 additions and 2237 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/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,5 +1,6 @@
 <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";
@ -12,7 +13,6 @@

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

 <Navbar />
--- 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,17 @@
      >
    </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
      >
-    </p>
-    <p>Not yet public.</p>
+    </h1>
+    <p>A BSON serializer/deserializer for the Godot Engine</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
@ -4,8 +4,8 @@
 * 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;
+	let canvas = document.createElement("canvas") as HTMLCanvasElement;
+	let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 	canvas.classList.add("bg-canvas");
 	document.body.appendChild(canvas);

@ -14,7 +14,7 @@ export function createBackground() {
 		canvas.height = window.innerHeight;
 	}

-	var dark_theme = false;
+	let dark_theme = false;

 	if (
 		window.matchMedia &&
--- 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,6 +13,12 @@ body {
  }
 }

+body {
+  font-family: "Noto Sans", sans-serif;
+  margin: 0;
+  color: global.$text-color;
+}
+
 canvas.bg-canvas {
  position: fixed;
  top: 0;
@ -25,195 +26,37 @@ canvas.bg-canvas {
  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;
-  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 {
  display: block;
  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 +66,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 +132,6 @@ main div.hero {

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

 p.justify {
@ -301,15 +178,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	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