Stephanie Chung
12 years ago
9 changed files with 428 additions and 521 deletions
@ -1,5 +1,4 @@ |
|||||||
node_modules/.bin/r.js |
*node_modules* |
||||||
node_modules/requirejs/README.md |
*.sass-cache* |
||||||
node_modules/requirejs/bin/r.js |
css |
||||||
node_modules/requirejs/package.json |
js/app* |
||||||
node_modules/requirejs/require.js |
|
||||||
@ -1,3 +1,3 @@ |
|||||||
commonjs: |
commonjs: |
||||||
@node_modules/requirejs/bin/r.js -convert js/controllers-src/ js/controllers/
|
@node_modules/requirejs/bin/r.js -convert js/src js/app/
|
||||||
@echo "JS Compiled."
|
@echo "JS Compiled."
|
||||||
@ -0,0 +1,11 @@ |
|||||||
|
# Require any additional compass plugins here. |
||||||
|
|
||||||
|
# Set this to the root of your project when deployed: |
||||||
|
http_path = "/" |
||||||
|
css_dir = "css" |
||||||
|
sass_dir = "sass" |
||||||
|
images_dir = "images" |
||||||
|
javascripts_dir = "js" |
||||||
|
|
||||||
|
# You can select your preferred output style here (can be overridden via the command line): |
||||||
|
output_style = :expanded or :nested or :compact or :compressed |
||||||
@ -1,499 +0,0 @@ |
|||||||
* { |
|
||||||
margin:0px; |
|
||||||
padding:0px; |
|
||||||
list-style:none; |
|
||||||
} |
|
||||||
|
|
||||||
:focus { |
|
||||||
outline:none !important; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
background:#ccc; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color:indigo; |
|
||||||
text-decoration:none; |
|
||||||
} |
|
||||||
|
|
||||||
a:hover { |
|
||||||
text-decoration:underline; |
|
||||||
} |
|
||||||
|
|
||||||
/* Piano Wrapper */ |
|
||||||
#p-wrapper { |
|
||||||
background:#000; |
|
||||||
background:-webkit-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); |
|
||||||
background:-moz-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); |
|
||||||
background:-ms-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); |
|
||||||
background:-o-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); |
|
||||||
background:linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); |
|
||||||
width:100%; |
|
||||||
position:relative; |
|
||||||
-webkit-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; |
|
||||||
-moz-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; |
|
||||||
box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; |
|
||||||
border:2px solid #333; |
|
||||||
-webkit-border-radius:0 0 5px 5px; |
|
||||||
-moz-border-radius:0 0 5px 5px; |
|
||||||
border-radius:0 0 5px 5px; |
|
||||||
-webkit-animation:taufik 2s; |
|
||||||
-moz-animation:taufik 2s; |
|
||||||
animation:taufik 2s; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
/* Tuts */ |
|
||||||
ul#piano { |
|
||||||
display:block; |
|
||||||
width:1560px; |
|
||||||
height:240px; |
|
||||||
border-top:2px solid #222; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li { |
|
||||||
list-style:none; |
|
||||||
float:left; |
|
||||||
display:inline; |
|
||||||
width:30px; |
|
||||||
position:relative; |
|
||||||
text-align:center; |
|
||||||
color:#fff; |
|
||||||
font-size:10px; |
|
||||||
font-family: arial, sans-serif; |
|
||||||
line-height: 17px; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li a,ul#piano li div.anchor { |
|
||||||
display:block; |
|
||||||
height:220px; |
|
||||||
background:#fff; |
|
||||||
background:-webkit-linear-gradient(-30deg,#f5f5f5,#fff); |
|
||||||
background:-moz-linear-gradient(-30deg,#f5f5f5,#fff); |
|
||||||
background:-ms-linear-gradient(-30deg,#f5f5f5,#fff); |
|
||||||
background:-o-linear-gradient(-30deg,#f5f5f5,#fff); |
|
||||||
background:linear-gradient(-30deg,#f5f5f5,#fff); |
|
||||||
border:1px solid #ccc; |
|
||||||
-webkit-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); |
|
||||||
-moz-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); |
|
||||||
box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); |
|
||||||
-webkit-border-radius:0 0 3px 3px; |
|
||||||
-moz-border-radius:0 0 3px 3px; |
|
||||||
border-radius:0 0 3px 3px; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li a:active,ul#piano li div.anchor:active { |
|
||||||
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4); |
|
||||||
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4); |
|
||||||
box-shadow:0 2px 2px rgba(0,0,0,0.4); |
|
||||||
position:relative; |
|
||||||
top:2px; |
|
||||||
height:216px; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li a:active:before,ul#piano li div.anchor:active:before { |
|
||||||
content:""; |
|
||||||
width:0px; |
|
||||||
height:0px; |
|
||||||
border-width:216px 5px 0px; |
|
||||||
border-style:solid; |
|
||||||
border-color:transparent transparent transparent rgba(0,0,0,0.1); |
|
||||||
position:absolute; |
|
||||||
left:0px; |
|
||||||
top:0px; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li a:active:after,ul#piano li div.anchor:active:after { |
|
||||||
content:""; |
|
||||||
width:0px; |
|
||||||
height:0px; |
|
||||||
border-width:216px 5px 0px; |
|
||||||
border-style:solid; |
|
||||||
border-color:transparent rgba(0,0,0,0.1) transparent transparent; |
|
||||||
position:absolute; |
|
||||||
right:0px; |
|
||||||
top:0px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Black Tuts */ |
|
||||||
ul#piano li span { |
|
||||||
position:absolute; |
|
||||||
top:0px; |
|
||||||
left:-12px; |
|
||||||
width:20px; |
|
||||||
height:120px; |
|
||||||
background:#333; |
|
||||||
background:-webkit-linear-gradient(-20deg,#333,#000,#333); |
|
||||||
background:-moz-linear-gradient(-20deg,#333,#000,#333); |
|
||||||
background:-ms-linear-gradient(-20deg,#333,#000,#333); |
|
||||||
background:-o-linear-gradient(-20deg,#333,#000,#333); |
|
||||||
background:linear-gradient(-20deg,#333,#000,#333); |
|
||||||
z-index:10; |
|
||||||
border-width:1px 2px 7px; |
|
||||||
border-style:solid; |
|
||||||
border-color:#666 #222 #111 #555; |
|
||||||
-webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); |
|
||||||
-moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); |
|
||||||
box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); |
|
||||||
-webkit-border-radius:0 0 2px 2px; |
|
||||||
-moz-border-radius:0 0 2px 2px; |
|
||||||
border-radius:0 0 2px 2px; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li span:active { |
|
||||||
border-bottom-width:2px; |
|
||||||
height:123px; |
|
||||||
-webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; |
|
||||||
-moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; |
|
||||||
box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; |
|
||||||
} |
|
||||||
|
|
||||||
/* Tooltips */ |
|
||||||
ul#piano li b { |
|
||||||
position:absolute; |
|
||||||
top:0px; |
|
||||||
margin-top:-10px; |
|
||||||
background:#111; |
|
||||||
color:#fff; |
|
||||||
font:bold 14px 'Trebuchet MS',Arial,Sans-Serif; |
|
||||||
border:2px solid #e6e6e6; |
|
||||||
-webkit-border-radius:7px; |
|
||||||
-moz-border-radius:7px; |
|
||||||
border-radius:7px; |
|
||||||
width:100px; |
|
||||||
height:30px; |
|
||||||
padding:10px; |
|
||||||
left:-40px; |
|
||||||
z-index:100; |
|
||||||
visibility:hidden; |
|
||||||
opacity:0; |
|
||||||
-webkit-box-shadow:0 2px 10px rgba(0,0,0,0.5); |
|
||||||
-moz-box-shadow:0 2px 10px rgba(0,0,0,0.5); |
|
||||||
box-shadow:0 2px 10px rgba(0,0,0,0.5); |
|
||||||
-webkit-transition:all 0.2s ease-out; |
|
||||||
-moz-transition:all 0.2s ease-out; |
|
||||||
-ms-transition:all 0.2s ease-out; |
|
||||||
-o-transition:all 0.2s ease-out; |
|
||||||
-transition:all 0.2s ease-out; |
|
||||||
} |
|
||||||
|
|
||||||
/* Tooltip Arrow */ |
|
||||||
ul#piano li b:before { |
|
||||||
content:""; |
|
||||||
display:block; |
|
||||||
position:absolute; |
|
||||||
top:100%; |
|
||||||
left:50px; |
|
||||||
border-width:8px; |
|
||||||
border-style:solid; |
|
||||||
border-color:#e6e6e6 transparent transparent transparent; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li b:after { |
|
||||||
content:""; |
|
||||||
display:block; |
|
||||||
position:absolute; |
|
||||||
top:100%; |
|
||||||
left:53px; |
|
||||||
border-width:5px; |
|
||||||
border-style:solid; |
|
||||||
border-color:#111 transparent transparent transparent; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li:hover b { |
|
||||||
visibility:visible; |
|
||||||
opacity:1; |
|
||||||
margin-top:10px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Drop Down Menus */ |
|
||||||
ul#piano li ul,#search,#contact { |
|
||||||
position:absolute; |
|
||||||
border:2px solid #e6e6e6; |
|
||||||
margin-top:-100px; |
|
||||||
top:100%; |
|
||||||
left:0px; |
|
||||||
z-index:1000; |
|
||||||
visibility:hidden; |
|
||||||
opacity:0; |
|
||||||
-webkit-box-shadow:0 2px 7px #000; |
|
||||||
-moz-box-shadow:0 2px 7px #000; |
|
||||||
box-shadow:0 2px 7px #000; |
|
||||||
-webkit-transition:all 0.2s ease-out 0.2s; |
|
||||||
-moz-transition:all 0.2s ease-out 0.2s; |
|
||||||
-ms-transition:all 0.2s ease-out 0.2s; |
|
||||||
-o-transition:all 0.2s ease-out 0.2s; |
|
||||||
transition:all 0.2s ease-out 0.2s; |
|
||||||
} |
|
||||||
|
|
||||||
#search,#contact { |
|
||||||
background:#333; |
|
||||||
padding:40px 10px 8px; |
|
||||||
-webkit-border-radius:0 0 18px 0; |
|
||||||
-moz-border-radius:0 0 18px 0; |
|
||||||
border-radius:0 0 18px 0; |
|
||||||
} |
|
||||||
|
|
||||||
#search input[type="text"],#contact input[type="text"] { |
|
||||||
border:1px solid #aaa; |
|
||||||
font:normal 12px Cambria,Georgia,Serif; |
|
||||||
padding:2px 5px 2px; |
|
||||||
width:120px; |
|
||||||
margin-bottom:2px; |
|
||||||
margin-right:2px; |
|
||||||
position:relative; |
|
||||||
color:#aaa; |
|
||||||
-webkit-box-shadow:inset 0 0 5px #ccc; |
|
||||||
-moz-box-shadow:inset 0 0 5px #ccc; |
|
||||||
box-shadow:inset 0 0 5px #ccc; |
|
||||||
-webkit-border-radius:0 0 10px 0; |
|
||||||
-moz-border-radius:0 0 10px 0; |
|
||||||
border-radius:0 0 10px 0; |
|
||||||
} |
|
||||||
|
|
||||||
#contact textarea { |
|
||||||
border:1px solid #aaa; |
|
||||||
font:normal 12px Cambria,Georgia,Serif; |
|
||||||
padding:2px 5px; |
|
||||||
width:270px; |
|
||||||
height:100px; |
|
||||||
margin-top:4px; |
|
||||||
position:relative; |
|
||||||
color:#aaa; |
|
||||||
-webkit-box-shadow:inset 0 0 5px #ccc; |
|
||||||
-moz-box-shadow:inset 0 0 5px #ccc; |
|
||||||
box-shadow:inset 0 0 5px #ccc; |
|
||||||
-webkit-border-radius:0 0 10px 0; |
|
||||||
-moz-border-radius:0 0 10px 0; |
|
||||||
border-radius:0 0 10px 0; |
|
||||||
} |
|
||||||
|
|
||||||
#contact input[type="submit"] { |
|
||||||
background:-webkit-linear-gradient(top,#666,#000,#333); |
|
||||||
background:-moz-linear-gradient(top,#666,#000,#333); |
|
||||||
background:-ms-linear-gradient(top,#666,#000,#333); |
|
||||||
background:-o-linear-gradient(top,#666,#000,#333); |
|
||||||
background:linear-gradient(top,#666,#000,#333); |
|
||||||
border:none; |
|
||||||
-webkit-border-radius:3px; |
|
||||||
-moz-border-radius:3px; |
|
||||||
border-radius:3px; |
|
||||||
-webkit-box-shadow:0 1px 1px #000; |
|
||||||
-moz-box-shadow:0 1px 1px #000; |
|
||||||
box-shadow:0 1px 1px #000; |
|
||||||
padding:3px 10px 4px; |
|
||||||
margin:4px 2px; |
|
||||||
font:normal 10px Verdana,Arial,Sans-Serif; |
|
||||||
color:#ccc; |
|
||||||
float:right; |
|
||||||
} |
|
||||||
|
|
||||||
#search input:focus,#contct input:focus,#contact textarea:focus { |
|
||||||
color:#000; |
|
||||||
} |
|
||||||
|
|
||||||
/* Loupe */ |
|
||||||
#search:after { |
|
||||||
content:""; |
|
||||||
width:5px; |
|
||||||
height:5px; |
|
||||||
border:1px solid #666; |
|
||||||
-webkit-border-radius:10px; |
|
||||||
-moz-border-radius:10px; |
|
||||||
border-radius:10px; |
|
||||||
position:absolute; |
|
||||||
left:100%; |
|
||||||
margin-left:-25px; |
|
||||||
top:46px; |
|
||||||
z-index:100; |
|
||||||
} |
|
||||||
|
|
||||||
#search:before { |
|
||||||
content:""; |
|
||||||
width:2px; |
|
||||||
height:0px; |
|
||||||
border:1px solid #666; |
|
||||||
position:absolute; |
|
||||||
z-index:3; |
|
||||||
left:100%; |
|
||||||
margin-left:-28px; |
|
||||||
top:53px; |
|
||||||
-webkit-transform:rotate(-42deg); |
|
||||||
-moz-transform:rotate(-42deg); |
|
||||||
-ms-transform:rotate(-42deg); |
|
||||||
-o-transform:rotate(-42deg); |
|
||||||
transform:rotate(-42deg); |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li li { |
|
||||||
width:150px; |
|
||||||
height:auto; |
|
||||||
display:block; |
|
||||||
float:none; |
|
||||||
background:transparent; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li li a,ul#piano li li a:active { |
|
||||||
height:auto; |
|
||||||
display:block; |
|
||||||
padding:10px 15px; |
|
||||||
background:#333; |
|
||||||
font:normal 12px Arial,Sans-Serif; |
|
||||||
color:#fff; |
|
||||||
text-decoration:none; |
|
||||||
-webkit-box-shadow:none; |
|
||||||
-moz-box-shadow:none; |
|
||||||
box-shadow:none; |
|
||||||
border-radius:0px; |
|
||||||
-webkit-border-radius:0px; |
|
||||||
-moz-border-radius:0px; |
|
||||||
border-width:1px 0; |
|
||||||
border-style:solid; |
|
||||||
border-color:#444 transparent #222 transparent; |
|
||||||
top:0px; |
|
||||||
margin-top:0px; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li li a:active:before,ul#piano li li a:active:after { |
|
||||||
border:none !important; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li:hover ul,ul#piano li:hover #search,ul#piano li:hover #contact { |
|
||||||
visibility:visible; |
|
||||||
opacity:1; |
|
||||||
margin-top:15px; |
|
||||||
} |
|
||||||
|
|
||||||
ul#piano li li a:hover { |
|
||||||
background:#111; |
|
||||||
border-top-color:#222; |
|
||||||
border-bottom-color:#000; |
|
||||||
} |
|
||||||
|
|
||||||
/* Paper */ |
|
||||||
.credit { |
|
||||||
margin:50px; |
|
||||||
width:390px; |
|
||||||
height:50px; |
|
||||||
padding:30px; |
|
||||||
position:relative; |
|
||||||
background:#fff; |
|
||||||
font:italic 1em Cambria,Georgia,Serif; |
|
||||||
color:#666; |
|
||||||
background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); |
|
||||||
background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
border:1px solid #ccc; |
|
||||||
-webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.1); |
|
||||||
-moz-box-shadow:1px 1px 4px rgba(0,0,0,0.1); |
|
||||||
box-shadow:1px 1px 4px rgba(0,0,0,0.1); |
|
||||||
-webkit-border-bottom-right-radius:60px 5px; |
|
||||||
-moz-border-radius-bottomright:60px 5px; |
|
||||||
|
|
||||||
border-bottom-right-radius:60px 5px; |
|
||||||
-webkit-animation:taufik 1s; |
|
||||||
-moz-animation:taufik 1s; |
|
||||||
animation:taufik 1s; |
|
||||||
} |
|
||||||
|
|
||||||
.credit:before { |
|
||||||
content:""; |
|
||||||
width:98%; |
|
||||||
z-index:-1; |
|
||||||
height:100%; |
|
||||||
padding:0 0 1px 0; |
|
||||||
position:absolute; |
|
||||||
bottom:0; |
|
||||||
right:0; |
|
||||||
background:#fff; |
|
||||||
background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); |
|
||||||
background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
border:1px solid #ccc; |
|
||||||
-webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1); |
|
||||||
-moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1); |
|
||||||
box-shadow:1px 1px 8px rgba(0,0,0,0.1); |
|
||||||
-webkit-border-bottom-right-radius:60px 5px; |
|
||||||
-moz-border-radius-bottomright:60px 5px; |
|
||||||
|
|
||||||
border-bottom-right-radius:60px 5px; |
|
||||||
-webkit-transform:skew(2deg,2deg) translate(-4px,8px); |
|
||||||
-moz-transform:skew(2deg,2deg) translate(-4px,8px); |
|
||||||
-ms-transform:skew(2deg,2deg) translate(-4px,8px); |
|
||||||
-o-transform:skew(2deg,2deg) translate(-4px,8px); |
|
||||||
transform:skew(2deg,2deg) translate(-4px,8px); |
|
||||||
} |
|
||||||
|
|
||||||
.credit:after { |
|
||||||
content:""; |
|
||||||
width:98%; |
|
||||||
z-index:-1; |
|
||||||
height:98%; |
|
||||||
padding:0 0 1px 0; |
|
||||||
position:absolute; |
|
||||||
bottom:0; |
|
||||||
right:0; |
|
||||||
background:#f3f3f3; |
|
||||||
background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); |
|
||||||
background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); |
|
||||||
border:1px solid #ccc; |
|
||||||
-webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.1); |
|
||||||
-moz-box-shadow:0px 0px 8px rgba(0,0,0,0.1); |
|
||||||
box-shadow:0px 0px 8px rgba(0,0,0,0.1); |
|
||||||
-webkit-transform:rotate(-4deg) translate(-14px,-2px); |
|
||||||
-moz-transform:rotate(-4deg) translate(-14px,-2px); |
|
||||||
-ms-transform:rotate(-4deg) translate(-14px,-2px); |
|
||||||
-o-transform:rotate(-4deg) translate(-14px,-2px); |
|
||||||
transform:rotate(-4deg) translate(-14px,-2px); |
|
||||||
} |
|
||||||
|
|
||||||
.credit_ribbon { |
|
||||||
position:absolute; |
|
||||||
top:0; |
|
||||||
left:0; |
|
||||||
width:115px; |
|
||||||
height:35px; |
|
||||||
background:rgba(0,0,0,0.1); |
|
||||||
background:-webkit-gradient(linear,555% 20%,0% 92%,from(rgba(0,0,0,0.1)),to(rgba(0,0,0,0.0)),color-stop(.1,rgba(0,0,0,0.2))); |
|
||||||
background:-moz-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); |
|
||||||
background:-ms-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); |
|
||||||
background:-o-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); |
|
||||||
background:linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); |
|
||||||
border-left:1px dashed rgba(0,0,0,0.1); |
|
||||||
border-right:1px dashed rgba(0,0,0,0.1); |
|
||||||
-webkit-box-shadow:0px 1px 7px rgba(0,0,0,0.2); |
|
||||||
-moz-box-shadow:0px 1px 7px rgba(0,0,0,0.2); |
|
||||||
box-shadow:0px 1px 7px rgba(0,0,0,0.2); |
|
||||||
-webkit-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); |
|
||||||
-moz-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); |
|
||||||
-o-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); |
|
||||||
transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); |
|
||||||
} |
|
||||||
|
|
||||||
.clear { |
|
||||||
clear:both; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* Animation */ |
|
||||||
@-webkit-keyframes taufik { |
|
||||||
from {opacity:0;} |
|
||||||
to {opacity:1;} |
|
||||||
} |
|
||||||
@-moz-keyframes taufik { |
|
||||||
from {opacity:0;} |
|
||||||
to {opacity:1;} |
|
||||||
} |
|
||||||
@keyframes taufik { |
|
||||||
from {opacity:0;} |
|
||||||
to {opacity:1;} |
|
||||||
} |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
define(function (require, exports, module) {'use strict'; |
|
||||||
|
|
||||||
var $ = require('jquery'), |
|
||||||
Fiber = require('fiber'); |
|
||||||
|
|
||||||
|
|
||||||
module.exports = Fiber.extend(function (base) { |
|
||||||
|
|
||||||
return { |
|
||||||
init: function (options) { |
|
||||||
|
|
||||||
}, |
|
||||||
}; |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -0,0 +1,9 @@ |
|||||||
|
/* Welcome to Compass. |
||||||
|
* In this file you should write your main styles. (or centralize your imports) |
||||||
|
* Import this file using the following HTML or equivalent: |
||||||
|
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ |
||||||
|
|
||||||
|
@import "compass/reset"; |
||||||
|
|
||||||
|
/* MODULES */ |
||||||
|
@import "modules/piano"; |
||||||
@ -0,0 +1,402 @@ |
|||||||
|
/* Piano Wrapper */ |
||||||
|
|
||||||
|
#p-wrapper { |
||||||
|
background: #000; |
||||||
|
background: -webkit-linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%); |
||||||
|
background: -moz-linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%); |
||||||
|
background: -ms-linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%); |
||||||
|
background: -o-linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%); |
||||||
|
background: linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%); |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
-webkit-box-shadow: 0 2px 0px #666666, 0 3px 0px #555555, 0 4px 0px #444444, 0 6px 6px black, inset 0 -1px 1px rgba(255, 255, 255, 0.5), inset 0 -4px 5px black; |
||||||
|
-moz-box-shadow: 0 2px 0px #666666, 0 3px 0px #555555, 0 4px 0px #444444, 0 6px 6px black, inset 0 -1px 1px rgba(255, 255, 255, 0.5), inset 0 -4px 5px black; |
||||||
|
box-shadow: 0 2px 0px #666666, 0 3px 0px #555555, 0 4px 0px #444444, 0 6px 6px black, inset 0 -1px 1px rgba(255, 255, 255, 0.5), inset 0 -4px 5px black; |
||||||
|
border: 2px solid #333; |
||||||
|
-webkit-border-radius: 0 0 5px 5px; |
||||||
|
-moz-border-radius: 0 0 5px 5px; |
||||||
|
border-radius: 0 0 5px 5px; |
||||||
|
-webkit-animation: taufik 2s; |
||||||
|
-moz-animation: taufik 2s; |
||||||
|
animation: taufik 2s; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
/* Tuts */ |
||||||
|
|
||||||
|
ul#piano { |
||||||
|
display: block; |
||||||
|
width: 1560px; |
||||||
|
height: 240px; |
||||||
|
border-top: 2px solid #222; |
||||||
|
margin: 0 auto; |
||||||
|
li { |
||||||
|
list-style: none; |
||||||
|
float: left; |
||||||
|
display: inline; |
||||||
|
width: 30px; |
||||||
|
position: relative; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 10px; |
||||||
|
font-family: arial, sans-serif; |
||||||
|
line-height: 17px; |
||||||
|
a, div.anchor { |
||||||
|
display: block; |
||||||
|
height: 220px; |
||||||
|
background: #fff; |
||||||
|
background: -webkit-linear-gradient(-30deg, whitesmoke, white); |
||||||
|
background: -moz-linear-gradient(-30deg, whitesmoke, white); |
||||||
|
background: -ms-linear-gradient(-30deg, whitesmoke, white); |
||||||
|
background: -o-linear-gradient(-30deg, whitesmoke, white); |
||||||
|
background: linear-gradient(-30deg, whitesmoke, white); |
||||||
|
border: 1px solid #ccc; |
||||||
|
-webkit-box-shadow: inset 0 1px 0px white, inset 0 -1px 0px white, inset 1px 0px 0px white, inset -1px 0px 0px white, 0 4px 3px rgba(0, 0, 0, 0.7); |
||||||
|
-moz-box-shadow: inset 0 1px 0px white, inset 0 -1px 0px white, inset 1px 0px 0px white, inset -1px 0px 0px white, 0 4px 3px rgba(0, 0, 0, 0.7); |
||||||
|
box-shadow: inset 0 1px 0px white, inset 0 -1px 0px white, inset 1px 0px 0px white, inset -1px 0px 0px white, 0 4px 3px rgba(0, 0, 0, 0.7); |
||||||
|
-webkit-border-radius: 0 0 3px 3px; |
||||||
|
-moz-border-radius: 0 0 3px 3px; |
||||||
|
border-radius: 0 0 3px 3px; |
||||||
|
} |
||||||
|
a:active, div.anchor:active { |
||||||
|
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); |
||||||
|
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); |
||||||
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); |
||||||
|
position: relative; |
||||||
|
top: 2px; |
||||||
|
height: 216px; |
||||||
|
} |
||||||
|
a:active:before, div.anchor:active:before { |
||||||
|
content: ""; |
||||||
|
width: 0px; |
||||||
|
height: 0px; |
||||||
|
border-width: 216px 5px 0px; |
||||||
|
border-style: solid; |
||||||
|
border-color: transparent transparent transparent rgba(0, 0, 0, 0.1); |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
a:active:after, div.anchor:active:after { |
||||||
|
content: ""; |
||||||
|
width: 0px; |
||||||
|
height: 0px; |
||||||
|
border-width: 216px 5px 0px; |
||||||
|
border-style: solid; |
||||||
|
border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent; |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
span { |
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
left: -12px; |
||||||
|
width: 20px; |
||||||
|
height: 120px; |
||||||
|
background: #333; |
||||||
|
background: -webkit-linear-gradient(-20deg, #333333, black, #333333); |
||||||
|
background: -moz-linear-gradient(-20deg, #333333, black, #333333); |
||||||
|
background: -ms-linear-gradient(-20deg, #333333, black, #333333); |
||||||
|
background: -o-linear-gradient(-20deg, #333333, black, #333333); |
||||||
|
background: linear-gradient(-20deg, #333333, black, #333333); |
||||||
|
z-index: 10; |
||||||
|
border-width: 1px 2px 7px; |
||||||
|
border-style: solid; |
||||||
|
border-color: #666 #222 #111 #555; |
||||||
|
-webkit-box-shadow: inset 0px -1px 2px rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.4); |
||||||
|
-moz-box-shadow: inset 0px -1px 2px rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.4); |
||||||
|
box-shadow: inset 0px -1px 2px rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.4); |
||||||
|
-webkit-border-radius: 0 0 2px 2px; |
||||||
|
-moz-border-radius: 0 0 2px 2px; |
||||||
|
border-radius: 0 0 2px 2px; |
||||||
|
&:active { |
||||||
|
border-bottom-width: 2px; |
||||||
|
height: 123px; |
||||||
|
-webkit-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.4), 0 1px 0px rgba(0, 0, 0, 0.8), 0 2px 2px rgba(0, 0, 0, 0.4), 0 -1px 0px black; |
||||||
|
-moz-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.4), 0 1px 0px rgba(0, 0, 0, 0.8), 0 2px 2px rgba(0, 0, 0, 0.4), 0 -1px 0px black; |
||||||
|
box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.4), 0 1px 0px rgba(0, 0, 0, 0.8), 0 2px 2px rgba(0, 0, 0, 0.4), 0 -1px 0px black; |
||||||
|
} |
||||||
|
} |
||||||
|
b { |
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
margin-top: -10px; |
||||||
|
background: #111; |
||||||
|
color: #fff; |
||||||
|
font: bold 14px 'Trebuchet MS',Arial,Sans-Serif; |
||||||
|
border: 2px solid #e6e6e6; |
||||||
|
-webkit-border-radius: 7px; |
||||||
|
-moz-border-radius: 7px; |
||||||
|
border-radius: 7px; |
||||||
|
width: 100px; |
||||||
|
height: 30px; |
||||||
|
padding: 10px; |
||||||
|
left: -40px; |
||||||
|
z-index: 100; |
||||||
|
visibility: hidden; |
||||||
|
opacity: 0; |
||||||
|
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); |
||||||
|
-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); |
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); |
||||||
|
-webkit-transition: all 0.2s ease-out; |
||||||
|
-moz-transition: all 0.2s ease-out; |
||||||
|
-ms-transition: all 0.2s ease-out; |
||||||
|
-o-transition: all 0.2s ease-out; |
||||||
|
-transition: all 0.2s ease-out; |
||||||
|
&:before { |
||||||
|
content: ""; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
top: 100%; |
||||||
|
left: 50px; |
||||||
|
border-width: 8px; |
||||||
|
border-style: solid; |
||||||
|
border-color: #e6e6e6 transparent transparent transparent; |
||||||
|
} |
||||||
|
&:after { |
||||||
|
content: ""; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
top: 100%; |
||||||
|
left: 53px; |
||||||
|
border-width: 5px; |
||||||
|
border-style: solid; |
||||||
|
border-color: #111 transparent transparent transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
&:hover b { |
||||||
|
visibility: visible; |
||||||
|
opacity: 1; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
ul { |
||||||
|
position: absolute; |
||||||
|
border: 2px solid #e6e6e6; |
||||||
|
margin-top: -100px; |
||||||
|
top: 100%; |
||||||
|
left: 0px; |
||||||
|
z-index: 1000; |
||||||
|
visibility: hidden; |
||||||
|
opacity: 0; |
||||||
|
-webkit-box-shadow: 0 2px 7px #000; |
||||||
|
-moz-box-shadow: 0 2px 7px #000; |
||||||
|
box-shadow: 0 2px 7px #000; |
||||||
|
-webkit-transition: all 0.2s ease-out 0.2s; |
||||||
|
-moz-transition: all 0.2s ease-out 0.2s; |
||||||
|
-ms-transition: all 0.2s ease-out 0.2s; |
||||||
|
-o-transition: all 0.2s ease-out 0.2s; |
||||||
|
transition: all 0.2s ease-out 0.2s; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Black Tuts */ |
||||||
|
|
||||||
|
/* Tooltips */ |
||||||
|
|
||||||
|
/* Tooltip Arrow */ |
||||||
|
|
||||||
|
/* Drop Down Menus */ |
||||||
|
|
||||||
|
#search, #contact { |
||||||
|
position: absolute; |
||||||
|
border: 2px solid #e6e6e6; |
||||||
|
margin-top: -100px; |
||||||
|
top: 100%; |
||||||
|
left: 0px; |
||||||
|
z-index: 1000; |
||||||
|
visibility: hidden; |
||||||
|
opacity: 0; |
||||||
|
-webkit-box-shadow: 0 2px 7px #000; |
||||||
|
-moz-box-shadow: 0 2px 7px #000; |
||||||
|
box-shadow: 0 2px 7px #000; |
||||||
|
-webkit-transition: all 0.2s ease-out 0.2s; |
||||||
|
-moz-transition: all 0.2s ease-out 0.2s; |
||||||
|
-ms-transition: all 0.2s ease-out 0.2s; |
||||||
|
-o-transition: all 0.2s ease-out 0.2s; |
||||||
|
transition: all 0.2s ease-out 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
#search, #contact { |
||||||
|
background: #333; |
||||||
|
padding: 40px 10px 8px; |
||||||
|
-webkit-border-radius: 0 0 18px 0; |
||||||
|
-moz-border-radius: 0 0 18px 0; |
||||||
|
border-radius: 0 0 18px 0; |
||||||
|
} |
||||||
|
|
||||||
|
#search input[type="text"] { |
||||||
|
border: 1px solid #aaa; |
||||||
|
font: normal 12px Cambria,Georgia,Serif; |
||||||
|
padding: 2px 5px 2px; |
||||||
|
width: 120px; |
||||||
|
margin-bottom: 2px; |
||||||
|
margin-right: 2px; |
||||||
|
position: relative; |
||||||
|
color: #aaa; |
||||||
|
-webkit-box-shadow: inset 0 0 5px #ccc; |
||||||
|
-moz-box-shadow: inset 0 0 5px #ccc; |
||||||
|
box-shadow: inset 0 0 5px #ccc; |
||||||
|
-webkit-border-radius: 0 0 10px 0; |
||||||
|
-moz-border-radius: 0 0 10px 0; |
||||||
|
border-radius: 0 0 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
#contact { |
||||||
|
input[type="text"] { |
||||||
|
border: 1px solid #aaa; |
||||||
|
font: normal 12px Cambria,Georgia,Serif; |
||||||
|
padding: 2px 5px 2px; |
||||||
|
width: 120px; |
||||||
|
margin-bottom: 2px; |
||||||
|
margin-right: 2px; |
||||||
|
position: relative; |
||||||
|
color: #aaa; |
||||||
|
-webkit-box-shadow: inset 0 0 5px #ccc; |
||||||
|
-moz-box-shadow: inset 0 0 5px #ccc; |
||||||
|
box-shadow: inset 0 0 5px #ccc; |
||||||
|
-webkit-border-radius: 0 0 10px 0; |
||||||
|
-moz-border-radius: 0 0 10px 0; |
||||||
|
border-radius: 0 0 10px 0; |
||||||
|
} |
||||||
|
textarea { |
||||||
|
border: 1px solid #aaa; |
||||||
|
font: normal 12px Cambria,Georgia,Serif; |
||||||
|
padding: 2px 5px; |
||||||
|
width: 270px; |
||||||
|
height: 100px; |
||||||
|
margin-top: 4px; |
||||||
|
position: relative; |
||||||
|
color: #aaa; |
||||||
|
-webkit-box-shadow: inset 0 0 5px #ccc; |
||||||
|
-moz-box-shadow: inset 0 0 5px #ccc; |
||||||
|
box-shadow: inset 0 0 5px #ccc; |
||||||
|
-webkit-border-radius: 0 0 10px 0; |
||||||
|
-moz-border-radius: 0 0 10px 0; |
||||||
|
border-radius: 0 0 10px 0; |
||||||
|
} |
||||||
|
input[type="submit"] { |
||||||
|
background: -webkit-linear-gradient(top, #666666, black, #333333); |
||||||
|
background: -moz-linear-gradient(top, #666666, black, #333333); |
||||||
|
background: -ms-linear-gradient(top, #666666, black, #333333); |
||||||
|
background: -o-linear-gradient(top, #666666, black, #333333); |
||||||
|
background: linear-gradient(top, #666666, black, #333333); |
||||||
|
border: none; |
||||||
|
-webkit-border-radius: 3px; |
||||||
|
-moz-border-radius: 3px; |
||||||
|
border-radius: 3px; |
||||||
|
-webkit-box-shadow: 0 1px 1px #000; |
||||||
|
-moz-box-shadow: 0 1px 1px #000; |
||||||
|
box-shadow: 0 1px 1px #000; |
||||||
|
padding: 3px 10px 4px; |
||||||
|
margin: 4px 2px; |
||||||
|
font: normal 10px Verdana,Arial,Sans-Serif; |
||||||
|
color: #ccc; |
||||||
|
float: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
#search input:focus, #contct input:focus, #contact textarea:focus { |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
|
||||||
|
/* Loupe */ |
||||||
|
|
||||||
|
#search { |
||||||
|
&:after { |
||||||
|
content: ""; |
||||||
|
width: 5px; |
||||||
|
height: 5px; |
||||||
|
border: 1px solid #666; |
||||||
|
-webkit-border-radius: 10px; |
||||||
|
-moz-border-radius: 10px; |
||||||
|
border-radius: 10px; |
||||||
|
position: absolute; |
||||||
|
left: 100%; |
||||||
|
margin-left: -25px; |
||||||
|
top: 46px; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
&:before { |
||||||
|
content: ""; |
||||||
|
width: 2px; |
||||||
|
height: 0px; |
||||||
|
border: 1px solid #666; |
||||||
|
position: absolute; |
||||||
|
z-index: 3; |
||||||
|
left: 100%; |
||||||
|
margin-left: -28px; |
||||||
|
top: 53px; |
||||||
|
-webkit-transform: rotate(-42deg); |
||||||
|
-moz-transform: rotate(-42deg); |
||||||
|
-ms-transform: rotate(-42deg); |
||||||
|
-o-transform: rotate(-42deg); |
||||||
|
transform: rotate(-42deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ul#piano li { |
||||||
|
li { |
||||||
|
width: 150px; |
||||||
|
height: auto; |
||||||
|
display: block; |
||||||
|
float: none; |
||||||
|
background: transparent; |
||||||
|
a { |
||||||
|
height: auto; |
||||||
|
display: block; |
||||||
|
padding: 10px 15px; |
||||||
|
background: #333; |
||||||
|
font: normal 12px Arial,Sans-Serif; |
||||||
|
color: #fff; |
||||||
|
text-decoration: none; |
||||||
|
-webkit-box-shadow: none; |
||||||
|
-moz-box-shadow: none; |
||||||
|
box-shadow: none; |
||||||
|
border-radius: 0px; |
||||||
|
-webkit-border-radius: 0px; |
||||||
|
-moz-border-radius: 0px; |
||||||
|
border-width: 1px 0; |
||||||
|
border-style: solid; |
||||||
|
border-color: #444 transparent #222 transparent; |
||||||
|
top: 0px; |
||||||
|
margin-top: 0px; |
||||||
|
&:active { |
||||||
|
height: auto; |
||||||
|
display: block; |
||||||
|
padding: 10px 15px; |
||||||
|
background: #333; |
||||||
|
font: normal 12px Arial,Sans-Serif; |
||||||
|
color: #fff; |
||||||
|
text-decoration: none; |
||||||
|
-webkit-box-shadow: none; |
||||||
|
-moz-box-shadow: none; |
||||||
|
box-shadow: none; |
||||||
|
border-radius: 0px; |
||||||
|
-webkit-border-radius: 0px; |
||||||
|
-moz-border-radius: 0px; |
||||||
|
border-width: 1px 0; |
||||||
|
border-style: solid; |
||||||
|
border-color: #444 transparent #222 transparent; |
||||||
|
top: 0px; |
||||||
|
margin-top: 0px; |
||||||
|
&:before, &:after { |
||||||
|
border: none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&:hover { |
||||||
|
ul, #search, #contact { |
||||||
|
visibility: visible; |
||||||
|
opacity: 1; |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
li a:hover { |
||||||
|
background: #111; |
||||||
|
border-top-color: #222; |
||||||
|
border-bottom-color: #000; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue