hq/sakrecoer-mother-web
hq/sakrecoer-mother-web
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

making the player happen

Browse source
This commit is contained in:
Set Hallstrom 2019-05-03 17:06:32 +02:00
parent c69680b3fc
commit 05a7b25ba4
2 changed files with 43 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_layouts/music.html
View file

@ -24,7 +24,7 @@ layout: default
</div> </div>
<div id="tracktime"></div> <div id="timer"><p id="tracktime"></p></div>
<!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) --> <!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
</div> </div>
<audio preload="true" <audio preload="true"
@ -65,8 +65,12 @@ layout: default
}); });
</script> </script>
<style type="text/css"> <style type="text/css">
#player { body {
background-image:url('{{ site.audio_url }}{{ page.image }}') ; background-image:url('{{ site.audio_url }}{{ page.image }}') ;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #0ff;
} }
</style> </style>

36
_sass/main.scss
View file

@ -44,8 +44,44 @@ a {
#player { #player {
display: flex; display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0;
padding: 0;
} }
#controls { #controls {
flex: 0 0 200px;
border: #000 solid 1px;
padding: 15px;
margin: 0 auto;
button {
background-color: #f00;
width: 100px;
height: 100px;
border-radius: 100px;
transition: background-color 0.5s ease-in-out;
}
button:hover {
background-color: rgb(253, 83, 83);
}
.container {
background-color: rgba(128, 128, 128, 0.7);
margin: auto;
width: 200px;
}
}
#info {
flex: 1 1 500px;
border: #000 solid 1px;
padding: 15px;
}
#timer {
flex: 1 1 200px;
border: #000 solid 1px;
padding: 15px;
} }
#tracktime {
margin-bottom: auto;
}