hq/sakrecoer-mother-web
hq/sakrecoer-mother-web
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

nicer

Browse source
This commit is contained in:
Set Sakrecoer 2019-07-15 16:05:25 +02:00
parent 8c2e3178fa
commit 9d27496b27
5 changed files with 209 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
_sass/main.scss
View file

@ -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;
@ -98,6 +100,30 @@ 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;
} }

2
about/index.html
View file

@ -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
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 61 KiB

21
index.html
View file

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

2
music.html
View file

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