Make website responsive
This commit is contained in:
Niklas von Hertzen
parent
a555dfc085
commit
bf03cf5237
|
|
@ -18,9 +18,14 @@
|
|||
padding: 20px;
|
||||
}
|
||||
.div1 {
|
||||
background: darkgreen;
|
||||
background: darkred;
|
||||
color: white;
|
||||
}
|
||||
@media (min-width: 10px) {
|
||||
.div1 {
|
||||
background: darkgreen;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.querySelector('#style').sheet.insertRule(
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
"scripts": {
|
||||
"copybuild": "mkdirp public/dist && cpy ../dist/*.js public/dist",
|
||||
"build": "npm run copybuild && gatsby build",
|
||||
"develop": "gatsby develop",
|
||||
"start": "gatsby develop",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import React, {Component} from 'react';
|
||||
import Link from 'gatsby-link';
|
||||
import logo from '../images/logo.svg';
|
||||
import menu from '../images/ic_menu_black_24px.svg';
|
||||
|
||||
const lineLinkStyle = {
|
||||
lineHeight: '44px',
|
||||
|
|
@ -16,15 +17,17 @@ const lineLinkStyle = {
|
|||
};
|
||||
|
||||
const navStyle = {
|
||||
height: '100%',
|
||||
width: '300px',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
'@media(min-width: 1000px)': {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '300px',
|
||||
boxShadow:
|
||||
'0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)',
|
||||
height: '100%'
|
||||
},
|
||||
fontSize: '13px',
|
||||
backgroundColor: '#fff',
|
||||
boxShadow:
|
||||
'0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)'
|
||||
backgroundColor: '#fff'
|
||||
};
|
||||
|
||||
const links = [
|
||||
|
|
@ -36,31 +39,70 @@ const links = [
|
|||
{href: '/faq', text: 'FAQ'}
|
||||
];
|
||||
|
||||
export default () =>
|
||||
<div css={navStyle}>
|
||||
<Link to="/" css={{background: '#558b2f', display: 'block', padding: '24px 30px 24px'}}>
|
||||
<img src={logo} css={{margin: 0}} />
|
||||
</Link>
|
||||
<ul
|
||||
style={{
|
||||
listStyle: 'none',
|
||||
margin: 0,
|
||||
padding: 0
|
||||
}}
|
||||
>
|
||||
{links.map(({href, text}, i) =>
|
||||
<li style={{padding: 0, margin: 0}} key={i}>
|
||||
<Link
|
||||
to={href}
|
||||
css={lineLinkStyle}
|
||||
activeStyle={{
|
||||
backgroundColor: '#7cb342',
|
||||
color: '#fff'
|
||||
export default class Navigation extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {open: false};
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div css={navStyle}>
|
||||
<div
|
||||
css={{
|
||||
background: '#558b2f',
|
||||
alignItems: 'center',
|
||||
padding: '24px 30px 24px 0px',
|
||||
display: 'flex',
|
||||
'@media(min-width: 1000px)': {
|
||||
padding: '24px 30px 24px 30px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={menu}
|
||||
onClick={() => this.setState(s => ({open: !s.open}))}
|
||||
css={{
|
||||
width: '50px',
|
||||
cursor: 'pointer',
|
||||
margin: '0 20px 0',
|
||||
display: 'block',
|
||||
'@media(min-width: 1000px)': {
|
||||
display: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
/>
|
||||
<Link to="/">
|
||||
<img src={logo} css={{margin: 0}} />
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>;
|
||||
</div>
|
||||
|
||||
<ul
|
||||
css={{
|
||||
display: this.state.open ? 'block' : 'none',
|
||||
listStyle: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
'@media(min-width: 1000px)': {
|
||||
display: 'block'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{links.map(({href, text}, i) =>
|
||||
<li style={{padding: 0, margin: 0}} key={i}>
|
||||
<Link
|
||||
to={href}
|
||||
css={lineLinkStyle}
|
||||
activeStyle={{
|
||||
backgroundColor: '#7cb342',
|
||||
color: '#fff'
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 210 B |
|
|
@ -55,7 +55,16 @@ export default ({data}) => {
|
|||
Screenshots with JavaScript
|
||||
</h4>
|
||||
|
||||
<div css={{display: 'flex', justifyContent: 'center'}}>
|
||||
<div
|
||||
css={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
'@media(min-width: 1000px)': {
|
||||
flexDirection: 'row'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h4>HTML</h4>
|
||||
<div
|
||||
|
|
@ -101,14 +110,25 @@ export default ({data}) => {
|
|||
Documentation
|
||||
</Link>
|
||||
</div>
|
||||
<div css={{display: 'flex'}}>
|
||||
<div
|
||||
css={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'@media(min-width: 1000px)': {
|
||||
flexDirection: 'row'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{
|
||||
flex: 1,
|
||||
backgroundColor: '#558b2f',
|
||||
padding: '10px 20px',
|
||||
borderRadius: '10px',
|
||||
marginRight: '5px'
|
||||
marginBottom: '10px',
|
||||
'@media(min-width: 1000px)': {
|
||||
marginRight: '5px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Carbon />
|
||||
|
|
@ -116,12 +136,16 @@ export default ({data}) => {
|
|||
<div
|
||||
css={{
|
||||
flex: 1,
|
||||
marginLeft: '5px',
|
||||
|
||||
backgroundColor: '#558b2f',
|
||||
padding: '10px 20px',
|
||||
borderRadius: '10px',
|
||||
textAlign: 'left',
|
||||
marginRight: '5px'
|
||||
marginBottom: '10px',
|
||||
'@media(min-width: 1000px)': {
|
||||
marginLeft: '5px',
|
||||
marginRight: '5px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<h6>Install NPM</h6>
|
||||
|
|
@ -143,11 +167,14 @@ export default ({data}) => {
|
|||
<div
|
||||
css={{
|
||||
flex: 1,
|
||||
marginLeft: '5px',
|
||||
backgroundColor: '#558b2f',
|
||||
padding: '10px 20px',
|
||||
borderRadius: '10px',
|
||||
textAlign: 'left'
|
||||
textAlign: 'left',
|
||||
marginBottom: '10px',
|
||||
'@media(min-width: 1000px)': {
|
||||
marginLeft: '5px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<h5>Connect</h5>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@ export default ({data}) => {
|
|||
<Navigation />
|
||||
<div
|
||||
css={{
|
||||
marginLeft: '300px',
|
||||
'@media(min-width: 1000px)': {
|
||||
marginLeft: '300px'
|
||||
},
|
||||
display: 'flex',
|
||||
minHeight: '100vh',
|
||||
flexDirection: 'column'
|
||||
|
|
@ -37,10 +39,23 @@ export default ({data}) => {
|
|||
<div css={{maxWidth: '960px'}}>
|
||||
<div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
|
||||
<div css={{flex: 1}}>
|
||||
<h1 css={{padding: '20px 0'}}>
|
||||
<h1
|
||||
css={{
|
||||
padding: '20px 0',
|
||||
fontSize: '2.8rem',
|
||||
'@media(min-width: 1000px)': {fontSize: '4.2rem'}
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.title}
|
||||
</h1>
|
||||
<h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}>
|
||||
<h4
|
||||
css={{
|
||||
fontWeight: 300,
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: '1.8rem',
|
||||
'@media(min-width: 1000px)': {fontSize: '2.28rem'}
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.description}
|
||||
</h4>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue