save point

matterofabstract · Jul 19, 2023 · 385abd9 · 385abd9
1 parent 371b929
commit 385abd9
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 43 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -9,15 +9,15 @@
 </script>
 
 <div class="h-screen w-screen overflow-hidden flex flex-col justify-center items-center {$fullScreen ? '' : 'p-2'}">
-  {#if !$fullScreen}
-    <div class="absolute text-center" style="top: 10px; opacity: 0.7">
+
+    <div class="transition-all absolute text-center" style="top: 1%; {$fullScreen ? 'opacity: 0; top: -100px;' : 'opacity: 1;' }">
       <h1>nvAux</h1>
       <p>Capture and retrieve ideas at the speed of thought with nvAux, the in-the-zone, aint-nobody-stopping-me note-taking app for creative professionals.</p>
     </div>
-  {/if}
+
   <main
     class="{$fullScreen ? 'fullscreen' : 'windowed'} relative overflow-hidden flex flex-col transition-all"
-    style="{$fullScreen ? $maximumFullScreen ? 'height: 100%; width: 100%;' : 'height: calc(100vh - 8px); width: calc(100vw - 8px); border-radius: 8px;' : ''} background-color: var(--app-background);"
+    style="{$fullScreen ? $maximumFullScreen ? 'height: 100%; width: 100%;' : 'height: calc(100dvh - 15px); width: calc(100vw - 15px); border-radius: 8px;' : ''} background-color: var(--app-background);"
   >
     <OmniBar />
     <NoteList />
@@ -47,7 +47,6 @@
   main.windowed {
     max-width: 690px;
     width: 100%;
-    min-width: 200px;
     height: 50%;
     min-height: 300px;
     border-radius: 8px;

diff --git a/src/lib/Settings.svelte b/src/lib/Settings.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { db, maximumFullScreen, showClock } from './store';
+  import { db, maximumFullScreen, showClock, fullScreen} from './store';
 
   import DownloadNotesZip from './DownloadNotesZip.svelte';
   import ImportNotesZip from './ImportNotesZip.svelte';
@@ -25,39 +25,51 @@
       <p style="color: red">{error.message}</p>
     {/await}
 
-    <h3 class="font-bold" style="margin-top: 25px;">General Preferences</h3>
+    <div style="border: 1px solid #2b2d30; border-radius: 8px; margin-top: 20px; padding: 15px;">
+      <div class="font-bold" style="margin-bottom: 15px">General Preferences</div>
 
-    <div>
-      <label for="showClock"><input id="showClock" type="checkbox" bind:checked={$showClock} /> Show Clock</label>
-    </div>
-    <div>
-      <label for="maxfullscreen"><input id="maxfullscreen" type="checkbox" bind:checked={$maximumFullScreen} /> Maximum Fullscreen</label>
+      <div>
+        <label for="showClock"><input id="showClock" type="checkbox" bind:checked={$showClock} /> Show Clock</label>
+      </div>
+      <div style="margin-top: 15px;">
+        <label for="fullScreen"><input id="fullScreen" type="checkbox" bind:checked={$fullScreen} /> Fullscreen App Mode</label>
+      </div>
+      <div style="margin-top: 3px; margin-left: 15px; opacity: {$fullScreen ? 1 : 0.5}">
+        <label for="maxfullscreen"><input id="maxfullscreen" type="checkbox" disabled={!$fullScreen} bind:checked={$maximumFullScreen} /> Full Bleed</label>
+      </div>
     </div>
 
-    <h3 class="font-bold" style="margin-top: 25px;">Import/Export Notes</h3>
-    <p class="text-gray-400">You can import (and export) a zip file full of .md and .txt files.</p>
 
-    <ImportNotesZip />
-    <DownloadNotesZip />
+    <div style="border: 1px solid #2b2d30; border-radius: 8px; margin-top: 20px; padding: 15px; ">
+      <div class="font-bold">Import/Export Notes</div>
+      <p class="text-gray-400">You can import (and export) a zip file full of .md and .txt files.</p>
+
+      <ImportNotesZip />
+      <DownloadNotesZip />
+    </div>
 
-    <h3 class="font-bold" style="margin-top: 25px;">Dangerzone</h3>
+    <div style="border: 1px solid #673132; border-radius: 8px; margin-top: 20px; padding: 15px; background: #242021;">
+      <div class="font-bold">Dangerzone</div>
 
-    <button
-      on:click={handleDeleteCollection}
-      class="btn"
-      style="background: #b41111;">Reset Database</button
-    >
+      <button
+        on:click={handleDeleteCollection}
+        class="btn"
+        style="background: #b41111; margin-top: 10px;">Reset Database</button
+      >
+    </div>
   </div>
 
-  <p style="margin-top: 100px;">
-    Designed and Built by
-    <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.
-  </p>
-  <p style="margin-top: 10px;">Hack on
-    <a href="https://github.com/matterofabstract/nvaux" target="_blank" style="color: #ed0078; text-decoration: underline;">
-      nvAux @ GitHub
-    </a>
-  </p>
+  <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
+      <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.
+    </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;">
+        nvAux @ GitHub
+      </a>
+    </p>
+  </div>
 </div>
diff --git a/src/lib/StatusBar.svelte b/src/lib/StatusBar.svelte
@@ -20,16 +20,16 @@
   class="px-2 flex items-center absolute w-full flex-grow-0"
   style="font-size: 12px; height: 35px; background: var(--app-statusbar-background); bottom: 0; left: 0; color: #606060; border-top: 1px solid var(--app-statusbar-border);"
 >
-  <div class="flex-grow">nvAux v0.1.5-20230719-001</div>
-  <div>
+  <div class="flex-grow">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}
     </button>
-  </div>
+  </div> -->
   {#if $showClock}
      <div>{format(time, 'hh:mm:ss a')}</div>
   {/if}

diff --git a/src/lib/style.css b/src/lib/style.css
@@ -12,7 +12,7 @@ a { color: inherit; text-decoration: inherit; }
 button, input, optgroup, select, textarea { padding: 0; line-height: inherit; color: inherit; }
 pre, code, kbd, samp { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
 
-html, body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 0.9rem; height: 100vh; width: 100vw; overflow: hidden;}
+html, body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 0.9rem; height: 100dvh; width: 100dvw; overflow: hidden;}
 .absolute { position: absolute; }
 .bg-gray-200 { background-color: #edf2f7; }
 .bg-gray-800 { background-color: #2d3748; }
@@ -28,7 +28,7 @@ html, body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-s
 .flex-grow-0 { flex-grow: 0; }
 .h-\[10px\] { height: 10px; }
 .h-full { height: 100%; }
-.h-screen {  height: 100vh; }
+.h-screen {  height: 100dvh; }
 .hidden { display: none; }
 .items-center { align-items: center; }
 .justify-between { justify-content: space-between; }
@@ -63,20 +63,18 @@ html, body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-s
 .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .w-full { width: 100%; }
 .w-screen {  width: 100vw; }
-.transition-all { transition-property: all; transition-duration: 500ms; transition-timing-function: ease-in-out; }
+.transition-all { transition-property: all; transition-duration: 500ms; transition-timing-function: ease; }
 
-.btn { padding: 3px 10px; border-radius: 3px; font-size: 14px; }
+.btn { padding: 12px 20px; border-radius: 3px; font-size: 14px; }
 
 
 body {
 	background: linear-gradient(-45deg, #ea8060, #e4578d, #a1d0e1, #70e1c7);
 	background-size: 400% 400%;
 	animation: gradient 40s ease-in-out infinite;
-	height: 100vh;
 	/* background: var(--background); */
 	/* background: var(--background-gradient); */
 	color: var(--text-color);
-	/* transition: background-color 0.3s, color 0.3s; */
 }
 
 /* Light/Dark Mode Support */
@@ -113,7 +111,6 @@ body {
 		background: linear-gradient(-45deg, #714436, #72354d, #334169, #4c746a);
 		background-size: 400% 400%;
 		animation: gradient 40s ease-in-out infinite;
-		height: 100vh;
 	}
 }