Fix for sw.js

Style fixes

package-lock.json

@@ -4730,6 +4730,12 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "reset-css": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/reset-css/-/reset-css-5.0.1.tgz",
+      "integrity": "sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q==",
+      "dev": true
+    },
     "resolve-cwd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "google-fonts-webpack-plugin": "^0.4.4",
     "html-webpack-plugin": "^3.2.0",
     "idb-keyval": "^3.2.0",
+    "reset-css": "^5.0.1",
     "serviceworker-webpack-plugin": "^1.0.1",
     "style-loader": "^1.1.3",
     "svelte": "^3.4.1",

src/index.js

@@ -1,5 +1,7 @@
 import App from './ncounter/App.svelte';
 import runtime from 'serviceworker-webpack-plugin/lib/runtime';
+import 'reset-css/reset.css';
+import './ncounter/site.css';
 
 if ('serviceWorker' in navigator) {
     const registration = runtime.register();

src/ncounter/App.svelte

@@ -19,7 +19,6 @@
 <script>
 import Counter from './Counter.svelte';
 import { counters } from './db.js';
-import './site.css';
 
 let showAddDialog = false;
 
@@ -54,6 +53,10 @@ function add(){
 </script>
 <style>
     .add {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         position: fixed;
         bottom: 15px;
         right: 15px;
@@ -87,6 +90,6 @@ function add(){
     }
 
     .app {
-        margin-bottom: 60px;
+        padding: 5px 5px 60px 5px;
     }
 </style>

src/ncounter/site.css

@@ -1,10 +1,31 @@
+/* Box sizing reset */
+html {
+    box-sizing: border-box;
+}
+
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
+/* Screen fill */
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
 body {
-    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    margin: 0;
+}
+
+/* Fonts */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 button {
     background: 0;
     border: 0;
+    height: 36px;
 }
 
 .dialog {
@@ -38,3 +59,8 @@ button {
     display: flex;
     flex-wrap: wrap;
 }
+
+input[type="text"],
+input[type="number"] {
+    font-size: 16px;
+}

webpack.common.js

@@ -20,6 +20,7 @@ module.exports = {
         }),
         new ServiceWorkerWebpackPlugin({
             entry: path.join(__dirname, 'src/sw.js'),
+            publicPath: './'
         })
     ],
     output: {