mobile updates

src/App.css

@@ -1,8 +1,4 @@
-.App {
+.app-logo {
-
-}
-
-.App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 95px;
   margin-right: 20px;
@@ -16,7 +12,7 @@
 .app-title-text {
   flex-grow: 1;
 }
-.App-header {
+.app-header {
   background-color: #222;
   height: 105px;
   padding: 20px;
@@ -24,14 +20,17 @@
   padding-left: 60px;
 }
 
-.App-title {
+.app-title {
   font-size: 1.5em;
 }
-.App-intro {
+.app-intro {
   font-size: large;
 }
 .deploy-button-wrapper {
   margin-right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .deploy-button {
   width: 250px;
@@ -108,3 +107,31 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+
+@media (max-width: 768px) {
+  .app-title {
+    font-size: 18px;
+  }
+  .app-intro {
+    font-size: 14px;
+  }
+  .todo-list {
+    padding: 20px;
+    padding-top: 10px;
+    width: auto;
+  }
+  .app-header {
+    padding-left: 20px;
+  }
+  .app-logo {
+    height: 60px;
+    margin-right: 10px;
+  }
+  .deploy-button {
+    width: 150px;
+  }
+  .todo-list-title {
+    font-size: 15px;
+  }
+}

src/App.js

@@ -186,13 +186,13 @@ class App extends Component {
   }
   render() {
     return (
-      <div className="App">
+      <div className="app">
-        <header className="App-header">
+        <header className="app-header">
           <div className="app-title-wrapper">
-            <img src={logo} className="App-logo" alt="logo" />
+            <img src={logo} className="app-logo" alt="logo" />
             <div className='app-title-text'>
-              <h1 className="App-title">Netlify + Fauna DB</h1>
+              <h1 className="app-title">Netlify + Fauna DB</h1>
-              <p className="App-intro">
+              <p className="app-intro">
                 Using FaunaDB & Netlify functions
               </p>
             </div>