From d7b9df6402ff71aa2d54eb8eb9e8f656b6bc2219 Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Tue, 30 Apr 2024 21:01:05 +0200
Subject: [PATCH] css

---
 README.md  |  4 ++++
 index.html | 28 +++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 130dee27..18cff2d6 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,9 @@
 # vertexshaderart.com is in transition to a static site
 
+## Saving
+
+To save your work. Bookmark the URL or copy it to your blog/instagram/gist etc...
+
 ## Music Tracks
 
 Options: 
diff --git a/index.html b/index.html
index 8fe9e1bc..3341575e 100644
--- a/index.html
+++ b/index.html
@@ -17,22 +17,43 @@
   }
   #banner {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     font-size: x-large;
+    align-items: center;
+    margin-bottom: 5px;
+  }
+  #banner>div {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  #banner a {
+    border: 1px solid #888;
+    padding: 0.25em;
+    border-radius: 0.25em;
+    font-size: medium;
+  }
+  #search {
+    display: flex;
   }
   a {
     text-decoration: none;
     color: white;
   }
   input {
+    flex: 1 1 auto;
     width: 100%;
     background-color: #222;
     border: none;
+    padding: 0.25em;
   }
   #toc {
     margin: 0 auto;
-    display: inline-block;
-    width: fit-content;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center; /* Centers the items in the container */
+    width: 100%; /* Set to the desired width or keep it fluid */
   }
   #toc>div {
     display: inline-block;
@@ -63,8 +84,9 @@
       <div>
         <div>vertexshaderart.com</div>
       </div>
-      <div>
+      <div id="links">
         <a href="src">new</a>
+        <a target="_blank" href="https://www.youtube.com/channel/UC6IqL5vkMJpqBG_bFDjsaxw">lessons</a>
         <a href="https://github.com/greggman/vertexshadeart.com">github</a>
       </div>
     </div>