From 3be4f2284f3f1066a38621ff3e1cb9574b967b3e Mon Sep 17 00:00:00 2001
From: Nathan Long <nlong5@gmail.com>
Date: Wed, 7 Feb 2024 11:27:39 -0500
Subject: [PATCH] Adding experiements

---
 _data/labs.json                | 28 +++++++++-------------------
 _includes/layouts/base.njk     |  2 ++
 public/css/styles.css          | 26 ++++++++++++++++++++++++--
 public/js/modules/partyTime.js |  1 +
 4 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/_data/labs.json b/_data/labs.json
index 2e36f35..49488d3 100644
--- a/_data/labs.json
+++ b/_data/labs.json
@@ -1,19 +1,19 @@
 [
   {
-    "name": "Animation Playground",
-    "url": "https://nathan-long.com/animation/",
-    "source": "https://github.com",
-    "description": "Playing around with different techniques and animation stacks.",
-    "dateCreated": "2022-06-01",
+    "name": "Experiments",
+    "url": "https://nathan-long.com/experiments/",
+    "source": "https://github.com/nathanlong/experiments",
+    "description": "A place to host experiments in motion, techniques, and other odd things.",
+    "dateCreated": "2024-02-07",
     "dateModified": "ongoing",
-    "image": "https://user-images.githubusercontent.com/623568/207959370-a7a9d3ba-98a9-4787-9376-a8f3d1fae38e.png",
-    "imageAlt": "Curvy red path with two dots indicating motion",
-    "feature": false
+    "image": "https://private-user-images.githubusercontent.com/623568/303050865-0c1009c9-34ab-418c-b504-c101fc4fe0f0.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDczMjI0MDMsIm5iZiI6MTcwNzMyMjEwMywicGF0aCI6Ii82MjM1NjgvMzAzMDUwODY1LTBjMTAwOWM5LTM0YWItNDE4Yy1iNTA0LWMxMDFmYzRmZTBmMC5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMjA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDIwN1QxNjA4MjNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wOWFjNTI2MGNhZDFmNmQ1YWY1MzU3YjYzNDQ2MjE3YjdiOTRjYTIzY2U4YmIxYjA2Yjk1YmNjODA1MDkwYjA0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.SvzNBqhWnnId2egYYPglhaMrVJf778-W_wZicFI3fg8",
+    "imageAlt": "A flask with bubbling liquid overlaid with scanlines like from an old CRT display",
+    "feature": true
   },
   {
     "name": "Hero Dice",
     "url": "https://nathan-long.com/hero-dice/",
-    "source": "https://github.com",
+    "source": "https://github.com/nathanlong/hero-dice",
     "description": "Dice roller app for self-made RPG system for kids: F.I.G. (Fantastical Imagination Game)",
     "dateCreated": "2021-11-16",
     "image": "https://user-images.githubusercontent.com/623568/207949358-d9a41dd4-5355-474e-9433-6a258b4efeba.png",
@@ -31,16 +31,6 @@
     "imageAlt": "Playing card suit icons over a field of X's. Icon by Irene Hoffman",
     "feature": false
   },
-  {
-    "name": "WIP: Sandclock",
-    "url": "https://nathan-long.com/sandclock/",
-    "source": "https://github.com/nathanlong/sandclock",
-    "description": "A digital hourglass with simple timer functionality.",
-    "dateCreated": "TBD",
-    "image": "https://user-images.githubusercontent.com/623568/233101852-cc17b991-9360-4794-add9-51e5ce8ae4b9.png",
-    "imageAlt": "Construction crane with warning barricades. Icon by Eko Purnomo.",
-    "feature": false
-  },
   {
     "name": "Web Voices",
     "url": "/voices.xml",
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index a021910..f6a3cdd 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -6,6 +6,8 @@
     <title>{{ title or metadata.title }}</title>
     <meta name="description" content="{{ description or metadata.description }}">
     <meta name="generator" content="{{ eleventy.generator }}">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fcfcfc" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#070707" />
     <meta property="og:type" content="website">
     <meta property="og:url" content="{{ metadata.url }}">
     <meta property="og:title" content="{{ title or metadata.title }}">
diff --git a/public/css/styles.css b/public/css/styles.css
index 756ca68..3cb341d 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -113,6 +113,7 @@
   /* colors */
   --color-gray-20: #e0e0e0;
   --color-gray-50: #c0c0c0;
+  --color-gray-60: #707070;
   --color-gray-70: #777779;
   --color-gray-90: #333;
   --color-gold: #fee0b4;
@@ -146,7 +147,7 @@
   --theme-glow: var(--color-robin-egg);
   --theme-text: var(--color-text-default);
   --theme-text-gray: var(--color-gray-70);
-  --theme-text-reduced: var(--color-text-reduced);
+  --theme-text-reduced: var(--color-gray-60);
   --theme-text-faint: var(--color-text-faint);
   --theme-editorbg: var(--color-white);
   /* theme constants (don't need rebinding) */
@@ -1550,6 +1551,10 @@ a.color-reduced {
   height: auto;
 }
 
+.h-full {
+  height: 100%;
+}
+
 /* @util-position */
 
 .fixed {
@@ -1578,6 +1583,12 @@ a.color-reduced {
   right: 0;
 }
 
+.inset-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
 .relative {
   position: relative;
 }
@@ -1972,7 +1983,9 @@ a.color-reduced {
   padding: 0.5rem;
 }
 
-canvas {
+/* Party Animation */
+
+.pixi-canvas {
   position: fixed;
   inset: 0;
   width: 100%;
@@ -2010,3 +2023,12 @@ canvas {
     margin-left: -8vw;
   }
 }
+
+.hero-animation {
+  position: absolute;
+  right: 15vw;
+  top: 0;
+  bottom: 0;
+  width: auto;
+  height: 100%;
+}
diff --git a/public/js/modules/partyTime.js b/public/js/modules/partyTime.js
index a184065..afcccf0 100644
--- a/public/js/modules/partyTime.js
+++ b/public/js/modules/partyTime.js
@@ -102,6 +102,7 @@ export default class partyTime {
       resizeTo: window,
     })
     document.body.appendChild(this.pixi.view)
+    this.pixi.view.classList = 'pixi-canvas'
     this.pixi.stage.eventMode = 'dynamic'
     this.pixi.stage.hitArea = this.pixi.screen