mobile all teh things

This commit is contained in:
davidwells 2018-06-12 16:37:00 -07:00
parent a8634324fa
commit 736e79f6b3
2 changed files with 28 additions and 8 deletions

View file

@ -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;
}
} }

View file

@ -189,12 +189,16 @@ 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">
<img src={logo} className="app-logo" alt="logo" /> <div className="app-title-wrapper">
<div className='app-title-text'> <div className='app-left-nav'>
<h1 className="app-title">Netlify + Fauna DB</h1> <img src={logo} className="app-logo" alt="logo" />
<p className="app-intro"> <div className='app-title-text'>
Using FaunaDB & Netlify functions <h1 className="app-title">Netlify + Fauna DB</h1>
</p> <p className="app-intro">
Using FaunaDB & Netlify functions
</p>
</div>
</div>
</div> </div>
<div className='deploy-button-wrapper'> <div className='deploy-button-wrapper'>
<a <a