1
0

Customized layout

This commit is contained in:
Christer Warén 2021-01-04 15:54:44 +02:00
parent 1dc82a81f5
commit b506431136
2 changed files with 18 additions and 13 deletions

View File

@ -3,7 +3,7 @@
} }
.App-logo { .App-logo {
height: 40vmin; height: 60px;
pointer-events: none; pointer-events: none;
} }
@ -15,7 +15,7 @@
.App-header { .App-header {
background-color: #282c34; background-color: #282c34;
min-height: 100vh; min-height: 60px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -24,6 +24,17 @@
color: white; 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 { .App-link {
color: #61dafb; color: #61dafb;
} }

View File

@ -1,23 +1,17 @@
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import Timer from './Timer';
import './Timer.css';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
<img src={logo} className="App-logo" alt="logo" /> <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> </header>
<main className="App-content">
<Timer />
</main>
</div> </div>
); );
} }