Bump version to 1.3.4

Not really sure how that happened

package.json

@@ -1,6 +1,6 @@
 {
   "name": "colormatic-website",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

src/component/footer.svelte

@@ -2,8 +2,8 @@
   <p>© 2025 Colormatic Studios, All Rights Reserved.</p>
   <p>
     <a href="mailto:support@colormatic.org">support@colormatic.org</a>
-    |
-    <a href="mailto:support@colormatic.org">contact@colormatic.org</a>
+    <span class="responsive-hidden">|</span>
+    <a href="mailto:contact@colormatic.org">contact@colormatic.org</a>
   </p>
 </footer>
 
@@ -28,10 +28,15 @@
     footer {
       flex-direction: column;
     }
+
     footer p {
       text-align: center;
       padding: 4px;
       margin: 4px;
     }
+
+    .responsive-hidden {
+      display: none;
+    }
   }
 </style>

src/component/navbar.svelte

@@ -152,6 +152,12 @@ Svelte modal example, https://svelte.dev/playground/modal
   nav button.menu-button {
     background: none;
     border: none;
+
+    transition-duration: 0.2s;
+  }
+
+  nav button.menu-button:hover {
+    color: #21afff;
   }
 
   nav .menu-button i {
@@ -240,6 +246,12 @@ Svelte modal example, https://svelte.dev/playground/modal
 
     font-size: 200%;
     color: global.$text-color;
+
+    transition-duration: 0.2s;
+  }
+
+  span.modalbg div button.close:hover {
+    color: #21afff;
   }
 
   span.modalbg div ul {
@@ -259,6 +271,10 @@ Svelte modal example, https://svelte.dev/playground/modal
     font-size: 120%;
   }
 
+  span.modalbg div ul li a:hover {
+    color: #21afff;
+  }
+
   @media screen and (max-width: global.$mobile-width) {
     span.modalbg div {
       width: 30ch;

src/component/settings.svelte

@@ -76,7 +76,7 @@
     <i class={`bi ${currentIcon}`}></i>
   </button>
 
-  <!-- Unfortunately, we have to hard-code 72px because CSS won't animate `auto` or `min-content` -->
+  <!-- Unfortunately, we have to hard-code the pixel count because CSS won't animate `auto` or `min-content` -->
   <div class="button-group" style:height={expanded ? "68px" : "0px"}>
     <!-- Don't show the button if it is currently selected (it will be shown as the dropdown icon) -->
     {#if themeOption !== themes.DARK}
@@ -154,4 +154,19 @@
       margin: 4px 0;
     }
   }
+
+  // Click target color animation
+
+  button {
+    transition-duration: 0.2s;
+  }
+
+  button:hover {
+    color: #21afff !important;
+    /*/
+     * Cascading styles was a mistake
+     * I hate this code
+     * But it works
+    /*/
+  }
 </style>

src/routes/+page.svelte

@@ -1,25 +1,21 @@
 <script lang="ts">
   import { getContext, onMount } from "svelte";
 
-  let arrow = $state() as HTMLDivElement;
+  let atTop = $state(true);
 
-  function checkArrow(e: Event) {
-    if (window.scrollY != 0) {
-      if (!arrow.classList.contains("scroll-arrow-hide")) {
-        arrow.classList.add("scroll-arrow-hide");
-      }
+  function checkScrollPos() {
+    if (window.scrollY === 0) {
+      atTop = true;
     } else {
-      if (arrow.classList.contains("scroll-arrow-hide")) {
-        arrow.classList.remove("scroll-arrow-hide");
-      }
+      atTop = false;
     }
   }
 
   onMount(() => {
-    window.addEventListener("scroll", checkArrow);
+    window.addEventListener("scroll", checkScrollPos);
 
     return () => {
-      window.removeEventListener("scroll", checkArrow);
+      window.removeEventListener("scroll", checkScrollPos);
     };
   });
 
@@ -53,7 +49,7 @@
     <h1>Colormatic: A non-profit project for creation.</h1>
   </div>
 
-  <div bind:this={arrow} class="scroll-arrow">
+  <div class="scroll-arrow {atTop ? '' : 'hide'}">
     <i class="bi bi-arrow-down-circle-fill"></i>
   </div>
 
@@ -136,4 +132,23 @@
       font-size: 200%;
     }
   }
+
+  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.hide {
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      visibility 0s 0.25s,
+      opacity 0.25s ease-out;
+  }
 </style>

src/routes/studios/+page.svelte

@@ -103,6 +103,20 @@
     </div>
   </div>
 
+  <div class="hero panel">
+    <h1>About Us</h1>
+    <p class="justify">
+      Colormatic Studios is a creative studio dedicated to giving life to
+      Colormatic's ambitious future.
+    </p>
+    <p class="justify">
+      We are currently just a passionate team of volunteers working to build
+      inspiring, intuitive and innovative creative works. We don't have many
+      projects right now, but we're working hard behind the scenes on ventures
+      we'll be introducing later.
+    </p>
+  </div>
+
   <div class="hero panel">
     <h1>Links:</h1>
     <div class="double-linktree">
@@ -232,6 +246,11 @@
     color: global.$text-color;
   }
 
