Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
bf419426cf
|
|||
|
fe14fd46e1
|
|||
|
a651520669
|
|||
|
679cdc078f
|
|||
|
5f52d9ec4d
|
|||
|
765b3542d1
|
|||
|
6177d407d2
|
|||
|
3332d4ab89
|
|||
|
13960ad144
|
|||
|
2587ddd721
|
|||
|
0cb18c2103
|
@ -8,6 +8,7 @@ The Colormatic website is developed with accordance to modern web standards, how
|
||||
To download the project, run:
|
||||
```
|
||||
git clone git@git.colormatic.org:ColormaticStudios/Colormatic-Website.git
|
||||
cd Colormatic-Website
|
||||
npm install
|
||||
```
|
||||
You can run the project locally with:
|
||||
|
||||
@ -1,18 +1,44 @@
|
||||
<script lang="ts">
|
||||
import { canvasDpiScaler } from "../script/canvas_dpi_scaler.ts";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let canvas: HTMLCanvasElement;
|
||||
let ctx: CanvasRenderingContext2D;
|
||||
|
||||
let dark_theme = false;
|
||||
let time_scale = 1;
|
||||
|
||||
let particlesArray: Array<Particle> = [];
|
||||
let gradientsArray: Array<Gradient> = [];
|
||||
|
||||
let particleImages = {
|
||||
// This is horrible code
|
||||
circle: {} as HTMLImageElement,
|
||||
square: {} as HTMLImageElement,
|
||||
triangle: {} as HTMLImageElement,
|
||||
star: {} as HTMLImageElement,
|
||||
wavyCircle: {} as HTMLImageElement,
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
canvas = document.getElementById("bg-canvas") as HTMLCanvasElement;
|
||||
ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||
|
||||
particleImages.circle = new Image() as HTMLImageElement;
|
||||
particleImages.circle.src = "/img/bg-shapes/circle.svg";
|
||||
|
||||
particleImages.square = new Image() as HTMLImageElement;
|
||||
particleImages.square.src = "/img/bg-shapes/square.svg";
|
||||
|
||||
particleImages.triangle = new Image() as HTMLImageElement;
|
||||
particleImages.triangle.src = "/img/bg-shapes/triangle.svg";
|
||||
|
||||
particleImages.star = new Image() as HTMLImageElement;
|
||||
particleImages.star.src = "/img/bg-shapes/star.svg";
|
||||
|
||||
particleImages.wavyCircle = new Image() as HTMLImageElement;
|
||||
particleImages.wavyCircle.src = "/img/bg-shapes/wavy-circle.svg";
|
||||
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
@ -39,6 +65,8 @@
|
||||
function resize() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
canvasDpiScaler(canvas, ctx);
|
||||
}
|
||||
|
||||
const clamp = (val: number, min: number, max: number) =>
|
||||
@ -47,83 +75,35 @@
|
||||
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.x = Math.random() * window.innerWidth;
|
||||
this.y = Math.random() * window.innerHeight;
|
||||
this.speedX = (Math.random() - 0.5) * 0.2; // -0.1 to 0.1
|
||||
this.speedY = (Math.random() - 0.5) * 0.2;
|
||||
this.growthSpeed = Math.random() * 0.02 + 0.01;
|
||||
this.growthSpeed = Math.random() * 0.02 + 0.01; // 0.01 to 0.03
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
this.x += this.speedX * time_scale;
|
||||
this.y += this.speedY * time_scale;
|
||||
|
||||
// Reverse direction if particle hits edge
|
||||
if (this.x <= 0 || this.x >= canvas.width) {
|
||||
if (this.x <= 0 || this.x >= window.innerWidth) {
|
||||
this.speedX = -this.speedX;
|
||||
}
|
||||
this.x = clamp(0, this.x, canvas.width);
|
||||
if (this.y <= 0 || this.y >= canvas.height) {
|
||||
this.x = clamp(0, this.x, window.innerWidth);
|
||||
if (this.y <= 0 || this.y >= window.innerHeight) {
|
||||
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
|
||||
}
|
||||
this.y = clamp(0, this.y, window.innerHeight);
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
// Reference implementation for Shape
|
||||
draw(angle: number, size: number) {
|
||||
return;
|
||||
}
|
||||
@ -131,27 +111,44 @@
|
||||
|
||||
class Circle extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
|
||||
ctx.closePath();
|
||||
let image = particleImages.circle;
|
||||
ctx.drawImage(image, -image.width / 2, -image.height / 2);
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
let image = particleImages.square;
|
||||
ctx.drawImage(image, -image.width / 2, -image.height / 2);
|
||||
}
|
||||
}
|
||||
|
||||
class Triangle extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
roundTriangle(size * 2, size / 5);
|
||||
ctx.closePath();
|
||||
|
||||
let image = particleImages.triangle;
|
||||
ctx.drawImage(image, -image.width / 2, -image.height / 2);
|
||||
}
|
||||
}
|
||||
|
||||
class Star extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
|
||||
let image = particleImages.star;
|
||||
ctx.drawImage(image, -image.width / 2, -image.height / 2);
|
||||
}
|
||||
}
|
||||
|
||||
class WaveyCircle extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
|
||||
let image = particleImages.wavyCircle;
|
||||
ctx.drawImage(image, -image.width / 2, -image.height / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -159,40 +156,61 @@
|
||||
shape: Shape;
|
||||
angle: number;
|
||||
rotationSpeed: number;
|
||||
size: number;
|
||||
originalSize: number;
|
||||
constructor() {
|
||||
super();
|
||||
this.shape = new [Circle, Square, Triangle][
|
||||
Math.floor(Math.random() * 3)
|
||||
this.shape = new [Circle, Square, Triangle, Star, WaveyCircle][
|
||||
Math.floor(Math.random() * 5)
|
||||
](); // A very strange but effective way to pick a random shape
|
||||
this.angle = Math.random() * 360;
|
||||
this.rotationSpeed = Math.random() * 2 - 1;
|
||||
this.rotationSpeed = Math.random() * 2 - 1; // -1 to 1
|
||||
this.originalSize = Math.random() * 8 + 8; // 8 to 16
|
||||
this.size = this.originalSize;
|
||||
}
|
||||
|
||||
update() {
|
||||
super.update();
|
||||
this.angle += this.rotationSpeed;
|
||||
this.angle += this.rotationSpeed * time_scale;
|
||||
|
||||
// Breathing effect: oscillate size
|
||||
this.size += this.growthSpeed * time_scale;
|
||||
if (
|
||||
this.size >= this.originalSize * 1.25 ||
|
||||
this.size <= this.originalSize * 0.75
|
||||
) {
|
||||
this.growthSpeed = -this.growthSpeed; // Reverse growth direction
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = dark_theme ? "#333" : "#bbb";
|
||||
ctx.save();
|
||||
// The source images are black, so we are inverting them
|
||||
// different amounts to get different shades of gray
|
||||
ctx.filter = dark_theme ? "invert(0.25)" : "invert(0.75)";
|
||||
|
||||
// Draw center of rotation
|
||||
// ctx.beginPath();
|
||||
// ctx.arc(this.x, this.y, 2, 0, 2 * Math.PI);
|
||||
// ctx.fill();
|
||||
|
||||
ctx.translate(this.x, this.y);
|
||||
ctx.scale(this.size / 10, this.size / 10);
|
||||
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);
|
||||
let r = Math.floor(Math.random() * 255 - 100);
|
||||
let b = Math.floor(Math.random() * 255 - 100);
|
||||
let 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);
|
||||
let r = Math.floor(Math.random() * 100 + 155);
|
||||
let g = Math.floor(Math.random() * 100 + 155);
|
||||
let b = Math.floor(Math.random() * 100 + 155);
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
}
|
||||
@ -201,13 +219,11 @@
|
||||
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() {
|
||||
@ -225,7 +241,6 @@
|
||||
} else {
|
||||
gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
|
||||
}
|
||||
|
||||
ctx.globalAlpha = this.alpha;
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
@ -238,7 +253,7 @@
|
||||
|
||||
function init() {
|
||||
particlesArray = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
particlesArray.push(new Particle());
|
||||
}
|
||||
gradientsArray = [];
|
||||
@ -248,7 +263,7 @@
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
||||
|
||||
for (let i_gradient = 0; i_gradient < gradientsArray.length; i_gradient++) {
|
||||
let gradient = gradientsArray[i_gradient];
|
||||
|
||||
@ -5,3 +5,32 @@
|
||||
<a href="mailto:support@colormatic.org">contact@colormatic.org</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../style/global.scss";
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -71,3 +71,193 @@ Svelte modal example, https://svelte.dev/playground/modal
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../style/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%;
|
||||
|
||||
/*/
|
||||
* Ugly hack to account for the fact that the menu icon is off-center
|
||||
* (Bootstrap please fix)
|
||||
/*/
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<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";
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
import { onMount } from "svelte";
|
||||
|
||||
onMount(() => {
|
||||
var arrow = document.getElementById("scroll-arrow");
|
||||
let arrow = document.getElementById("scroll-arrow") as HTMLDivElement;
|
||||
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");
|
||||
if (!arrow.classList.contains("scroll-arrow-hide")) {
|
||||
arrow.classList.add("scroll-arrow-hide");
|
||||
}
|
||||
} else {
|
||||
if ((arrow as HTMLElement).classList.contains("scroll-arrow-hide")) {
|
||||
(arrow as HTMLElement).classList.remove("scroll-arrow-hide");
|
||||
if (arrow.classList.contains("scroll-arrow-hide")) {
|
||||
arrow.classList.remove("scroll-arrow-hide");
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -62,8 +62,8 @@
|
||||
|
||||
<div class="hero panel">
|
||||
<h1>
|
||||
<i class="bi bi-tools" style="padding-right: 12px;"></i>This website is
|
||||
under construction.
|
||||
<i class="bi bi-tools" style="padding-right: 12px;"></i>
|
||||
This website is under construction.
|
||||
</h1>
|
||||
<p>
|
||||
Check up on progress and changes at <a
|
||||
@ -76,3 +76,34 @@
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../style/global.scss";
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
main div.brand-heading {
|
||||
padding: 38% 12px;
|
||||
text-align: center;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
main div.heading {
|
||||
font-size: 200%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,12 +8,19 @@
|
||||
<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.
|
||||
Colormatic is a non-profit project from Zakarya 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.
|
||||
Colormatic is still in the early stages, so expect many things to change
|
||||
in the near future.
|
||||
</p>
|
||||
<p class="justify">
|
||||
Colormatic Studios is a creative studio dedicated to giving life to
|
||||
Colormatic's projects. We are currently just a small group of passionate
|
||||
volunteers working to build inspiring, intuitive and innovative creative
|
||||
works.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
<script lang="ts">
|
||||
import "../../style/studios.scss";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Colormatic Studios</title>
|
||||
</svelte:head>
|
||||
@ -124,3 +120,91 @@
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../style/global.scss";
|
||||
|
||||
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;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
min-width: 40%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
div.project-grid-container
|
||||
div.project-grid-box
|
||||
div.project-grid-box-contents {
|
||||
/* Yes, this absurdly long element selector is a joke */
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box img {
|
||||
max-width: 120px;
|
||||
max-height: 150px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { getParam, getVideo } from "../../script/video.ts";
|
||||
import "../../style/video.scss";
|
||||
|
||||
import { onMount } from "svelte";
|
||||
|
||||
onMount(() => {
|
||||
@ -12,6 +9,93 @@
|
||||
getVideo(channel, video);
|
||||
}
|
||||
});
|
||||
|
||||
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>
|
||||
@ -46,3 +130,115 @@
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../style/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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,40 +4,59 @@
|
||||
|
||||
<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 class="hero panel profile">
|
||||
<div class="nameplate">
|
||||
<img
|
||||
src="/img/zakarya-icon.png"
|
||||
class="zakarya-icon"
|
||||
alt="Zakarya Icon"
|
||||
/>
|
||||
<span class="name-title">Zakarya</span>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
I am a software and game developer, I run Colormatic and Colormatic
|
||||
Studios, and I primarily study computer science, psychology, and
|
||||
linguistics.
|
||||
<br />
|
||||
I have an intrinsic urge to create, and that's what Colormatic is all about.
|
||||
My works include world building, music, videos, 3D modeling, video games, websites,
|
||||
programs, and more.
|
||||
</p>
|
||||
|
||||
<div class="linktree-container">
|
||||
<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>
|
||||
|
||||
<div class="hero panel">
|
||||
@ -66,3 +85,101 @@
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../style/global.scss";
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
main div.profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
main div.profile div.nameplate {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main div.profile div.nameplate img.zakarya-icon {
|
||||
width: 100px;
|
||||
border-radius: 16px;
|
||||
margin: 8px auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
main div.profile div.nameplate span.name-title {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
main div.profile p {
|
||||
font-size: 120%;
|
||||
max-width: 50%;
|
||||
padding: 16px;
|
||||
margin: 12px;
|
||||
height: fit-content;
|
||||
text-align: left;
|
||||
/* text-align: justify;
|
||||
text-justify: auto; */
|
||||
border-radius: 16px;
|
||||
border: solid 1px;
|
||||
border-color: #383c3f33; // Same as text color but with alpha
|
||||
}
|
||||
|
||||
main div.profile div.linktree-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
main div.profile div.linktree-container ul.linktree {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
main img.banner {
|
||||
width: 95%;
|
||||
border-radius: 12px;
|
||||
margin: 24px auto;
|
||||
}
|
||||
|
||||
main div.profile p {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
main div.profile div.linktree-container ul.linktree {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
main div.profile div.nameplate {
|
||||
flex-direction: row;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
main div.profile div.nameplate img.zakarya-icon {
|
||||
height: 1.25em;
|
||||
width: auto;
|
||||
font-size: 170%;
|
||||
margin: 0px 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
main div.profile div.nameplate span.name-title {
|
||||
font-size: 170%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
main div.profile p {
|
||||
border-color: #ffffff55;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
44
src/script/canvas_dpi_scaler.ts
Normal file
44
src/script/canvas_dpi_scaler.ts
Normal file
@ -0,0 +1,44 @@
|
||||
// Credit: https://github.com/cmpolis/canvas-dpi-scaler
|
||||
|
||||
// Based on: http://www.html5rocks.com/en/tutorials/canvas/hidpi/
|
||||
|
||||
interface ExtendedCanvasRenderingContext2D extends CanvasRenderingContext2D {
|
||||
webkitBackingStorePixelRatio?: number;
|
||||
mozBackingStorePixelRatio?: number;
|
||||
msBackingStorePixelRatio?: number;
|
||||
oBackingStorePixelRatio?: number;
|
||||
backingStorePixelRatio?: number;
|
||||
}
|
||||
|
||||
export function canvasDpiScaler(
|
||||
canvas: HTMLCanvasElement,
|
||||
context: ExtendedCanvasRenderingContext2D,
|
||||
) {
|
||||
if (!canvas || !context) {
|
||||
throw new Error("Must pass in `canvas` and `context`.");
|
||||
}
|
||||
|
||||
var width =
|
||||
canvas.width || // attr, eg: <canvas width='400'>
|
||||
canvas.clientWidth; // keep existing width
|
||||
var height = canvas.height || canvas.clientHeight;
|
||||
var deviceRatio = window.devicePixelRatio || 1;
|
||||
var bsRatio =
|
||||
context.webkitBackingStorePixelRatio ||
|
||||
context.mozBackingStorePixelRatio ||
|
||||
context.msBackingStorePixelRatio ||
|
||||
context.oBackingStorePixelRatio ||
|
||||
context.backingStorePixelRatio ||
|
||||
1;
|
||||
var ratio = deviceRatio / bsRatio;
|
||||
|
||||
// Adjust canvas if ratio =/= 1
|
||||
if (deviceRatio !== bsRatio) {
|
||||
canvas.width = Math.round(width * ratio);
|
||||
canvas.height = Math.round(height * ratio);
|
||||
canvas.style.width = width + "px";
|
||||
canvas.style.height = height + "px";
|
||||
context.scale(ratio, ratio);
|
||||
}
|
||||
return ratio;
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
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);
|
||||
});
|
||||
}
|
||||
@ -52,32 +52,18 @@ div.divider {
|
||||
|
||||
div.panel {
|
||||
color: global.$text-color;
|
||||
border: solid 1px #00000033;
|
||||
border: solid 1px;
|
||||
border-color: #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
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;
|
||||
font-size: 550%;
|
||||
text-align: center;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
div.panel {
|
||||
border-color: #ffffff33;
|
||||
}
|
||||
}
|
||||
|
||||
main div.hero {
|
||||
@ -87,6 +73,15 @@ main div.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
spacer {
|
||||
margin-top: 24%;
|
||||
}
|
||||
main div.hero {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
main div#scroll-arrow {
|
||||
text-align: center;
|
||||
font-size: 200%;
|
||||
@ -106,23 +101,6 @@ main div#scroll-arrow.scroll-arrow-hide {
|
||||
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: 200%;
|
||||
}
|
||||
main div.hero {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
main div.hero h1 a {
|
||||
color: global.$text-color;
|
||||
}
|
||||
@ -130,12 +108,12 @@ main div.hero h1 a {
|
||||
p.justify {
|
||||
text-align: justify;
|
||||
text-justify: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main div.hero p.justify {
|
||||
width: 60%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main div.hero ul {
|
||||
@ -143,21 +121,7 @@ main div.hero ul {
|
||||
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%;
|
||||
}
|
||||
@ -246,28 +210,3 @@ ul.videolist li a span {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,186 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
@use "global.scss";
|
||||
|
||||
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;
|
||||
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 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box h1 a {
|
||||
color: global.$text-color;
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box div.project-grid-box-contents {
|
||||
/* Yes, this absurdly long element selector is a joke */
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box img {
|
||||
max-width: 120px;
|
||||
max-height: 150px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
48
static/img/bg-shapes/circle.svg
Normal file
48
static/img/bg-shapes/circle.svg
Normal file
@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="circle.svg"
|
||||
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="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="5.9860924"
|
||||
inkscape:cx="28.14858"
|
||||
inkscape:cy="23.805179"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0529166"
|
||||
id="path1"
|
||||
cx="1.3229166"
|
||||
cy="1.3229166"
|
||||
r="1.3229166" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
50
static/img/bg-shapes/square.svg
Normal file
50
static/img/bg-shapes/square.svg
Normal file
@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="square.svg"
|
||||
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="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="5.9860924"
|
||||
inkscape:cx="28.232107"
|
||||
inkscape:cy="23.805179"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0529166"
|
||||
id="rect1"
|
||||
width="2.6458333"
|
||||
height="2.6458333"
|
||||
x="0"
|
||||
y="0"
|
||||
ry="0.42333332" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
96
static/img/bg-shapes/star.svg
Normal file
96
static/img/bg-shapes/star.svg
Normal file
@ -0,0 +1,96 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="star.svg"
|
||||
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="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="40.911253"
|
||||
inkscape:cx="6.1474529"
|
||||
inkscape:cy="6.0741234"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect3"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
|
||||
radius="8"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
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-effect2"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
|
||||
radius="8"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
id="path2"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="4"
|
||||
sodipodi:cx="6.614583"
|
||||
sodipodi:cy="6.614583"
|
||||
sodipodi:r1="6.6176233"
|
||||
sodipodi:r2="2.301954"
|
||||
sodipodi:arg1="-0.029738439"
|
||||
sodipodi:arg2="0.75565972"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 11.23738,7.1337824 10.28189,7.4772235 A 4.1661509,4.1661509 133.29611 0 0 7.6936896,10.224128 L 7.4076518,11.198344 A 0.6904665,0.6904665 178.29611 0 1 6.0953836,11.23738 L 5.7519425,10.28189 A 4.1661509,4.1661509 43.296113 0 0 3.0050377,7.6936896 L 2.0308224,7.4076518 A 0.6904665,0.6904665 88.296113 0 1 1.9917861,6.0953836 l 0.95549,-0.3434411 A 4.1661509,4.1661509 133.29611 0 0 5.5354765,3.0050377 L 5.8215142,2.0308224 a 0.6904665,0.6904665 178.29611 0 1 1.3122682,-0.039036 l 0.3434411,0.95549 a 4.1661509,4.1661509 43.296113 0 0 2.7469045,2.5882004 l 0.974216,0.2860377 a 0.6904665,0.6904665 88.296113 0 1 0.03904,1.3122682 z"
|
||||
inkscape:transform-center-x="-0.014052847"
|
||||
inkscape:transform-center-y="-0.068859274"
|
||||
inkscape:path-effect="#path-effect3"
|
||||
transform="matrix(0.26043146,0,0,0.25804465,-0.39972889,-0.39606549)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
68
static/img/bg-shapes/triangle.svg
Normal file
68
static/img/bg-shapes/triangle.svg
Normal file
@ -0,0 +1,68 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="triangle.svg"
|
||||
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="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="18.89041"
|
||||
inkscape:cx="8.9198698"
|
||||
inkscape:cy="10.243293"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
|
||||
radius="8"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
d="M 2.1166666,13.229167 H 11.1125 a 1.2220542,1.2220542 119.99992 0 0 1.058329,-1.833084 L 7.6729215,3.6055279 a 1.2220656,1.2220656 180 0 0 -2.1166765,0 L 1.0583382,11.396083 a 1.2220543,1.2220543 60.000077 0 0 1.0583284,1.833084 z"
|
||||
id="path2"
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:path-effect="#path-effect2"
|
||||
inkscape:original-d="M 0,13.229167 H 13.229167 L 6.6145832,1.7724437 Z"
|
||||
transform="matrix(0.23128026,0,0,0.23128026,-0.20690571,-0.55319007)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
93
static/img/bg-shapes/wavy-circle.svg
Normal file
93
static/img/bg-shapes/wavy-circle.svg
Normal file
@ -0,0 +1,93 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 2.6458332 2.6458334"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="wavy-circle.svg"
|
||||
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="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="46.528727"
|
||||
inkscape:cx="5.0398972"
|
||||
inkscape:cy="5.3945168"
|
||||
inkscape:window-width="1251"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect3"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1"
|
||||
radius="6"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
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-effect2"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
|
||||
radius="8"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="path1"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="8"
|
||||
sodipodi:cx="6.614583"
|
||||
sodipodi:cy="6.614583"
|
||||
sodipodi:r1="6.6146464"
|
||||
sodipodi:r2="5.3311768"
|
||||
sodipodi:arg1="-1.5707963"
|
||||
sodipodi:arg2="-1.1780972"
|
||||
inkscape:rounded="0.4"
|
||||
inkscape:randomized="0"
|
||||
d="M 6.6145832,-6.3419342e-5 C 7.6740846,-6.3390953e-5 7.6758845,1.2837643 8.6547362,1.689218 9.6335879,2.0946717 10.542664,1.1881411 11.291844,1.9373218 c 0.749181,0.7491807 -0.157349,1.6582566 0.248104,2.6371083 0.405454,0.9788517 1.689281,0.9806516 1.689281,2.0401531 0,1.0595014 -1.283827,1.0613013 -1.689281,2.040153 -0.405454,0.9788517 0.501077,1.8879278 -0.248104,2.6371078 -0.74918,0.749181 -1.6582564,-0.157349 -2.6371081,0.248104 -0.9788517,0.405454 -0.9806516,1.689281 -2.0401531,1.689281 -1.0595014,0 -1.0613012,-1.283827 -2.0401529,-1.689281 C 3.5955782,11.134494 2.6865022,12.041025 1.9373215,11.291844 1.1881409,10.542664 2.0946715,9.6335876 1.6892179,8.6547359 1.2837642,7.6758842 -6.3447731e-5,7.6740843 -6.3419342e-5,6.6145828 -6.3390953e-5,5.5550814 1.2837643,5.5532816 1.689218,4.5744299 2.0946717,3.5955782 1.1881411,2.6865022 1.9373218,1.9373215 2.6865025,1.1881409 3.5955784,2.0946715 4.5744301,1.6892179 5.5532818,1.2837642 5.5550817,-6.3447731e-5 6.6145832,-6.3419342e-5 Z"
|
||||
transform="matrix(0.20000288,0,0,0.20000288,-5.0735291e-5,1.2684051e-5)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
BIN
static/img/zakarya-icon.png
Normal file
BIN
static/img/zakarya-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
Reference in New Issue
Block a user