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

hug the colors to death

Browse source
This commit is contained in:
Set Sakrecoer 2020-01-28 10:53:07 +01:00
parent cf9f74516f
commit 7e25174c25
10 changed files with 51 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

51
_sass/main.scss
View file

@ -20,7 +20,9 @@ html {
body{
margin: 0;
padding: 0;
background: linear-gradient(230deg, #ff00ff7f, #426a007f);
background-color: $color1;
color: $color4;
background: linear-gradient(230deg, $color1, $color3);
background-position: center;
background-repeat: repeat;
-webkit-animation: AnimationName 60s ease infinite;
@ -28,15 +30,13 @@ body{
animation: AnimationName 60s ease infinite;
}
a {
color: #0000009f;
background-color: rgba(255, 255, 255, 0.705);
transition: color 0.5s ease-in-out;
color: $color4;
transition: all 0.5s ease-in-out;
border-radius: 3px;
}
a:hover {
background-color: #00000091;
transition: color 0.5s ease-in-out;
color: #ffffff9f;
color: $color5;
}
#hero {
display: flex;
@ -64,8 +64,8 @@ a:hover {
}
.pivot {
border-radius: 3px;
background: linear-gradient(230deg, #ff00ff7f, #426a007f);
background: linear-gradient(230deg, $color1, $color3);
box-shadow: 5px 10px 100px $color4;
}
h1 {
@ -79,10 +79,7 @@ a:hover {
font-size: 1em;
line-height: .8em;
}
a {
background: linear-gradient(230deg, #ff00ff7f, #426a007f);
}
.fullscreen-bg {
position: fixed;
top: 0;
@ -99,7 +96,7 @@ a:hover {
left: 0;
width: 100vw;
height: 100%;
background: linear-gradient(230deg, #ff00ffe6, #416a00e6);
background: linear-gradient(230deg, $color1, $color3);
margin:0;
padding: 0;
}
@ -124,7 +121,6 @@ a:hover {
}
.pivot {
background: transparent;
flex: 0 0 250px;
}
h1 {
@ -165,7 +161,7 @@ a:hover {
h1, h2, h3, p {
padding: 5px;
background: linear-gradient(230deg, rgba(255, 0, 255, 0.9), rgba(65, 106, 0, 0.9));
background: linear-gradient(230deg, $color1, $color3);
background-size: 1000% 1000%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
@ -173,7 +169,7 @@ a:hover {
padding: 10px;
border-radius: 3px;
box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2);
box-shadow: 5px 10px 100px $color4;
}
}
@ -185,7 +181,7 @@ a:hover {
padding: 0;
margin: 0;
border-radius: 3px;
box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2);
box-shadow: 5px 10px 100px $color4;
}
@ -218,9 +214,9 @@ a:hover {
.container {
box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2);
box-shadow: 5px 10px 100px $color4;
background: linear-gradient(230deg, #ff00ff7f, #426a007f);
background: linear-gradient(230deg, $color1, $color3);
background-size: 1000% 1000%;
@ -235,7 +231,7 @@ background: linear-gradient(230deg, #ff00ff7f, #426a007f);
}
}
button {
background: linear-gradient(230deg, rgba(255, 0, 255, 0.9), rgba(66, 106, 0, 0.9));
background: linear-gradient(230deg, $color1, $color3);
background-size: 1000% 1000%;
color: #fff;
-webkit-animation: AnimationName 30s ease infinite;
@ -247,7 +243,7 @@ button {
transition: background-color 0.5s ease-in-out;
}
button:hover {
background-color: rgba(117, 253, 83, 0.9);
background-color: $color2;
}
#info {
flex: 1 1 500px;
@ -260,7 +256,7 @@ min-height: 80vh;
}
#timer {
flex: 1 1 200px;
background: linear-gradient(230deg, #ff00ffe6, #416a00e6);
background: linear-gradient(230deg, $color1, $color3);
background-size: 1000% 1000%;
-webkit-animation: AnimationName 30s ease infinite;
@ -269,15 +265,15 @@ min-height: 80vh;
padding: 15px;
p {
background-color: rgba(151, 189, 146, 0.3);
background-color: $color1;
padding: 10px;
border-radius: 3px;
box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2);
box-shadow: 5px 10px 100px $color4;
}
img {
box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2);
box-shadow: 5px 10px 100px $color4;
border-radius: 3px;
}
@ -301,7 +297,12 @@ min-height: 80vh;
flex-direction: row;
margin: 0;
padding: 0;
background-color: #ffffff;
background: linear-gradient(230deg, $color1, $color2, $color3, $color4, $color5);
background-position: center;
background-repeat: repeat;
-webkit-animation: AnimationName 60s ease infinite;
-moz-animation: AnimationName 60s ease infinite;
animation: AnimationName 60s ease infinite;
background-repeat: repeat;
}

8
_sass/palette.scss Normal file
View file

@ -0,0 +1,8 @@
/* Coolors Exported Palette - coolors.co/deefb7-98dfaf-5fb49c-414288-682d63 */
/* RGB */
$color1: rgba(222, 239, 183, 1);
$color2: rgba(152, 223, 175, 1);
$color3: rgba(95, 180, 156, 1);
$color4: rgba(65, 66, 136, 1);
$color5: rgba(104, 45, 99, 1);