mobile all teh things
This commit is contained in:
parent
a8634324fa
commit
736e79f6b3
2 changed files with 28 additions and 8 deletions
20
src/App.css
20
src/App.css
|
|
@ -19,7 +19,9 @@
|
||||||
color: white;
|
color: white;
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
}
|
}
|
||||||
|
.app-left-nav {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.app-title {
|
.app-title {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
@ -33,7 +35,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.deploy-button {
|
.deploy-button {
|
||||||
width: 250px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
.view-src {
|
.view-src {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
|
@ -110,6 +112,10 @@
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
.app-title-wrapper {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
.app-title {
|
.app-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
@ -123,15 +129,25 @@
|
||||||
}
|
}
|
||||||
.app-header {
|
.app-header {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
.app-logo {
|
.app-logo {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
.deploy-button-wrapper {
|
||||||
|
margin-left: 70px;
|
||||||
|
}
|
||||||
.deploy-button {
|
.deploy-button {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
.todo-list-title {
|
.todo-list-title {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
.todo-create-input {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.view-src {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -189,6 +189,8 @@ class App extends Component {
|
||||||
<div className="app">
|
<div className="app">
|
||||||
<header className="app-header">
|
<header className="app-header">
|
||||||
<div className="app-title-wrapper">
|
<div className="app-title-wrapper">
|
||||||
|
<div className="app-title-wrapper">
|
||||||
|
<div className='app-left-nav'>
|
||||||
<img src={logo} className="app-logo" alt="logo" />
|
<img src={logo} className="app-logo" alt="logo" />
|
||||||
<div className='app-title-text'>
|
<div className='app-title-text'>
|
||||||
<h1 className="app-title">Netlify + Fauna DB</h1>
|
<h1 className="app-title">Netlify + Fauna DB</h1>
|
||||||
|
|
@ -196,6 +198,8 @@ class App extends Component {
|
||||||
Using FaunaDB & Netlify functions
|
Using FaunaDB & Netlify functions
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div className='deploy-button-wrapper'>
|
<div className='deploy-button-wrapper'>
|
||||||
<a
|
<a
|
||||||
target='_blank'
|
target='_blank'
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue