Zoom out when on small screens :)

This does absolutely nothing on firefox, but works great in safari and chrome. There are tricks to make zooming happen on firefox, but it involves stuff like this ``` html { -moz-transform: scale(0.7); -moz-transform-origin: 0 0; } @-moz-document url-prefix() { html { width: 142.857%; } } ``` amd after that some things still have a very hard time staying aligned with the screen edges (such as the sidebar). So I've left that as a future exercise.
2020-03-06 12:04:29 +01:00
parent ea4810c32d
commit f1ef39ec8c
3 changed files with 25 additions and 2 deletions
@@ -51,6 +51,29 @@
      href="%PUBLIC_URL%/safari-pinned-tab.svg"
      color="#5bbad5"
    />
+    <style>
+      @media only screen {
+        html {
+          zoom: 0.7;
+        }
+      }
+
+      @media only screen and (min-width: 800px) {
+        html {
+          zoom: 0.85;
+        }
+      }
+
+      @media only screen and (min-width: 1200px) {
+        html {
+          zoom: 1;
+        }
+      }
+
+      #root {
+        min-height: 100%;
+      }
+    </style>
    <title>Backstage</title>
  </head>
  <body style="margin: 0">