From b5064311364add89ec39ec070df0bea4fe74f662 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christer=20War=C3=A9n?= <cwchristerw@gmail.com>
Date: Mon, 4 Jan 2021 15:54:44 +0200
Subject: [PATCH] Customized layout

---
 src/App.css | 15 +++++++++++++--
 src/App.js  | 16 +++++-----------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 74b5e05..23edc14 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,7 +3,7 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 60px;
   pointer-events: none;
 }
 
@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -24,6 +24,17 @@
   color: white;
 }
 
+.App-content {
+  background-color: #373b43;
+  min-height: calc(100vmin - 60px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
 .App-link {
   color: #61dafb;
 }
diff --git a/src/App.js b/src/App.js
index 3784575..ab6e762 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,17 @@
 import logo from './logo.svg';
 import './App.css';
+import Timer from './Timer';
+import './Timer.css';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
       </header>
+      <main className="App-content">
+        <Timer />
+      </main>
     </div>
   );
 }