mikeyamadeo

const InlineStyled = () =>
  <div style={{display: 'flex', padding: '2em', backgroundColor: 'cyan'}}>
    <h1 style={{color: 'white', fontFamily: 'monospace'}}>
      Gotta Catch Em All
    </h1>
  </div>

mikeyamadeo

import { StyleSheet, css } from 'aphrodite'

const styles = StyleSheet.create({
  base: {
    display: 'flex',
    ':hover': {
      opacity: 0.5 
    }
  }
})

mikeyamadeo

import { colors } from 'App/style/settings'
import { StyleSheet, css } from 'aphrodite'
import BtnBase from 'App/shared/el.Btn'

const styles = StyleSheet.create({
  common: {
    fontSize: '1.2em',
    textTransform: 'uppercase'
  },
  main: {

mikeyamadeo

import { StyleSheet, css } from 'aphrodite'
import { colors, spacing, viewport } from 'App/style/settings'

const styles = StyleSheet.create({
  container: {
    border: `solid 1px ${colors.primary}`,
    [viewport.narrow]: {
      padding: spacing.tiny
    }
  }

mikeyamadeo

import { StyleSheet, css } from 'aphrodite'

const styles = StyleSheet.create({
  base: {
    border: 'none',
    outline: 'none'
  }
})

const Button = ({children, className, ...rest}) =>

mikeyamadeo

@import 'settings';

html {
 font-family: var(--font-primary);
}

ol, ul {
 list-style: none;
}

mikeyamadeo

* {
 box-sizing: inherit;
}

body,
h1, h2, h3, h4, h5, h6,
dl, dd, ol, ul,
form, fieldset, legend {
 margin: 0;
 padding: 0;

mikeyamadeo

import { baseFontSize } from ‘./settings.js’

export const pxToEm = (px) =>
 `${px / baseFontSize}em`

mikeyamadeo

const pictionBlue = '#4FC1E9'

export const colors = {
 primary: pictionBlue
}

export const spacing = {
 tiny: ‘4px’
}

mikeyamadeo

/* App/style/css/settings */
:root {
  —-clr-watermelon: #4FC1E9;
  —-spacing-default: 12px;
}

@custom-media —-viewport-narrow (width >= 31.25em);

/**
 * Example using settings in 'Generic' layer