deblan/deblan.io-murph
deblan/deblan.io-murph
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Wiki Activity

update header

Browse source
This commit is contained in:
Simon Vieille 2022-09-11 13:46:32 +02:00
parent 420b3c9d73
commit 3ee5826fa2
Signed by: deblan
GPG key ID: 579388D585F70417
1 changed files with 896 additions and 861 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
assets/css/app.scss
View file

@ -273,11 +273,16 @@ pre[class*="language-"] {
}
.header {
background: linear-gradient(180deg, $color-header-background-from, $color-header-background-to);
background-size: 100% 200%;
color: $color-white;
animation: gradientBackground 10s ease infinite;
text-shadow: 0px 0px 6px #000;
background: linear-gradient(45deg, $color-header-background-from 0%, #0157b3 29%, #19cef2 66%, $color-header-background-to 100%);
background-size: 400% 400%;
animation: HeaderGradient 15s ease infinite;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-evenly;
overflow: hidden;
position: relative;
text-shadow: 0px 0px 6px #274298;
}
.header-wrapper {
@ -285,6 +290,36 @@ pre[class*="language-"] {
padding: 30px 40px;
margin: auto;
text-align: center;
background: rgba(255, 255, 255, 0.07);
animation: morph 15s linear infinite alternate, spin 20s linear infinite;
z-index: 1;
will-change: border-radius, transform;
transform-origin: 55% 55%;
pointer-events: none;
animation: HeaderMorph 10s linear infinite alternate, spin 26s linear infinite reverse;
transform-origin: 20% 20%;
}
@keyframes HeaderGradient {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
@keyframes HeaderMorph {
0% {
border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
}
100% {
border-radius: 40% 60%;
}
}
.fixed-menu {