From 0feedf3a4bd7325bc8c37e1cc28ace4c05bfa472 Mon Sep 17 00:00:00 2001
From: CheddarCrisp <cheddar@crispbyte.dev>
Date: Thu, 6 Feb 2020 14:45:09 -0500
Subject: [PATCH] Fix for sw.js Style fixes

---
 package-lock.json       |  6 ++++++
 package.json            |  1 +
 src/index.js            |  2 ++
 src/ncounter/App.svelte |  7 +++++--
 src/ncounter/site.css   | 28 +++++++++++++++++++++++++++-
 webpack.common.js       |  1 +
 6 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d72bf5..7db1cdb 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index adb38ff..517dc4e 100644
--- a/package.json
+++ b/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",
diff --git a/src/index.js b/src/index.js
index 8adeae1..9b58542 100644
--- a/src/index.js
+++ b/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();
diff --git a/src/ncounter/App.svelte b/src/ncounter/App.svelte
index 9fed53e..896de3b 100644
--- a/src/ncounter/App.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/ncounter/site.css b/src/ncounter/site.css
index f6bb8ce..f3d3894 100644
--- a/src/ncounter/site.css
+++ b/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 {
@@ -37,4 +58,9 @@ button {
 
     display: flex;
     flex-wrap: wrap;
+}
+
+input[type="text"],
+input[type="number"] {
+    font-size: 16px;
 }
\ No newline at end of file
diff --git a/webpack.common.js b/webpack.common.js
index 24f6a93..16553f5 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -20,6 +20,7 @@ module.exports = {
         }),
         new ServiceWorkerWebpackPlugin({
             entry: path.join(__dirname, 'src/sw.js'),
+            publicPath: './'
         })
     ],
     output: {