From 1ff97df38c7909d5ad27fe629ab260a3a7f1d0fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Thu, 21 Mar 2024 01:44:20 +0900 Subject: [PATCH 1/5] chore: brighter grid background --- src/home/home.ts | 2 +- src/the-grid.ts | 87 ++++++++++++++++++++------------- static/index.html | 2 +- static/style/inverted-style.css | 45 +++++++++++++++-- static/style/style.css | 43 +++++++++++++++- 5 files changed, 137 insertions(+), 42 deletions(-) diff --git a/src/home/home.ts b/src/home/home.ts index 541a1df1..0d899950 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -7,7 +7,7 @@ import { generateSortingToolbar } from "./sorting/generate-sorting-buttons"; import { TaskManager } from "./task-manager"; generateSortingToolbar(); -grid(document.getElementById("grid") as HTMLElement); +grid(document.getElementById("grid") as HTMLElement, () => document.body.classList.add("grid-loaded")); // @DEV: display grid background const container = document.getElementById("issues-container") as HTMLDivElement; if (!container) { diff --git a/src/the-grid.ts b/src/the-grid.ts index 0d7ec6dd..02c651f7 100644 --- a/src/the-grid.ts +++ b/src/the-grid.ts @@ -1,8 +1,9 @@ -export function grid(node = document.body) { +export function grid(node = document.body, callback?: () => void) { // Create canvas and WebGL context const canvas = document.createElement("canvas"); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + const devicePixelRatio = window.devicePixelRatio || 1; + canvas.width = window.innerWidth * devicePixelRatio; + canvas.height = window.innerHeight * devicePixelRatio; node.appendChild(canvas); const gl = canvas.getContext("webgl") as WebGLRenderingContext; @@ -13,46 +14,50 @@ export function grid(node = document.body) { // Define shader sources const vertexShaderSource = ` - attribute vec2 a_position; + attribute vec2 a_position; - void main() { - gl_Position = vec4(a_position, 0, 1); - } - `; + void main() { + gl_Position = vec4(a_position, 0, 1); + } +`; + // cspell:ignore mediump const fragmentShaderSource = ` - precision mediump float; + precision mediump float; - uniform vec2 u_resolution; - uniform float u_time; + uniform vec2 u_resolution; + uniform float u_time; - float rand(vec2 n) { - return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); - } + float rand(vec2 n) { + return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); + } - void main() { - vec3 color = vec3(128.0/255.0, 128.0/255.0, 128.0/255.0); // #808080 - vec2 tilePosition = mod(gl_FragCoord.xy, 24.0); - vec2 tileNumber = floor(gl_FragCoord.xy / 24.0); + void main() { + vec3 color = vec3(128.0/255.0, 128.0/255.0, 128.0/255.0); // #808080 + vec2 tilePosition = mod(gl_FragCoord.xy, 24.0); + vec2 tileNumber = floor(gl_FragCoord.xy / 24.0); - float period = rand(tileNumber) * 9.0 + 1.0; // Random value in the range [1, 10] - float phase = fract(u_time / period / 4.0); // Animation four times slower - float opacity = (1.0 - abs(phase * 2.0 - 1.0)) * 0.25; // Limit maximum opacity to 0.25 + float period = rand(tileNumber) * 9.0 + 1.0; // Random value in the range [1, 10] + float phase = fract(u_time / period / 8.0); // Animation eight times slower + float opacity = (1.0 - abs(phase * 2.0 - 1.0)) * 0.125; // Limit maximum opacity to 0.25 - vec4 backgroundColor = vec4(color, opacity); + vec4 backgroundColor = vec4(color, opacity); - if (tilePosition.x > 23.0 && tilePosition.y < 1.0) { - gl_FragColor = vec4(color, 1.0); // Full opacity for the dot - } else { - gl_FragColor = backgroundColor; - } + if (tilePosition.x > 23.0 && tilePosition.y < 1.0) { + gl_FragColor = vec4(color, 1.0); // Full opacity for the dot + } else { + gl_FragColor = backgroundColor; } - `; + } +`; // Define shader creation function function createShader(gl: WebGLRenderingContext, type: number, source: string) { const shader = gl.createShader(type); - if (!shader) throw new Error("Could not create shader"); + if (!shader) { + console.error("An error occurred creating the shaders"); + return null; + } gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { @@ -65,13 +70,23 @@ export function grid(node = document.body) { // Create vertex and fragment shaders const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); + if (!vertexShader) { + console.error("An error occurred creating the vertex shader"); + return; + } const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); + if (!fragmentShader) { + console.error("An error occurred creating the fragment shader"); + return; + } // Create program, attach shaders, and link const program = gl.createProgram(); - if (!program) throw new Error("Could not create program"); - if (!vertexShader) throw new Error("Could not create vertex shader"); - if (!fragmentShader) throw new Error("Could not create fragment shader"); + if (!program) { + console.error("An error occurred creating the program"); + return; + } + gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); @@ -136,10 +151,12 @@ export function grid(node = document.body) { } // Handle window resize - window.addEventListener("resize", () => { - resizeCanvasToDisplaySize(canvas); - }); + window.addEventListener("resize", () => resizeCanvasToDisplaySize(canvas)); + // Callback + if (callback) { + callback(); + } // Start the render loop render(); } diff --git a/static/index.html b/static/index.html index 78ae6a2d..3c7e82cf 100644 --- a/static/index.html +++ b/static/index.html @@ -33,7 +33,7 @@ -
+
:nth-child(1) { + transform: translateX(-100vw); + } + background > :nth-child(2) { + transform: translateY(-50vh); + } + + @keyframes background-gradients-fade-in { + to { + opacity: 0.125; + } + } + @keyframes background-grid-fade-in { + to { + opacity: 0.5; + } + } } diff --git a/static/style/style.css b/static/style/style.css index a868d826..1706c0b3 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -404,8 +404,8 @@ left: 0; } background #grid { - -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%); - mask-image: radial-gradient(#00000020 0, #00000080 100%); + /* -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%); */ + /* mask-image: radial-gradient(#00000020 0, #00000080 100%); */ pointer-events: none; } .preview blockquote { @@ -597,4 +597,43 @@ margin-left: 6px; content: "▼"; } + + background #grid { + pointer-events: none; + } + + background #grid canvas { + width: 100%; + height: 100%; + opacity: 0; + animation: background-grid-fade-in 2s ease-in-out forwards; + } + + background .gradient { + width: 200vw; + height: 200vh; + position: absolute; + opacity: 0; + } + .grid-loaded background .gradient { + background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); + animation: background-gradients-fade-in 2s ease-in-out forwards; + } + background > :nth-child(1) { + transform: translateX(-100vw); + } + background > :nth-child(2) { + transform: translateY(-50vh); + } + + @keyframes background-gradients-fade-in { + to { + opacity: 0.125; + } + } + @keyframes background-grid-fade-in { + to { + opacity: 0.5; + } + } } From eadedcf68b93e2bcbf1e106238372c1c974d33a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Thu, 21 Mar 2024 01:46:40 +0900 Subject: [PATCH 2/5] chore: light mode support for background --- static/index.html | 2 +- static/style/special.css | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/static/index.html b/static/index.html index 3c7e82cf..18969204 100644 --- a/static/index.html +++ b/static/index.html @@ -4,9 +4,9 @@ DevPool Directory | Ubiquity DAO - + diff --git a/static/style/special.css b/static/style/special.css index ba454d9c..d3f88768 100644 --- a/static/style/special.css +++ b/static/style/special.css @@ -35,6 +35,11 @@ body.preview-active button#github-login-button.highlight { animation: highlight-light-mode 1s ease-in-out infinite alternate; } + .grid-loaded background .gradient { + opacity: 0; + animation: none; + background-image: none; + } } @keyframes highlight-dark-mode { From 9bcdcec9e875be33eeec28c520d0d1eb91262d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Thu, 21 Mar 2024 01:56:48 +0900 Subject: [PATCH 3/5] chore: update border colors --- static/style/inverted-style.css | 25 +++++++++++++++++-------- static/style/special.css | 3 ++- static/style/style.css | 25 +++++++++++++++++-------- 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index d7bcaeb3..a71463aa 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -1,6 +1,12 @@ @media (prefers-color-scheme: light) { :root { --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); + --background-color-default-brightness: 2%; + --background-color-light-brightness: 6%; + --border-brightness: 5%; + --background-color-default: hsl(225 50% var(--background-color-default-brightness) / 1); + --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1); + --border-color: hsl(225 25% var(--border-brightness) / 1); } #logo { height: 28px; @@ -85,9 +91,10 @@ border: 1px solid #7f7f7f20; border-radius: 4px; cursor: pointer; - margin: 8px; + margin: 4px; filter: blur(4px); display: block; + border-color: var(--border-color); } #issues-container > div.selected, #issues-container > div.selected .info, @@ -475,14 +482,15 @@ border: 1px solid #7f7f7f20; border-radius: 4px; opacity: 0; - top: 64px; - flex-direction: row; - display: flex; - transform: translateX(0); - flex-wrap: wrap; + top: 60px; + /* flex-direction: row; */ + /* display: flex; */ + /* transform: translateX(0); */ + /* flex-wrap: wrap; */ pointer-events: none; - overflow: hidden; - width: calc(100vw - 18px); + /* overflow: hidden; */ + /* width: calc(100vw - 14px); */ + border-color: var(--border-color); } .preview * { pointer-events: none; @@ -542,6 +550,7 @@ padding: 16px; max-height: calc(100vh - (80px)); max-height: calc(100vh - (242px)); + border-color: var(--border-color); } .preview-content { width: 100%; diff --git a/static/style/special.css b/static/style/special.css index d3f88768..60a20a27 100644 --- a/static/style/special.css +++ b/static/style/special.css @@ -9,7 +9,8 @@ html, #issues-container > div, .preview { - background-color: var(--dark-background); + /* background-color: var(--dark-background); */ + background-color: var(--background-color-default); } #toolbar.ready { background-color: var(--dark-background-half); diff --git a/static/style/style.css b/static/style/style.css index 1706c0b3..00290a1b 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -1,6 +1,12 @@ @media (prefers-color-scheme: dark) { :root { --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); + --background-color-default-brightness: 2%; + --background-color-light-brightness: 6%; + --border-brightness: 5%; + --background-color-default: hsl(225 50% var(--background-color-default-brightness) / 1); + --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1); + --border-color: hsl(225 25% var(--border-brightness) / 1); } #logo { height: 28px; @@ -85,9 +91,10 @@ border: 1px solid #80808020; border-radius: 4px; cursor: pointer; - margin: 8px; + margin: 4px; filter: blur(4px); display: block; + border-color: var(--border-color); } #issues-container > div.selected, #issues-container > div.selected .info, @@ -475,14 +482,15 @@ border: 1px solid #80808020; border-radius: 4px; opacity: 0; - top: 64px; - flex-direction: row; - display: flex; - transform: translateX(0); - flex-wrap: wrap; + top: 60px; + /* flex-direction: row; */ + /* display: flex; */ + /* transform: translateX(0); */ + /* flex-wrap: wrap; */ pointer-events: none; - overflow: hidden; - width: calc(100vw - 18px); + /* overflow: hidden; */ + /* width: calc(100vw - 14px); */ + border-color: var(--border-color); } .preview * { pointer-events: none; @@ -542,6 +550,7 @@ padding: 16px; max-height: calc(100vh - (80px)); max-height: calc(100vh - (242px)); + border-color: var(--border-color); } .preview-content { width: 100%; From de51ccb21ebdf03de879aa2332c9096fa12b4290 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Thu, 21 Mar 2024 02:17:57 +0900 Subject: [PATCH 4/5] chore: refinements to theme --- static/style/inverted-style.css | 7 ++++--- static/style/special.css | 4 ++++ static/style/style.css | 7 ++++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index a71463aa..6f3faa3a 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -86,7 +86,7 @@ background-size: 56px; background-position: 0; background-repeat: no-repeat; - opacity: 0.25; + opacity: 0.125; margin: 3px auto; border: 1px solid #7f7f7f20; border-radius: 4px; @@ -95,6 +95,7 @@ filter: blur(4px); display: block; border-color: var(--border-color); + box-shadow: inset 0 0 24px #00bfff10; } #issues-container > div.selected, #issues-container > div.selected .info, @@ -490,7 +491,7 @@ pointer-events: none; /* overflow: hidden; */ /* width: calc(100vw - 14px); */ - border-color: var(--border-color); + } .preview * { pointer-events: none; @@ -510,7 +511,7 @@ opacity: 1; pointer-events: all; transform: translateX(50%); - box-shadow: 0 12px 48px #00000010; + box-shadow: 0 0px 16px #00000010; } .preview-header { display: flex; diff --git a/static/style/special.css b/static/style/special.css index 60a20a27..7a51adf6 100644 --- a/static/style/special.css +++ b/static/style/special.css @@ -11,6 +11,10 @@ .preview { /* background-color: var(--dark-background); */ background-color: var(--background-color-default); + border-color: var(--border-color); + } + .preview > .preview-content { + box-shadow: inset 0 0 24px #00bfff18; } #toolbar.ready { background-color: var(--dark-background-half); diff --git a/static/style/style.css b/static/style/style.css index 00290a1b..c6cffc97 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -86,7 +86,7 @@ background-size: 56px; background-position: 0; background-repeat: no-repeat; - opacity: 0.25; + opacity: 0.125; margin: 3px auto; border: 1px solid #80808020; border-radius: 4px; @@ -95,6 +95,7 @@ filter: blur(4px); display: block; border-color: var(--border-color); + box-shadow: inset 0 0 24px #00bfff10; } #issues-container > div.selected, #issues-container > div.selected .info, @@ -490,7 +491,7 @@ pointer-events: none; /* overflow: hidden; */ /* width: calc(100vw - 14px); */ - border-color: var(--border-color); + } .preview * { pointer-events: none; @@ -510,7 +511,7 @@ opacity: 1; pointer-events: all; transform: translateX(50%); - box-shadow: 0 12px 48px #ffffff10; + box-shadow: 0 0px 16px #ffffff10; } .preview-header { display: flex; From 8ebe33dd7f05081a6f57d8a537e10e2b05043ecc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Thu, 21 Mar 2024 02:44:44 +0900 Subject: [PATCH 5/5] chore: bolder fonts --- static/style/inverted-style.css | 14 ++++++++------ static/style/style.css | 14 ++++++++------ 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 6f3faa3a..58af3707 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -10,7 +10,7 @@ } #logo { height: 28px; - margin-right: 2px; + margin-right: 4px; } #authenticated, #branding { @@ -34,7 +34,7 @@ * { font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; color: #000000; - font-weight: 400; + font-weight: 500; } @font-face { font-family: "Ubiquity Nova"; @@ -403,6 +403,9 @@ #issues-container img[src] { opacity: 1; } + background { + background-color: var(--dark-background); + } background, background #grid { width: 100%; @@ -491,7 +494,6 @@ pointer-events: none; /* overflow: hidden; */ /* width: calc(100vw - 14px); */ - } .preview * { pointer-events: none; @@ -511,7 +513,7 @@ opacity: 1; pointer-events: all; transform: translateX(50%); - box-shadow: 0 0px 16px #00000010; + /* box-shadow: 0 0px 16px #00000010; */ } .preview-header { display: flex; @@ -616,7 +618,7 @@ width: 100%; height: 100%; opacity: 0; - animation: background-grid-fade-in 2s ease-in-out forwards; + animation: background-grid-fade-in 3s ease-in-out forwards; } background .gradient { @@ -627,7 +629,7 @@ } .grid-loaded background .gradient { background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); - animation: background-gradients-fade-in 2s ease-in-out forwards; + animation: background-gradients-fade-in 3s ease-in-out forwards; } background > :nth-child(1) { transform: translateX(-100vw); diff --git a/static/style/style.css b/static/style/style.css index c6cffc97..bf91af6f 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -10,7 +10,7 @@ } #logo { height: 28px; - margin-right: 2px; + margin-right: 4px; } #authenticated, #branding { @@ -34,7 +34,7 @@ * { font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; color: #fff; - font-weight: 400; + font-weight: 500; } @font-face { font-family: "Ubiquity Nova"; @@ -403,6 +403,9 @@ #issues-container img[src] { opacity: 1; } + background { + background-color: var(--dark-background); + } background, background #grid { width: 100%; @@ -491,7 +494,6 @@ pointer-events: none; /* overflow: hidden; */ /* width: calc(100vw - 14px); */ - } .preview * { pointer-events: none; @@ -511,7 +513,7 @@ opacity: 1; pointer-events: all; transform: translateX(50%); - box-shadow: 0 0px 16px #ffffff10; + /* box-shadow: 0 0px 16px #ffffff10; */ } .preview-header { display: flex; @@ -616,7 +618,7 @@ width: 100%; height: 100%; opacity: 0; - animation: background-grid-fade-in 2s ease-in-out forwards; + animation: background-grid-fade-in 3s ease-in-out forwards; } background .gradient { @@ -627,7 +629,7 @@ } .grid-loaded background .gradient { background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%); - animation: background-gradients-fade-in 2s ease-in-out forwards; + animation: background-gradients-fade-in 3s ease-in-out forwards; } background > :nth-child(1) { transform: translateX(-100vw);