banished styles to legacy

index.html

@@ -5,25 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Chaotic Backup">
     <link rel="stylesheet" type="text/css" href="/public/css/legacy.css">
-    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
     <style>
-      html, body, div, span, a, p, ul, li, h1 {
-        margin: 0;
-        border: 0;
-        padding: 0;
-        /*box-sizing: inherit;*/
-/*        font: inherit;*/
-        /*text-decoration: inherit;*/
-        /*text-align: inherit;*/
-        /*color: inherit;*/
-        /*background: transparent;*/
-      }
-      a {
-        color: inherit;
-        text-decoration: inherit;
-      }
       /*pass window height (w/o scroll bars) down to react app, note can't use vh because that includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/
       html, body { height: 100%; }
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: "Roboto", sans-serif;
+      }
       html { 
         background-color:#1F1F1F; 
         color: grey;

public/css/legacy.css

@@ -1,3 +1,20 @@
+html, body, div, span, a, p, ul, li, h1 {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  /*box-sizing: inherit;*/
+/*        font: inherit;*/
+  /*text-decoration: inherit;*/
+  /*text-align: inherit;*/
+  /*color: inherit;*/
+  /*background: transparent;*/
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+
 @media only screen and (max-width: 975px) {
   .legacy.content {
     margin-top: 36px;

src/components/app.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import loadable from '@loadable/component';
 
@@ -35,6 +35,15 @@ const MobileCollection = loadable(
 export default function App() {
   const isMobile = useCheckMobileScreen();
 
+  useEffect(() => {
+    console.log(document.styleSheets);
+    if (isMobile) {
+      document.styleSheets[0].disabled = true;
+    } else {
+      document.styleSheets[0].disabled = false;
+    }
+  }, [isMobile]);
+
   return (
     <Router>
       <Switch>