nicer
This commit is contained in:
parent
8c2e3178fa
commit
9d27496b27
|
@ -31,12 +31,14 @@ body{
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: #0000009f;
|
color: #0000009f;
|
||||||
transition: background-color 0.5s ease-in-out;
|
background-color: rgba(255, 255, 255, 0.705);
|
||||||
|
transition: color 0.5s ease-in-out;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
background-color: #00000091;
|
background-color: #00000091;
|
||||||
transition: background-color 0.5s ease-in-out;
|
transition: color 0.5s ease-in-out;
|
||||||
|
color: #ffffff9f;
|
||||||
}
|
}
|
||||||
#hero {
|
#hero {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -46,9 +48,9 @@ a:hover {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: linear-gradient(230deg, rgba(218, 159, 142, 0.8), rgba(236, 0, 228, 0.8), rgba(0, 212, 236, 0.8), rgba(0, 236, 173, 0.8), rgba(110, 0, 236, 0.8));
|
// background: linear-gradient(230deg, rgba(218, 159, 142, 0.8), rgba(236, 0, 228, 0.8), rgba(0, 212, 236, 0.8), rgba(0, 236, 173, 0.8), rgba(110, 0, 236, 0.8));
|
||||||
background-size: 1000% 1000%;
|
// background-size: 1000% 1000%;
|
||||||
|
background-image: url('/assets/img/header.svg');
|
||||||
-webkit-animation: AnimationName 30s ease infinite;
|
-webkit-animation: AnimationName 30s ease infinite;
|
||||||
-moz-animation: AnimationName 30s ease infinite;
|
-moz-animation: AnimationName 30s ease infinite;
|
||||||
animation: AnimationName 30s ease infinite;
|
animation: AnimationName 30s ease infinite;
|
||||||
|
@ -97,7 +99,31 @@ a:hover {
|
||||||
|
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: .8em;
|
line-height: .8em;
|
||||||
}
|
}
|
||||||
|
a {
|
||||||
|
background: linear-gradient(230deg, #ff00ff7f, #426a007f);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
-webkit-animation: AnimationName 60s ease infinite;
|
||||||
|
-moz-animation: AnimationName 60s ease infinite;
|
||||||
|
animation: AnimationName 60s ease infinite;
|
||||||
|
|
||||||
|
@-webkit-keyframes AnimationName {
|
||||||
|
0%{background-position:0% 91%}
|
||||||
|
50%{background-position:100% 10%}
|
||||||
|
100%{background-position:0% 91%}
|
||||||
|
}
|
||||||
|
@-moz-keyframes AnimationName {
|
||||||
|
0%{background-position:0% 91%}
|
||||||
|
50%{background-position:100% 10%}
|
||||||
|
100%{background-position:0% 91%}
|
||||||
|
}
|
||||||
|
@keyframes AnimationName {
|
||||||
|
0%{background-position:0% 91%}
|
||||||
|
50%{background-position:100% 10%}
|
||||||
|
100%{background-position:0% 91%}
|
||||||
|
}
|
||||||
|
}
|
||||||
.fullscreen-bg {
|
.fullscreen-bg {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -139,9 +165,7 @@ a:hover {
|
||||||
// display: none;
|
// display: none;
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUSIC INDEX */
|
/* MUSIC INDEX */
|
||||||
|
@ -157,10 +181,10 @@ a:hover {
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
.trackcontainer {
|
.trackcontainer {
|
||||||
flex: 1 1 300px;
|
flex: 1 1 360px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: linear-gradient(230deg, rgba(218, 159, 142, 0.1), rgba(236, 0, 228, 0.1), rgba(0, 212, 236, 0.1), rgba(0, 236, 173, 0.1), rgba(110, 0, 236, 0.1));
|
// background: linear-gradient(230deg, rgba(218, 159, 142, 0.1), rgba(236, 0, 228, 0.1), rgba(0, 212, 236, 0.1), rgba(0, 236, 173, 0.1), rgba(110, 0, 236, 0.1));
|
||||||
background-size: 1000% 1000%;
|
background-size: 1000% 1000%;
|
||||||
|
|
||||||
-webkit-animation: AnimationName 30s ease infinite;
|
-webkit-animation: AnimationName 30s ease infinite;
|
||||||
|
@ -238,6 +262,9 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
#controls {
|
#controls {
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 0 0 200px;
|
flex: 0 0 200px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -370,6 +397,9 @@ min-height: 80vh;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.aboutflex {
|
.aboutflex {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -385,9 +415,10 @@ min-height: 80vh;
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
flex: 1 0 300px;
|
flex: 1 0 300px;
|
||||||
margin-top: 0px;
|
|
||||||
padding-top: 0px;
|
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
|
max-width: 300px;
|
||||||
|
max-height: 300px;
|
||||||
|
|
||||||
}
|
}
|
|
@ -6,7 +6,7 @@ layout: default
|
||||||
|
|
||||||
|
|
||||||
<div class="pivot">
|
<div class="pivot">
|
||||||
<h2>About</h2>
|
<a href="{{ site.baseurl }}/"><h2>About</h2></a>
|
||||||
<h1>Sakrecoer</h1>
|
<h1>Sakrecoer</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="fullscreen-bg">
|
<div class="fullscreen-bg">
|
||||||
|
|
161
assets/img/header.svg
Normal file
161
assets/img/header.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 61 KiB |
21
index.html
21
index.html
|
@ -36,25 +36,8 @@ layout: default
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="aboutflex">
|
<div class="aboutflex" style="background: #fff;">
|
||||||
<div class="trackcontainer logo">
|
<div class="trackcontainer logo" style="margin-top:0;padding-top:0;">
|
||||||
|
|
||||||
<div class="track"
|
|
||||||
style="background-image:url('{{ site.baseurl }}/assets/img/sakrecoer-logo.svg');box-shadow:none;">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="trackcontainer logo">
|
|
||||||
|
|
||||||
<div class="track"
|
|
||||||
style="background-image:url('{{site.baseurl }}/assets/img/basspistol-Patches.svg');box-shadow:none;">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="trackcontainer logo">
|
|
||||||
{% include cookiemonster.html %}
|
{% include cookiemonster.html %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -10,7 +10,7 @@ layout: default
|
||||||
|
|
||||||
<div class="pivot">
|
<div class="pivot">
|
||||||
|
|
||||||
<h2>Sakrecoer</h2>
|
<a href="{{ site.baseurl }}/"><h2>Sakrecoer</h2></a>
|
||||||
<h1>Music</h1>
|
<h1>Music</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="fullscreen-bg">
|
<div class="fullscreen-bg">
|
||||||
|
|
Loading…
Reference in a new issue