style(site): add initial color theme variables

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-    "editor.formatOnSave": true,
+    "editor.formatOnSave": false,
     "js/ts.implicitProjectConfig.checkJs": true,
     "cSpell.words": [
         "citty",

site/src/components/awesome-header.html

@@ -1,7 +1,11 @@
 <header
   style="
     border-radius: 5px;
-    background: linear-gradient(45deg, #3054bf, #416fff);
+    background: linear-gradient(
+      45deg in oklch,
+      var(--color-blue),
+      var(--color-blue-fade)
+    );
     color: white;
     padding: 1em;
     margin: 1em auto;

site/src/components/my-head.html

@@ -24,6 +24,15 @@
     content="McFly is a no-framework framework that assists in leveraging the web platform."
   />
   <style>
+    :root {
+      --color-blue: oklch(48.44% 0.173 265.97);
+      --color-blue-fade: oklch(59.43% 0.22 266.22);
+      --color-green: oklch(70.57% 0.205 144.57);
+      --color-orange: oklch(69.58% 0.125 86.58);
+      --color-red: oklch(54.18% 0.18 7.98);
+      --color-blue-gray: oklch(41.1% 0.059 269.95);
+    }
+
     body {
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
       max-width: 40em;

site/src/pages/index.html

@@ -28,7 +28,7 @@
           full-stack, no-framework framework that assists developers in
           leveraging the web platform.
         </p>
-        <code-block>npm create <strong style="color:#3054bf">mcfly</strong>@latest</code-block>
+        <code-block>npm create <strong style="color: var(--color-blue)">mcfly</strong>@latest</code-block>
         <p>
           Here's a sample interactive custom element:
           <vanilla-hello-world data-name="McFly"></vanilla-hello-world>