roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-06-16 18:29:08 +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 {

20
packages/roleypoly-ui/pages/index.js
View file

@ -6,7 +6,7 @@ import redirect from '../lib/redirect'
import TypingDemo from '../components/demos/typing'
import TapDemo from '../components/demos/tap'
import styled from 'styled-components'
import MediaQuery from '../kit/media'
import { md } from '../kit/media'
const HeroBig = styled.h1`
color: var(--c-7);
@ -52,7 +52,7 @@ const FooterLink = styled.a`
const DemoArea = styled.div`
display: flex;
flex-direction: column;
${() => MediaQuery({ md: `flex-direction: row;` })}
${md`flex-direction: row;`}
& > div {
flex: 1;
@ -66,15 +66,13 @@ const DemoArea = styled.div`
const Wrapper = styled.div`
flex-wrap: wrap;
${() => MediaQuery({
md: `
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
min-height: 500px;
`
})}
${md`
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
min-height: 500px;
`}
`
export default class Home extends React.Component {