%ul{:ontouchstart => true}
  %li
    .link
      - 4.times do
        %a{:href => "https://codepen.io/gabriellewee", :target => "_blank"}
      .cube.codepen
        - 4.times do
          %div
        %div
          %svg{:viewbox => "0 0 85 85"}
            %path{:d => "M82.5,29.1666667 L42.5,2.5 L2.5,29.1666667 L2.5,55.8922001 L42.5,82.5 L82.5,55.8922001 L82.5,29.1666667 Z M42.5,2.9120677 L42.5,29.1666667 L42.5,2.9120677 Z M42.5,55.8922001 L42.5,82.5 L42.5,55.8922001 Z M2.5,29.1666667 L2.5,55.8922001 L42.5,29.1666667 L82.5,55.8922001 L82.5,29.1666667 L42.5,55.8922001 L2.5,29.1666667 Z"}
        %div /gabriellewee
  %li
    .link
      - 4.times do
        %a{:href => "https://github.com/gabriellewee", :target => "_blank"}
      .cube.github
        - 4.times do
          %div
        %div
          %svg{:viewbox => "0 0 85 85"}
            %path.fill{:d => "M76.7 19c1.1-4.8 0.6-10.1-1.6-15 -0.7-1.7-2.3-2.9-4.2-3 -0.5-0.1-1.1-0.1-1.6-0.1 -4.6 0-10.7 1.6-15 5C50.4 5 46.4 4.6 42.5 4.6V4.4c-3.9 0-7.9 0.4-11.8 1.3 -4.3-3.4-10.4-5-15-5 -0.5 0-1.1 0-1.6 0.1 -1.9 0.1-3.5 1.3-4.2 3C7.7 8.7 7.2 14 8.3 18.8c-3.3 4.4-5 9.6-5 15.4 0 12.5 4.2 21.4 12.5 26.4 2.6 1.6 5.6 2.9 9 3.7 -0.6 1.7-0.9 3.7-0.9 6.1v11.2h0c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5l0-11c0-4.5 1.5-7.7 4.5-9.7 -1.5-0.1-3.2-0.3-5.2-0.8 -3.8-0.7-7-1.9-9.7-3.6C11.6 52.4 8.3 45.1 8.3 34.4c0-5.6 1.9-10.3 5.6-14.3 -1.7-4.4-1.4-9.6 0.6-14.3 0.4 0 0.8 0 1.2 0 4.9 0 10.8 2.2 13.5 5.5 4.5-1.2 9-1.8 13.3-1.8v0.1c4.3 0 8.8 0.6 13.3 1.8 2.7-3.3 8.6-5.5 13.5-5.5 0.4 0 0.8 0 1.2 0 2 4.7 2.3 9.9 0.6 14.3 3.7 4 5.6 8.7 5.6 14.3 0 10.7-3.3 18-10.2 22.2 -2.7 1.7-5.9 2.9-9.7 3.6 -2 0.5-3.7 0.7-5.2 0.8 3 2 4.5 5.2 4.5 9.7l0 11c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5h0V70.6c0-2.4-0.3-4.4-0.9-6.1 3.4-0.8 6.4-2.1 9-3.7 8.3-5 12.5-13.9 12.5-26.4C81.7 28.6 80 23.4 76.7 19z"}
        %div /gabriellewee

%svg.clips{:viewbox => "0 0 0 0", :xmlns => "http://www.w3.org/2000/svg"}
  %defs
    %clippath#clip-right
      %polygon#right{:points => "48 0 48 96 0 48"}
    %clippath#clip-left
      %polygon#left{:points => "0 0 0 96 48 48"}
    %clippath#clip-bottom
      %polygon#bottom{:points => "96 48 0 48 48 0"}
    %clippath#clip-top
      %polygon#top{:points => "0 0 96 0 48 48"}

$indigo: #3023ae;
$iris: #53a0fe;
$lime: #b4ed50;

$codepen: #fcd000;
$github: #4183c4;

$p: 12px;

*, *:before, *:after { box-sizing: border-box; }
* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
body {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: $p;
  background: mix($iris, $lime);
  background: linear-gradient(135deg, $indigo 0%, $iris 50%, $lime 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$indigo', endColorstr='$lime',GradientType=1 );
  font-family: -apple-system, "Mona Sans", system-ui, sans-serif;
  font-feature-settings: "liga", "ss05" on, "ss07" on;
  font-size: 12px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    font-feature-settings: "liga";
  }
}

