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

new layout

Browse source
This commit is contained in:
Set Sakrecoer 2019-07-13 21:11:13 +02:00
parent a50fd5f791
commit 8a67b48dd0
6 changed files with 558 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

92
_sass/main.scss
View file

@ -3,6 +3,7 @@ html {
}
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;
@ -29,7 +30,34 @@ body{
}
a {
font-weight: normal;
color: #0000009f;
transition: background-size 0.5s ease-in-out;
border-radius: 3px;
}
a:hover {
color: #0000009f;
background: linear-gradient(230deg, rgba(218, 158, 142, 0.3), rgba(236, 0, 228, 0.3), rgba(0, 212, 236, 0.3), rgba(0, 236, 173, 0.3), rgba(110, 0, 236, 0.3));
background-size: 1000% 1000%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s 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%}
}
}
#hero {
display: flex;
@ -39,9 +67,9 @@ a {
position: relative;
height: 100vh;
width: 100%;
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: 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%;
color: #fff;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
@ -68,16 +96,18 @@ a {
background-attachment: fixed;
flex: wrap;
background-color: rgba(68, 0, 124, 0.568);
border-radius: 40px;
margin: auto;
letter-spacing: -.05em;
line-height: .95em;
padding: 20px;
box-shadow: 5px 10px rgba(61, 0, 102, 0.5);
box-shadow: 5px 10px rgba(61, 0, 102, 0.2);
border: #000 solid 1px;
flex: 0 0 300px;;
}
.pivot {
border-radius: 40px;
}
h1 {
font-size: 3em;
@ -89,7 +119,47 @@ a {
font-size: 1em;
line-height: .8em;
}
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('/assets/img/sakrecoer-logo.svg') center center / cover no-repeat;
}
// .fullscreen-bg__video {
// display: none;
// }
}
}
/* MUSIC INDEX */
@ -294,4 +364,12 @@ min-height: 80vh;
position: fixed;
bottom: 10px;
right: 10px;
}
.aboutflex {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0;
padding: 0;
background-color: #ffffffc9;
}