Initial

sass/screen.sass

@@ -0,0 +1,153 @@
+// chiptune2.js css
+
+@import compass
+
+// responsive design
+$mobile-width: 45rem
+
+@mixin respond-to($media)
+    @if $media == desktop
+        @media only screen and (min-width: $mobile-width)
+            @content
+    @else if $media == mobile
+        @media only screen and (max-width: $mobile-width)
+            @content
+
+// font
+@font-face
+    font-family: amiga
+    src: url('../fonts/amiga4ever_pro2.ttf')
+    font-weight: 400
+
+// our design
+html, body
+    width: 100%
+    height: 100%
+
+body
+    @include background(linear-gradient(#FF5C00, #FF5A00))
+
+.bg
+    width: 100%
+    width: calc(100% - 4rem)
+    height: 100%
+    height: calc(100% - 4rem)
+    position: absolute
+    top: 2rem
+    left: 2rem
+    z-index: -90
+    &.bg1
+        background-image: url('../img/headphones.svg')
+        background-repeat: no-repeat
+        background-size: contain
+        background-position: center
+
+.banner
+    width: 100%
+    font-family: amiga, sans-serif
+    + .banner
+        margin-top: 2.4rem
+
+#headline, #demosong, #metadata, #controls, #choosefile
+    text-align: center
+
+#info
+    max-width: calc(100% - 2.6rem)
+    padding: 1.25rem 1.3rem
+    background: rgba(20, 20, 20, 0.86)
+    color: #f9f9f9
+
+#headline
+    max-width: calc(100% - 2rem)
+    padding: 1.2rem 1rem
+    background: #fff
+    color: #232323
+    h1
+        margin: 0
+        @include respond-to(mobile)
+            font-size: 3rem
+        @include respond-to(desktop)
+            font-size: 4.5rem
+
+#demosong
+    margin-top: 3rem
+    a
+        color: #232323
+        font-size: 0.7rem
+
+#metadata
+    display: block
+
+#choosefile
+    input
+        padding: 0.5rem
+        background: #f7f7f7
+        border-radius: 0.35rem
+        border: 1px solid rgba(215, 99, 34, 0.78)
+
+#choosefile, #controls
+    margin-top: 1.9rem
+
+#demos
+    text-align: center
+    > div
+        display: inline-block
+        margin: 0 auto
+        text-align: left
+        border-radius: 0.35rem
+        border: 1px solid rgba(215, 99, 34, 0.78)
+        padding: 1rem
+        background: #fff
+        h2
+            margin: 0 0 0.5rem 0
+            font-size: 1.3rem
+        .song
+            display: block
+            text-decoration: none
+            color: #4C4CBD
+            + .song
+                margin-top: 0.65rem
+            .size
+                vertical-align: super
+                font-size: 0.6rem
+                margin-left: 0.3rem
+                &:before
+                    content: "("
+                &:after
+                    content: ")"
+    
+
+.control
+    width: 5rem
+    height: 5rem
+    border-radius: 2.5rem
+    background-color: rgb(80,80,80)
+    display: inline-block
+    box-shadow: 0px 9px 0px rgba(50,50,50,1), 0px 9px 25px rgba(0,0,0,.7)
+    transition: all .1s ease
+    cursor: pointer
+
+    &:active, &.pressed
+        box-shadow: 0px 3px 0px rgba(50,50,50,1), 0px 3px 6px rgba(0,0,0,.7)
+
+    &#play
+        background-image: url('../img/play.svg')
+        background-size: 75%
+        background-position: 16px 9px
+        background-repeat: no-repeat
+
+    &#pause
+        background-image: url('../img/pause.svg')
+        background-size: 75%
+        background-position: center
+        background-repeat: no-repeat
+
+    &#loop
+        display: none
+        + label
+            background-image: url('../img/loop.svg')
+            background-size: 75%
+            background-position: center
+            background-repeat: no-repeat
+        &:checked + label
+            box-shadow: 0px 3px 0px rgba(50,50,50,1), 0px 3px 6px rgba(0,0,0,.7)