randomized theme
This commit is contained in:
parent
a0eaeb15fd
commit
a3daf3cfd5
2502
pnpm-lock.yaml
Normal file
2502
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
140
src/app.css
140
src/app.css
|
|
@ -2,33 +2,99 @@
|
|||
@plugin "daisyui";
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "DeprivedTheme";
|
||||
default: false;
|
||||
prefersdark: false;
|
||||
name: "dark";
|
||||
color-scheme: "dark";
|
||||
--color-base-100: oklch(27% 0.072 132.109);
|
||||
--color-base-200: oklch(40% 0.101 131.063);
|
||||
--color-base-300: oklch(45% 0.124 130.933);
|
||||
--color-base-content: oklch(96% 0.067 122.328);
|
||||
--color-primary: oklch(85% 0.199 91.936);
|
||||
--color-base-100: oklch(14% 0 0);
|
||||
--color-base-200: oklch(20% 0 0);
|
||||
--color-base-300: oklch(26% 0 0);
|
||||
--color-base-content: oklch(97% 0 0);
|
||||
--color-primary: oklch(90% 0.182 98.111);
|
||||
--color-primary-content: oklch(28% 0.066 53.813);
|
||||
--color-secondary: oklch(70% 0.183 293.541);
|
||||
--color-secondary-content: oklch(28% 0.141 291.089);
|
||||
--color-accent: oklch(82% 0.189 84.429);
|
||||
--color-secondary: oklch(84% 0.143 164.978);
|
||||
--color-secondary-content: oklch(26% 0.051 172.552);
|
||||
--color-accent: oklch(87% 0.01 258.338);
|
||||
--color-accent-content: oklch(13% 0.028 261.692);
|
||||
--color-neutral: oklch(26% 0 0);
|
||||
--color-neutral-content: oklch(98% 0 0);
|
||||
--color-info: oklch(71% 0.143 215.221);
|
||||
--color-info-content: oklch(98% 0.019 200.873);
|
||||
--color-success: oklch(76% 0.233 130.85);
|
||||
--color-success-content: oklch(98% 0.031 120.757);
|
||||
--color-warning: oklch(70% 0.213 47.604);
|
||||
--color-warning-content: oklch(98% 0.016 73.684);
|
||||
--color-error: oklch(65% 0.241 354.308);
|
||||
--color-error-content: oklch(97% 0.014 343.198);
|
||||
--radius-selector: 0rem;
|
||||
--radius-field: 0.5rem;
|
||||
--radius-box: 1rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--depth: 0;
|
||||
--noise: 1;
|
||||
}
|
||||
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "pink";
|
||||
color-scheme: "light";
|
||||
--color-base-100: oklch(96% 0.015 12.422);
|
||||
--color-base-200: oklch(94% 0.03 12.58);
|
||||
--color-base-300: oklch(89% 0.058 10.001);
|
||||
--color-base-content: oklch(41% 0.159 10.272);
|
||||
--color-primary: oklch(86% 0.127 207.078);
|
||||
--color-primary-content: oklch(30% 0.056 229.695);
|
||||
--color-secondary: oklch(0% 0 0);
|
||||
--color-secondary-content: oklch(100% 0 0);
|
||||
--color-accent: oklch(87% 0.169 91.605);
|
||||
--color-accent-content: oklch(27% 0.077 45.635);
|
||||
--color-neutral: oklch(64% 0.2 131.684);
|
||||
--color-neutral-content: oklch(98% 0.031 120.757);
|
||||
--color-info: oklch(68% 0.169 237.323);
|
||||
--color-info-content: oklch(97% 0.013 236.62);
|
||||
--color-neutral: oklch(51% 0.222 16.935);
|
||||
--color-neutral-content: oklch(96% 0.015 12.422);
|
||||
--color-info: oklch(74% 0.16 232.661);
|
||||
--color-info-content: oklch(29% 0.066 243.157);
|
||||
--color-success: oklch(77% 0.152 181.912);
|
||||
--color-success-content: oklch(27% 0.046 192.524);
|
||||
--color-warning: oklch(75% 0.183 55.934);
|
||||
--color-warning-content: oklch(26% 0.079 36.259);
|
||||
--color-error: oklch(70% 0.191 22.216);
|
||||
--color-error-content: oklch(25% 0.092 26.042);
|
||||
--radius-selector: 0.25rem;
|
||||
--radius-field: 0.25rem;
|
||||
--radius-box: 0.25rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--depth: 1;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "netherrack";
|
||||
color-scheme: "dark";
|
||||
--color-base-100: oklch(25% 0.092 26.042);
|
||||
--color-base-200: oklch(39% 0.141 25.723);
|
||||
--color-base-300: oklch(44% 0.177 26.899);
|
||||
--color-base-content: oklch(93% 0.032 17.717);
|
||||
--color-primary: oklch(83% 0.128 66.29);
|
||||
--color-primary-content: oklch(26% 0.079 36.259);
|
||||
--color-secondary: oklch(82% 0.111 230.318);
|
||||
--color-secondary-content: oklch(29% 0.066 243.157);
|
||||
--color-accent: oklch(78% 0.115 274.713);
|
||||
--color-accent-content: oklch(25% 0.09 281.288);
|
||||
--color-neutral: oklch(57% 0.245 27.325);
|
||||
--color-neutral-content: oklch(97% 0.013 17.38);
|
||||
--color-info: oklch(71% 0.143 215.221);
|
||||
--color-info-content: oklch(98% 0.019 200.873);
|
||||
--color-success: oklch(72% 0.219 149.579);
|
||||
--color-success-content: oklch(98% 0.018 155.826);
|
||||
--color-warning: oklch(79% 0.184 86.047);
|
||||
--color-warning-content: oklch(98% 0.026 102.212);
|
||||
--color-error: oklch(64% 0.246 16.439);
|
||||
--color-error-content: oklch(96% 0.015 12.422);
|
||||
--radius-selector: 0.25rem;
|
||||
--color-warning: oklch(76% 0.188 70.08);
|
||||
--color-warning-content: oklch(98% 0.022 95.277);
|
||||
--color-error: oklch(63% 0.237 25.331);
|
||||
--color-error-content: oklch(97% 0.013 17.38);
|
||||
--radius-selector: 2rem;
|
||||
--radius-field: 2rem;
|
||||
--radius-box: 0.5rem;
|
||||
--radius-box: 2rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
|
|
@ -36,6 +102,38 @@
|
|||
--noise: 1;
|
||||
}
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "green";
|
||||
color-scheme: "dark";
|
||||
--color-base-100: oklch(26% 0.065 152.934);
|
||||
--color-base-200: oklch(39% 0.095 152.535);
|
||||
--color-base-300: oklch(44% 0.119 151.328);
|
||||
--color-base-content: oklch(96% 0.044 156.743);
|
||||
--color-primary: oklch(80% 0.105 251.813);
|
||||
--color-primary-content: oklch(28% 0.091 267.935);
|
||||
--color-secondary: oklch(80% 0.105 251.813);
|
||||
--color-secondary-content: oklch(28% 0.091 267.935);
|
||||
--color-accent: oklch(89% 0.196 126.665);
|
||||
--color-accent-content: oklch(27% 0.072 132.109);
|
||||
--color-neutral: oklch(52% 0.154 150.069);
|
||||
--color-neutral-content: oklch(98% 0.018 155.826);
|
||||
--color-info: oklch(78% 0.154 211.53);
|
||||
--color-info-content: oklch(30% 0.056 229.695);
|
||||
--color-success: oklch(79% 0.209 151.711);
|
||||
--color-success-content: oklch(26% 0.065 152.934);
|
||||
--color-warning: oklch(85% 0.199 91.936);
|
||||
--color-warning-content: oklch(28% 0.066 53.813);
|
||||
--color-error: oklch(71% 0.202 349.761);
|
||||
--color-error-content: oklch(28% 0.109 3.907);
|
||||
--radius-selector: 0.25rem;
|
||||
--radius-field: 0.5rem;
|
||||
--radius-box: 1rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--depth: 0;
|
||||
--noise: 1;
|
||||
}
|
||||
|
||||
.bg-grid-100 {
|
||||
background:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!doctype html>
|
||||
<html lang="en" data-theme="DeprivedTheme" style="overflow-x: hidden;">
|
||||
<html lang="en" data-theme="Green" style="overflow-x: hidden;">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="
|
||||
|
|
|
|||
|
|
@ -31,13 +31,16 @@
|
|||
});
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { themeChange } from 'theme-change'
|
||||
onMount(() => {
|
||||
const themesArr = ["green", "netherrack", "dark", "pink"];
|
||||
|
||||
onMount(async () => {
|
||||
const lock = document.createElement('meta');
|
||||
lock.name = 'darkreader-lock';
|
||||
document.head.appendChild(lock);
|
||||
|
||||
themeChange(false) // false parameter is required for svelte
|
||||
const randomNumber = Math.floor(Math.random() * 4);
|
||||
console.log("Slecting: " + themesArr[randomNumber]);
|
||||
document.documentElement.setAttribute('data-theme', themesArr[randomNumber]);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -72,12 +72,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cozette flex flex-col justify-center items-center w-full md:px-8 py-4">
|
||||
<div class="cozette flex flex-col justify-center items-center w-full md:px-8 pt-4">
|
||||
<h2 class="text-center" style="font-size: {!mobile ? 3 : 2}rem;">
|
||||
Developers
|
||||
</h2>
|
||||
<div>
|
||||
<div class="grid space-y-1 p-4 max-lg:px-0 rounded" style="width: 100%; max-width: 21cm;">
|
||||
<div class="">
|
||||
<div class="grid grid-cols-2 gap-4 p-4 max-lg:px-0 w-full">
|
||||
|
||||
<Profile name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}>
|
||||
<span>
|
||||
|
|
@ -86,7 +86,6 @@
|
|||
</span>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile name="Sveske / Benjamin" tags={["Programmer", "Back-end Admin"]} isMobile={mobile}>
|
||||
<span>
|
||||
<p><span class="inline line-through">Hi, I use Arch, btw. </span> I use NixOS now</p>
|
||||
|
|
@ -94,10 +93,8 @@
|
|||
</span>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile name="Oliver" tags={["Sound designer", "Story designer","2D Artist", "Programmer"]} isMobile={mobile}>
|
||||
<span>
|
||||
<p>Snorre does not get paid.</p>
|
||||
|
|
@ -105,7 +102,6 @@
|
|||
</span>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile name="Kim" tags={["Cinemachine", "3D Artist", "Programmer"]} isMobile={mobile}>
|
||||
<span>
|
||||
<p>Abla espaniol</p>
|
||||
|
|
@ -113,7 +109,6 @@
|
|||
</span>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile name="Zylvester" tags={["2D/3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}>
|
||||
<span>
|
||||
<p>Hi, I am [insert text here]</p>
|
||||
|
|
@ -124,14 +119,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- space -->
|
||||
<div class="py-8 flex justify-center">
|
||||
<div style="width: 50%;">
|
||||
<ProfileSpacer/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4"></div>
|
||||
|
||||
<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
|
||||
<div class="grid place-content-center place-items-center pointer-events-auto font-mono">
|
||||
<!-- <article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
|
||||
<h2 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h2>
|
||||
<p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
|
||||
|
|
@ -142,7 +132,7 @@
|
|||
<ProfileSpacer/>
|
||||
</div> -->
|
||||
|
||||
<article class="pt-16 prose {mobile ? "px-8" : ""}">
|
||||
<article class="prose {mobile ? "px-8" : ""}">
|
||||
<h2 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h2>
|
||||
<p>Here are some of our games from various gamejams from the past. <br/>(<span class="font-bold">ONLY</span> 48 hours per game)</p>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</script>
|
||||
|
||||
|
||||
<div class="bg-grid-200 border-2 border-base-300 pl-1 pr-4 rounded cozette max-lg:pb-2">
|
||||
<div class="bg-grid-100 border-2 border-base-100 pl-1 pr-4 rounded-md cozette max-lg:pb-2">
|
||||
{#if !isSnorre}
|
||||
<div class="developersProfile {isSnorre ? "isSnorre" : ""} pl-1 font-mono">
|
||||
<NameAndTag name={name} tags={tags} isMobile={isMobile}/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue