final form
This commit is contained in:
parent
1905835832
commit
74d242807b
|
@ -18,7 +18,7 @@ body{
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% if page.collection == 'tracks' %}
|
{% if page.collection == 'tracks' or page.url == '/music/' %}
|
||||||
<div id="wallpaper">
|
<div id="wallpaper">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,13 +3,14 @@
|
||||||
/* ---- button ---- */
|
/* ---- button ---- */
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
margin-bottom: 10px;
|
margin: 0 10px 10px 0;
|
||||||
background: #EEE;
|
background: rgba(65, 106, 0, 0.473);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 3px;
|
border-radius: 300px;
|
||||||
color: #222;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-shadow: 0 1px white;
|
text-shadow: 0 1px white;
|
||||||
transition: all .2s ease;
|
transition: all .2s ease;
|
||||||
|
@ -23,7 +24,12 @@
|
||||||
|
|
||||||
.button:active,
|
.button:active,
|
||||||
.button.is-checked {
|
.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 {
|
.button.is-checked {
|
||||||
|
@ -37,16 +43,21 @@
|
||||||
|
|
||||||
/* ---- button-group ---- */
|
/* ---- button-group ---- */
|
||||||
|
|
||||||
|
.button-group{
|
||||||
|
display: flex;
|
||||||
.button-group .button:first-child {
|
flex-wrap: wrap;
|
||||||
border-radius: 0.5em 0 0 0.5em;
|
justify-content: center;
|
||||||
}
|
|
||||||
|
|
||||||
.button-group .button:last-child {
|
|
||||||
border-radius: 0 0.5em 0.5em 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// .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;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -151,11 +151,9 @@ a:hover {
|
||||||
.musiflex {
|
.musiflex {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
.trackcontainer {
|
.trackcontainer {
|
||||||
|
@ -292,6 +290,7 @@ min-height: 80vh;
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
}
|
}
|
||||||
#navigation {
|
#navigation {
|
||||||
|
z-index: 10000;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
|
|
|
@ -12,7 +12,6 @@ categories:
|
||||||
- reset
|
- reset
|
||||||
- vocals
|
- vocals
|
||||||
- english
|
- english
|
||||||
- test
|
|
||||||
duration: 207000
|
duration: 207000
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
22
music.html
22
music.html
|
@ -6,7 +6,7 @@ image: /assets/img/world.svg
|
||||||
---
|
---
|
||||||
{% include navmenu.html %}
|
{% include navmenu.html %}
|
||||||
|
|
||||||
<div id="hero" style="height: 75vh; background:transparent;" >
|
<div id="hero" style="height: 30vh; background:transparent;" >
|
||||||
|
|
||||||
|
|
||||||
<div class="pivot">
|
<div class="pivot">
|
||||||
|
@ -82,4 +82,22 @@ image: /assets/img/world.svg
|
||||||
$(this).addClass('is-checked');
|
$(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>
|
Loading…
Reference in a new issue