Merge pull request #59 from pvdthings/dev

v0.13 - Bookmarks, App Layout, New Look & Feel

src/app.css

@@ -4,33 +4,17 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer utilities {
-    .brutal {
-        @apply border-2 border-black rounded-md;
-    }
-
-    .hovers-static {
-        box-shadow: 2px 2px 0 #000000;
-        -webkit-box-shadow: 2px 2px 0px 0px #000000;
-    }
-
-    .hovers {
-        box-shadow: 2px 2px 0 #000000;
-        -webkit-box-shadow: 2px 2px 0px 0px #000000;
-    }
-
-    .hovers-above,
-    .hovers:focus,
-    .hovers:hover {
-        box-shadow: 3px 3px 0 #000000;
-        -webkit-box-shadow: 3px 3px 0px 0px #000000;
-    }
-}
-
 :root {
     font-family: 'Roboto Mono', monospace;
 }
 
 body {
     @apply font-body;
+}
+
+@supports(padding:max(0px)) {
+    body, header, footer {
+        padding-left: min(0vmin, env(safe-area-inset-left));
+        padding-right: min(0vmin, env(safe-area-inset-right));
+    }
 }

src/lib/components/AppBar.svelte

@@ -0,0 +1,13 @@
+<div class="navbar fixed top-0 left-0 right-0 z-50 shadow-lg bg-indigo-300">
+  <div class="navbar-start">
+    <slot name="start" />
+  </div>
+  <div class="navbar-center">
+    <a href="https://pvdthings.coop">
+      <img src="/PVD_Things_Logo_White.png" alt="PVD Things" class="h-16 lg:h-20" />
+    </a>
+  </div>
+  <div class="navbar-end">
+    <slot name="end" />
+  </div>
+</div>

src/lib/components/Button/Button.svelte

@@ -8,7 +8,6 @@
     export let selected: boolean = false;
     export let theme: ButtonTheme = ButtonTheme.default;
     export let size: ButtonSize = ButtonSize.normal;
-    export let flat: boolean = false;
 
     const padding = size === ButtonSize.normal ? 'px-3 py-1' : 'px-2';
 
@@ -27,7 +26,7 @@
     class:defaultToggled={isToggled(ButtonTheme.default)}
     class:primary={theme === ButtonTheme.primary}
     class:primaryToggled={isToggled(ButtonTheme.primary)}
-    class="{padding} rounded brutal {!flat && 'hovers'} font-bold font-display outline-none">
+    class="{padding} rounded-md border border-gray-500 font-semibold font-display outline-none">
         {#if icon && !selected}
             <img class="icon" src={icon} alt={text} />
         {/if}
@@ -38,16 +37,20 @@
 </button>
 
 <style>
+    button {
+        @apply shadow-high active:shadow-lowest active:transition-shadow active:duration-75;
+    }
+
     button.default {
-        @apply bg-indigo-100 hover:bg-indigo-50;
+        @apply bg-white hover:bg-indigo-50;
     }
 
     button.defaultToggled {
         @apply bg-primary !important;
     }
 
     button.primary {
-        @apply bg-primary;
+        @apply bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-500 border-indigo-700 text-white;
     }
 
     button.primaryToggled {

src/lib/components/Chooser/Chooser.css

@@ -1,3 +1,3 @@
 button.chooser-button {
-  @apply px-3 py-1 font-bold font-display text-left outline-none;
+  @apply px-3 py-1 font-semibold font-display text-left outline-none;
 }

src/lib/components/Chooser/Chooser.svelte

@@ -37,7 +37,7 @@
 <div class="relative h-11" on:click|stopPropagation={() => {}} on:keypress={() => {}}>
 	<button
 		on:click={toggleDropdown}
-		class="chooser-button bg-indigo-100 hover:bg-indigo-50 h-full w-48 brutal hovers"
+		class="chooser-button bg-white hover:bg-indigo-50 rounded-md border border-gray-500 shadow-high h-full w-48"
 	>
 		<img
 			class="inline mr-1"

src/lib/components/Chooser/ChooserBody.svelte

@@ -15,7 +15,7 @@
 
 <div
   class:body-hidden={hidden}
-  class="fixed top-0 left-0 w-full h-full overflow-hidden md:h-fit md:absolute bg-indigo-50 md:brutal md:hovers-above md:rounded-md flex flex-col z-50"
+  class="fixed top-0 left-0 w-full h-full overflow-hidden md:h-fit md:absolute bg-indigo-50 md:border md:border-gray-500 md:shadow-highest md:rounded-md flex flex-col z-50 md:z-40"
 >
   <div class="md:hidden">
     <div class="p-4 bg-primary text-2xl font-bold text-left sticky top-0">
@@ -28,7 +28,7 @@
   </div>
   <button
 		on:click={onClose}
-		class="chooser-button hidden md:block bg-primary h-11 w-full border-b-2 border-black"
+		class="chooser-button hidden md:block bg-primary h-11 w-full border-b border-gray-500"
 	>
     <img
       class="inline rotate-180 mr-1"

src/lib/components/HomeButton.svelte

@@ -0,0 +1,16 @@
+<a href="https://www.pvdthings.coop" class="btn btn-ghost btn-circle" aria-label="Home">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    class="w-6 h-6 lg:w-7 lg:h-7"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+    />
+  </svg>
+</a>

src/lib/components/TextInput.svelte

@@ -20,7 +20,7 @@
     on:change
     on:keyup={keyReleased}
     class:invalid
-    class="w-full px-4 py-2 pl-10 brutal hovers outline-none {customClass}"
+    class="w-full px-4 py-2 pl-10 rounded-md border border-gray-500 shadow-high outline-none {customClass}"
 />
 
 <style lang="postcss">

src/lib/components/index.ts

@@ -4,5 +4,4 @@ export { default as Column } from "./Column.svelte";
 export { default as Head } from "./Head.svelte";
 export { default as LoadingIndicator } from "./LoadingIndicator.svelte";
 export { default as Row } from "./Row.svelte";
-export { default as TextInput } from "./TextInput.svelte";
-export { default as Title } from "./Title.svelte";
+export { default as TextInput } from "./TextInput.svelte";

src/lib/components/things/BookmarkIcon.svelte

@@ -0,0 +1,8 @@
+<script>
+  let className;
+  export { className as class };
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class={className}>
+  <path fill-rule="evenodd" d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L12 18.089l-7.165 3.583A.75.75 0 013.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93z" clip-rule="evenodd" />
+</svg>