The Nuxt 3 rework of my website! https://wubzy.xyz
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
site-v2/assets/css/styles.css

74 lines
1.7 KiB

:root {
--theme-purple: #a172a6;
--theme-black: #171717;
--theme-blue: #b0f6ff;
--theme-purple-invis: #a172a69a;
--theme-black-invis: #1717179a;
--theme-blue-invis: #b0f6ff9a;
}
@keyframes shine {
to {
background-position: 200% center;
}
}
@keyframes dropdown-title {
from {transform: translateY(-100vh);}
to {transform: translateY(0);}
}
.shiny {
background: linear-gradient(to right, var(--theme-purple) 20%, var(--theme-black) 35%, var(--theme-black) 35%, var(--theme-purple) 50%, var(--theme-purple) 50%, var(--theme-blue) 75%, var(--theme-purple) 90%);
background-size: 200% auto;
animation: /*dropdown-title 1.5s ease-in-out, */shine 2.5s linear infinite;
@apply overflow-hidden bg-clip-text max-w-min text-transparent;
}
.title {
@apply md:text-7xl lg:text-8xl text-6xl h-fit max-h-fit mx-auto m-0 p-0 text-center;
}
#avatar-border {
--angle: 0deg;
animation: rotate 5s cubic-bezier(.13,.82,.87,.18) infinite;
background-image: linear-gradient(var(--angle), #a172a6 20%, #d0faeb 60%, #a172a6 100%);
}
#bg-gradient {
background: linear-gradient(to bottom, #00000000 0%, #00000000 5%, #171717cc 35%, #171717ea 55%, #171717ff 85%);
}
.arrow {
box-sizing: border-box;
height: 100%;
width: 100%;
border-style: solid;
border-color: white;
border-width: 0px 1px 1px 0px;
transform: rotate(45deg);
transition: border-width 150ms ease-in-out;
}
.arrow:hover {
border-bottom-width: 4px;
border-right-width: 4px;
}
.blurred {
filter: blur(10px);
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}