final form
This commit is contained in:
parent
1905835832
commit
74d242807b
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -12,7 +12,6 @@ categories:
|
|||
- reset
|
||||
- vocals
|
||||
- english
|
||||
- test
|
||||
duration: 207000
|
||||
---
|
||||
|
||||
|
|
20
music.html
20
music.html
|
@ -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">
|
||||
|
@ -83,3 +83,21 @@ image: /assets/img/world.svg
|
|||
});
|
||||
});
|
||||
</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