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.
74 lines
1.7 KiB
74 lines
1.7 KiB
3 months ago
|
: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;
|
||
|
|
}
|