final form

This commit is contained in:
Set Sakrecoer 2019-11-05 12:34:08 +01:00
parent 1905835832
commit 74d242807b
5 changed files with 47 additions and 20 deletions

View file

@ -18,7 +18,7 @@ body{
</style>
</head>
<body>
{% if page.collection == 'tracks' %}
{% if page.collection == 'tracks' or page.url == '/music/' %}
<div id="wallpaper">
{{ content }}
</div>

View file

@ -3,13 +3,14 @@
/* ---- button ---- */
.button {
display: inline-block;
padding: 10px 18px;
margin-bottom: 10px;
background: #EEE;
margin: 0 10px 10px 0;
background: rgba(65, 106, 0, 0.473);
border: none;
border-radius: 3px;
color: #222;
border-radius: 300px;
font-size: 16px;
text-shadow: 0 1px white;
transition: all .2s ease;
@ -23,7 +24,12 @@
.button:active,
.button.is-checked {
background-color: #28F;
background: linear-gradient(230deg, rgba(255, 0, 255, 0.902), rgba(66, 107, 0, 0.902));
background-size: 1000% 1000%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}
.button.is-checked {
@ -37,16 +43,21 @@
/* ---- button-group ---- */
.button-group .button:first-child {
border-radius: 0.5em 0 0 0.5em;
}
.button-group .button:last-child {
border-radius: 0 0.5em 0.5em 0;
.button-group{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
// .button-group .button:first-child {
// border-radius: 0.5em 0 0 0.5em;
// }
// .button-group .button:last-child {
// border-radius: 0 0.5em 0.5em 0;
// }

View file

@ -151,11 +151,9 @@ a:hover {
.musiflex {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
background-repeat: repeat;
}
.trackcontainer {
@ -292,6 +290,7 @@ min-height: 80vh;
margin-bottom: auto;
}
#navigation {
z-index: 10000;
position: fixed;
bottom: 10px;
right: 10px;

View file

@ -12,7 +12,6 @@ categories:
- reset
- vocals
- english
- test
duration: 207000
---

View file

@ -6,7 +6,7 @@ image: /assets/img/world.svg
---
{% include navmenu.html %}
<div id="hero" style="height: 75vh; background:transparent;" >
<div id="hero" style="height: 30vh; background:transparent;" >
<div class="pivot">
@ -82,4 +82,22 @@ image: /assets/img/world.svg
$(this).addClass('is-checked');
});
});
</script>
</script>
<style>
body {
background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9));
background-position: center;
background-repeat: repeat;
-webkit-animation: AnimationName 60s ease infinite;
-moz-animation: AnimationName 60s ease infinite;
animation: AnimationName 60s ease infinite; }
#wallpaper {
background-image: url('{{ page.image }}');
background-position: center;
background-repeat: repeat;
-webkit-animation: AnimationName 60s ease infinite;
-moz-animation: AnimationName 60s ease infinite;
animation: AnimationName 60s ease infinite;
}
</style>