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> </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>

View file

@ -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;
// }

View file

@ -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;

View file

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

View file

@ -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">
@ -83,3 +83,21 @@ image: /assets/img/world.svg
}); });
}); });
</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>