davidosomething.com variables

_variables.scss

////////////////////////////////////////////////////////////////////////////////
$breakpoints: (
  iphone-portrait:         320px,
  iphone-landscape:        480px,
  iphone-retina-portrait:  640px,
  iphone-retina-landscape: 960px,
  ipad-portrait:           768px,
  ipad-landscape:          1024px,
  container-large:         42em,
  container-medium:        48em,
  container-small:         32em
);

@function bp($name) {
  @if (map-has-key($breakpoints, $name)) {
    @return map-get($breakpoints, $name);
  }
  @warn "Breakpoint `#{$name}` not found. Property omitted.";
  @return null;
}

////////////////////////////////////////////////////////////////////////////////
$font-sizes: (
  base-large:  18px,
  base-medium: 16px,
  base-small:  14px,
  h1: 2.8em,
  h2: 2em,
  h3: 1.6em,
  h4: 1.4em,
  h5: 1.2em,
  h6: 1.1em,
  h1-small: 2.4em,
  h2-small: 1.8em,
  h3-small: 1.6em,
);

@function fs($name) {
  @if (map-has-key($font-sizes, $name)) {
    @return map-get($font-sizes, $name);
  }
  @warn "Font size `#{$name}` not found. Property omitted.";
  @return null;
}

////////////////////////////////////////////////////////////////////////////////
// Colors
$palettes: (
  primary: (
    bg:   #fff,
    text: #444,
    weak: #89a,
    link: #37c
  ),
  primary-alt: (
    bg:   #f0f0f0
  ),
  secondary: (
    bg:   #444,
    text: #f0f0f0,
    link: #e95
  ),
  warning: (
    text: #f64
  ),
  code: (
    bg:   #efe,
    text: #344,
  )
);

@function swatch($palette, $swatch) {
  // map-get-z doesn't exist in my sass :<
  @if (map-has-key($palettes, $palette)) {
    $the_palette: map-get($palettes, $palette);
    @if (map-has-key($the_palette, $swatch)) {
      @return map-get($the_palette, $swatch);
    }
  }
  @warn "Swatch `#{$swatch}` not found in `#{$palette}`. Property omitted.";
  @return null;
}

////////////////////////////////////////////////////////////////////////////////
// Nav
$nav-height: 32px;
$nav-top: 0;

$author-portrait-size: 5em;

////////////////////////////////////////////////////////////////////////////////
// WordPress
$adminbar-height: 28px;