Chore/background gradient update

src/home/home.ts

@@ -8,7 +8,7 @@ import { TaskManager } from "./task-manager";
 
 generateSortingToolbar();
 renderServiceMessage();
-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) {

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();
 }

static/index.html

@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <title>DevPool Directory | Ubiquity DAO</title>
 
-    <link rel="stylesheet" href="style/special.css" />
     <link rel="stylesheet" href="style/style.css" />
     <link rel="stylesheet" href="style/inverted-style.css" />
+    <link rel="stylesheet" href="style/special.css" />
 
     <link rel="icon" href="favicon.svg" type="image/x-icon" />
     <link rel="apple-touch-icon" href="/icon-512x512.png" />
@@ -33,7 +33,7 @@
     <link rel="manifest" href="/manifest.json" />
   </head>
   <body>
-    <background><div id="grid"></div></background>
+    <background><div class="gradient"></div><div class="gradient"></div><div id="grid"></div></background>
     <div id="issues-container"></div>
     <div id="toolbar" class="toolbar" data-authenticated="false"
       ><div id="branding"
@@ -45,7 +45,7 @@
       ><div id="filters"></div
     ></div>
     <div id="bottom-bar" class="toolbar"
-      ><div></div><a href="https://dao.ubq.fi/devpool-flow" target="_blank"><button>DevPool Help</button></a></div
+      ><div></div><a href="https://dao.ubq.fi/devpool-flow" target="_blank"><button>Help</button></a></div
     >
     <script type="module" src="dist/src/home/home.js"></script>
   </body>

static/style/inverted-style.css

@@ -1,10 +1,16 @@
 @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;
-    margin-right: 2px;
+    margin-right: 4px;
   }
   #authenticated,
   #branding {
@@ -28,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";
@@ -80,14 +86,16 @@
     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;
     cursor: pointer;
-    margin: 8px;
+    margin: 4px;
     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,
@@ -355,7 +363,10 @@
       margin-left: 12px;
     }
     .toolbar button {
-      padding: 12px 16px;
+      /* padding: 12px 16px; */
+      height: 24px !important;
+      padding: 4px 16px;
+      line-height: 1;
     }
   }
   @media screen and (max-width: 1280px) {
@@ -394,6 +405,9 @@
   #issues-container img[src] {
     opacity: 1;
   }
+  background {
+    background-color: var(--dark-background);
+  }
   background,
   background #grid {
     width: 100%;
@@ -403,8 +417,8 @@
     left: 0;
   }
   background #grid {
-    -webkit-mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%);
-    mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%);
+    /* -webkit-mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%); */
+    /* mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%); */
     pointer-events: none;
   }
   .preview blockquote {
@@ -474,14 +488,14 @@
     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); */
   }
   .preview * {
     pointer-events: none;
@@ -501,7 +515,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;
@@ -541,6 +555,7 @@
     padding: 16px;
     max-height: calc(100vh - (80px));
     max-height: calc(100vh - (242px));
+    border-color: var(--border-color);
   }
   .preview-content {
     width: 100%;
@@ -612,4 +627,43 @@
   .toolbar button {
     white-space: nowrap;
   }
+
+  background #grid {
+    pointer-events: none;
+  }
+
+  background #grid canvas {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    animation: background-grid-fade-in 3s 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 3s 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;
+    }
+  }
 }

static/style/special.css

@@ -10,7 +10,13 @@
   #issues-container > div,
   .preview {
     background-color: var(--dark-background);
+    border-color: var(--border-color);
+    border-color: #80808020;
   }
+  .preview > .preview-content {
+    box-shadow: inset 0 0 24px #00bfff18;
+  }
+
   .toolbar.ready {
     background-color: var(--dark-background-half);
   }
@@ -35,6 +41,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 {