kirby.scss

//
// Style the Kirby - don't change anything but the variables
//
// For an example, see http://codepen.io/bentranter/pen/QwWNrx

//
// Variables - hopefully verbose enough!
//

$kirby       : 300px;
$body-color  : #f493a7;
$eye-color   : #000000;
$eye-shimmer : #4a448b;
$shoes       : #98284c;
$cheeks      : #e05d82;
$mouth-bg    : #713236;
$tongue      : #f87e79;

//
// Generate Kirby with a million mixins
//

@mixin body() {
  position: relative;
	border-radius: 50%;
	width: $kirby;
	height: $kirby;
  background: $body-color;
}

@mixin left-arm() {
  position: absolute;
  top: ($kirby)/2.7;
  left: -($kirby)/9;
  width: ($kirby)/4;
  height: ($kirby)/3;
  background: $body-color;
  -moz-border-radius: 50% / 50%;
  -webkit-border-radius: 50% / 50%;
  border-radius: 50% / 50%;
  transform: rotate(20deg);
}

@mixin right-arm() {
  position: absolute;
  top: ($kirby)/2.7;
  right: -($kirby)/9;
  width: ($kirby)/4;
  height: ($kirby)/3;
  background: $body-color;
  -moz-border-radius: 50% / 50%;
  -webkit-border-radius: 50% / 50%;
  border-radius: 50% / 50%;
  transform: rotate(-20deg);
}

@mixin left-eye() {
  position: absolute;
  top: ($kirby)/5;
  left: ($kirby)/3;
  width: ($kirby)/9;
  height: ($kirby)/4;
  background: #000000;
  -moz-border-radius: 50% / 50%;
  -webkit-border-radius: 50% / 50%;
  border-radius: 50% / 50%;
}

@mixin right-eye() {
  position: absolute;
  top: ($kirby)/5;
  right: ($kirby)/3;
  width: ($kirby)/9;
  height: ($kirby)/4;
  background: #000000;
  -moz-border-radius: 50% / 50%;
  -webkit-border-radius: 50% / 50%;
  border-radius: 50% / 50%;
}

@mixin mouth() {
  position: absolute;
  top: ($kirby)/2;
  left: ($kirby)/2.35;
  background-color: $mouth-bg;
  width: ($kirby)/6;
  height: ($kirby)/8;
  border-radius: 50% 50% 50% 50%/20% 20% 80% 80%;
}

@mixin left-foot() {
  position: absolute;
  z-index: -1;
  width: ($kirby)/2;
  height: ($kirby)/3;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  top: ($kirby)/1.3;
  left: -($kirby)/10;
  background: $shoes;
  transform: rotate(-15deg);
}

@mixin right-foot() {
  position: absolute;
  z-index: -1;
  width: ($kirby)/2;
  height: ($kirby)/3;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  top: ($kirby)/1.3;
  right: -($kirby)/10;
  background: $shoes;
  transform: rotate(15deg);
}

@mixin eye-white {
  position: absolute;
  width: ($kirby)/15;
  height: ($kirby)/9;
  border-radius: 50% 50% 50% 50%/65% 65% 35% 35%;
  top: 5%;
  right: ($kirby)/45;
  background: #f5f6f8;
}

@mixin eye-shimmer {
  position: absolute;
  bottom: 22%;
  left: ($kirby)/36;
  width: ($kirby)/18;
  height: ($kirby)/12;
  border-radius: 50%;
  box-shadow: 0 ($kirby)/30 0 0 $eye-shimmer;
}

@mixin tongue() {
  position: absolute;
  bottom: 9%;
  left: ($kirby)/45;
  background-color: $tongue;
  width: ($kirby)/8;
  height: ($kirby)/13;
  border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
}

@mixin left-cheek() {
  position: absolute;
  top: ($kirby)/2.2;
  left: ($kirby)/5;
  background-color: $cheeks;
  width: ($kirby)/8;
  height: ($kirby)/13;
  border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
}

@mixin right-cheek() {
  position: absolute;
  top: ($kirby)/2.2;
  right: ($kirby)/5;
  background-color: $cheeks;
  width: ($kirby)/8;
  height: ($kirby)/13;
  border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
}

.kirby {
  
  // I use margin: 0 auto to center this for the example, but do
  // whatever you want with your Kirby
  margin: 0 auto;
  
  @include body();
  
  .left-arm {
    @include left-arm();
  }
  
  .right-arm {
    @include right-arm();
  }
  
  .left-eye {
    @include left-eye();
    
    .left-eye-white {
      @include eye-white();
    }
    
    .left-eye-shimmer {
      @include eye-shimmer();
    }
  }
  
  .right-eye {
    @include right-eye();
    
    .right-eye-white {
      @include eye-white();
    }
    
    .right-eye-shimmer {
      @include eye-shimmer();
    }
  }
  
  .mouth {
    @include mouth();
    
    .tongue {
      @include tongue();
    }
  }
  
  .left-foot {
    @include left-foot();
  }
  
  .right-foot {
    @include right-foot();
  }
  
  .left-cheek {
    @include left-cheek();
  }
  
  .right-cheek {
    @include right-cheek();
  }
}