updated manifest and added png favicon

index.html

@@ -9,7 +9,8 @@
     <meta name="theme-color" content="#181a1c" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-    <link rel="manifest" href='data:application/manifest+json,{ "name": "nvAux", "short_name": "nvAux", "description": "the note-taking app for creative professionals"}' />
+    <link rel="manifest" href='data:application/manifest+json,{ "name": "nvAux", "short_name": "nvAux", "description": "the note-taking app for creative professionals", "icons": [ { "src": "favicon.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/", "display": "standalone", "background_color": "#000", "theme_color": "#181a1c" }' />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon.png">
 
     <link
       rel="icon"

src/App.svelte

@@ -10,7 +10,7 @@
 
 <div class="h-screen w-screen overflow-hidden flex flex-col justify-center items-center {$fullScreen ? '' : 'p-2'}">
 
-    <div class="transition-all text-center" style="{$fullScreen ? 'opacity: 0; height: 0;' : 'height: 230px;' }">
+    <div class="transition-all text-center" style="{$fullScreen ? 'opacity: 0; height: 0;' : 'height: 200px;' }">
       <div style="perspective: {$fullScreen ? '0' : '150'}px;" class="transition-all">
         <h1 style="opacity: 0.9; text-shadow: 1px 3px 5px rgba(0,0,0,0.5); transform: rotateX(11deg) rotateY(0deg); transform-style: preserve-3d;">nvAux</h1>
       </div>
@@ -38,7 +38,7 @@
     margin-bottom: 50px;
   }
   p {
-    max-width: 500px;
+    max-width: 540px;
     font-size: 15px;
     line-height: 24px;
     padding: 0 20px;

src/lib/Settings.svelte

@@ -60,11 +60,13 @@
   </div>
 
   <div class="text-center" style="padding-bottom: 300px;">
-    <p style="margin-top: 100px; text-align: center; color: #5c6269; font-size: 11px;">
-      Designed and Built by
+    <p class="items-center flex" style="margin-top: 100px; text-align: center; color: #5c6269; font-size: 11px;  flex-wrap: wrap;">
+      <span>Designed and Built by</span>
       <span class="relative" style="display: inline-block; height: 30px; width: 80px; top: 13px;"><a href="https://abstractly.io" target="_blank">
-        <AbstractlyLogo />
-      </a></span> The Human Interface Company.
+        <span class="flex items-center">
+          <AbstractlyLogo />
+        </span>
+      </a></span> <span>The Human Interface Company.</span>
     </p>
     <p style="margin-top: 20px; color: #5c6269;">Hack on
       <a href="https://github.com/matterofabstract/nvaux" target="_blank" style="color: #33abc0; text-decoration: underline;">

src/lib/StatusBar.svelte

@@ -17,37 +17,37 @@
 </script>
 
 <div
-  class="status-bar px-2 flex absolute w-full flex-grow-0 transition-all"
-  style="font-size: 12px;  background: var(--app-statusbar-background); bottom: 0; left: 0; color: #606060; border-top: 1px solid var(--app-statusbar-border);"
+  class="status-bar px-2 items-center flex absolute w-full flex-grow-0 transition-all"
+  style="font-size: 12px;  background: var(--app-statusbar-background); bottom: 0; left: 0; color: #606060; border-top: 1px solid var(--app-statusbar-border); height: {$fullScreen ? '45px' : '34px'};"
 >
-  <div class="flex-grow">nvAux v0.1.5-20230719-032</div>
+  <div class="flex-grow flex items-center">nvAux v0.1.5-20230719-032</div>
   <div>
     <button on:click={() => $fullScreen = !$fullScreen} style="margin-right: 10px; color: #ed0178" class="bg-transparent flex items-center outline-none">
-      {#if $fullScreen}
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>
-      {:else}
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
-      {/if}
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize">
+        {#if $fullScreen}
+          <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path>
+        {:else}
+          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
+        {/if}
+      </svg>
     </button>
   </div>
   {#if $showClock}
-     <div>{format(time, 'hh:mm:ss a')}</div>
+    <div class="flex items-center">{format(time, 'hh:mm:ss a')}</div>
   {/if}
 </div>
 
 
 <style>
  @media screen and (max-width: 768px) {
     .status-bar {
-      height: 65px;
       align-items: start;
       padding-top: 10px;
     }
   }
 
   @media screen and (min-width: 769px) {
     .status-bar {
-      height: 35px;
       align-items: center;
     }
   }