style tiles

public/global.css

@@ -8,7 +8,7 @@
     --inchworm: #B9E769;
     --corn: #EFEA5A;
     --fuzzy-wuzzy: #C16E70;
-    --old-rose: #C77B7D;
+    --old-rose: #CE8D8F;
 }
 
 html, body {

src/components/AppTile.svelte

@@ -8,19 +8,26 @@
 
 <style>
     .app-tile {
-        padding: 0.8em;
+        padding: 0.5rem;
-        margin: 0.6em;
+        margin: 2rem;
         background-color: var(--fuzzy-wuzzy);
-        border-radius: 1.5rem;
+        border-radius: 2rem;
-        min-width: 2em;
+        min-width: 5rem;
-        min-height: 2em;
+        min-height: 5rem;
         border: none;
-        font-size: 3em;
+        font-size: 2.5em;
         user-select: none;
         box-sizing: border-box;
+        transition-duration: 0.256s;
     }
 
     .app-tile:hover {
         background-color: var(--old-rose);
+        transform: scale(1.087);
+    }
+
+    .app-tile:active {
+        transform: scale(0.95);
+        transition-duration: 0.095s;
     }
 </style>

src/components/AppTileGrid.svelte

@@ -19,6 +19,8 @@
         gap: 0px 0px;
         grid-auto-flow: row dense;
 
+        overflow-y: auto;
+
         width: clamp(10%, 1000px, 90%);
         height: 100%;
         margin: auto;

src/index.js

@@ -4,9 +4,11 @@ const path = require('path');
 const createWindow = () => {
     const mainWindow = new BrowserWindow({
         width: 800,
-        height: 600,
+        height: 600
     });
 
+    mainWindow.setMenuBarVisibility(false);
+
     mainWindow.loadFile(path.join(__dirname, '../public/index.html'));
     mainWindow.webContents.openDevTools();
 };

src/svelte.js

@@ -10,6 +10,15 @@ const app = new App({
             {
                 name: "Ratly"
             },
+            {
+                name: "deadmau5"
+            },
+            {
+                name: "deadmau5"
+            },
+            {
+                name: "deadmau5"
+            },
             {
                 name: "deadmau5"
             }