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

tidy up

Browse source
This commit is contained in:
Set Sakrecoer 2019-07-09 19:49:14 +02:00
parent eead44436e
commit 12dcd72ab6
3 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_includes/navmenu.html
View file

@ -1,2 +1,6 @@
<div><a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/assets/img/sakrecoerLOGO.png" width="125px" height="125px" title="SAKRECOER" /></a> <div id="navigation">
<a href="{{ site.baseurl }}/music">
<img src="{{ site.baseurl }}/assets/img/sakrecoerLOGO.png" width="125px" height="125px" title="SAKRECOER" />
</a>
</div> </div>

17
_layouts/music.html
View file

@ -6,8 +6,10 @@ layout: default
<div id="controls"> <div id="controls">
<div class="container"> <div class="container">
<button id="mu_pause">Play</button> <button id="mu_pause">Play</button>
<p id="tracktime">&nbsp;</p>
<h1>{% if page.previous != nil %} </div>
<div class="trackcontainer">
{% if page.previous != nil %}
<a href="{{ site.baseurl }}{{ page.previous.url }}" title="Previous Track"><img <a href="{{ site.baseurl }}{{ page.previous.url }}" title="Previous Track"><img
src="{{ site.baseurl }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a> src="{{ site.baseurl }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a>
{% endif %} {% endif %}
@ -16,14 +18,11 @@ layout: default
{% if page.next != nil %} {% if page.next != nil %}
<a href="{{ site.baseurl }}{{ page.next.url }}" title="Next Track"><img <a href="{{ site.baseurl }}{{ page.next.url }}" title="Next Track"><img
src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %} src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
</h1>
</div>
<div class="trackcontainer">
<h1 class="title">{{ page.title }}</h1> <h1 class="title">{{ page.title }}</h1>
<p id="tracktime"></p>
</div> </div>
</div> </div>
</div> </div>
@ -32,6 +31,8 @@ layout: default
<div id="timer"> <div id="timer">
{{ page.content }} {{ page.content }}
<img src="{{ site.audio_url }}{{ page.image }}" style="width:100%;" />
</div> </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>

43
_sass/main.scss
View file

@ -49,6 +49,7 @@ a {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh;
} }
#controls { #controls {
@ -56,25 +57,15 @@ a {
flex: 0 0 200px; flex: 0 0 200px;
flex-wrap: wrap; flex-wrap: wrap;
border: #000 solid 1px; border: #000 solid 1px;
box-shadow: 5px 10px rgba(255, 0, 0, 0.493); box-shadow: 5px 10px rgba(61, 0, 102, 0.5);
border-radius: 3px; border-radius: 3px;
padding: 15px; padding: 15px;
margin: 0 auto; margin: 0 auto;
min-height: 200px;
background-color: rgba(61, 0, 102, 0.884); background-color: rgba(61, 0, 102, 0.884);
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 { .container {
border: #000 solid 1px;
box-shadow: 5px 10px rgb(0, 0, 0);
border-radius: 3px; border-radius: 3px;
margin: 0 auto 0 0; margin: 0 auto 0 0;
width: 10em; width: 10em;
@ -83,9 +74,19 @@ a {
padding: 10px; padding: 10px;
} }
} }
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);
}
#info { #info {
flex: 1 1 500px; flex: 1 1 500px;
min-height: 50vh; min-height: 80vh;
padding: 15px; padding: 15px;
background-color: rgba(61, 0, 102, 0.884); background-color: rgba(61, 0, 102, 0.884);
background-size: cover; background-size: cover;
@ -94,7 +95,7 @@ min-height: 50vh;
} }
#timer { #timer {
flex: 1 1 200px; flex: 1 1 200px;
background-color: rgba(60, 0, 100, 0.856);
padding: 15px; padding: 15px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -103,10 +104,18 @@ min-height: 50vh;
padding: 10px; padding: 10px;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
box-shadow: 5px 10px rgba(255, 0, 0, 0.493); box-shadow: 5px 10px rgba(61, 0, 102, 0.5);
border: #000 solid 1px; border: #000 solid 1px;
} }
img {
box-shadow: 5px 10px rgba(61, 0, 102, 0.5);
}
} }
#tracktime { #tracktime {
margin-bottom: auto; margin-bottom: auto;
} }
#navigation {
position: fixed;
bottom: 10px;
right: 10px;
}