roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-06-17 10:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[ui] add media query template literals, convert everything to the superior.

Browse source
This commit is contained in:
41666 2019-04-03 13:59:13 -05:00
parent c40c04e55e
commit f2bb6a7b18
No known key found for this signature in database
GPG key ID: BC51D07640DC10AF
10 changed files with 90 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

17
packages/roleypoly-ui/pages/_error.js
View file

@ -1,6 +1,6 @@
import * as React from 'react'
import styled from 'styled-components'
import MediaQuery from '../kit/media'
import { md } from '../kit/media'
export const Overlay = styled.div`
opacity: 0.6;
@ -23,9 +23,12 @@ const ResponsiveSplitter = styled.div`
line-height: 1.6;
font-size: 1.3em;
flex-direction: column;
${() => MediaQuery({
md: `flex-direction: row; min-height: 100vh; position: relative; top: -50px;`
})}
${md`
flex-direction: row;
min-height: 100vh;
position: relative;
top: -50px;
`}
& > div {
margin: 1rem;
@ -33,7 +36,7 @@ const ResponsiveSplitter = styled.div`
& section {
text-align: center;
${() => MediaQuery({ md: `text-align: left;` })}
${md`text-align: left;`}
}
`
@ -46,9 +49,7 @@ const Code = styled.h1`
margin: 0;
padding: 0;
font-size: 4em;
${() => MediaQuery({
md: `font-size: 2em;`
})}
${md`font-size: 2em;`}
`
export default class CustomErrorPage extends React.Component {