pwa

abadi199 · Jan 30, 2020 · bc5c341 · bc5c341
1 parent aa7fe09
commit bc5c341
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 8 deletions.
diff --git a/images/icons-192.png b/images/icons-192.png
diff --git a/images/icons-512.png b/images/icons-512.png
diff --git a/images/icons.png b/images/icons.png
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
   <body>
     <div id="app"></div>
     <script src="./src/index.re"></script>
+    <link rel="manifest" href="./manifest.webmanifest" />
     <link
       href="https://fonts.googleapis.com/css?family=Quicksand&display=swap"
       rel="stylesheet"

diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -0,0 +1,22 @@
+{
+  "short_name": "Phonics",
+  "name": "Phonics",
+  "icons": [
+    {
+      "src": "/images/icons-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/images/icons-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "",
+  "background_color": "#DFDFDF",
+  "display": "standalone",
+  "scope": "",
+  "orientation": "landscape",
+  "theme_color": "#FFA229"
+}
diff --git a/src/style.scss b/src/style.scss
@@ -39,7 +39,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 100px;
     cursor: pointer;
     border-top-style: solid;
 
@@ -81,10 +80,12 @@
     display: grid;
     position: relative;
     .phoneme {
+      border-top-width: 20px;
+      border-radius: 15px;
       width: 100px;
       height: 150px;
       margin: 10px 10px;
-      border-top-width: 20px;
+      font-size: 60px;
     }
     .selected {
       background: rgba(0, 0, 0, 0.15);
@@ -96,11 +97,12 @@
       width: 100%;
       align-items: center;
       .phoneme {
-        border-top-width: 10px;
+        border-top-width: 15px;
+        border-radius: 10px;
         margin: 0 40px;
-        width: 100px;
-        height: 150px;
-        font-size: 50px;
+        width: 80px;
+        height: 100px;
+        font-size: 40px;
         margin: 10px 10px;
       }
     }
@@ -118,9 +120,9 @@
     .phoneme {
       border-top-width: 40px;
       margin: 0 20px;
-      width: 200px;
+      width: 250px;
       height: 300px;
-      font-size: 250px;
+      font-size: 150px;
     }
   }
 }