Tweak demo copy and styles

chordbook · Apr 27, 2024 · 21c06ee · 21c06ee
1 parent c21cf41
commit 21c06ee
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -10,12 +10,11 @@
 </head>
 
 <body>
-  <div class="container mx-auto p-4 max-w-4xl">
-
+  <main class="prose mx-auto p-4">
     <header>
       <nav class="navbar">
         <div class="navbar-end">
-          <a class="contrast" href="https://github.com/chordbook/metronome" style="margin-left: auto;">
+          <a href="https://github.com/chordbook/metronome" style="margin-left: auto;">
             <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-github"
               viewBox="0 0 16 16">
               <path
@@ -25,64 +24,58 @@
         </div>
       </nav>
     </header>
-
-    <main>
-      <div class="hero min-h-[50vh] my-8">
-        <div class="hero-content flex-col lg:flex-row p-5 md:p-10 gap-5 md:gap-10">
-          <div class="text-center lg:text-left max-w-[30rem] flex flex-col gap-4">
-            <a href="https://github.com/chordbook/metronome" class="link-primary font-bold text-2xl">@chordbook/metronome</a>
-            <h1 class="text-4xl font-bold text-black dark:text-white">
-              A clock-synchronized universal metronome.
-            </h1>
-            <p class="text-xl">
-              Everyone in the room—or anywhere in the world—playing a given tempo together without manual synchronization.
-            </p>
-
-            <p class=""><span class="text-accent">Try it!</span> Open this page on multiple devices and hit play.</p>
+    <div class="hero min-h-[50vh] my-8">
+      <div class="hero-content flex-col lg:flex-row p-0">
+        <div class="text-center lg:text-left text-balance">
+          <a href="https://github.com/chordbook/metronome" class="link-primary font-bold text-2xl">@chordbook/metronome</a>
+          <h1 class="text-4xl font-bold text-black dark:text-white">
+            Synchronized with the whole world.
+          </h1>
+          <p class="text-xl">
+            Everyone in the room—or in the next room, or anywhere in the world—playing on the beat without manual synchronization.
+          </p>
+          <p class="mb-0"><span class="text-accent">Try it!</span> Open this page on multiple devices and hit play.</p>
+        </div>
+        <div class="flex flex-col items-center gap-6">
+          <div class="flex flex-col items-center gap-2 mt-2">
+            <label for="tempo" class="text-secondary uppercase text-sm font-semibold">Tempo</label>
+            <input id="tempo" class="input input-bordered input-lg w-32 text-center text-4xl font-bold" type="number" min="30" max="400" step="1" value="120">
+            <span class="text-sm uppercase font-bold">bpm</span>
           </div>
-          <div class="card max-w-xs">
-            <div class="flex flex-col items-center gap-6">
-              <div class="flex flex-col items-center gap-1">
-                <label for="tempo" class="text-secondary uppercase text-sm font-semibold">Tempo</label>
-                <input id="tempo" class="input input-bordered input-lg w-32 text-center text-4xl font-bold" type="number" min="30" max="400" step="1" value="120">
-                <span class="text-sm uppercase font-bold">bpm</span>
-              </div>
 
-              <div id="visualizer" class="flex flex-row gap-5">
-                <div class="green"></div>
-                <div class="orange"></div>
-                <div class="orange"></div>
-                <div class="orange"></div>
-              </div>
+          <div id="visualizer" class="flex flex-row gap-5">
+            <div class="green"></div>
+            <div class="orange"></div>
+            <div class="orange"></div>
+            <div class="orange"></div>
+          </div>
 
-              <label class="swap">
-                <input id="enabled" type="checkbox" />
-                <span class="swap-off btn btn-circle btn-primary">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5"
-                    stroke="currentColor" class="w-6 h-6 -me-0.5">
-                    <path stroke-linecap="round" stroke-linejoin="round"
-                      d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
-                  </svg>
-                </span>
-                <span class="swap-on btn btn-primary btn-circle">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-                    <path fill-rule="evenodd"
-                      d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z"
-                      clip-rule="evenodd" />
-                  </svg>
-                </span>
-              </label>
+          <label class="swap">
+            <input id="enabled" type="checkbox" />
+            <span class="swap-off btn btn-circle btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-6 h-6 -me-0.5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
+              </svg>
+            </span>
+            <span class="swap-on btn btn-primary btn-circle">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+                <path fill-rule="evenodd"
+                  d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z"
+                  clip-rule="evenodd" />
+              </svg>
+            </span>
+          </label>
 
-              <div class="text-xs text-neutral-500">
-                <span class="uppercase">Offset:</span>
-                <span class="text-neutral-700 dark:text-neutral-300" id="offset">0</span>ms
-              </div>
-            </div>
+          <div class="text-xs text-neutral-500">
+            <span class="uppercase">Offset:</span>
+            <span class="text-neutral-700 dark:text-neutral-300" id="offset">0</span>ms
           </div>
         </div>
       </div>
-    </main>
-  </div>
+    </div>
+  </main>
   <script type="module" src="./demo.ts"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "node": ">=16"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "autoprefixer": "^10.4.19",
     "daisyui": "^4.10.2",
     "postcss": "^8.4.38",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,5 +6,8 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [require("daisyui")],
+  plugins: [
+    require("@tailwindcss/typography"),
+    require("daisyui")
+  ],
 }