@import "compass"
@import "compass-placeholders"

//// FONTS ////

@include font-face("Gubia", font-files("GubiaLight.otf"), $weight: 200)
@include font-face("Gubia", font-files("GubiaRegular.otf"), $weight: normal)
@include font-face("Gubia", font-files("GubiaBold.otf"), $weight: bold)
@include font-face("Gubia", font-files("GubiaBlack.otf"), $weight: 800)

//// METRICS ////

$grid: 4px
$column-width: 45 * $grid
$gap-width: 3 * $grid


//// COLORS ////

$white: white
$black: black
$gray: #7f7f7f
$pink: #CA1F70
$light-pink: #FFABC2
$yellow: #FAFF8C
$turquoise: #2EF1BD

//// SPRITES ////

$graphics-spacing: 5 * $grid
@import "graphics/*.png"

$graphics-2x-spacing: 10 * $grid
@import "graphics-2x/*.png"

.graphics-sprite
  background-size: graphics-sprite-width(livingstyleguide)


//// MIXINS ////

@mixin for-phones
  @media all and (max-width: 640px)
    @content

@mixin for-phones-portrait
  @media all and (max-width: 480px)
    @content

@mixin for-phones-landscape
  @media all and (min-width: 481px) and (max-width: 640px)
    @content

@mixin for-tablets
  @media all and (min-width: 641px) and (max-width: 1024px)
    @content

@mixin for-tablets-portrait
  @media all and (min-width: 641px) and (max-width: 768px)
    @content

@mixin for-tablets-landscape
  @media all and (min-width: 769px) and (max-width: 1024px)
    @content

@mixin for-tablets-landscape-and-desktops
  @media all and (min-width: 1024px)
    @content

@mixin for-desktops
  @media all and (min-width: 1025px)
    @content

@mixin for-hires
  @media only all and (-webkit-min-device-pixel-ratio: 1.3), only all and (min--moz-device-pixel-ratio: 1.3), only all and (-o-min-device-pixel-ratio: 1.3/1), only all and (min-device-pixel-ratio: 1.3), only all and (min-resolution: 1.3dppx)
    @content


//// RESET EVERYTHING ////

*
  border: none
  border-collapse: collapse
  border-spacing: 0
  color: inherit
  display: block
  font-size: inherit
  font-style: inherit
  font-weight: inherit
  line-height: inherit
  list-style: none
  margin: 0
  padding: 0
  text-align: inherit
  text-decoration: none
  vertical-align: middle
  @include box-sizing(border-box)


head,
script,
style
  display: none


//// LAYOUT ////

.layout
  background: $white
  color: $black
  font-family: Gubia, "helvetica neue", helvetica, arial, sans-serif
  font-size: 4 * $grid
  line-height: 1.25
  margin: 0 auto (5 * $grid)
  text-align: center
  -webkit-font-smoothing: antialiased
  @include for-tablets-landscape-and-desktops
    width: 5 * ($column-width + $gap-width)
  @include for-tablets
    margin-top: 20 * $grid
  @include for-phones-landscape
    margin-top: 28 * $grid
  @include for-phones-portrait
    margin-top: 34 * $grid


//// HEADER ////

.header--logo
  display: block
  margin-left: -32px
  position: relative
  @include graphics-sprite(livingstyleguide, $dimensions: true)


.header--version
  color: $gray
  display: none
  font-size: 1.5rem
  font-weight: bold
  position: absolute
  right: -1em
  top: 0
  @include for-phones
    right: 0
    top: -1em


.header--slogan
  color: $light-pink
  font-weight: bold
  padding-top: 220px
  margin: auto
  width: 300px


//// INSTALLATION ////

.installation
  color: $turquoise
  font-family: "courier new", courier, monospace
  font-size: 1.5rem
  left: 550px
  margin: 2em 0
  position: absolute
  text-align: left
  top: 250px

  &:before
    color: mix($turquoise, $white, 30%)
    content: ">"
    margin: 1px 0 0 -1em
    position: absolute


//// LINKS ////

.links
  @extend %pie-clearfix


.links--item
  background: $yellow
  color: $black
  font-size: 24px
  font-weight: bold
  margin: floor($gap-width / 2)
  text-align: left
  padding: (5 * $grid) 0
  position: relative
  @include transition(all 0, background 0.2s)
  @include for-tablets-landscape-and-desktops
    background: transparent
    float: left
    height: $column-width
    text-align: center
    width: $column-width

    &:hover
      z-index: 5

    &:after
      background: $yellow
      bottom: 0
      content: ""
      left: 0
      position: absolute
      right: 0
      top: 0
      z-index: -1
      @include transform(rotateZ(45deg))
      @include transition(transform, 0.15s)

    &:hover:after
      background: $turquoise
      @include transform(rotateZ(-315deg))

  &:before
    content: ""
    display: inline-block
    margin-right: 3 * $grid
    vertical-align: middle
    z-index: 10
    @include graphics-sprite(rubygems, $dimensions: true)
    @include transition(transform, 0.15s)
    @include for-hires
      background-image: $graphics-2x-sprites
    @include for-tablets-landscape-and-desktops
      display: block
      margin: 0 auto (5 * $grid)

  &:hover:before
    @include transform(rotateZ(360deg))

  @each $name in github, issues, twitter, example-project
    &.-#{$name}:before
      @include graphics-sprite-position($name)




//// FOOTER ////

.footer
  margin: (16 * $grid) 0


.footer--made-in-berlin
  display: inline-block
  margin: 0 45px
  opacity: 0.7
  vertical-align: bottom
  @include graphics-sprite(made-in-berlin, $dimensions: true)
  @include transition(opacity, 0.2s)
  @include hide-text
  @include for-hires
    background-image: $graphics-2x-sprites

  &:hover
    opacity: 1


.footer--made-by-hagenburger
  @extend .footer--made-in-berlin
  @include graphics-sprite(hagenburger, $dimensions: true)


.footer--contact
  color: $gray
  display: block
  font-weight: normal
  font-size: 1rem
  letter-spacing: 1px
  margin: (5 * $grid) auto 0
  text-transform: uppercase
  width: 10em
  @include transition(color, 0.2s)

  &:hover
    color: $turquoise


//// COMPONENTS ////

@import "components/markdown"

