min size

src-tauri/tauri.conf.json

@@ -53,7 +53,9 @@
         "transparent": true,
         "title": "blek! nox",
         "width": 800,
-        "height": 600
+        "height": 600,
+        "minWidth": 300,
+        "minHeight": 400
       }
     ]
   }

src/App.svelte

@@ -5,5 +5,7 @@
 
 <Titlebar />
 <div class='backdrop'>
+    <div class='delay-show'>
         <Load />
     </div>
+</div>

src/root.css

@@ -13,3 +13,29 @@ body, html {
   border-radius: 16px;
   z-index: 0;
 }
+
+@keyframes delay-show-fade-in {
+  0% {
+    opacity: 0;
+    position: relative;
+    top: 10%;
+  }
+  50% {
+    opacity: 0;
+    position: relative;
+    top: 10%;
+  }
+  to {
+    opacity: 1;
+    position: relative;
+    top: 0%;
+  }
+}
+
+.delay-show {
+  position: relative;
+  top: 10%;
+  display: block;
+  opacity: 1;
+  animation: delay-show-fade-in 1.5s ease;
+}

src/widget/Titlebar/style.module.scss

@@ -39,6 +39,7 @@ $corners: 10px;
         color: #b0b0b0;
         font-size: 12pt;
         padding-left: 12px;
+        width: 100%;
     }
 
     .btns {