diff --git a/src/App.css b/src/App.css index 04732bd..d53a013 100644 --- a/src/App.css +++ b/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; + } +} diff --git a/src/App.js b/src/App.js index 1ed12d2..8f010ac 100644 --- a/src/App.js +++ b/src/App.js @@ -186,13 +186,13 @@ class App extends Component { } render() { return ( -
+
Using FaunaDB & Netlify functions