add favicon, improve mobile access, add GA

junyi2022 · Apr 7, 2024 · 5b05910 · 5b05910
1 parent 3773119
commit 5b05910
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 9 deletions.
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/css/chart-style.css b/css/chart-style.css
@@ -65,8 +65,8 @@
 
 #safe-lead-level-description {
     position: relative;
-    right: -2.5rem;
-    bottom: 5rem;
+    right: -2.5em;
+    bottom: 4rem;
     box-sizing: border-box;
     font-size: 0.8rem;
     width: 9rem;
@@ -77,7 +77,7 @@
 
 
 /* mobile compatibility  */
-
+/* phone vertical */
 @media screen and (width <= 450px) {
 
   #lead-level-chart {
@@ -87,16 +87,32 @@
 
   #safe-lead-level-description {
     bottom: 4rem;
+    right: -4.5em;
   }
 
 }
 
-@media screen and (max-width: 1000px) and (min-width: 450px) {
+@media screen and (width <= 300px) {
+
+  #lead-level-chart {
+    padding-top: 2.5rem;
+
+  }
+
+  #safe-lead-level-description {
+    bottom: 4rem;
+    right: -0.5em;
+  }
+
+}
+
+/* phone horizontal, except iPad vertical */
+@media screen and (max-width: 1000px) and (min-width: 450px) and (max-height: 700px) {
 
   #safe-lead-level-description {
     position: relative;
-    right: -2rem;
-    bottom: 4.5rem;
+    right: -25px;
+    bottom: 5rem;
     box-sizing: border-box;
     font-size: 0.8rem;
     width: 9rem;
@@ -108,4 +124,13 @@
 
   }
 
+}
+
+/* computer with short screen */
+@media screen and (max-height: 750px) {
+
+  #lead-level-chart {
+      padding-top: 3rem;
+
+  }
 }
diff --git a/css/style.css b/css/style.css
@@ -142,6 +142,7 @@ a {
 
 
 /* mobile compatibility */
+/* phone vertical */
 @media screen and (width <= 450px) {
 
     header {
@@ -200,9 +201,10 @@ a {
         height: calc(60% - 8px - 2.5vh);
         min-height: 150px;
     }
-  }
+}
 
-  @media screen and (max-width: 1000px) and (min-width: 450px) {
+/* phone horizontal, except iPad vertical */
+@media screen and (max-width: 1000px) and (min-width: 450px) and (max-height: 700px) {
 
     .address-section {
         /* height: 85px; */
@@ -231,4 +233,21 @@ a {
     .right-side {
         overflow: auto;
     }
-  }
+}
+
+/* iPad vertical */
+@media screen and (max-width: 1000px) and (min-width: 450px) and (max-height: 1000px) {
+
+    .address-section {
+        /* height: 85px; */
+        min-height: 85px;
+    }
+
+    .lead-level-chart-wrapper {
+        height: 60%;
+    }
+
+    .right-side {
+        overflow: auto;
+    }
+}
diff --git a/favicon-16x16.png b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -19,6 +19,22 @@
         <link rel="stylesheet" href="css/right-style.css">
         <link rel="stylesheet" href="css/input-style.css">
         <link rel="stylesheet" href="css/map-style.css">
+
+        <!-- add favicon -->
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+        <link rel="manifest" href="/site.webmanifest">
+
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-WJ7Q8D4J9J"></script>
+        <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-WJ7Q8D4J9J');
+        </script>
     </head>
 
     <body>

diff --git a/site.webmanifest b/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}