ADD/README.md: hint to hosted examples + index.html styling

guidoschmidt · Aug 3, 2023 · 56459a2 · 56459a2
1 parent 495895b
commit 56459a2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,5 +1,8 @@
 # Lygia Examples
-These are examples of how to use [LYGIA Shader Library](https://lygia.xyz/) with [three.js](https://threejs.org/)
+These are examples of how to use [LYGIA Shader Library](https://lygia.xyz/) with
+[three.js](https://threejs.org/)
+
+Live examples: [lygia.guidoschmidt.cc](https://lygia.guidoschmidt.cc)
 
 ---
 
@@ -30,6 +33,11 @@ npm | yarn | pnpm install
 npm | yarn | pnpm dev
 ```
 
+You can also start an overview HTML page by running just:
+```bash
+npm | yarn | pnpm dev
+```
+
 ---
 
 ### Open Issues & Ideas

diff --git a/index.html b/index.html
@@ -5,6 +5,32 @@
     <title>LYGIA three.js examples</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
   </head>
+  <style>
+    :root {
+      --background: rgb(250, 250, 250);
+      --foreground: rgb(42, 42, 42);
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      gap: 20px;
+      padding: 10vw;
+      background: var(--background);
+      font-family: monospace;
+      font-size: calc(12px + 0.5vw);
+    }
+
+    a {
+      width: fit-content;
+      padding: 10px;
+      border-radius: 3px;
+      background: var(--foreground);
+      color: var(--background);
+      text-decoration: none;
+    }
+  </style>
   <body>
     <a href="./2d-simple/index.html">2D / Simple</a>
     <a href="./2d-marching-squares/index.html">2D / Marching Squares</a>