src/assets/css/cssvars.js

/* global */
const dirGlobal = '../img/global'
const dirDefault = '../img/theme/default'
/* breakpoints */
const small = '600px'
const medium = '992px'
const large = '1200px'
/* anims */
const duration = '0.3s'
/* gradient divider line rgba(19, 21, 24) */
const blackGrey = '#131518'
/* panel outside border */
const blackGreyBlue = '#171A1F'
/* body background */
const darkGreyBlue = '#20252B'
/* panel background */
const midGreyBlue = '#272C34'
/* admin cards background */
const rustGrey = '#555555'
/* main link/highlight color */
const coralPink = '#EE6E73'
const lightCoralPink = '#E28487'
/* body copy color */
const lightGrey = '#D6DAE0'
/* icon color, alt text color */
const midGrey = '#6D7480'
/* active link bg color */
const greyHighlight = '#393F4B'
/* main container heights/widths */
const mainWidth = '85%'
const mainWidthMax = '990px'
const mainContentHeightMin = '180px'
/* main nav height */
const navHeight = '70px'
/* mobile nav */
const mobileNavWidth = '320px'
const mobileNavWidthMax = '80%'
const mobileMenuWidth = '38px'
const mobileMenuHeight = '32px'
const mobileMenuIconSize = '28px'
/* various */
const padding = '28px'
const avatarSize = '80px'
/* forms */
const formWidth = '420px'
const formWidthWide = '680px'

module.exports = {
  dirGlobal,
  dirDefault,
  small,
  medium,
  large,
  duration,
  blackGrey,
  blackGreyBlue,
  darkGreyBlue,
  midGreyBlue,
  rustGrey,
  coralPink,
  lightCoralPink,
  lightGrey,
  midGrey,
  greyHighlight,
  mainWidth,
  mainWidthMax,
  mainContentHeightMin,
  navHeight,
  mobileNavWidth,
  mobileNavWidthMax,
  mobileMenuWidth,
  mobileMenuHeight,
  mobileMenuIconSize,
  padding,
  avatarSize,
  formWidth,
  formWidthWide
}