VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve gradient

Browse Source
This commit is contained in:
marlon-erler
2024-07-21 15:25:46 +02:00
parent 4662fa2428
commit 1dec6b8512
4 changed files with 11 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+5 -25
View File
@@ -38,8 +38,8 @@ main {
background-image: radial-gradient(var(--color-1), var(--color-2));
}
#background-wrapper #grass-1 {
--color-1: hsl(120, 50%, 50%);
--color-2: hsl(120, 50%, 40%);
--color-1: hsl(150, 100%, 30%);
--color-2: hsl(150, 100%, 25%);
background-image:
linear-gradient(
350deg,
@@ -52,25 +52,10 @@ main {
--color-2: hsl(110, 100%, 35%);
background-image:
linear-gradient(
4deg,
9deg,
var(--color-1),
var(--color-2) 25%,
transparent 30%);
}
#background-wrapper #sun {
top: -20%;
left: -200%;
right: -100%;
bottom: -50%;
--color-1: hsl(23, 100%, 50%);
--color-2: hsl(36.5, 100%, 50%);
--color-3: hsl(44.9, 100%, 50%);
background-image:
radial-gradient(
var(--color-1),
var(--color-2) 10%,
var(--color-3) 20%,
transparent 40%);
var(--color-2) 30%,
transparent 35%);
}
@media (prefers-color-scheme: dark) {
#background-wrapper {
@@ -88,11 +73,6 @@ main {
--color-1: hsl(110, 60%, 30%);
--color-2: hsl(110, 50%, 24%);
}
#background-wrapper #sun {
--color-1: hsl(9, 100%, 50%);
--color-2: hsl(36.5, 100%, 40%);
--color-3: hsl(44.9, 100%, 30%);
}
}
/* src/colors.css */
dist/index.js
Vendored
+1 -1
View File
@@ -2091,7 +2091,7 @@
);
});
document.body.append(
/* @__PURE__ */ createElement("div", { id: "background-wrapper" }, /* @__PURE__ */ createElement("div", { id: "sky" }), /* @__PURE__ */ createElement("div", { id: "sun" }), /* @__PURE__ */ createElement("div", { id: "grass-1" }), /* @__PURE__ */ createElement("div", { id: "grass-2" }))
/* @__PURE__ */ createElement("div", { id: "background-wrapper" }, /* @__PURE__ */ createElement("div", { id: "sky" }), /* @__PURE__ */ createElement("div", { id: "grass-1" }), /* @__PURE__ */ createElement("div", { id: "grass-2" }))
);
document.querySelector("main").append(
HomePage(settingsViewModel, connectionViewModel, chatListViewModel),
src/base.css
+5 -29
View File
@@ -53,8 +53,8 @@ main {
}
#background-wrapper #grass-1 {
--color-1: hsl(120, 50%, 50%);
--color-2: hsl(120, 50%, 40%);
--color-1: hsl(150, 100%, 30%);
--color-2: hsl(150, 100%, 25%);
background-image: linear-gradient(
350deg,
@@ -69,28 +69,10 @@ main {
--color-2: hsl(110, 100%, 35%);
background-image: linear-gradient(
4deg,
9deg,
var(--color-1),
var(--color-2) 25%,
transparent 30%
);
}
#background-wrapper #sun {
top: -20%;
left: -200%;
right: -100%;
bottom: -50%;
--color-1: hsl(23, 100%, 50%);
--color-2: hsl(36.5, 100%, 50%);
--color-3: hsl(44.9, 100%, 50%);
background-image: radial-gradient(
var(--color-1),
var(--color-2) 10%,
var(--color-3) 20%,
transparent 40%
var(--color-2) 30%,
transparent 35%
);
}
@@ -113,10 +95,4 @@ main {
--color-1: hsl(110, 60%, 30%);
--color-2: hsl(110, 50%, 24%);
}
#background-wrapper #sun {
--color-1: hsl(9, 100%, 50%);
--color-2: hsl(36.5, 100%, 40%);
--color-3: hsl(44.9, 100%, 30%);
}
}
src/index.tsx
-1
View File
@@ -46,7 +46,6 @@ chatListViewModel.selectedChat.subscribe(() => {
document.body.append(
<div id="background-wrapper">
<div id="sky"></div>
<div id="sun"></div>
<div id="grass-1"></div>
<div id="grass-2"></div>
</div>