project file updated

michaelsboost · Aug 7, 2024 · b0d0b55 · b0d0b55
1 parent 972925b
commit b0d0b55
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 56 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/dist/bundle.css b/dist/bundle.css
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -0,0 +1,36 @@
+{
+  "theme_color": "#13171f",
+  "background_color": "#13171f",
+  "display": "standalone",
+  "start_url": "./index.html",
+  "lang": "en-US",
+  "name": "kodeWeave",
+  "short_name": "kodeWeave",
+  "description": "kodeWeave is your on the go coding playground! Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop.",
+  "icons": [
+    {
+      "src": "../imgs/logo-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "../imgs/logo-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "../imgs/logo-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "../imgs/logo-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}
diff --git a/dist/style.min.css b/dist/style.min.css
diff --git a/go/.DS_Store b/go/.DS_Store
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
     <link rel="icon" type="image/svg+xml" href="imgs/logo.svg" />
     <link rel="apple-touch-icon" href="imgs/logo.svg">
-    <link rel="stylesheet" href="dist/style.min.css">
+    <link rel="stylesheet" href="dist/bundle.css">
   </head>
   <body>
     <div class="container absolute inset-0 m-auto">

diff --git a/kodeWeave.json b/kodeWeave.json
@@ -1,14 +1,14 @@
 {
   "name": "kodeWeave",
-  "version": "1.2",
+  "version": "1.2.0",
   "title": "kodeWeave: Your on the go code playground!",
   "description": "kodeWeave is your on the go coding playground! Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop.",
   "author": "kodeWeave",
   "url": "https://michaelsboost.com/kodeWeave/",
   "meta": "",
   "libraries": [
     "https://cdnjs.cloudflare.com/ajax/libs/picocss/2.0.6/pico.min.css",
-    "https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.js"
+    "https://michaelsboost.com/TailwindCSSMod/tailwind-mod-noreset.min.js"
   ],
   "html_pre_processor": "html",
   "css_pre_processor": "css",
@@ -22,9 +22,8 @@
   "module": true,
   "autorun": true,
   "pwa": false,
-  "activePanel": "html",
   "preview": true,
+  "activePanel": "html",
   "columns": false,
-  "columnsRight": true,
-  "obj": {}
+  "columnsRight": true
 }
diff --git a/src/bundle.css b/src/bundle.css
@@ -0,0 +1,5 @@
+@import '../libraries/pico.min.css';
+
+
+@tailwind components;
+@tailwind utilities;
diff --git a/src/index.html b/src/index.html
@@ -1,48 +1,85 @@
-<nav class="sticky top-0 inset-x-0 flex align-center place-items-center justify-between px-2 py-4 bg-gray-900 border-0 border-b border-solid border-blue-900 bg-opacity-50 backdrop-filter backdrop-blur-lg z-10">
-  <a href="https://michaelsboost.com/kodeWeave/" target="_blank" class="no-underline" style="color: unset;">
-    <div class="flex items-center font-thin gap-4">
-      <img class="h-8 inline-block" src="../imgs/logo.svg" alt="kodeWeave">
-      <span class="hidden sm:inline-block">kodeWeave</span>
-    </div>
-  </a>
-  <div class="flex items-center">
-    <a href="https://github.com/michaelsboost/kodeWeave/" target="_blank" class="text-white mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 496 512" class="w-4 h-4">
-        <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
-      </svg>
-    </a>
-    <a href="https://twitter.com/kodeweave_app" target="_blank" class="text-white mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
-      <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <defs id="defs2"><clipPath clipPathUnits="userSpaceOnUse" id="clipPath7"><path style="display:none;fill:#2a34ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="M 2.7194315,3.6106111 H 8.5920036 L 21.280954,20.389389 h -5.727371 z" id="path7"></path><path id="lpe_path-effect7" style="fill:#2a34ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" class="powerclip" d="M -2.8448815,-3.9722732 H 26.113213 V 27.972273 H -2.8448815 Z M 2.7194315,3.6106111 15.553583,20.389389 h 5.727371 L 8.5920036,3.6106111 Z"></path></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath11"><rect style="fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" id="rect11" width="21.586601" height="18.278778" x="1.2021173" y="2.8606112"></rect></clipPath></defs><g style="fill:none;stroke:currentColor;stroke-width:1.5" id="g2" transform="translate(-0.04613684)"><g id="g8" clip-path="url(#clipPath11)"><path d="M 2.7194315,3.6106111 H 8.5920036 L 21.280954,20.389389 h -5.727371 z" id="path2-8"></path><path d="M 20.541589,1.5132639 19.650846,2.5619375 18.760104,3.6106111 17.869362,4.6592848 16.978619,5.7079584 16.087877,6.756632 15.197135,7.8053056 14.306392,8.8539793 13.41565,9.9026529 12.524908,10.951326 11.634165,12 10.743423,13.048674 9.852681,14.097347 8.961938,15.146021 8.071196,16.194695 7.1804539,17.243368 6.2897116,18.292042 5.3989693,19.340715 4.5082269,20.389389 3.6174846,21.438063 2.7267423,22.486736" id="path4" clip-path="url(#clipPath7)"></path></g></g>
-        </svg>
-    </a>
-    <a href="https://michaelsboost.com/donate/" target="_blank" class="mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-red-400">
-        <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
-      </svg>
-    </a>
-    <a class="block w-auto bg-blue-500 font-thin py-2" role="button" href="./go">
-      Launch
-    </a>
-  </div>
-</nav>
+<div class="container absolute inset-0 m-auto">
+  <nav class="sticky top-0 inset-x-0 flex align-center place-items-center justify-between px-2 py-4 bg-gray-900 border-0 border-b border-solid border-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-lg z-10">
+    <ul class="font-thin">
+      <li class="py-0">
+        <a 
+          aria-label="kodeWeave"
+          name="kodeWeave"
+          href="https://michaelsboost.com/kodeWeave/" 
+          target="_blank" 
+          class="no-underline" 
+          style="color: unset;">
+            <img class="h-8 inline-block" src="../imgs/logo.svg" width="100" height="256" alt="kodeWeave">
+            <span class="hidden sm:inline-block">kodeWeave</span>
+        </a>
+      </li>
+    </ul>
+    <ul class="flex items-center">
+      <li class="py-0">
+        <a 
+          aria-label="github repo"
+          name="github repo"
+          href="https://github.com/michaelsboost/kodeWeave/" 
+          target="_blank" 
+          class="text-white mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 496 512" class="w-4 h-4">
+            <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
+          </svg>
+        </a>
+      </li>
+      <li class="py-0">
+        <a 
+          aria-label="twitter page for project feed"
+          name="twitter page for project feed"
+          href="https://twitter.com/kodeweave_app" 
+          target="_blank" 
+          class="text-white mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <defs id="defs2"><clipPath clipPathUnits="userSpaceOnUse" id="clipPath7"><path style="display:none;fill:#2a34ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="M 2.7194315,3.6106111 H 8.5920036 L 21.280954,20.389389 h -5.727371 z" id="path7"></path><path id="lpe_path-effect7" style="fill:#2a34ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" class="powerclip" d="M -2.8448815,-3.9722732 H 26.113213 V 27.972273 H -2.8448815 Z M 2.7194315,3.6106111 15.553583,20.389389 h 5.727371 L 8.5920036,3.6106111 Z"></path></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath11"><rect style="fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" id="rect11" width="21.586601" height="18.278778" x="1.2021173" y="2.8606112"></rect></clipPath></defs><g style="fill:none;stroke:currentColor;stroke-width:1.5" id="g2" transform="translate(-0.04613684)"><g id="g8" clip-path="url(#clipPath11)"><path d="M 2.7194315,3.6106111 H 8.5920036 L 21.280954,20.389389 h -5.727371 z" id="path2-8"></path><path d="M 20.541589,1.5132639 19.650846,2.5619375 18.760104,3.6106111 17.869362,4.6592848 16.978619,5.7079584 16.087877,6.756632 15.197135,7.8053056 14.306392,8.8539793 13.41565,9.9026529 12.524908,10.951326 11.634165,12 10.743423,13.048674 9.852681,14.097347 8.961938,15.146021 8.071196,16.194695 7.1804539,17.243368 6.2897116,18.292042 5.3989693,19.340715 4.5082269,20.389389 3.6174846,21.438063 2.7267423,22.486736" id="path4" clip-path="url(#clipPath7)"></path></g></g>
+            </svg>
+        </a>
+      </li>
+      <li class="py-0">
+        <a 
+          aria-label="keep the project alive by helping the developer"
+          name="keep the project alive by helping the developer"
+          href="https://michaelsboost.com/donate/" 
+          target="_blank" 
+          class="mx-1 sm:mx-2 px-1 sm:px-2 py-2 no-underline">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-red-400">
+            <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
+          </svg>
+        </a>
+      </li>
+      <li class="py-0">
+        <a class="block w-auto font-light px-3 py-2 bg-[#0072ad] text-white" href="./go">
+          Launch
+        </a>
+      </li>
+    </ul>
+  </nav>
 
-<main class="container grid grid-cols-1 h-full gap-4 items-center"> 
-  <div>
-    <hgroup class="text-center">
-      <h1 class="my-2">
-        kodeWeave is your on the go coding playground!
-      </h1>
-      <h2>
-        Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop.
-      </h2>
-    </hgroup>
-    <div class="text-center">
-      <img class="border border-solid border-gray-800 shadow-2xl shadow-blue-900" src="../imgs/screenshot.png" alt="kodeWeave">
-
-      <a class="my-10 mx-auto block w-full bg-blue-500 font-thin py-4" role="button" href="./go">
-        Launch kodeWeave
-      </a>
+  <main class="w-full grid grid-cols-1 h-full gap-4 items-center"> 
+    <div>
+      <hgroup class="text-center">
+        <h1 class="my-2">
+          kodeWeave is your on the go coding playground!
+        </h1>
+        <h2>
+          Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop.
+        </h2>
+      </hgroup>
+      <div class="text-center">
+        <img 
+          class="border border-solid border-gray-800 shadow-2xl shadow-blue-900" 
+          src="../imgs/screenshot.webp" 
+          srcset="../imgs/screenshot-640w.webp 640w, ../imgs/screenshot-1280w.webp 1280w" 
+          alt="kodeWeave">
+
+        <a class="my-10 mx-auto block w-full font-thin py-4" role="button" href="./go">
+          Launch kodeWeave
+        </a>
+      </div>
     </div>
-  </div>
-</main>
+  </main>
+</div>