#title Expands when you hover over it

mixin leaf(link, image, title)
  .child
    a.leaf(href=link)
      img(src=image, alt=title)
      .glass-holder
        .counterspin
          .glass

.flower
  .inner
    .spinner
      +leaf('https://fb.me/tknomad', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/fb.svg', 'Facebook')
      +leaf('https://twitter.com/webninja256', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/bird.svg', 'Twitter')
      +leaf('https://flic.kr/the-specious', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/photos.svg', 'Flickr')
      +leaf('https://github.com/specious', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/octocat.svg', 'GitHub')
      +leaf('https://codepen.io/tknomad', 'https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/icons/codepen.svg', 'CodePen')
    .cover

//
// Variables
//

count = 5
diameter = 120px
distance = 1.2 // 1 = flush
tumbles = 6
swirl = 720deg // 0 = first leaf at the top; goes clockwise
time = 3.2s
spincycle = 45s
colors = #3535e0, red, #00bd00, yellow, #ebe8e8

//
// Automatic
//

dAngle = 360 / count
grow = 1 + (2 * distance)

//
// Glass cover
//

.glass
  background-image radial-gradient(circle closest-side, rgba(38, 38, 38, 0.2), rgba(0, 0, 0, 0.63))
  background-size 100% 100%
  border-radius 50%
  position relative
.glass::before
  position absolute
  width 56%
  height 26%
  top 4%
  left 22%
  border-radius 50%
  background-image linear-gradient(to bottom, rgba(207, 207, 207, 0.23), rgba(30, 30, 30, 0.06))
  content ''
.glass::after
  position absolute
  width 38%
  height 19%
  bottom 3%
  left 31%
  border-radius 50%
  background-image linear-gradient(to bottom, rgba(93, 93, 93, 0.1), rgba(0, 0, 0, 0.18))
  content ''

//
// Interactive spinner
//

.flower
  width diameter
  height diameter
  border-radius 50%
  cursor pointer
  position relative
  .spinner, .inner, .counterspin
    height 100%
  .spinner
    animation spin spincycle infinite linear
  .counterspin
    animation counter-spin spincycle infinite linear
  .cover
    width diameter
    height diameter
    background-image url(https://rawcdn.githack.com/specious/specious.github.io/08dba0c/gfx/portrait.jpg)
    background-size 100%
    border-radius 50%
    box-shadow \
      0 0 2px 4px #d1d1d1, \
      0 0 20px 4px black
    position absolute
    top 0
  a
    display block
  .child
    width diameter
    height diameter
    border-radius 50%
    position absolute
    top 0
    .leaf
      height 100%
      border-radius 50%
      visibility hidden
      transition transform time ease-in-out
      img
        width 64px
        height 64px
        left 28px
        top 28px
        position absolute
        border none
    for c, i in colors
      &:nth-child({i+1})
        rot = (dAngle * i - 90)
        transform rotate((rot)deg)
        .leaf
          background-color c
          background-size 100%
          opacity 0.94
          transition transform time ease-in-out, box-shadow 0.16s ease-in-out, visibility time linear
          .glass-holder
            height 100%
            transform rotate(-(rot)deg)
  .glass
    height 100%
    transition transform time ease-in-out
  &:hover
    transform scale(grow) // zoom click area
    .inner
      transform scale(1 / grow) // but do not zoom internal elements
    .leaf
      // Expand
      visibility visible
      transform rotate(swirl) translateX(diameter * distance) rotate((tumbles * 360 + 90)deg)
      &:hover
        box-shadow 0 0 34px rgba(211, 217, 255, 1), 0 0 0 1px black, inset 0 1px 0 rgba(255, 255, 255, 0.2)
      .glass
        // Keep the glass cover stationary
        transform rotate((-1 * (swirl + tumbles * 360 + 90))deg)
@keyframes spin
  to
    transform rotate(1turn)
@keyframes counter-spin
  to
    transform rotate(-1turn)

//
// Presentation
//

html
  height 100%
  overflow hidden
body
  background-color #02102c
  background-image linear-gradient(135deg, #000080 10%, #000 90%)
  background-size cover
  overflow visible
  display flex
  align-items center
  justify-content center
  height 100%
a
  outline 0
#title
  color #ddd
  font-size 18px
  position fixed
  bottom 10px
  left 14px

// That's right, there's no JavaScript ッ