feat(PageChrome): add responsive container

limit width on desktop size screens

__snapshots__/navbar.test.js.snap

@@ -1,76 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navbar Default test 1`] = `
-<div class="navbar bg-neutral">
+<div class="bg-neutral">
-  <div class="flex-1">
+  <div class="mx-auto lg:container bg-neutral">
-    <h4>
+    <div class="navbar">
-      <span class="primary">
+      <div class="flex-1">
-        git
+        <h4>
-      </span>
+          <span class="primary">
-      <span class>
+            git
-        together
+          </span>
-      </span>
+          <span class>
-      <span class>
+            together
-        .xyz
+          </span>
-      </span>
+          <span class>
-    </h4>
+            .xyz
-  </div>
+          </span>
-  <div class="flex-none gap-4">
+        </h4>
-    <div class="btn btn-primary normal-case">
+      </div>
-      Sign up
+      <div class="flex-none gap-4">
+        <div class="btn btn-primary normal-case">
+          Sign up
+        </div>
+        <button class="btn btn-outline normal-case">
+          Login
+        </button>
+      </div>
     </div>
-    <button class="btn btn-outline normal-case">
-      Login
-    </button>
   </div>
 </div>
 `;
 
 exports[`Navbar NIP07Exists test 1`] = `
-<div class="navbar bg-neutral">
+<div class="bg-neutral">
-  <div class="flex-1">
+  <div class="mx-auto lg:container bg-neutral">
-    <h4>
+    <div class="navbar">
-      <span class="primary">
+      <div class="flex-1">
-        git
+        <h4>
-      </span>
+          <span class="primary">
-      <span class>
+            git
-        together
+          </span>
-      </span>
+          <span class>
-      <span class>
+            together
-        .xyz
+          </span>
-      </span>
+          <span class>
-    </h4>
+            .xyz
-  </div>
+          </span>
-  <div class="flex-none gap-4">
+        </h4>
-    <button class="btn btn-outline normal-case">
+      </div>
-      Login
+      <div class="flex-none gap-4">
-    </button>
+        <button class="btn btn-outline normal-case">
+          Login
+        </button>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Navbar NoNIP07 test 1`] = `
-<div class="navbar bg-neutral">
+<div class="bg-neutral">
-  <div class="flex-1">
+  <div class="mx-auto lg:container bg-neutral">
-    <h4>
+    <div class="navbar">
-      <span class="primary">
+      <div class="flex-1">
-        git
+        <h4>
-      </span>
+          <span class="primary">
-      <span class>
+            git
-        together
+          </span>
-      </span>
+          <span class>
-      <span class>
+            together
-        .xyz
+          </span>
-      </span>
+          <span class>
-    </h4>
+            .xyz
-  </div>
+          </span>
-  <div class="flex-none gap-4">
+        </h4>
-    <div class="btn btn-primary normal-case">
+      </div>
-      Sign up
+      <div class="flex-none gap-4">
+        <div class="btn btn-primary normal-case">
+          Sign up
+        </div>
+        <button class="btn btn-outline normal-case">
+          Login
+        </button>
+      </div>
     </div>
-    <button class="btn btn-outline normal-case">
-      Login
-    </button>
   </div>
 </div>
 `;

src/lib/components/Navbar.svelte

@@ -2,20 +2,22 @@
   export let nip07plugin: boolean = false;
 </script>
 
-<div class="navbar bg-neutral">
+<div class="bg-neutral">
-  <div class="flex-1">
+  <div class="mx-auto lg:container bg-neutral">
-    <h4>
+    <div class="navbar">
-      <span class="primary">git</span>
+      <div class="flex-1">
-      <span class="">together</span>
+        <h4>
-      <span class="">.xyz</span>
+          <span class="primary">git</span>
-    </h4>
+          <span class="">together</span>
-  </div>
+          <span class="">.xyz</span>
-  <div class="flex-none gap-4">
+        </h4>
-    {#if !nip07plugin}
+      </div>
-      <div class="btn btn-primary normal-case">
+      <div class="flex-none gap-4">
-        Sign up
+        {#if !nip07plugin}
+          <div class="btn btn-primary normal-case">Sign up</div>
+        {/if}
+        <button class="btn btn-outline normal-case">Login</button>
       </div>
-    {/if}
+    </div>
-    <button class="btn btn-outline normal-case">Login</button>
   </div>
 </div>

src/routes/+layout.svelte

@@ -5,4 +5,6 @@
 
 <Navbar />
 
-<slot />
+<div class="mx-auto lg:container">
+  <slot />
+</div>