Initial commit
This commit is contained in:
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
node_modules
|
||||
|
||||
# Output
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.wrangler
|
||||
/.svelte-kit
|
||||
/build
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Env
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.test
|
||||
|
||||
# Vite
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
5
LICENSE
Normal file
5
LICENSE
Normal file
@ -0,0 +1,5 @@
|
||||
We reserve all rights granted by intellectual property law and all other applicable laws, domestic and international.
|
||||
|
||||
Images, effects, code, styling and all other copyrightable assets of this project are subject to this license.
|
||||
All code and assets in this project that are borrowed from other projects are subject to their respective original licenses. Our modifications are subject to this license.
|
||||
This license is revokeable and/or replaceable by Colormatic Studios only.
|
||||
26
README.md
Normal file
26
README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# Colormatic Website
|
||||
[colormatic.org](https://colormatic.org)
|
||||
|
||||
This project uses SvelteKit along with TypeScript and Sass. It's configured for static site generation (SSG) and prerendering at compile time to create a simple static website for Nginx to serve, with very little client-side rendering (CSR).
|
||||
|
||||
The Colormatic website is developed with accordance to modern web standards, however a legacy website will be available in the future for older/less capable browsers.
|
||||
|
||||
To download the project, run:
|
||||
```
|
||||
git clone git@git.colormatic.org:ColormaticStudios/Colormatic-Website.git
|
||||
npm install
|
||||
```
|
||||
You can run the project locally with:
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
Or you can build the project for release with:
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
After the project has been built, you can preview the release build with:
|
||||
```
|
||||
npm run preview
|
||||
```
|
||||
|
||||
Bootstrap Icons are licensed under the [MIT](https://opensource.org/license/MIT) license.
|
||||
1985
package-lock.json
generated
Normal file
1985
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
package.json
Normal file
26
package.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "colormatic-website",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"sass": "^1.83.4",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap-icons": "^1.11.3"
|
||||
}
|
||||
}
|
||||
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
11
src/app.html
Normal file
11
src/app.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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>
|
||||
</html>
|
||||
4
src/component/footer.svelte
Normal file
4
src/component/footer.svelte
Normal file
@ -0,0 +1,4 @@
|
||||
<footer>
|
||||
<p>© 2025 Colormatic Studios, All Rights Reserved.</p>
|
||||
<p><a href="mailto:support@colormatic.org">support@colormatic.org</a></p>
|
||||
</footer>
|
||||
55
src/component/navbar.svelte
Normal file
55
src/component/navbar.svelte
Normal file
@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
function toggleModalMenu() {
|
||||
var pages = document.getElementById("pages") as HTMLElement;
|
||||
pages.classList.toggle("hidden");
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<a href="/" class="title nav-left">Colormatic</a>
|
||||
<img
|
||||
src="/img/colormatic_logo.svg"
|
||||
alt="Colormatic Logo"
|
||||
class="nav-center colormatic-logo"
|
||||
/>
|
||||
<div class="nav-right inline">
|
||||
<ul class="responsive-hidden">
|
||||
<li><a href="/zakarya">Zakarya</a></li>
|
||||
<li><a href="/studios">Colormatic Studios</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
<a
|
||||
href="https://git.colormatic.org"
|
||||
class="git-icon"
|
||||
target="_blank"
|
||||
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
|
||||
>
|
||||
</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>
|
||||
<div>
|
||||
<button on:click={toggleModalMenu} class="close" aria-label="Close"
|
||||
><i class="bi bi-x"></i></button
|
||||
>
|
||||
<ul>
|
||||
<li><a href="/zakarya">Zakarya</a></li>
|
||||
<li><a href="/studios">Colormatic Studios</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
22
src/routes/+layout.svelte
Normal file
22
src/routes/+layout.svelte
Normal file
@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import "../style/main.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);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href="/img/colormatic_logo.svg" />
|
||||
<!--<link rel="stylesheet" href="../style/main.scss" />-->
|
||||
</svelte:head>
|
||||
|
||||
<Navbar />
|
||||
|
||||
<slot />
|
||||
|
||||
<Footer />
|
||||
3
src/routes/+layout.ts
Normal file
3
src/routes/+layout.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export const prerender = true;
|
||||
export const csr = true;
|
||||
export const trailingSlash = "always";
|
||||
34
src/routes/+page.svelte
Normal file
34
src/routes/+page.svelte
Normal file
@ -0,0 +1,34 @@
|
||||
<svelte:head>
|
||||
<title>Colormatic</title>
|
||||
</svelte:head>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<main>
|
||||
<div class="heading">Featured Colormatic Studios Projects:</div>
|
||||
<div class="hero panel">
|
||||
<h1>
|
||||
<a
|
||||
href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Quality First Person Controller</a
|
||||
>
|
||||
</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
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Software_release_life_cycle#Pre-alpha"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">pre-alpha.</a
|
||||
>
|
||||
</p>
|
||||
<p>Not yet public.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
21
src/routes/about/+page.svelte
Normal file
21
src/routes/about/+page.svelte
Normal file
@ -0,0 +1,21 @@
|
||||
<svelte:head>
|
||||
<title>Colormatic - About</title>
|
||||
</svelte:head>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<main>
|
||||
<div class="hero panel">
|
||||
<h1>Colormatic: A non-profit project for creation.</h1>
|
||||
<p class="justify">
|
||||
Colormatic is a non-profit project for creating a curated collection of
|
||||
sub-projects that match a high-quality, high attention to detail standard.
|
||||
</p>
|
||||
<p class="justify">
|
||||
Colormatic Studios is a creative studio dedicated to giving life to these
|
||||
maximum effort projects.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
102
src/routes/studios/+page.svelte
Normal file
102
src/routes/studios/+page.svelte
Normal file
@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
import "../../style/studios.scss";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Colormatic Studios</title>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<div class="cs-title"><h1>Colormatic Studios</h1></div>
|
||||
|
||||
<div class="project-grid-container">
|
||||
<div class="project-grid-box panel">
|
||||
<h1>
|
||||
<a
|
||||
href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Quality First Person Controller</a
|
||||
>
|
||||
</h1>
|
||||
<div class="project-grid-box-contents">
|
||||
<img
|
||||
src="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person/raw/branch/main/icon.svg"
|
||||
alt="First Person Logo"
|
||||
/>
|
||||
<p>An actually good first person controller 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-grid-box panel">
|
||||
<h1>ColorQuest</h1>
|
||||
<div class="project-grid-box-contents">
|
||||
<img
|
||||
src="/img/studios/colorquest.png"
|
||||
class="pixelart"
|
||||
alt="ColorQuest"
|
||||
/>
|
||||
<p>A simple MMORPG in your browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero panel">
|
||||
<h1>Links:</h1>
|
||||
<div class="double-linktree">
|
||||
<ul class="linktree">
|
||||
<li>
|
||||
<a
|
||||
href="https://mastodon.social/@colormaticstudios"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Mastodon</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.instagram.com/colormaticstudios/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Instagram</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.youtube.com/@colormaticstudios"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Youtube</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="linktree">
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/ColormaticStudios"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">GitHub</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://bsky.app/profile/colormaticstudios.bsky.social"
|
||||
target="_blank"
|
||||
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>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
46
src/routes/video/+page.svelte
Normal file
46
src/routes/video/+page.svelte
Normal file
@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { getParam, getVideo } from "../../script/video.ts";
|
||||
import "../../style/video.scss";
|
||||
|
||||
import { onMount } from "svelte";
|
||||
|
||||
onMount(() => {
|
||||
let channel = getParam("c");
|
||||
let video = getParam("v");
|
||||
// Don't request an empty string
|
||||
if (channel && video) {
|
||||
getVideo(channel, video);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Video Player</title>
|
||||
</svelte:head>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<main>
|
||||
<div class="video container">
|
||||
<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>
|
||||
68
src/routes/zakarya/+page.svelte
Normal file
68
src/routes/zakarya/+page.svelte
Normal file
@ -0,0 +1,68 @@
|
||||
<svelte:head>
|
||||
<title>Colormatic - Zakarya</title>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<img class="banner" src="/img/zakarya-banner.png" alt="Zakarya Banner" />
|
||||
<span class="name-title">Zakarya</span>
|
||||
<div class="hero panel">
|
||||
<h1>Links:</h1>
|
||||
<ul class="linktree">
|
||||
<li>
|
||||
<a
|
||||
href="https://mstdn.party/@zakarya"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Mastodon</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://ko-fi.com/zakarya"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Ko-fi</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.youtube.com/@czakarya"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Youtube</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/CZakarya"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">GitHub</a
|
||||
>
|
||||
</li>
|
||||
<!--<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero panel">
|
||||
<h1>Featured Videos:</h1>
|
||||
<ul class="videolist">
|
||||
<li>
|
||||
<a href="/video?c=zakarya&v=the-way-forward">
|
||||
<img
|
||||
src="https://files.colormatic.org/zakarya/videos/thumbnail/wayforward.png"
|
||||
alt="Video Thumbnail"
|
||||
/>
|
||||
<span class="title">The Way Forward</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/video?c=zakarya&v=hello-world">
|
||||
<img
|
||||
src="https://files.colormatic.org/zakarya/videos/thumbnail/helloworld.png"
|
||||
alt="Video Thumbnail"
|
||||
/>
|
||||
<span class="title">Hello World</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
271
src/script/bg.ts
Normal file
271
src/script/bg.ts
Normal file
@ -0,0 +1,271 @@
|
||||
/*/
|
||||
* 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);
|
||||
}
|
||||
86
src/script/video.ts
Normal file
86
src/script/video.ts
Normal file
@ -0,0 +1,86 @@
|
||||
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);
|
||||
});
|
||||
}
|
||||
2
src/style/global.scss
Normal file
2
src/style/global.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$text-color: var(--text-color);
|
||||
$mobile-width: 900px;
|
||||
400
src/style/main.scss
Normal file
400
src/style/main.scss
Normal file
@ -0,0 +1,400 @@
|
||||
@use "global.scss";
|
||||
|
||||
:root {
|
||||
--text-color: #383c3f;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text-color: white;
|
||||
}
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
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%;
|
||||
}
|
||||
|
||||
div.panel {
|
||||
color: global.$text-color;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
main div.heading {
|
||||
color: global.$text-color;
|
||||
font-size: 300%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
main div.heading {
|
||||
font-size: 250%;
|
||||
}
|
||||
main div.hero {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
main div.hero h1 a {
|
||||
color: global.$text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p.justify {
|
||||
text-align: justify;
|
||||
text-justify: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main div.hero p.justify {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
main div.hero ul {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main img.banner {
|
||||
display: block;
|
||||
width: 70%;
|
||||
margin: 32px auto 32px auto;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 16px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
main img.banner {
|
||||
width: 95%;
|
||||
border-radius: 12px;
|
||||
margin: 24px auto 24px auto;
|
||||
}
|
||||
main div.hero p.justify {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.linktree {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
padding-left: 8px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
ul.linktree {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.linktree li {
|
||||
margin: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.linktree li a {
|
||||
/* Pill button shape */
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
|
||||
background-color: #4c5053;
|
||||
padding: 8px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 2px 2px 4px #00000066;
|
||||
transition-duration: 0.5s;
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul.linktree li a:hover {
|
||||
cursor: pointer;
|
||||
background-color: #383c3f;
|
||||
}
|
||||
|
||||
div.double-linktree {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: solid 1px global.$text-color;
|
||||
width: 95%;
|
||||
padding: 4px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: global.$text-color;
|
||||
padding: 4px 10%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
footer p {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
93
src/style/studios.scss
Normal file
93
src/style/studios.scss
Normal file
@ -0,0 +1,93 @@
|
||||
@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;
|
||||
background-repeat: no-repeat;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.cs-title h1 {
|
||||
color: white;
|
||||
background-color: #00000088;
|
||||
padding: 28px 38px;
|
||||
border-radius: 16px;
|
||||
font-size: 300%;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
div.project-grid-container {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
div.project-grid-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
div.cs-title {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div.cs-title h1 {
|
||||
font-size: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box {
|
||||
flex: 1;
|
||||
color: #383c3f;
|
||||
margin: 16px;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: global.$text-color;
|
||||
min-width: 40%;
|
||||
max-width: 50%;
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
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;
|
||||
margin: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
div.project-grid-container div.project-grid-box {
|
||||
min-width: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box img {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
109
src/style/video.scss
Normal file
109
src/style/video.scss
Normal file
@ -0,0 +1,109 @@
|
||||
@use "global.scss";
|
||||
|
||||
div.video.container {
|
||||
display: flex;
|
||||
color: global.$text-color;
|
||||
width: 90%;
|
||||
margin: 16px auto 16px auto;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
padding: 16px;
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
div.video.container video#videoplayer {
|
||||
flex-grow: 1;
|
||||
border-radius: 12px;
|
||||
height: auto;
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
div.video.container div.videoobjects {
|
||||
display: grid;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
div.video.container div.videodetails h1#videotitle {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
div.dropdown-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
div.video.container 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.container div.download-dropdown:hover {
|
||||
box-shadow: 1px 1px 8px #00000088;
|
||||
}
|
||||
|
||||
div.video.container 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.container div.download-dropdown:hover div.dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown div.dropdown-content ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown div.dropdown-content ul li {
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown div.dropdown-content ul li:hover {
|
||||
background-color: #dcdfdf;
|
||||
}
|
||||
|
||||
div.video.container 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.container {
|
||||
display: block;
|
||||
}
|
||||
div.video.container video#videoplayer {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
div.video.container div.download-dropdown {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
div.video.container div.download-dropdown div.dropdown-content {
|
||||
background-color: #444444;
|
||||
}
|
||||
}
|
||||
138
static/img/colormatic_banner.svg
Normal file
138
static/img/colormatic_banner.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 143 KiB |
215
static/img/colormatic_logo.svg
Normal file
215
static/img/colormatic_logo.svg
Normal file
@ -0,0 +1,215 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 26.458332 26.458333"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||
sodipodi:docname="colormatic_logo.svg"
|
||||
inkscape:export-filename="drawing.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="false"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
showgrid="false"
|
||||
inkscape:zoom="5.9794051"
|
||||
inkscape:cx="41.392077"
|
||||
inkscape:cy="48.416188"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
showguides="false"><inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid1290"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingy="1"
|
||||
spacingx="1"
|
||||
units="px"
|
||||
visible="false" /></sodipodi:namedview><defs
|
||||
id="defs2"><inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2036"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
radius="8"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" /><inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2034"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
radius="8"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" /><inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2028"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
radius="8"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" /><inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2024"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
radius="8"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" /><inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect869"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
satellites_param="F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
radius="1"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false"
|
||||
nodesatellites_param="F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1" /><inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect859"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
radius="1"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false"
|
||||
nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1" /></defs><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"><path
|
||||
style="fill:#d65e7a;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 13.844549,25.055474 c -0.455247,0.02641 -0.937823,0.09196 -1.482915,0.192718 -1.165067,0.215418 -2.084357,0.504773 -2.6044077,0.749308 a 13.270987,13.229573 0 0 0 3.4353207,0.460832 13.270987,13.229573 0 0 0 4.266233,-0.710995 c -1.412901,-0.529674 -2.448059,-0.759639 -3.614231,-0.691863 z"
|
||||
id="path414" /><path
|
||||
style="fill:#08d3dd;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 14.683866,22.935597 c -0.243608,0.03057 -0.342495,0.137126 -0.21974,0.335149 0.217347,0.350575 0.932279,0.636804 1.58858,0.636804 0.656298,0 1.193534,0.263551 1.193534,0.585335 0,0.245646 0.641314,0.536808 1.437288,0.772054 a 13.270987,13.229573 0 0 0 1.099878,-0.555408 c -0.368628,-0.158437 -0.752511,-0.320626 -1.000216,-0.471604 -1.327189,-0.808976 -3.368501,-1.394288 -4.099331,-1.30233 z"
|
||||
id="path412" /><path
|
||||
style="fill:#8ec419;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 6.3171051,20.137013 c -0.557449,-0.171639 -1.0666234,0.154963 -2.1289134,1.16349 -0.3282631,0.311639 -0.5498672,0.586216 -0.7804821,0.861835 a 13.270987,13.229573 0 0 0 0.3314046,0.339944 c 0.1629756,-0.208469 0.3171263,-0.414344 0.6820206,-0.669117 2.0499607,-1.431373 2.960477,-1.192258 1.1443052,0.300451 l -1.187533,0.975543 a 13.270987,13.229573 0 0 0 0.067244,0.05745 L 5.991707,22.31554 C 7.7621461,21.339765 7.8525007,21.158513 6.913876,20.467391 6.6950881,20.306406 6.5029238,20.194203 6.3171051,20.137013 Z"
|
||||
id="path410" /><path
|
||||
style="fill:#b158bc;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 10.606151,19.004655 c -0.8675017,0 -1.8804133,1.350742 -1.586179,2.115105 0.299165,0.777174 -2.3483752,2.162544 -4.0741134,2.472978 a 13.270987,13.229573 0 0 0 1.5285433,1.042578 c 0.614523,-0.04772 1.2036586,-0.115353 1.8575455,-0.123229 2.0287696,-0.02455 4.1351556,-0.07829 4.6804876,-0.119754 1.5759,-0.119985 0.653919,-2.129374 -1.358037,-2.96017 -0.98219,-0.405565 -1.785503,-0.995811 -1.785503,-1.311897 0,-0.316178 0.276654,-0.404546 0.614781,-0.196424 0.338129,0.208238 0.614778,0.0864 0.614778,-0.270523 0,-0.356969 -0.221808,-0.64878 -0.492303,-0.64878 z"
|
||||
id="path408" /><path
|
||||
style="fill:#2ead98;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 4.756141,18.092556 c -0.3746301,0.14616 -1.2502138,0.843976 -2.2645964,1.831402 -0.1857699,0.180905 -0.3024436,0.259405 -0.4766955,0.420135 a 13.270987,13.229573 0 0 0 0.5163194,0.746922 c 1.3344296,-1.341268 2.4194929,-2.639475 2.4194929,-2.950581 0,-0.08385 -0.069638,-0.09659 -0.1945297,-0.04795 z"
|
||||
id="path406" /><path
|
||||
style="fill:#0a7726;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 3.1063233,13.751046 c -0.6266057,0 -1.0047026,0.217503 -0.8405187,0.482397 0.1641838,0.264965 0.5423017,0.481194 0.8405187,0.481194 0.298217,0 0.6763348,-0.216345 0.8405186,-0.481194 C 4.111049,13.968502 3.7329335,13.751046 3.1063233,13.751046 Z"
|
||||
id="path404" /><path
|
||||
style="fill:#27663e;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 26.458332,13.381175 c -0.1452,0.05559 -0.223946,0.08038 -0.397445,0.14616 l -1.717059,0.649961 1.831131,1.761982 a 13.270987,13.229573 0 0 0 0.283373,-2.557987 z"
|
||||
id="path402" /><path
|
||||
style="fill:#a762ad;fill-opacity:1;stroke-width:0.613818"
|
||||
d="M 7.5730791,12.702492 C 7.3139679,12.56027 5.7464768,14.126244 4.0885289,16.183349 1.2383334,19.719681 1.2055477,19.798714 3.4989657,17.625724 4.833042,16.361706 6.175841,15.32749 6.4828063,15.32749 c 0.3069652,0 0.2256424,0.330493 -0.1801236,0.73497 -0.4057521,0.404499 -0.7372543,0.999378 -0.7372543,1.321463 0,0.322085 0.6913916,-0.215187 1.5357487,-1.194598 0.844355,-0.979389 1.2566386,-1.873953 0.9173664,-1.98699 C 7.6792711,14.089299 7.5464765,13.764318 7.7231612,13.479341 7.8998458,13.19434 7.8321833,12.844714 7.5730582,12.702492 Z"
|
||||
id="path400" /><path
|
||||
style="fill:#c14015;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 13.083281,11.650325 c -0.622932,0 -1.641841,1.76717 -1.480515,2.567553 0.0468,0.232258 -0.454885,0.593072 -1.115489,0.802004 -1.770441,0.560134 -4.0129494,3.910512 -3.1759603,4.744875 0.4801785,0.478692 0.8418733,0.206848 1.2895962,-0.967181 0.3423207,-0.897576 0.923138,-1.631504 1.289596,-1.631504 0.3664441,0 0.4763101,0.305524 0.2449511,0.678707 -0.2788636,0.449853 -0.0084,0.547625 0.803295,0.290861 1.033856,-0.327112 1.17994,-0.157511 0.940181,1.092865 -0.242616,1.265222 0.06041,1.59699 2.080886,2.280259 1.300342,0.439754 2.734446,0.862507 3.186765,0.93964 0.452316,0.07713 1.28227,0.546305 1.844338,1.042601 0.354654,0.313144 0.873362,0.607155 1.389257,0.849859 a 13.270987,13.229573 0 0 0 0.742059,-0.51471 c -0.724742,-0.05073 -0.812533,-0.180905 0.08404,-0.85704 1.040618,-0.784678 1.06028,-0.900147 0.153704,-0.900147 -0.571818,0 -1.039842,-0.28961 -1.039842,-0.64278 0,-0.35317 -0.732309,-1.318429 -1.627004,-2.145009 -0.894691,-0.826581 -1.330487,-1.502229 -0.968996,-1.502229 0.361494,0 1.519246,0.859727 2.573188,1.910388 1.429868,1.425328 2.207136,1.7791 3.418509,1.58842 a 13.270987,13.229573 0 0 0 2.257391,-4.521049 c -1.716074,-1.403461 -2.762917,-1.879349 -3.808749,-1.685357 l -1.536948,0.284884 1.536948,-0.697862 c 0.845321,-0.383259 1.23897,-0.809509 0.875339,-0.948025 -1.083348,-0.412792 -4.256625,1.239025 -4.256625,2.215657 0,0.497477 -0.829954,1.182947 -1.844338,1.523771 -1.014385,0.340801 -1.982666,0.781551 -2.151729,0.979133 -0.169063,0.197583 -0.82232,0.54839 -1.451696,0.78044 -0.869761,0.320672 -1.057069,0.193876 -0.77928,-0.527868 0.204497,-0.531272 -0.01464,-1.094509 -0.498308,-1.279584 -1.450338,-0.554806 -1.536178,-1.816762 -0.130887,-1.922387 1.041232,-0.07829 1.12179,0.02085 0.393842,0.478808 -1.015405,0.64 -0.997411,0.652601 1.390458,0.934845 2.093488,0.247453 2.135336,-0.322224 0.160907,-2.171346 -1.169125,-1.094903 -1.3682,-1.624901 -0.846522,-2.251537 0.430184,-0.516725 0.451196,-0.819955 0.05762,-0.819955 z"
|
||||
id="path398" /><path
|
||||
style="fill:#a06a61;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 3.7571243,10.424618 c -0.3580839,0 -0.650801,0.275782 -0.650801,0.612854 0,0.337071 0.1222665,0.612853 0.2713681,0.612853 0.1491038,0 0.4418186,-0.275782 0.650801,-0.612853 0.2089823,-0.337072 0.086716,-0.612854 -0.2713681,-0.612854 z"
|
||||
id="path396" /><path
|
||||
style="fill:#d7a0e8;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 24.741273,10.064314 c -0.42432,-0.041 -0.831299,0.08478 -1.356836,0.365076 -1.24078,0.661959 -1.258662,0.774185 -0.297785,1.832607 0.842475,0.928035 1.340469,1.018209 2.816938,0.50512 0.240089,-0.08339 0.355066,-0.137589 0.542737,-0.207079 a 13.270987,13.229573 0 0 0 -0.225736,-1.845763 c -0.0084,-0.0046 -0.01069,-0.0069 -0.01928,-0.0139 C 25.606619,10.311927 25.16553,10.1045 24.741208,10.063571 Z"
|
||||
id="path394" /><path
|
||||
style="fill:#8c4888;fill-opacity:1;stroke-width:0.613818"
|
||||
d="M 1.9608167,9.305417 C 1.7696329,9.31005 1.4642895,9.3943638 1.0458507,9.5543987 0.49219839,9.7661108 0.19236883,10.187496 0.37943991,10.489244 c 0.18707107,0.301747 0.0769568,0.548228 -0.24495135,0.548228 -0.0079,0 -0.0183563,0.0139 -0.0264191,0.01621 A 13.270987,13.229573 0 0 0 0,11.877209 C 0.20565968,11.707654 0.32230318,11.654378 0.60157141,11.387654 2.0838616,9.9719857 2.5343518,9.2889942 1.9608097,9.3060655 Z"
|
||||
id="path392" /><path
|
||||
style="fill:#759cef;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 17.576453,8.2688154 c -0.55293,0.011582 -1.311914,0.4135334 -2.138521,1.2029832 -1.501776,1.4343144 -1.779943,2.4160884 -1.343629,4.7424884 0.04315,0.230012 0.634843,0.593767 1.316013,0.809185 0.681177,0.215418 1.080072,0.648386 0.886147,0.961182 -0.193926,0.31282 -0.08897,0.568565 0.232943,0.568565 0.32191,0 0.738809,-0.400562 0.926972,-0.889376 0.188163,-0.488837 1.368084,-1.41312 2.621218,-2.054024 L 22.355402,12.445148 20.416204,11.3032 c -1.066997,-0.628326 -1.940397,-1.4805941 -1.940397,-1.8936411 0,-0.7725637 -0.346427,-1.152024 -0.899354,-1.1407435 z m -0.638795,0.963591 c 0.519071,-0.086167 0.92337,0.090568 0.92337,0.5793359 0,0.3370717 -0.25388,0.6128757 -0.564347,0.6128757 -0.310477,0 -1.071266,0.189707 -1.690646,0.42134 -0.991335,0.370751 -1.024913,0.297393 -0.282172,-0.612876 0.46125,-0.5652529 1.094724,-0.9145315 1.613795,-1.0006756 z"
|
||||
id="path390" /><path
|
||||
style="fill:#9e5ba5;fill-opacity:1;stroke-width:0.613818"
|
||||
d="M 0.9966211,8.0354226 A 13.270987,13.229573 0 0 0 0.78048209,8.5620853 C 1.0465547,8.5324363 1.2619804,8.4414048 1.2619804,8.3155125 c 0,-0.064162 -0.1795659,-0.1806733 -0.26536394,-0.2800899 z"
|
||||
id="path388" /><path
|
||||
style="fill:#7781ce;fill-opacity:1;stroke-width:0.613818"
|
||||
d="M 9.2949417,6.4266424 C 8.7039425,6.4699577 7.2778246,7.2794436 6.1249849,8.2245273 4.9721429,9.1696109 4.5126326,9.7841781 5.1043567,9.5903017 5.8011157,9.3621438 6.180221,9.5543987 6.180221,10.137325 c 0,1.289312 0.1930659,1.168122 2.2994175,-1.4447612 C 9.9936664,6.8144415 10.155615,6.3634068 9.2949417,6.4266424 Z M 7.9585162,7.4189559 c 0.1692957,-0.03266 0.3220778,-0.00695 0.4286649,0.09937 0.1547501,0.1542672 -0.140251,0.6293686 -0.655604,1.0557576 -0.5842793,0.4833475 -0.9365775,0.529674 -0.9365775,0.1232285 0,-0.5555009 0.6556131,-1.180098 1.1635166,-1.2784028 z"
|
||||
id="path386" /><path
|
||||
style="fill:#669aa8;fill-opacity:1;stroke-width:0.613818"
|
||||
d="M 3.4053071,5.810199 C 3.3109002,5.864401 3.3359483,6.0100978 3.4821477,6.2458996 3.7743768,6.717318 3.5851053,6.8263011 2.9190013,6.5714822 2.4115322,6.3773742 1.883739,6.4640048 1.641411,6.7259811 A 13.270987,13.229573 0 0 0 1.4985111,6.9953001 C 1.5645703,7.4932404 3.2401938,7.4508053 4.2338012,6.8229656 4.8900835,6.4082508 4.8525368,6.2283187 4.0476828,5.9204329 3.7136177,5.7925718 3.499693,5.7559738 3.4052861,5.8104075 Z"
|
||||
id="path384" /><path
|
||||
style="fill:#f940a3;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 18.798807,8.061736 -0.01557,0.013898 0.01673,-0.011582 z m 0.0012,0.00232 0.506714,0.6822734 c 1.052852,1.4196286 1.578186,1.6598086 2.843355,1.2999446 0.853356,-0.2427277 2.1659,-0.4631955 2.916598,-0.4907598 l 0.865734,-0.032428 A 13.270987,13.229573 0 0 0 25.711482,8.8408083 L 24.974228,8.1585118 C 24.17317,7.4180522 23.403105,6.4667146 23.261971,6.0446339 23.078803,5.4968463 22.40094,5.6773343 20.894108,6.6754386 Z m 2.785721,0.5218911 c 0.358077,0 0.480348,0.2757816 0.271366,0.6128532 -0.208983,0.3370715 -0.501697,0.6128531 -0.650801,0.6128531 -0.149127,0 -0.271368,-0.2757816 -0.271368,-0.6128531 0,-0.3370716 0.292719,-0.6128532 0.650803,-0.6128532 z"
|
||||
id="path382" /><path
|
||||
style="fill:#1aaf5d;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 21.226704,3.868679 c -0.439011,-0.1368948 -0.900971,0.24831 -1.76989,1.334643 L 18.015923,7.0060015 18.798807,8.061736 20.614326,6.5092426 C 22.086625,5.2515247 22.294281,4.7940506 21.67218,4.173901 21.516663,4.0189389 21.373041,3.9143106 21.226704,3.868679 Z"
|
||||
id="path380" /><path
|
||||
style="fill:#1d4d75;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 11.141682,1.2317056 c -0.338127,0 -0.910867,0.5515631 -1.272787,1.2257062 -0.4232834,0.7884075 -0.4386562,1.2257296 -0.043219,1.2257296 0.338128,0 0.910865,-0.5515864 1.272785,-1.2257296 0.423284,-0.7883842 0.438658,-1.2257062 0.04322,-1.2257062 z"
|
||||
id="path378" /><path
|
||||
style="fill:#3a995c;fill-opacity:1;stroke-width:0.613818"
|
||||
d="M 10.178688,0.34830573 A 13.270987,13.229573 0 0 0 9.3753908,0.56256574 C 9.2946466,0.66587382 9.2102543,0.71961254 9.1364436,0.85104081 8.6182281,1.7741424 8.3921163,1.8307766 7.9513131,1.1514681 c -0.027465,-0.042389 -0.0293,-0.00927 -0.054046,-0.043084 A 13.270987,13.229573 0 0 0 7.5658644,1.2531547 C 7.5607524,1.4108964 7.5300116,1.4803862 7.5609854,1.7714555 7.6646401,2.7435707 7.3708704,3.2857759 6.6796415,3.3969595 5.8031934,3.537792 5.8264269,3.2704882 6.5127391,1.8001779 A 13.270987,13.229573 0 0 0 4.982994,2.8379609 C 4.3883282,3.860873 5.3808459,4.9406276 6.6688364,4.4479222 7.3985228,4.168782 7.5197437,4.3517948 7.1827532,5.2271801 v 0.00118 C 6.7535447,6.3423047 6.7743639,6.3427448 8.0016581,5.2353101 8.694539,4.6102036 9.1201577,3.95883 8.9478413,3.7869587 8.7755249,3.6150875 9.0728497,2.807223 9.6082503,1.9926642 10.055315,1.312499 10.23625,0.68994043 10.178602,0.34798144 Z"
|
||||
id="path376" /><path
|
||||
style="fill:#249b12;fill-opacity:1;stroke-width:0.613818"
|
||||
d="M 15.269828,0.16279129 C 14.395311,0.93306186 13.782082,1.7109763 13.965823,2.00735 c 0.243316,0.3923854 0.06292,0.466832 -0.467087,0.1927182 -0.474904,-0.2456231 -0.310032,0.020847 0.366226,0.5913114 1.2094,1.0205031 1.204365,1.0311582 -0.307391,0.6966578 -1.094053,-0.2420791 -2.068419,0.1109519 -3.381286,1.2233204 -1.0143843,0.8595649 -1.4047845,1.41949 -0.8669349,1.243681 0.537859,-0.1758091 1.3678119,-0.070185 1.8443379,0.2358018 0.723162,0.4641914 0.729684,0.6444478 0.03602,1.0904561 -0.653011,0.4199033 -0.524827,0.7481729 0.597969,1.5321561 0.785943,0.5487604 1.145428,0.9982895 0.799694,0.9982895 -0.345739,0 -0.924951,-0.2960262 -1.287194,-0.6571412 -1.007391,-1.0042425 -3.5214226,2.3822009 -2.5948015,3.4952179 0.8254642,0.991526 1.9936605,0.443553 1.5441525,-0.724176 -0.188488,-0.489601 -0.0032,-0.705622 0.45508,-0.530276 0.425188,0.162606 1.806029,-0.816574 3.067893,-2.1761173 2.130252,-2.2951997 2.275508,-2.808752 0.707236,-2.4933381 -0.338124,0.0681 -0.409154,-0.080608 -0.158491,-0.3303774 0.250665,-0.2498851 0.147245,-0.8248431 -0.229337,-1.2771982 -0.973841,-1.1697207 0.07152,-1.0198545 1.428881,0.2047631 1.079331,0.9737365 1.284242,0.877169 3.962444,-1.869714 0.456204,-0.4678975 0.772522,-0.8400846 1.093877,-1.2161399 A 13.270987,13.229573 0 0 0 17.032518,0.5662487 C 16.805621,0.74066793 16.604748,0.8578508 16.36851,1.0701651 L 14.484548,2.7639312 16.019093,0.9253485 C 16.228447,0.67453687 16.250079,0.63508986 16.440555,0.40345741 A 13.270987,13.229573 0 0 0 15.26983,0.16286078 Z"
|
||||
id="path374" /><path
|
||||
style="fill:#7a5d34;fill-opacity:1;stroke-width:0.613818"
|
||||
d="m 13.192547,0 a 13.270987,13.229573 0 0 0 -1.936796,0.14245396 c 0.03049,0.0208469 0.05598,0.0518857 0.08646,0.0718061 1.031164,0.67351769 1.444914,0.69698206 2.576792,-0.19503453 A 13.270987,13.229573 0 0 0 13.192554,6.94937e-4 Z"
|
||||
id="path315" /></g></svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
BIN
static/img/studios/colorquest.png
Normal file
BIN
static/img/studios/colorquest.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
static/img/studios/hatcat.webp
Normal file
BIN
static/img/studios/hatcat.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
static/img/zakarya-banner.png
Normal file
BIN
static/img/zakarya-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 722 KiB |
12
svelte.config.js
Normal file
12
svelte.config.js
Normal file
@ -0,0 +1,12 @@
|
||||
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||
import adapter from "@sveltejs/adapter-static";
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
19
tsconfig.json
Normal file
19
tsconfig.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// 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
|
||||
//
|
||||
// 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
|
||||
}
|
||||
6
vite.config.ts
Normal file
6
vite.config.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
});
|
||||
Reference in New Issue
Block a user