layout of music

This commit is contained in:
Set Sakrecoer 2019-07-09 19:04:46 +02:00
parent 05a7b25ba4
commit 4f4e2e00f2
5 changed files with 67 additions and 64 deletions

View file

@ -1,14 +1,2 @@
<ul id="nav"> <div><a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/assets/img/sakrecoerLOGO.png" width="125px" height="125px" title="SAKRECOER" /></a>
<li><a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/assets/img/sakrecoerLOGO.png" width="125px" height="125px" title="SAKRECOER" /></a> </div>
<ul>
<li><a href="{{ site.baseurl }}/discography/">Discog</a></li>
<li><a href="{{ site.baseurl }}/about/">About</a></li>
<li><a href="{{ site.baseurl }}/links/">Links</a></li>
<li><a href="{{ site.baseurl }}/blog/">Log</a></li>
<li><a href="{{ site.baseurl }}/music/">Music Index</a></li>
<li><a href="{{ site.baseurl }}/">Home</a></li>
</ul>
</li>
</ul>

View file

@ -2,29 +2,37 @@
layout: default layout: default
--- ---
<div id="player"> <div id="player">
<div id="controls"> <div id="info" style="background-image:url('{{ site.audio_url }}{{ page.image }}');">
<div class="container"> <div id="controls">
<button id="mu_pause">Play</button> <div class="container">
<h1>{% if page.previous != nil %} <button id="mu_pause">Play</button>
<a href="{{ site.baseurl }}{{ page.previous.url }}" title="Previous Track"><img
src="{{ site.baseurl }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a> <h1>{% if page.previous != nil %}
{% endif %} <a href="{{ site.baseurl }}{{ page.previous.url }}" title="Previous Track"><img
<a id="download" title="Download This Track!" href="{{ site.audio_url }}{{ page.mp3 }}"><img src="{{ site.baseurl }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a>
src="{{ site.baseurl }}/assets/img/icons/dl.png" title="Download Track" /></a> {% endif %}
{% if page.next != nil %} <a id="download" title="Download This Track!" href="{{ site.audio_url }}{{ page.mp3 }}"><img
<a href="{{ site.baseurl }}{{ page.next.url }}" title="Next Track"><img src="{{ site.baseurl }}/assets/img/icons/dl.png" title="Download Track" /></a>
src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %} {% if page.next != nil %}
</h1> <a href="{{ site.baseurl }}{{ page.next.url }}" title="Next Track"><img
<a href="{{ site.baseurl }}/music/">Back to Index</a> src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
</h1>
</div>
<div class="trackcontainer">
<h1 class="title">{{ page.title }}</h1>
<p id="tracktime"></p>
</div>
</div> </div>
</div> </div>
<div id="info">
<h1 class="title">{{ page.title }}</h1>
<div id="timer">
{{ page.content }} {{ page.content }}
</div> </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"

View file

@ -25,10 +25,11 @@ a {
} }
.trackcontainer { .trackcontainer {
flex: 1 1 300px; flex: 1 1 300px;
padding: 0; padding: 10px;
margin: 0; margin: 0;
h3, p { h1, h3, p {
padding: 5px; padding: 5px;
color: rgb(249, 234, 214);
} }
} }
.track { .track {
@ -51,10 +52,15 @@ a {
} }
#controls { #controls {
display: flex;
flex: 0 0 200px; flex: 0 0 200px;
border: #000 solid 1px; border: #000 solid 1px;
box-shadow: 5px 10px rgba(255, 0, 0, 0.493);
border-radius: 3px;
padding: 15px; padding: 15px;
margin: 0 auto; margin: 0 auto;
min-height: 200px;
background-color: rgba(61, 0, 102, 0.884);
button { button {
background-color: #f00; background-color: #f00;
width: 100px; width: 100px;
@ -66,21 +72,40 @@ a {
background-color: rgb(253, 83, 83); background-color: rgb(253, 83, 83);
} }
.container { .container {
background-color: rgba(128, 128, 128, 0.7); border: #000 solid 1px;
margin: auto; box-shadow: 5px 10px rgb(0, 0, 0);
width: 200px; border-radius: 3px;
margin: 0 auto 0 0;
width: 10em;
text-align: center;
border-radius: 3px;
padding: 10px;
} }
} }
#info { #info {
flex: 1 1 500px; flex: 1 1 500px;
border: #000 solid 1px; min-height: 50vh;
padding: 15px; padding: 15px;
background-color: rgba(61, 0, 102, 0.884);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} }
#timer { #timer {
flex: 1 1 200px; flex: 1 1 200px;
border: #000 solid 1px; max-height: 50vh;
overflow-y: scroll;
padding: 15px; padding: 15px;
background-size: cover;
background-position: center;
p {
background-color: rgba(60, 0, 100, 0.664);
padding: 10px;
border-radius: 3px;
color: #fff;
box-shadow: 5px 10px rgba(255, 0, 0, 0.493);
border: #000 solid 1px;
}
} }
#tracktime { #tracktime {
margin-bottom: auto; margin-bottom: auto;

View file

@ -15,12 +15,8 @@ My 2013 motto is to record live versions of sexy beats i do right away and post
Special dedication to your subwoofers! Fuck racism and copyright laws! We all make brown shit! Don't fear your creations: Take actions! Special dedication to your subwoofers! Fuck racism and copyright laws! We all make brown shit! Don't fear your creations: Take actions!
This one features Janie Joelle:\\ This one features [Janie Joelle](http://freesound.org/people/juskiddink/sounds/93668/)\\
http://freesound.org/people/juskiddink/sounds/93668/\\ some [monks](http://freesound.org/people/Robinhood76/sounds/66285/)\\
some horny monks:\\ A [catnip](http://freesound.org/people/Department64/sounds/64015/)\\
http://freesound.org/people/Robinhood76/sounds/66285/\\ And a [monkey](https://sakrecoer.com
A horny catnip: \\ )
http://freesound.org/people/Department64/sounds/64015/\\
And a horney monkey:\\
http://sakrecoer.com

View file

@ -40,17 +40,3 @@ Installed and running and compatible with society\\
But i am running a different library\\ But i am running a different library\\
Because my kernel is still libre and free. Because my kernel is still libre and free.
written on: 20160830\\
--
Set Hallstrom aka sakrecoer\\
-----BEGIN PGP SIGNATURE-----\\
Version: GnuPG v1
iQEcBAEBAgAGBQJXxY9xAAoJENnFZk3HTX5ntF8H/04geT4CV8Fbqej/uDCykBiA\\
GV3xvGr7FLPGPrPvCNy91ZHig/mQaNmkPwcdBKX0AAwChJQnHHmk5+rCtaytAk8Y\\
+BwuH6HBUX24e5H2ANiRxi4cF2v08S5Lwxwc9LQg6loN3EtbNXINzpCHB/A02jag\\
AWoHVm9rrGuNnDakeAiFcRaLnGxFQ/cNHXB7C+UVl7f0xV9X0wNEDAgfSYALohug\\
pKtZHifWJXHdZMR6e4sPpq+CCmXtfkrTnko1qtKQhFKHfWr/dLeEc6RF3dQ8M7PY\\
f9om3CZzaBhuYSNZt3NXmcT+aduzCYKhg1BwaKglHz0u1q9ZT2WCTMejDcwmhwE=\\
=Okd/\\
-----END PGP SIGNATURE-----