application.css.sass in tonic-0.0.2

- old
+ new
@@ -1,146 +1,293 @@
\ No newline at end of file
+// You should replace all this content with your styles :)
+// Of course you can grab from here something you like :)
+
+@import 'base'
+
+body
+  text-align: center
+  background: white
+  color: black
+  font-size: 16px
+  font-family: sans-serif
+
+a
+  color: darkGray
+  &:hover
+    color: red
+
+.tonic-logo
+  margin: 50px auto 0 auto
+  width: +image-width("tonic.png")
+  height: +image-height("tonic.png")
+  background: inline-image("tonic.png")
+
+// Octocat corner styles
+.open-source
+  display: block
+  position: absolute
+  width: 80px
+  height: 80px
+  top: 0
+  right: 0
+  text-decoration: none
+  &:active
+    .background
+      background: #ddd
+  .crop
+    position: absolute
+    top: 0
+    left: -10px
+    width: 90px
+    height: 90px
+    overflow: hidden
+  .background, .corner
+    position: absolute
+    top: -65px
+    left: 32px
+    width: 120px
+    height: 120px
+    +rotate(45deg)
+  .background
+    background: #e8e8e8
+    +box-shadow(rgba(0, 0, 0, 0.5) 0 -7px 7px -7px inset)
+  .source
+    position: absolute
+    color: black
+    text-shadow: white 0 1px 0
+    left: 40px
+    line-height: 1.1
+    code
+      font-size: 10px
+  .source-crop
+    position: absolute
+    width: 120px
+    height: 120px
+    background: white
+    top: 22px
+    left: -50px
+    +rotate(45deg)
+  .octocat
+    position: absolute
+    width: +image-width("octocat.png")
+    height: +image-height("octocat.png")
+    background: inline-image("octocat.png")
+    +rotate(45deg)
+    top: 24px
+    left: 43px
+    +box-shadow(rgba(0, 0, 0, 0.4) 0 -5px 5px -5px inset)
+  .corner
+    position: absolute
+    overflow: hidden
+    left: 21px
+    top: -66px
+  .title
+    position: absolute
+    top: 82px
+    left: 23px
+    width: 82px
+    height: 80px
+    +rotate(45deg)
+    background: white
+    +box-shadow(rgba(0, 0, 0, 0.5) 0 0 3px)
+  .border, .text
+    position: absolute
+    bottom: 0
+    width: 100%
+  .border
+    border-top: 1px dashed #999
+  .text
+    bottom: 4px
+    text-align: center
+    font-size: 12px
+    color: #666
+    padding-left: 5px
+  .rotator
+    position: absolute
+    width: 80px
+    height: 80px
+    left: 10px
+    z-index: 3
+  .translate
+    position: absolute
+    top: 90px
+    text-align: center
+    color: #666
+    font-size: 13px
+    opacity: 0
+    +transition(opacity 400ms)
+    &.show
+      opacity: 1
+
+.transform3d
+  .open-source
+    .text, .border
+      +backface-visibility(hidden)
+    .rotator
+      +transition(all 600ms cubic-bezier(0.455, 0.030, 0.515, 0.955))
+    .shadow
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      background: rgba(0, 0, 0, 0.1)
+      opacity: 0
+    &:hover
+      .rotator
+        +rotate3d(1, 1, 0, 180deg)
+
+.transform2d
+  .open-source
+    &:hover
+      .text, .border
+        display: none
+      .rotator
+        +rotate(180deg)
+      .translate
+        opacity: 1