<div class="flip-cover-dribbble"></div>
<div class="flip-cover-twiter"></div>
<div class="flip-cover-linkedin"></div>
<div class="flip-cover-email"></div>

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: -webkit-radial-gradient(
    center top, circle farthest-corner,
    #FFF 0%, #D8DFE9 100%);
  background-image: radial-gradient(
    circle farthest-corner at center top,
    #FFF 0%, #D8DFE9 100%);
  overflow: hidden;
}

@font-face {
  font-family: icon;
  src: url('https://bennettfeely.com/fonts/icons.woff');
}

@include flip-cover("dribbble", "d", #FC1786);
@include flip-cover("twiter", "t", #2EC8FA);
@include flip-cover("linkedin", "in", #2672ae);
@include flip-cover("email", "g", #f80);

function flipCover (css, options) {
  var options = options || {}
  if (typeof css === "object") {
    options = css
  } else {
    options.css = css
  }

  var css = options.css
  var url = options.url
  var text = options.text || css
  var width = options.width
  var height = options.height

  var $section = $(".flip-cover-" + css).addClass(css + "-section")
  var $button = $("<div>").addClass(css + "-button")
  var $cover = $("<div>").addClass(css + "-cover")
  var $outer = $("<div>").addClass(css + "-outer")
  var $inner = $("<div>").addClass(css + "-inner")

  if (width) {
    $section.css("width", width)
  }

  if (height) {
    $section.css("height", height)

    var lineHeight = ':after{ line-height: ' + height + ';}'
    var $outerStyle = $('<style>').text('.' + css + '-outer' + lineHeight)
    $outerStyle.appendTo($outer)
    var $innerStyle = $('<style>').text('.' + css + '-inner' + lineHeight)
    $innerStyle.appendTo($inner)
  }

  $cover.html($outer)
  $inner.insertAfter($outer)

  $button.html($("<a>").text(text).attr("href", url))

  $section.html($button)
  $cover.insertAfter($button)
 }



flipCover({
  css: "dribbble",
  url: "https://dribbble.com/vveleva",
  text: "vveleva",
  width: "80px"
})

flipCover("twiter", {
  url: "https://twitter.com/vveleva",
  text: "vveleva",
  width: "80px"
})

flipCover("linkedin", {
  url: "https://linkedin.com/in/vveleva",
  text: "vveleva",
  width: "80px"
})

flipCover("email", {
  text: "vvveleva @gmail",
  width: "80px",
  height: "50px"
})