mirror of
https://github.com/house-of-vanity/hexound.ru.git
synced 2025-07-06 22:34:08 +00:00
154 lines
3.4 KiB
Sass
Executable File
154 lines
3.4 KiB
Sass
Executable File
// 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)
|