+  // Bad code
+  div.project-grid-container div.project-grid-box h1 a:hover {
+    color: #21afff;
+  }
+
   div.project-grid-container
     div.project-grid-box
     div.project-grid-box-contents {

src/routes/video/+page.svelte

@@ -1,242 +0,0 @@
-<script lang="ts">
-  import { getContext, onMount } from "svelte";
-
-  onMount(() => {
-    let channel = getParam("c");
-    let video = getParam("v");
-    // Don't request an empty string
-    if (channel && video) {
-      getVideo(channel, video);
-    }
-  });
-
-  let darkTheme: CallableFunction = getContext("darkTheme");
-
-  const BASEURL = "https://files.colormatic.org/";
-
-  export function getParam(paramName: string) {
-    var params = new URLSearchParams(window.location.search);
-    let t_param = params.get(paramName);
-    return t_param ? t_param : ""; // Return empty string if null
-  }
-
-  async function getJSON(url: string) {
-    const response = await fetch(url);
-    if (!response.ok) throw new Error(response.statusText);
-
-    const data = response.json();
-    return data;
-  }
-
-  export function getVideo(cname: string, vname: string) {
-    var videoplayer = document.getElementById("videoplayer") as HTMLElement;
-    var videotitle = document.getElementById("videotitle") as HTMLElement;
-    var videodescription = document.getElementById(
-      "videodescription",
-    ) as HTMLElement;
-    var videodownload = document.getElementById("videodownload") as HTMLElement;
-    var sourcedownload = document.getElementById(
-      "sourcedownload",
-    ) as HTMLElement;
-    getJSON(BASEURL + cname + "/videos/data/" + vname + ".json")
-      .then((data) => {
-        let videoURL =
-          BASEURL +
-          cname +
-          "/videos/raw/" +
-          data.video_file +
-          "." +
-          data.video_format;
-        videoplayer.setAttribute(
-          "poster",
-          BASEURL + cname + "/videos/thumbnail/" + data.thumbnail,
-        );
-        var videosource = document.createElement("source");
-        videosource.setAttribute("src", videoURL);
-        videosource.setAttribute("type", "video/" + data.video_format);
-        videoplayer.appendChild(videosource);
-
-        document.title = data.title;
-        videotitle.innerText = data.title;
-        data.description.forEach((iter: number) => {
-          // TODO: Detect if one of these lines contains a link and if so, make it a link
-          videodescription.appendChild(
-            document.createTextNode(iter.toString()),
-          );
-          videodescription.appendChild(document.createElement("br"));
-        });
-
-        videodownload.setAttribute(
-          "href",
-          BASEURL +
-            cname +
-            "/videos/raw/" +
-            data.video_file +
-            "." +
-            data.video_format,
-        );
-        videodownload.setAttribute(
-          "download",
-          data.video_file + "." + data.video_format,
-        );
-        sourcedownload.setAttribute(
-          "href",
-          BASEURL +
-            cname +
-            "/videos/source/" +
-            data.source_file +
-            "." +
-            data.source_format,
-        );
-        sourcedownload.setAttribute(
-          "download",
-          data.source_file + "." + data.source_format,
-        );
-      })
-      .catch((error) => {
-        videotitle.innerText = "Failed to load video.";
-        console.error(error);
-      });
-  }
-</script>
-
-<svelte:head>
-  <title>Video Player</title>
-  <meta property="og:type" content="video" />
-</svelte:head>
-
-<spacer></spacer>
-
-<main class={darkTheme() ? "dark-theme" : ""}>
-  <div class="video panel">
-    <!-- Video elements are set by a script -->
-    <!-- svelte-ignore a11y_media_has_caption -->
-    <video id="videoplayer" controls></video>
-    <div class="videoobjects">
-      <div class="videodetails">
-        <h1 id="videotitle">Video Player</h1>
-        <p id="videodescription" class="justify"></p>
-      </div>
-      <div class="dropdown-container">
-        <div class="download-dropdown">
-          <i class="bi bi-download"></i>
-          <div class="dropdown-content">
-            <ul>
-              <li><a id="videodownload">Download Video</a></li>
-              <li><a id="sourcedownload">Download Source</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
-<spacer></spacer>
-
-<style lang="scss">
-  @use "../../style/global.scss";
-
-  div.video {
-    display: flex;
-    color: global.$text-color;
-    width: 90%;
-    margin: 16px auto 16px auto;
-    padding: 16px;
-  }
-
-  div.video video#videoplayer {
-    flex-grow: 1;
-    border-radius: 12px;
-    height: auto;
-    max-width: 55%;
-  }
-
-  div.video div.videoobjects {
-    display: grid;
-    padding: 24px;
-  }
-
-  div.video div.videodetails h1#videotitle {
-    padding: 0 12px;
-  }
-
-  div.dropdown-container {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-  div.video div.download-dropdown {
-    position: relative;
-    display: inline-block;
-    padding: 12px;
-    width: 25px;
-    height: 25px;
-    background-color: #21afff;
-    box-shadow: 1px 1px 8px #00000033;
-    border-radius: 50px;
-    transition-duration: 0.35s;
-    font-size: 120%;
-    text-align: center;
-  }
-
-  div.video div.download-dropdown:hover {
-    box-shadow: 1px 1px 8px #00000088;
-  }
-
-  div.video div.download-dropdown div.dropdown-content {
-    display: none;
-    position: absolute;
-    font-size: 80%;
-    min-width: 160px;
-    background-color: #edeeee;
-    box-shadow: 1px 1px 8px #00000033;
-    border-radius: 8px;
-    text-align: center;
-  }
-
-  div.video div.download-dropdown:hover div.dropdown-content {
-    display: block;
-  }
-
-  div.video div.download-dropdown div.dropdown-content ul {
-    list-style-type: none;
-    padding-left: 0;
-  }
-
-  div.video div.download-dropdown div.dropdown-content ul li {
-    padding: 4px;
-    cursor: pointer;
-  }
-
-  div.video div.download-dropdown div.dropdown-content ul li:hover {
-    background-color: #dcdfdf;
-  }
-
-  div.video div.download-dropdown div.dropdown-content ul li a {
-    text-decoration: none;
-    color: global.$text-color;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    div.video {
-      display: block;
-    }
-    div.video video#videoplayer {
-      width: 100%;
-      max-width: none;
-    }
-    div.video div.download-dropdown {
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-      margin-top: 12px;
-    }
-  }
-
-  main.dark-theme {
-    div.video div.download-dropdown div.dropdown-content {
-      background-color: #444444;
-    }
-  }
-</style>

