animation

src/client/App.svelte

@@ -28,28 +28,30 @@
 <style>
   .wrapper {
     position: fixed;
-    color: #111;
-    top: 0;
+    color: #000;
+    bottom: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: #fefefe;
+    background-color: hsla(0, 0%, 100%, 0.975);
     z-index: 999999999;
     font-size: 1rem;
     padding: 1rem;
     user-select: none;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
       'Helvetica Neue', sans-serif;
+    transition: all 300ms ease-out;
   }
 
   .wrapper.hidden {
-    display: none;
+    /* display: none; */
+    bottom: -100vh;
   }
 
   @media (prefers-color-scheme: dark) {
     .wrapper {
-      background-color: #111;
-      color: #eee;
+      background-color: hsl(0, 0%, 0%, 0.925);
+      color: #ffffff;
     }
   }
 
@@ -76,10 +78,12 @@
     display: block;
     cursor: pointer;
     padding: 0.1em;
+    opacity: 0.6;
     transition: all 100ms ease-in-out;
   }
 
   .dismiss .links a:hover {
-    transform: translateX(-0.5em);
+    transform: translateX(-0.25em);
+    opacity: 1;
   }
 </style>