feat: style sub-header

Author: Paul Adams

app.js

@@ -187,15 +187,29 @@ const matrixEffect = (canvasId, containerSelector) => {
   const columns = canvas.width / font_size;
   const drops = [];
 
+  let beginMatrixEffect = true;
   for (let x = 0; x < columns; x++) {
     drops[x] = 1;
   }
+  for (let i = 0; i < drops.length; i++) {
+    drops[i] = canvas.height / font_size;
+  }
+
+  let frame = 0;
+  let hideIniitalEffect = true;
 
   function draw() {
     ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    ctx.fillStyle = "#0F0";
+    if (hideIniitalEffect) frame++;
+
+    //if (frame > drops.length) {
+    //  hideIniitalEffect = false;
+    ctx.fillStyle = "rgba(3, 94, 3, 1)";
+    //} else {
+    //  ctx.fillStyle = "rgba(210, 15, 15, 1)";
+    //}
     ctx.font = font_size + "px arial";
 
     for (let i = 0; i < drops.length; i++) {

index.html

@@ -25,6 +25,9 @@
     <canvas id="fullscreen-matrix-canvas"></canvas>
     <header>
       <div class="logo">.codebase</div>
+      <div class="sub-header">
+        Adventures with code, copyright paul adams...
+      </div>
       <button class="menu-toggle" aria-label="Toggle navigation">
         <span></span>
         <span></span>

pages/shader-presets.js

@@ -15,7 +15,7 @@ const shaderPresets = {
   const g = 0.5 + 0.5 * sin(time * 1.0 + uv.y * 10.0);
   const b = 0.5 + 0.5 * cos(time * 3.0 + (uv.x + uv.y) * 5.0);
 
-  return vec4(r, g, b, 1.0);
+  return vec4(0, g*0.2, 0, 1.0);
 }`,
 
   "Raytraced Sphere": `function main(x, y, width, height, time) {

style.css

@@ -7,7 +7,7 @@ body {
   font-family: sans-serif;
   margin: 0;
   background-color: #000;
-  color: #0f0;
+  color: rgb(1, 113, 1);
   display: flex;
   flex-direction: column;
 }
@@ -34,7 +34,7 @@ header {
   position: relative;
   font-family: "Orbitron", sans-serif;
   font-weight: 400;
-  font-size: 10em;
+  font-size: 8em;
   color: transparent;
   -webkit-text-stroke: 1px #eee;
   text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00ffde, 0 0 20px #00ffde,
@@ -52,6 +52,21 @@ header {
   text-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
 }
 
+.sub-header {
+  background: rgba(0, 255, 0, 0.1);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  border: 2px solid rgba(5, 114, 5, 0.304);
+  padding: 0px 0px 0px 32px;
+  text-align: left;
+  width: 100%;
+  margin: 0 0 0;
+  box-sizing: border-box;
+  color: #0f0;
+  font-style: italic;
+  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
+}
+
 .container {
   display: flex;
   padding: 2rem;
@@ -63,12 +78,12 @@ header {
 .left-panel {
   width: 200px;
   background: rgba(0, 255, 0, 0.1);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(0, 255, 0, 0.2);
-  border-radius: 15px;
-  padding: 1rem;
-  text-align: center;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  border: 1px solid rgba(5, 114, 5, 0.304);
+  border-radius: 0px;
+  padding: 0rem;
+  text-align: left;
   flex-shrink: 0; /* prevent panel from shrinking */
 }
 
@@ -100,6 +115,22 @@ main a {
   transition: color 0.3s, text-shadow 0.3s;
 }
 
+main h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Orbitron", sans-serif;
+  color: rgb(30, 139, 30);
+  text-shadow: 0 0 10px rgb(45, 144, 45);
+}
+main p {
+  font-family: "Orbitron", sans-serif;
+  line-height: 1.2rem;
+  font-size: 1.1rem;
+}
+
 main a:hover {
   color: #fff;
   text-shadow: 0 0 5px #0f0;