src/routes/zakarya/+page.svelte

@@ -23,7 +23,7 @@
   />
   <meta
     property="og:image"
-    content="https://colormatic.org/img/zakarya-icon.svg"
+    content="https://colormatic.org/img/colormatic_logo.svg"
   />
   <meta property="og:url" content="https://colormatic.org/zakarya/" />
   <meta property="og:type" content="website" />
@@ -116,7 +116,11 @@
     <h1>Featured Videos:</h1>
     <ul class="videolist">
       <li>
-        <a href="/video?c=zakarya&v=the-way-forward">
+        <a
+          href="https://www.youtube.com/watch?v=FWGCPIEM_-o"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <img
             src="https://files.colormatic.org/zakarya/videos/thumbnail/wayforward.png"
             alt="Video Thumbnail"
@@ -125,7 +129,11 @@
         </a>
       </li>
       <li>
-        <a href="/video?c=zakarya&v=hello-world">
+        <a
+          href="https://www.youtube.com/watch?v=OPD8NqNu0nE"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <img
             src="https://files.colormatic.org/zakarya/videos/thumbnail/helloworld.png"
             alt="Video Thumbnail"
@@ -233,4 +241,32 @@
   main.dark-theme div.profile div.bio {
     border-color: #ffffff55;
   }
+
+  ul.videolist {
+    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-left: 0;
+  }
+
+  ul.videolist li {
+    padding: 8px;
+  }
+
+  ul.videolist li a {
+    text-decoration: none;
+  }
+
+  ul.videolist li a img {
+    width: 250px;
+    height: auto;
+    border-radius: 8px;
+  }
+
+  ul.videolist li a span {
+    display: block;
+    color: global.$text-color;
+    font-size: 120%;
+  }
 </style>

src/style/main.scss

@@ -24,6 +24,26 @@ spacer {
   margin-top: 8%;
 }
 
+a {
+  transition-duration: 0.2s;
+}
+
+a:link {
+  color: #2194ff;
+}
+
+a:visited {
+  color: #2178ff;
+}
+
+a:link:hover {
+  color: #21afff;
+}
+
+a:visited:hover {
+  color: #21afff;
+}
+
 a.btn,
 button.btn {
   padding: 8px 18px;
@@ -84,25 +104,6 @@ main div.hero {
   }
 }
 
-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;
-}
-
 main div.hero h1 a {
   color: global.$text-color;
 }
@@ -181,34 +182,6 @@ div.double-linktree ul.linktree {
   margin: 0;
 }
 
-ul.videolist {
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding-left: 0;
-}
-
-ul.videolist li {
-  padding: 8px;
-}
-
-ul.videolist li a {
-  text-decoration: none;
-}
-
-ul.videolist li a img {
-  width: 250px;
-  height: auto;
-  border-radius: 8px;
-}
-
-ul.videolist li a span {
-  display: block;
-  color: global.$text-color;
-  font-size: 120%;
-}
-
 img.pixelart {
   image-rendering: pixelated;
 }