diff --git a/' b/'
new file mode 100644
index 0000000000000000000000000000000000000000..dbaf1f92eab69dfde2681e3b71d897daedb03c3b
--- /dev/null
+++ b/'
@@ -0,0 +1,842 @@
+@import "bower_components/bourbon/app/assets/stylesheets/bourbon"
+@import "bower_components/neat/app/assets/stylesheets/neat"
+@import "bower_components/normalize.css/normalize"
+@import "bower_components/datedropper/datedropper"
+@import "bower_components/pace/themes/blue/pace-theme-minimal"
+
+@include font-face('wire','/assets/fonts/Electro')//string_and_wire
+@include font-face('marker','/assets/fonts/twin_marker') //colors_of_autumn')
+
+$standard_font: 'Helvetica Neue',Helvetica,Arial,sans-serif
+$standard_color: #333 //#4285f4
+$standard_light_color: #474747
+$standard_font_color: transparentize(white, 0.3)
+$standard_secondary_color: #2098d1
+
+html
+ font-family: $standard_font
+ font-size: 90% //82.5%
+ li
+ list-style: none
+ ul
+ margin: 0
+ padding: 0
+ a
+ text-decoration: none
+
+.everything
+ opacity: 1
+ @include transition(opacity 1s ease)
+
+.preload //.pace-running
+ height: 100vh
+ width: 100vw
+ //position: fixed
+ z-index: 9999
+ //top: 0
+ background: url('/assets/images/Nightiies.png') no-repeat center center
+ background-size: 50vh
+
+ .everything
+ opacity: 0
+
+.everything
+ @include display(flex)
+ overflow: hidden
+ //height: 100vh
+ //width: 100vw
+
+// -------------------------------------------------
+// New menu
+.menu-button
+ width: 40px//60px
+ height: 40px//60px
+ outline: none
+ position: fixed
+ margin: 5px
+ padding: 8px 9px 9px 9px //14px 15px 15px 15px
+ z-index: 999996
+ border: 2px solid $standard_secondary_color
+ border-radius: 50%
+ background: none //rgba(255,255,255,0.5)
+
+ i
+ font-size: 21px //30px
+ color: $standard_secondary_color
+
+
+.menu
+ $action-color: #477DCA !default
+ $dark-gray: #333 !default
+ $sliding-panel-border-color: $dark-gray
+ $sliding-panel-background: lighten($sliding-panel-border-color, 5%)
+ $sliding-panel-color: #fff
+ $sliding-panel-border: 1px solid $sliding-panel-border-color
+ $sliding-panel-background-hover: $action-color
+ $sliding-panel-color-hover: #fff
+ $sliding-panel-background-focus: lighten($sliding-panel-background, 5%)
+
+ @include position(fixed)
+ @include transform(translateY(-60px)) //X(-160px))
+ @include transition(all 0.25s linear)
+ background: $standard_color //$sliding-panel-background
+ z-index: 999998
+ width: 100%
+ li a
+ @include span-columns(1.5)
+ height: 50px
+ border-right: 1px solid #2e2e2e //border-bottom $sliding-panel-border
+ color: $sliding-panel-color
+ display: block
+ font-size: 1.1em
+ padding: 1em
+ text-decoration: none
+ overflow: hidden
+ //text-overflow: ellipsis
+ white-space: nowrap
+ @media screen and (max-device-width: 640px), screen and (max-width: 800px)
+ @include span-columns(2.6)
+ //span
+ display: none
+
+
+ &:focus, &.active
+ background-color: $standard_light_color //$sliding-panel-background-focus
+
+ &:hover
+ background-color: $sliding-panel-background-hover
+ color: $sliding-panel-color-hover
+
+
+ &.is-visible
+ @include transform(translateY(0))
+
+.fade-menu
+ @include position(fixed, 0px 0px 0px 0px)
+ @include transition
+ background: black
+ opacity: 0
+ visibility: hidden
+ z-index: 999997
+
+ &.is-visible
+ opacity: 0.4
+ visibility: visible
+
+// Track player
+
+@mixin grid-item-columns($columns)
+ width: (100% / 12) * $columns
+
+.player
+ @include flex-grow(0)
+ @include flex-shrink(0)
+ background-color: #474747 //$standard_color
+ ul
+ @include clearfix
+ @include row(table)
+
+ li
+ @include span-columns(1)
+ color: $standard_font_color
+ white-space: nowrap
+ overflow: hidden
+ vertical-align: middle
+
+ li.track_name
+ @include span-columns(6)
+ overflow: hidden
+ text-overflow: ellipsis
+ padding-left: 50px
+
+ //div
+ &:focus, &:hover
+ @include animation(scroll 5s ease infinite)
+
+ //@include keyframes(scroll)
+ from
+ @include transform(translateX(0%))
+ to
+ @include transform(translateX(-100%))
+
+ li.track_player
+ @include span-columns(6)
+
+ //width: 640px
+ line-height: 0px
+ height: 35px
+ iframe
+ display: inline-block
+
+.tracks-colorGrid
+
+ width: 100%
+ margin-right: calc(100% - 100Vw)
+
+ @include display(flex)
+ @include flex-direction(row)
+ @include flex-wrap(wrap)
+ @include align-content(flex-start)
+ @include justify-content(stretch)
+ @include align-items(stretch)
+ //height: 100vh
+
+
+ $base-accent-color: #477DCA !default
+ $base-background-color: white !default
+
+ p
+ line-height: 1.5em
+ a
+ text-decoration: none
+
+ $grid-items-background: $base-background-color
+ $grid-item-background: desaturate($base-accent-color, 30%)
+ $grid-item-colors: desaturate($base-accent-color, 30%), #3581A5, #F7C808, #5FBEBE, #98C79A, #D2315D, #A7A891, #389090, #F47E7D, #B5D045, #FB8335, #81C0C5, #E98813, #22B5BF, #8767A6, #88C134
+
+ .grid-item
+ @include flex-grow(1)
+ @include align-items(center)
+ @include justify-content(center)
+ @include flex-basis(500px)
+
+ @include transition (all 0.2s ease-in-out)
+ background: $grid-item-background
+ margin: 2px
+ cursor: pointer
+ padding: 2em
+ @extend .hvr-trim
+
+ @for $i from 1 through 51 //length($grid-item-colors)
+ &:nth-child(#{$i})
+ $background-from-list: nth($grid-item-colors, $i % 16 + 1)
+ $background-color: transparentize($background-from-list, 0.8)
+ background-color: $background-color
+
+ &:focus, &:hover, &.active
+ background-color: transparentize($background-from-list, 0.4)
+ //@extend .hvr-trim
+
+ .grid-item p
+ margin: auto
+ color: #595959 //rgb(180,180,180)
+
+ span.track_author
+ float: left
+
+ span.track_channel
+ float: right
+
+ span.track_name
+ font-size: 1.1em
+ color: black
+
+ .pagination
+ @include flex-grow(1)
+ width: 100vw
+ margin: 1em
+
+.tracks-table
+ width: 100% //100vw
+ margin-right: calc(100% - 100vw)
+ $base-border-color: gainsboro !default
+ $base-background-color: white !default
+ $base-line-height: 1.5em !default
+ $dark-gray: #333 !default
+ $base-font-color: $dark-gray !default
+
+ //background: url(records_edited.jpg)
+ //background-size: cover
+ //background-position: bottom
+
+ td
+ line-height: $base-line-height
+
+ $table-border-color: $base-border-color
+ $table-border: 1px solid $table-border-color
+ $table-background: $base-background-color
+ $table-hover-background: darken($table-background, 3)
+ $table-padding: 0.8em 1em
+ $table-font-light: rgba(0,0,0,0.6)
+
+ border-collapse: collapse//separate //collapse
+ border-spacing: 0
+
+ tbody
+ //background-color: $table-background
+ tr:hover > td, tr.active > td
+ background-color: $table-hover-background
+ //border-color: $standard_secondary_color
+ //border-bottom: 1px solid $standard_secondary_color
+ color: $standard_secondary_color
+
+ //tr:last-child td
+ border-bottom: 0px
+ td
+ border-bottom: 0px
+ border-top: 1px solid $table-border-color
+ padding: $table-padding
+ overflow: hidden
+
+ td.track_author
+ @include span-columns(2)
+ td.track_name
+ @include span-columns(6)
+ td.track_tags
+ @include span-columns(2)
+ td.track_channel
+ @include span-columns(2)
+ td
+ a
+ color: gray //$table-font-light
+
+
+.menu-placeholder
+ display: inline-block
+ height: 50px //70px
+ width: 50px //70px
+
+.filters-menu
+ @include flex-grow(0)
+ @include flex-shrink(0)
+ //$filter_color: #474747
+ background-color: $standard_color//$filter_color
+ color: $standard_font_color
+ white-space: nowrap
+
+ li
+ height: 50px //70px
+
+ select
+ background: $standard_color//$filter_color
+ border: none
+ outline: none
+ cursor: pointer
+ color: $standard_font_color
+ @include span-columns(2 of 4)
+ height: 25px //35px
+ //@include appearance(none)
+ option
+ width: 100px
+ color: $standard_font_color
+ &:hover, &:focus
+ color: $standard_secondary_color
+
+ input
+ @include span-columns(2 of 4)
+ height: 25px //35px
+ background: $standard_color //$filter_color
+ border: none
+ outline: none
+ color: $standard_font_color
+ &:hover, &:focus
+ color: $standard_secondary_color
+ @include placeholder
+ color: $standard_secondary_color
+
+ ul
+ display: inline-block
+ li
+ @include span-columns(4)
+ height: 25px //35px
+ .first-line
+ position: relative
+ top: -25px//-35px
+ .second-line
+ position: relative
+ left: -50%
+
+ .design
+ font-size: 2em
+ line-height: 50px //70px
+ float: right
+ padding: 0 10px
+ cursor: pointer
+ vertical-align: middle
+ &:hover, &.active
+ color: #2098d1
+
+
+.pagination
+
+ margin: 1em
+ //margin-bottom: 2em
+
+ $base-border-color: gainsboro !default
+ $base-border-radius: 3px !default
+ $base-spacing: 1.5em !default
+ $base-accent-color: #477DCA !default
+ $base-link-color: $base-accent-color !default
+ $dark-gray: #333 !default
+ $large-screen: em(860) !default
+ $base-font-color: $dark-gray !default
+
+ $pagination-border-color: $base-border-color
+ $pagination-border: 1px solid $pagination-border-color
+ $pagination-background: lighten($pagination-border-color, 10)
+ $pagination-hover-background: lighten($pagination-background, 5)
+ $pagination-color: $base-font-color
+
+ text-align: center
+
+ ul
+ display: inline
+ text-align: center
+ li
+ display: inline
+
+ ul li
+ display: none
+
+ &:nth-child(1),
+ &:nth-child(2),
+ &:nth-child(3)
+ display: inline
+
+ @include media($large-screen)
+ display: inline
+
+ li a
+ @include transition (all 0.2s ease-in-out)
+ background: $pagination-background
+ border-radius: $base-border-radius
+ border: $pagination-border
+ color: $pagination-color
+ outline: none
+ padding: ($base-spacing / 4) ($gutter / 2)
+
+ &:hover, &:focus
+ background: $pagination-hover-background
+ color: $base-link-color
+
+ a.current
+ background: $pagination-hover-background
+
+.tracks
+ @include display(flex)
+ @include flex-grow(1)
+ @include flex-basis(200px)
+ @include flex-direction(column)
+ @include flex-wrap(nowrap)
+ @include justify-content(flex-start)
+
+.presentation
+ height: 100vh
+ @include display(flex)
+ @include flex-grow(1)
+ @include flex-basis(200px)
+
+
+ background: url('/assets/images/vinyl_prog.jpg')
+ background-size: cover
+ background-position: bottom
+
+ .abstract
+ color: white
+ margin: auto
+ //padding: 3.5em
+ text-align: center
+ a
+ font-family: wire
+ text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
+ @include filter(drop-shadow(1px 1px 1px rgba(0,0,0,0.9)))
+ font-size: 7em
+ font-weight: bold
+ color: #2098d1 //white
+ img
+ height: 30vh //10em
+ margin-bottom: 1em
+ p
+ text-align: center
+ font-size: 1em
+ margin-bottom: 0.5em
+
+
+.channels, .users
+ @include display(flex)
+ @include flex-direction(row)
+ @include flex-wrap(wrap)
+ @include flex-grow(1)
+ @include flex-basis(200px)
+ @include align-content(stretch)
+ @include justify-content(stretch)
+ @include align-items(stretch)
+ height: 100vh
+
+ $base-accent-color: #477DCA !default
+
+ $channel-colors: desaturate($base-accent-color, 30%), #3581A5, #F7C808, #5FBEBE, #98C79A, #D2315D, #A7A891, #389090, #F47E7D, #B5D045, #FB8335, #81C0C5, #E98813, #22B5BF, #8767A6, #88C134
+ //#E0C7A8,#BDCC97,#979EA0,
+
+ @include clearfix
+
+ .hided
+ color: transparent
+
+ .channel, .user
+ @include display(flex)
+ @include flex-grow(1)
+ @include align-items(center)
+ @include justify-content(center)
+ @include transition (all 0.2s ease-in-out)
+ //border-radius: 50%
+ cursor: pointer
+ overflow: hidden
+ //@include ellipsis()
+ white-space: nowrap
+
+ @for $i from 1 to 200//through 51 //length($grid-item-colors)
+ &:nth-child(#{$i})
+ $background-from-list: nth($channel-colors, $i % 16 + 1)
+ $background-color: transparentize($background-from-list, 0.8)
+ background-color: $background-color
+
+ &:focus, &:hover
+ background-color: transparentize($background-from-list, 0.4)
+ min-width: 150px
+ color: black
+
+// -------------------------------------------------------------
+// Design for pace plugin
+
+//--------------------------------------------------------------
+//I copy paste here the styles that I need from hover.css
+
+/* Trim */
+.hvr-trim
+ display: inline-block
+ vertical-align: middle
+ @include transform(translateZ(0))
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0)
+ -webkit-backface-visibility: hidden
+ backface-visibility: hidden
+ -moz-osx-font-smoothing: grayscale
+ position: relative
+
+ &:before
+ content: ''
+ position: absolute
+ border: white solid 4px
+ top: 4px
+ left: 4px
+ right: 4px
+ bottom: 4px
+ opacity: 0
+ @include transition (opacity 0.3s)
+
+ &:hover:before, &:focus:before, &:active:before, &.active:before
+ opacity: 1
+
+// ---------------------------------------------------------------------------
+// Cassette design
+.cassette
+ background-image: url("/assets/images/cassette/mixtable_bw.jpg")
+ background-size: cover
+ background-position: center
+ height: 100vh
+ width: 100vw
+
+iframe.cassette
+ width: 0px
+ height: 0px
+ visibility: hidden
+ border: none
+
+/* Main container */
+.cassette-holder
+
+ /* Tape elements */
+ .tape
+ width: 586px
+ height: 379px
+ margin: auto //30px auto 0
+ position: relative
+ @include transition(all .4s ease-in-out)
+ //INFO
+ overflow: hidden
+ &:hover
+ .cassette-back, .cassette-front
+ @include filter(blur(3px) grayscale(90%))
+ @include transition(all, 0.5s ease-in-out)
+ //opacity: 0.9
+ .info-hover
+ @include transform(translate(0, -200%))
+
+ .info-hover
+ padding: 1em 2em
+ @include transition(all, 0.5s ease-in-out)
+ background: transparentize(#000, 0.7)
+ height: inherit
+ width: inherit
+ overflow: hidden
+ color: rgba(255, 255, 255, 0.7)
+
+ .vc-loader
+ position: absolute
+ width: 31px
+ height: 31px
+ bottom: 50px
+ left: 50%
+ margin: -15px 0 0 -15px
+ background: transparent url(images/cassette/ajax-loader.gif) no-repeat center center
+ display: none
+
+.cassette-back
+ width: 100%
+ height: 100%
+ position: relative
+ background: transparent url(images/cassette/cs_back.png) no-repeat center center //DESIGN
+
+ .wheels
+ width: 125px
+ height: 125px
+ position: absolute
+ top: 110px
+ background: transparent
+ border-radius: 50%
+
+ .left-wheel
+ left: 109px
+ box-shadow: 0 0 0 70px #000
+
+ .right-wheel
+ right: 113px //109px DESIGN
+
+//@include animation(scroll 5s ease infinite)
+
+@include keyframes(rotateLeft)
+ from
+ @include transform(rotate(0deg) translateZ(-1px))
+ to
+ @include transform(rotate(-360deg) translateZ(-1px))
+
+@include keyframes(rotateRight)
+ from
+ @include transform(rotate(0deg) translateZ(-1px))
+ to
+ @include transform(rotate(360deg) translateZ(-1px))
+
+.wheels div
+ width: 100%
+ height: 100%
+ background: transparent url(/assets/images/cassette/cs_wheel.png) no-repeat center center
+
+.spin
+ @include animation(rotateLeft 2s linear infinite forwards)
+
+.cassette-front
+ width: 100%
+ height: 100%
+ background: url(/assets/images/cassette/cs_front.png) no-repeat center center //transparent url(images/cassette/cassette_reduced_v4.png) no-repeat center
+ //top: 0px
+ //left: 0px
+ position: relative
+ top: -379px
+
+ span
+ color: rgba(0, 0, 0, 0.7)
+ position: absolute
+ top: 83px
+ left: 67px
+ font-family: Arial
+ font-weight: bold
+ font-size: 20px
+
+ .tape-name
+ position: absolute
+ top: 51px //60px DESIGN
+ left: 100px //90px DESIGN
+ font-family: marker
+ font-size: 25px
+ width: 370px //450px DESIGN
+ margin: 0
+ text-indent: 90px //DESIGN
+
+ //Second design try DESIGN
+ //text-align: left
+ //overflow: hidden
+ //white-space: nowrap
+ //text-overflow: ellipsis
+
+
+/* Controls list */
+ul.vc-controls
+ margin: 0 auto//10px auto DESIGN
+ height: 70px
+ width: 460px //440px
+ @include background(linear-gradient(top, rgba(170,170,170,0.35) 0%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.53) 100%))
+ border: 1px solid rgba(0,0,0,0.1)
+ border-bottom-color: rgba(255,255,255,0.6)
+ padding: 8px
+ box-shadow: inset 0 1px 0px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8), 0 -1px 0 rgba(255,255,255,0.4), inset 0 2px 19px rgba(0,0,0,0.05), 0 2px 1px rgba(0,0,0,0.06)
+ //@mixin box-sizing(content-box)
+ border-radius: 12px
+
+/* Controls list items */
+ul.vc-controls li
+ display: block
+ float: left
+ width: 80px
+ height: 50px
+ line-height: 55px
+ text-align: left
+ padding: 10px
+ margin: 0
+ cursor: pointer
+ background: #ddd url(/assets/images/cassette/metal.jpg) no-repeat center top
+ box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 1px 2px rgba(255,255,255,0.9), inset 0 -6px 5px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 4px 1px rgba(0,0,0,0.5)
+ @include user-select(none)
+
+ul.vc-controls li:first-child
+ border-radius: 8px 0 0 8px
+
+ul.vc-controls li:last-child
+ border-radius: 0px 8px 8px 0px
+
+ul.vc-controls li.vc-control-play
+ width: 120px
+
+/* Control icons */
+ul.vc-controls li span:before
+ font-size: 16px
+ line-height: 50px
+ text-align: center
+ float: left
+ color: #444
+ font-family: 'playericons'
+ text-shadow: 1px 1px 1px rgba(255,255,255,0.9)
+ font-style: normal
+ font-weight: normal
+ text-transform: none
+ speak: none
+ display: inline-block
+ text-decoration: inherit
+ width: 1em
+ margin-right: 0.2em
+ text-align: center
+
+li.vc-control-volume-off span:before
+ content: 'ðŸâ€â€¡'
+li.vc-control-volume-down span:before
+ content: 'ðŸâ€â€°'
+li.vc-control-volume-up span:before
+ content: 'ðŸâ€Å '
+
+ul.vc-controls li:hover
+ box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 1px 2px rgba(255,255,255,0.9), inset 0 -10px 15px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 4px 1px rgba(0,0,0,0.5)
+
+/* Pressed (active) */
+ul.vc-controls li.vc-control-active
+ height: 50px
+ margin-top: 2px
+ background-image: url(/assets/images/cassette/metal_dark.jpg)
+ box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.18), inset 0 0 1px 2px rgba(255,255,255,0.5), inset 0 -6px 5px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 2px 1px rgba(0,0,0,0.5)
+
+/* Activated */
+ul.vc-controls li.vc-control-pressed,
+ul.vc-controls li.vc-control-active.vc-control-pressed
+ height: 50px
+ background-image: url(/assets/images/cassette/metal_dark.jpg)
+ margin-top: 4px
+ box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 5px 1px rgba(255,255,255,0.5), inset 0 -10px 15px rgba(0,0,0,0.2), 0 7px 5px rgba(255,255,255,0.5)
+
+//Background for the volume knob
+//See knobKnob.css for the knob style
+.vc-volume-wrap
+ display: none
+ width: 118px
+ height: 118px
+ position: absolute
+ bottom: 0px
+ left: 50%
+ margin-left: -318px
+ @include background(linear-gradient(top, rgba(170,170,170,0.35) 0%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.53) 100%))
+ border: 1px solid rgba(0,0,0,0.1)
+ border-radius: 50%
+ padding: 8px
+ box-shadow: inset 0 1px 0px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.6), 0 -1px 0 rgba(255,255,255,0.4), inset 0 2px 19px rgba(0,0,0,0.05), 0 2px 1px rgba(0,0,0,0.06)
+ //@mixin box-sizing(content-box)
+
+
+.vc-volume-wrap:after
+ content: 'Volume'
+ margin-top: 15px
+ display: block
+
+/* Text style for controls */
+ul.vc-controls li,
+.vc-volume-wrap:after
+ font-family: 'Aldrich'
+ font-size: 10px
+ font-weight: 300
+ text-transform: uppercase
+ letter-spacing: 1px
+ color: #666
+ text-shadow: 0 1px 1px rgba(255,255,255,0.8)
+
+
+// About css
+
+.flex-boxes
+ $base-border-radius: 3px !default
+ $base-background-color: white !default
+ $dark-gray: #333 !default
+ $light-gray: #DDD !default
+ $base-font-color: $dark-gray !default
+ $flex-box-border-color: $light-gray
+ $flex-box-border: 1px solid $flex-box-border-color
+ $flex-box-background: lighten($light-gray, 10%)
+ $flex-box-gutter: 0.4em
+ $flex-box-width: 18em
+ $flex-box-color: transparentize($base-font-color, 0.3)
+ $flex-box-top-colors: tomato, #72BFBF, #92B1E3, #E3D743, #CCC, #F6C05C
+
+ @include clearfix
+ @include display(flex)
+ @include justify-content(center)
+ @include align-items(stretch)
+ @include flex-wrap(wrap)
+ clear: both
+ text-align: center
+
+ .flex-box
+ @include transition (all 0.2s ease-in-out)
+ @include flex(2 2 15em)
+ @include align-self(stretch)
+ background: $flex-box-background
+ border-radius: $base-border-radius
+ box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%)
+ display: block
+ margin: $flex-box-gutter
+ padding: 2em 2em 3em 2em
+ text-decoration: none
+
+ @for $i from 1 to 7
+ // assign colors from $flex-box-top-colors list
+ &:nth-child(#{$i})
+ $color-from-list: nth($flex-box-top-colors, $i)
+ border-top: 6px solid $color-from-list
+
+ &:focus, &:hover
+ background-color: transparentize($color-from-list, 0.9)
+
+ img
+ display: block
+ height: 3em
+ margin-bottom: 2em
+ margin: auto
+ opacity: 0.4
+
+ .flex-title
+ color: $flex-box-color
+ font-size: 1.2em
+ font-weight: 800
+ margin-bottom: 0.5em
+
+ p
+ color: transparentize($flex-box-color, 0.1)
+ line-height: 1.5em
+ margin: auto
+
+ .flex-box-big
+ @include flex(1 1 40em)
diff --git a/app/styles/app.sass b/app/styles/app.sass
index 2d0959ca458741729da09902388bfad4494a43c0..b8f2ff154ce1be8440abb7f33ba2a3328ac33d9f 100644
--- a/app/styles/app.sass
+++ b/app/styles/app.sass
@@ -1,4 +1,4 @@
-@import "bower_components/bourbon/app/assets/stylesheets/bourbon"
+@import "bower_components/bourbon/app/assets/stylesheets/bourbon"
@import "bower_components/neat/app/assets/stylesheets/neat"
@import "bower_components/normalize.css/normalize"
@import "bower_components/datedropper/datedropper"
@@ -24,7 +24,7 @@ html
a
text-decoration: none
-.everything //.ember-view
+.everything
opacity: 1
@include transition(opacity 1s ease)
@@ -37,17 +37,6 @@ html
background: url('/assets/images/Nightiies.png') no-repeat center center
background-size: 50vh
- //@include keyframes(appear)
- //from
- //top: 100vh
- @include transform(scale(0))
- //to
- //top: 0
- @include transform(scale(1))
-
- //@include animation(appear 4s ease 1s 1 normal)
-
- //.ember-view
.everything
opacity: 0
@@ -476,7 +465,7 @@ html
$base-accent-color: #477DCA !default
- $channel-colors: desaturate($base-accent-color, 30%), #3581A5, #F7C808, #5FBEBE, #98C79A, #D2315D, #A7A891, #389090, #F47E7D, #B5D045, #FB8335, #81C0C5, #E98813, #22B5BF, #8767A6, #88C134
+ $channel-colors: desaturate($base-accent-color, 30%), #F7C808, #3581A5, #5FBEBE, #98C79A, #D2315D, #A7A891, #389090, #F47E7D, #B5D045, #FB8335, #81C0C5, #E98813, #22B5BF, #8767A6, #88C134
//#E0C7A8,#BDCC97,#979EA0,
@include clearfix
@@ -786,3 +775,70 @@ ul.vc-controls li,
text-shadow: 0 1px 1px rgba(255,255,255,0.8)
+// About css
+
+.about
+ overflow-x: hidden
+
+.flex-boxes
+ height: 100vh
+
+ $base-border-radius: 3px !default
+ $base-background-color: white !default
+ $dark-gray: #333 !default
+ $light-gray: #DDD !default
+ $base-font-color: $dark-gray !default
+ $flex-box-border-color: $light-gray
+ $flex-box-border: 1px solid $flex-box-border-color
+ $flex-box-background: lighten($light-gray, 10%)
+ $flex-box-gutter: 0.4em
+ $flex-box-width: 18em
+ $flex-box-color: transparentize($base-font-color, 0.3)
+ $flex-box-top-colors: tomato, #72BFBF, #92B1E3, #E3D743, #CCC, #F6C05C
+
+ //@include clearfix
+ @include display(flex)
+ @include justify-content(center)
+ @include align-items(stretch)
+ @include align-content(stretch)
+ @include flex-wrap(wrap)
+ @include flex-direction(row)
+ text-align: center
+
+ .flex-box
+ @include transition (all 0.2s ease-in-out)
+ @include flex(1 0 30em)
+ background: $flex-box-background
+ border-radius: $base-border-radius
+ box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%)
+ margin: $flex-box-gutter
+ padding: 2em 2em 3em 2em
+
+ @for $i from 1 to 7
+ // assign colors from $flex-box-top-colors list
+ &:nth-child(#{$i})
+ $color-from-list: nth($flex-box-top-colors, $i)
+ border-top: 6px solid $color-from-list
+
+ &:focus, &:hover
+ background-color: transparentize($color-from-list, 0.9)
+
+ img, .icon
+ color: $flex-box-color
+ font-size: 4em
+ opacity: 0.4
+
+ .flex-title
+ color: $flex-box-color
+ font-size: 1.2em
+ font-weight: 800
+ margin-bottom: 0.5em
+
+ p
+ color: transparentize($flex-box-color, 0.1)
+ line-height: 1.3em
+ margin: auto
+ text-align: justify
+
+ .flex-box.flex-box-big
+ @include flex(2 0 40em)
diff --git a/app/templates/about.hbs b/app/templates/about.hbs
index 07cc859f0c8a81407a4ce4f37c96456ed1145657..a38cb5bb615b74c9f4498f443656d84d38dd268a 100644
--- a/app/templates/about.hbs
+++ b/app/templates/about.hbs
@@ -1,3 +1,35 @@
<div class="about">
- Soon : playbot informations.
+<div class="flex-boxes">
+<a href="javascript:void(0)" class="flex-box flex-box-big">
+ <i class="icon fa fa-question"/>
+ <h1 class="flex-title">Help</h1>
+ <p>The main part of the website is the Tracks section, where you can filter the sounds by tags (ex: dub, rock), poster, date or origin. From this section, clicking icons in the top-right changes the design. The cassette <i class="fa fa-simplybuilt"/> view plays random tracks matching the filters.</p>
+ <p>Parse the users list and look for someone with the same taste as yours.
+ </p>
+ <p>The channels are irc chat rooms where we rant on actual state of house music.
+ </p>
+</a>
+<a href="https://git.iiens.net/morignot2011/playbot/tree/master" class="flex-box">
+ <i class="icon fa fa-git"/>
+ <h1 class="flex-title">Playbot</h1>
+ <p>Playbot is an irc tool designed to share music or videos. Users can give away youtube or soundcloud links : Playbot saves and manages them.</p>
+ </a>
+ <a href="https://soundcloud.com/nightiies" class="flex-box">
+ <i class="icon fa fa-soundcloud"/>
+ <h1 class="flex-title">Nightiies</h1>
+ <p>Nightiies regroups electro lovers (from dub to gabber) and DJs from ENSIIE, a french high school. Almost all the tracks shared here have been discovered through endless quest for quality and hipsterism.</p>
+ </a>
+
+ <a href="https://github.com/Sybil/PlayBotAPI" class="flex-box">
+ <i class="icon fa fa-github"/>
+ <h1 class="flex-title">Playbot API</h1>
+ <p>This website is able to retrieve Playbot information through a Rails API communicating with the database.</p>
+ </a>
+ <a href="https://github.com/Sybil/PlayBotWeb" class="flex-box">
+ <i class="icon fa fa-github-alt"/>
+ <h1 class="flex-title">The website</h1>
+ <p>Beautiful isn't it ? Thanks Ember.js powa.</p>
+ </a>
+
+</div>
</div>
diff --git a/app/views/application.js b/app/views/application.js
index 74023e89acc6cf6cb809fcda1fb4a3f0db5d52a9..cefd6a7d588f23940c1c333240e73bd98c303120 100644
--- a/app/views/application.js
+++ b/app/views/application.js
@@ -1,7 +1,7 @@
import Ember from 'ember';
var ApplicationView = Ember.View.extend({
- willInsertElement: function() {
+ didInsertElement: function() {
$('body').removeClass('preload');
}
});