ul {
  perspective: 1000px;
  transform: translateZ(#{$p*8});
  display: flex;
  list-style: none;
  margin: 0;
  padding: $p;
  li {
    padding: $p;
  }
}

.clips {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: -100;
}

.link {
  position: relative;
  width: $p*8;
  height: $p*8;
  a {
    transform-origin: $p*4 $p*4 -#{$p*4};
    display: block;
    position: absolute;
    z-index: 1;
    transform: translateZ(#{$p*2});
    width: 100%;
    height: 100%;
    &:nth-child(1) {
      top: 0;
      left: 0;
      height: 50%;
      clip-path: polygon(50% 100%, 0 0, 100% 0);
      @-moz-document url-prefix() {
        clip-path: url(#clip-top);
      }
      &:hover, &:focus {
        ~ .cube {
          transform: rotateX(-0.5turn);
          div:nth-child(6) {
            transform: rotateY(180deg) rotateZ(180deg) translateZ($p*8);
          }
        }
      }
    }
    &:nth-child(2) {
      top: 0;
      right: 0;
      width: 50%;
      clip-path: polygon(100% 100%, 0 50%, 100% 0);
      @-moz-document url-prefix() {
        clip-path: url(#clip-right);
      }
      &:hover, &:focus {
        ~ .cube {
          transform: rotateY(-0.5turn);
        }
      }
    }
    &:nth-child(3) {
      bottom: 0;
      right: 0;
      height: 50%;
      clip-path: polygon(0 100%, 50% 0, 100% 100%);
      @-moz-document url-prefix() {
        clip-path: url(#clip-bottom);
      }
      &:hover, &:focus {
        ~ .cube {
          transform: rotateX(0.5turn);
          div:nth-child(6) {
            transform: rotateY(180deg) rotateZ(180deg) translateZ($p*8);
          }
        }
      }
    }
    &:nth-child(4) {
      bottom: 0;
      left: 0;
      width: 50%;
      clip-path: polygon(0 100%, 0 0, 100% 50%);
      @-moz-document url-prefix() {
        clip-path: url(#clip-left);
      }
      &:hover, &:focus {
        ~ .cube {
          transform: rotateY(0.5turn);
        }
      }
    }
    &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
      &:hover, &:focus {
        z-index: 2;
        transform: translateZ(#{$p*3});
        width: 100%!important;
        height: 100%!important;
        -webkit-clip-path: none!important;
        clip-path: none!important;
        transition: all 100ms ease 500ms;
      }
    }
  }
}

.cube {
  transform-origin: $p*4 $p*4 -#{$p*4};
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: all 300ms ease-out;
  div {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    // border-radius: 3px;
    svg {
      width: $p*4;
      height: $p*4;
      path:not(.fill) {
        fill: none;
        stroke: white;
        stroke-width: 5px;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      path.fill {
        fill: white;
      }
    }
    // top
    &:nth-child(1) {
      transform-origin: center top;
      transform: rotateX(90deg) translateY(#{-($p*8)});
    }
    // bottom
    &:nth-child(2) {
      transform-origin: center bottom;
      transform: rotateX(-90deg) translateY($p*8);
    }
    // left
    &:nth-child(3) {
      transform-origin: left center;
      transform: rotateY(-90deg) translateX(#{-($p*8)});
    }
    // right
    &:nth-child(4) {
      transform-origin: right center;
      transform: rotateY(90deg) translateX($p*8);
    }
    // front
    &:nth-child(5) {
      transform-origin: center center;
      transform: rotateX(0);
    }
    // back
    &:nth-child(6) {
      transform-origin: center center;
      transform: rotateY(180deg) translateZ($p*8);
    }
  }
  &.codepen {
    div {
      // top
      &:nth-child(1) {
        background: lighten($codepen, 35%);
      }
      // bottom
      &:nth-child(2) {
        background: lighten($codepen, 10%);
      }
      // left
      &:nth-child(3) {
        background: lighten($codepen, 20%);
      }
      // right
      &:nth-child(4) {
        background: lighten($codepen, 20%);
      }
      // front
      &:nth-child(5) {
        background: $codepen;
      }
      // back
      &:nth-child(6) {
        background: white;
        color: $codepen;
      }
    }
  }
  &.github {
    div {
      // top
      &:nth-child(1) {
        background: lighten($github, 35%);
      }
      // bottom
      &:nth-child(2) {
        background: lighten($github, 10%);
      }
      // left
      &:nth-child(3) {
        background: lighten($github, 20%);
      }
      // right
      &:nth-child(4) {
        background: lighten($github, 20%);
      }
      // front
      &:nth-child(5) {
        background: $github;
      }
      // back
      &:nth-child(6) {
        background: white;
        color: $github;
      }
    }
  }
}